Add your custom CSS with Elementor

Custom CSS for the free version of 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.

Custom CSS element

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; }
Apply a background color to an element based on its class
selector .my_class { background-color: gray; }

Custom CSS using keyword selector

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 bottom left. 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 go to the site settings panel, click on the Site Settings entry 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.

Custom CSS open site settings panel
Custom CSS open entry
Custom CSS field

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

Custom CSS retrieve 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.

Navigator indicators custom CSS
Navigator indicator Custom CSS

Leave a Comment