Join the Webstudio community

Updated last week

Content edit mode - nth

Using the content edit mode, I would like to have every second item added get reversed. Done manually, I would add a "reverse" token or in CSS I would use and :nth selector (which I could still add manually). However, I wondered if there's a way to do this natively in Webstudio.

The screenshot is an example of what I'd want a client to be able to add/edit. They are all the same structure but the middle one has a "reverse" token on it and each of the parents has a different CSS property value. My assumption is that this would need to be handled with JS or embedded CSS at the moment; is that correct?
Attachment
CleanShot_2025-02-27_at_15.10.592x.png
J
J
2 comments
I see two options

  1. Add a class to the template then target the class in custom css with :nth selector
  2. Add two template. One called Image left and another called image right. It would be up to the client to respect that order though
Thanks. I built option 1 as it's super easy and the end user doesn't need to get confused with more options.
Add a reply
Sign up and join the conversation on Discord