Add your custom CSS with Elementor

by

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

External images can be linked with the Dynamic Tags ‘External image’ or with the shortcode ‘Shortcode 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

Append your css to modify the image added with a shortcode
NASA, ESA to Release First Images from Solar Orbiter Mission
NASA, ESA to Release First Images from Solar Orbiter Mission
NASA, ESA to Release First Images from Solar Orbiter Mission
NASA, ESA to Release First Images from Solar Orbiter Mission

apply dynamic style on posts author

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; }
All
Chichille
Alambic
Vincent Poursan

Help center

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 more
Avatar photo
Vincent Poursan Vincent Poursan March 16, 2021 0

How do i make a html sitemap with elementor

HTML 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 more
Avatar photo
Vincent Poursan Vincent Poursan March 12, 2021 0

Elementor Image Set Default Values

Set in Elementor the default values ​​for different image controls with properties like 'fields_options' and 'allowed_dimensions'

 Read more
Avatar photo
Chichille chichille December 8, 2020 0

apply dynamic style on categories

Proceed in the same way as in the previous example.
All
EAC
Elementor
Instagram

Help center

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 more
EAC Vincent Poursan March 16, 2021 0

How do i make a html sitemap with elementor

HTML 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 more
Elementor Vincent Poursan March 12, 2021 0

Elementor Image Set Default Values

Set in Elementor the default values ​​for different image controls with properties like 'fields_options' and 'allowed_dimensions'

 Read more
Elementor chichille December 8, 2020 0

Add External Image For Elementor

Add your external image with the Elementor widget Image and conserve all the properties and options that the widget provides. Useful to display images from a CDN

 Read more
Elementor lefuneste November 19, 2020 0

Elementor Dynamic Tags

Implement the Dynamic Tags in Elementor free version. It does not yet offer all the dynamic tags of the pro version of Elementor but give you possibilities to make your site more efficient.

 Read more
Elementor Virgule de Guillemets July 20, 2020 0