Custom CSS for Elementor free version 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 and is not compatible with Elementor PRO.
Please read this note and this guide.
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
Apply dynamic style on posts filtered by authors
You have selected the component ‘Post grid‘ and you want to go further by applying a specific style for each author.
You must select the ‘author’ filter, choose all or part of the authors from the list
and apply the specific styles with the “EAC Custom CSS” style editor under the “Advanced” tab.
Please note that the internal names have been cleaned. Thus “Vincent Poursan” will be “vincent-poursan“.
Check the console from your browser.
/** Remember that 'selector' is reffering for the whole component, 'Post grid' in our example */
selector .chichille .al-post__wrapper-inner { background-color: black; }
selector .lefuneste .al-post__wrapper-inner { background-color: light gray; }
selector .alambic .al-post__wrapper-inner { background-color: red; }
selector .vincent-poursan .al-post__wrapper-inner { background-color: light blue; }
selector article .al-post__wrapper-inner div span,
selector article .al-post__wrapper-inner span p { color: white; }
selector .vincent-poursan .al-post__wrapper-inner div span,
selector .vincent-poursan .al-post__wrapper-inner span p { color: gray; }Add a column / section link for the free version of Elementor is a new feature that allows to create a clickable element to open a new page
Read more
The ACF relationship post grid for Elementor is a new component that helps you to create and display the relationship field like any other posts in a post grid.
Read more
The Table of Contents component for Elementor allows you to automatically create your table of contents with ease and convenience for all types of posts you need to share your knowledge and expertise.
Read moreLearn how you can structure your posts with Advanced Custom Fields and reuse their content with the Dynamic Tags for the free version of Elementor
Read more
You will find in this page a set of documents which will guide and help you to access and build a dynamic site based on the most recent technologies
Read moreHTML Sitemap guides your website visitors to where they want to go. It’s where they turn if they haven’t found what they are looking from those dropdown menus
Read moreCreate a Post Grid with advanced queries for Elementor free version This tutorial will help you to create fully customizable Post Grid step by step without any coding.
Read moreDisplay dynamiquely social icons on a blog post, with author’s or user’s social media links
Read moreSet in Elementor the default values for different image controls with properties like 'fields_options' and 'allowed_dimensions'
Read moreDefine the simple and advanced visibility conditions (Show / Hide) of a Control Elementor.
Read moreThis document will teach you how you can build a modal box and display different content in it with Elementor Modal Box Component without any code.
Read moreAdd and synchronize your content with Elementor templates anywhere in a post, page or sidebar.
Read moreAdd your dynamic external image url with a shortcode. Very useful to display your images from a CDN.
Read moreAdd your custom css to target and structure a widget, column, section or the whole page with Elementor free version
Read more