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.
Apply custom css on page header
As you can see, the page header has been changed.
The background image is removed, the height of the header is reduced and the colors of the title, tagline and menu are changed.
To do this, you need to apply the style with the ‘EAC Custom CSS’ widget to the page.
- First click on the bottom-left corner “gear” icon
- Select Advanced Tab and you will see ‘EAC Custom CSS’ widget where you can set your own CSS.
.site-header {
background-image: none !important;
background-color: #006666 !important;
min-height: 150px !important;
}
.main-title,
.site-description {
color: #b2d1d1 !important;
}
.main-navigation,
.main-navigation ul ul,
.main-navigation .main-nav ul li.menu-item-has-children > a {
background-color: #008080;
}
@media screen and (max-width:768px) {
.site-header {
height: 200px !important;
min-height: 200px !important;
}
}
@media screen and (max-width:360px) {
.site-header {
height: 220px !important;
min-height: 220px !important;
}
}
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
