Where can I find in Elements the CSS tab as in RW (see screenshot).
It wouldn’t hurt in Theme Studio to have a CSS tab where you can enter custom styles.
Where can I find in Elements the CSS tab as in RW (see screenshot).
It wouldn’t hurt in Theme Studio to have a CSS tab where you can enter custom styles.
You can add custom CSS the entire project via the Project setting → Template
area. Click the cog icon in the toolbar, found next to the publish button in the top right.
That said, questions about custom CSS like this always grab my curiosity—mainly around why custom styles are needed or wanted.
Since Elements is built around a unified design system using Tailwind, all components are styled consistently by default. When you introduce one-off custom CSS, you’re essentially stepping outside that system, which can lead to inconsistencies across components or projects—something we generally want to avoid.
That being said, there are definitely valid cases where stepping outside the system makes sense—like when integrating a third-party library that requires specific CSS.
I’d love to hear more about why you’re using custom CSS and see if we can help translate that into Tailwind and keep it within the Elements design system
For the time being, mine was only a theoretical request in case of need; I don’t really need it now.
Just to know, also any JS code should always be placed in Project setting → Template
?
Anyway, if I have a Container, with some components inside, and I would like to animate only a specific component when the mouse is hover the Container. How can I achieve that?
If it’s something that is Project specific, yes. Otherwise each component should manage any JavaScript it requires internally within itself.
You can do this by utilising the Transforms controls, which are included on all built-in core components. I’d suggest checking out the Transforms documentation — there is a demo video showing you how to achieve exactly what you’re describing!
Hope that help, and let us know if you have any questions along the way
On the Transform properties of the Container component I can’t select a specific element by ID or class.
You’ll want to check out the dropdown just below.
The To
dropdown in the Container allows you to apply transforms different layers of the Container — everything, only the background, or only the content.
Hope that helps
What I would like I think cannot be achieved with a single Container (if these are the settings).
In the screenshot you see the structure of my Container.
I would like that when hovering the mouse over the Container:
The way the Transform section is set up, you can only assign one animation at a time. I would be forced to add a new Container as a wrapper.
Going back to my request for the CSS area – here in this case it would be easier and faster for me to insert the CSS code.
Ah ok… now I get it, I have to act on the component to animate and then point to the parent (and not the other way around).
Exactly! Glad you figured it out