Custom CSS for Elementor lets you add your own personalized CSS to target each element as a Container, Section or Widget. You’ll be able to apply your styles to the current page and to the site as a whole.
Pay attention: Custom CSS is disabled if Elementor Pro is installed and active.
Add custom css to an element
To do this, select an element (container, section, widget) and go to the Advanced tab and open the EAC custom CSS section.
In the text box that opens, enter the CSS code.
Like standard CSS, you can target a tag, a class or an ID.
Use the selector keyword to target an element
The selector keyword physically represents the element being edited, without needing to know its class or ID.
You can therefore apply CSS to this element or its children by adding selector, selector TAG, selector CLASS or selector ID.
/* For example add a red border to an element */
selector { border: 2px solid red; }
/* To target all images inside a container */
selector img { border: 2px solid red; }
/* To target all images and change aspect ratio */
selector img { aspect-ratio: 2 / 1; }
/* Apply a background color to an element based on its class */
selector .my_class { background-color: gray; }Add custom css to the page
To add a CSS style to the current page, open the page settings panel with the gear icon at the top bar, then click on the Advanced tab.
In the text box that opens, enter the CSS code.
Don’t use the selector keyword to style elements at page level.
Pay attention: adding custom CSS rules here will affect the entire page.
Add global custom css to the site
To do this click on the Site Settings entry at the top bar and then on the Custom CSS entry.
In the text box that opens, enter the CSS code.
Don’t use the selector keyword to style elements at site level.
Pay attention: adding custom CSS rules here will affect the entire site.
Your global custom CSS is well exported/imported with the Export/Import kit feature.
Display elements to which CSS code has been added
After a long time it is not easy to find the elements for which custom CSS has been added or if you need to work on other projects that are not yours.
We have therefore implemented a visual indicator that should guide you to these elements.
For that you just have to move the mouse cursor over the sections, columns or widgets and you will see, as in the following image, that the edit handles are colored red. They tell you that CSS has been applied to this element
Navigator custom CSS indicator
The navigator indicates that the element is affected by the Custom CSS feature.
The black line of the indicator extends to show an icon when hovered over.
