Custom CSS for the free version of Elementor allows you to add your own custom CSS to target every Section, Column, Widget or the whole page.
This component implements the custom CSS feature for Elementor free version.
Please read this note and this guide.
Pay attention: Custom CSS are disabled if Elementor Pro is installed and active.
Add custom css on Column Section and Container
To do this, go to the Advanced tab and open the ‘EAC custom CSS’ section.
You can now add your own css to modify certain elements or widgets.
Use the ‘selector’ to target a particular element and add class name to add CSS inside this element.
For example add a red border to an element:
selector { border: 2px solid red; }
To target an image inside an element:
selector img { border: 2px solid red; }
Apply a background color to a paragraph:
selector .bg-container { background-color: gray; }
Apply custom css on external image
Select Advanced tab and ‘EAC custom CSS’ and fill it with your own CSS
Before/After
How to add an external image with a Shortcode
Display the 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
