Search

14 Useful CSS Snippets for Elementor

The built-in styling options offered by Elementor are more than enough to create professional pages. In case there is a certain styling you want to apply, yet it is not available in Elementor, you can achieve it via custom CSS.

A simplest instance. Elementor doesn’t offer built-in styling options to change the look of the read more link into a button-like — which is adopted by many websites. To achieve it, you need to add CSS snippet that turns the read more link into a button-like. To add custom CSS itself, you can go to the Advanced tab on the settings panel. You can add the CSS code to the available field on the Custom CSS block.

You can add custom CSS to all Elementor element types. From section, column, to widget.

In Elementor, each widget and its supporting elements (e.g., post title, post meta, and featured image on the Posts widget) has a class selector (see the list of Elementor widget selectors). To target a specific widget or widget’s elements, you can start by typing selector followed by the class name (e.g. .elementor-post__read-more). Next, you can add the custom styling between the curly brackets. Example:

selector .elementor-post__read-more{
    padding: 0.4em 0.8em;
    background: #33ff41;
    transition: all .5s;
    border-radius: 5px;
}

The above code snippet will turn the read more link into a button-like. First, it targets the read more element (selector .elementor-post__read-more). Then, it adds the custom styling to the read more element via the content between the curly brackets (you can find the read more element on the Posts widget and Archive widget). In CSS, the content between the curly brackets is called declaration.

Recently, we worked on some projects that required us to add CSS snippets to some widgets, and we will share them with you in this post. We will regularly update this post every time we got new CSS snippets.

Free CSS Snippets for Elementor

1. Turning Read More Link into a Button-Like

The code:

selector .elementor-post__read-more {
    padding: 0.3em 0.8em;
    color: #ffffff!important;
    border: solid 1px #01B37E;
    line-height: 2em;
    background: #01B37E;
    transition: all .5s;
    border-radius: 15px;
    font-weight: 500;
}

/* on hover */

selector .elementor-post__read-more:hover{
    padding: 0.3em 0.8em;
    color: #01B37E!important;
    border: solid 1px #01B37E;
    line-height: 2em;
    background: #ffffff;
    transition: all .5s;
    border-radius: 15px;
    font-weight: 500;
}

You can use the code above on the Posts widget and Archive Posts widget which have a read more element.

2. Adding Advanced Style to Numbered Pagination

The code:

/*normal state*/

selector .elementor-pagination{
    margin-top: 50px;
}

selector .page-numbers{
    padding: 10px 15px;
    color:#FFFFFF!important;
    background: #0161cd;
    transition: all .5s;
    border-radius: 20px;
}

/* hover state */

selector .page-numbers:hover{
    padding: 10px 15px;
    color:#384958!important;
    background: #edf2f7;
    transition: all .5s;
    border-radius: 20px;
}

/* active state */

selector .page-numbers.current{
    padding: 10px 15px;
    color:#384958!important;
    background: #f0f3f6;
    transition: all .5s;
    border-radius: 20px;
}

You can use the above code on the Posts widget and Archive Posts widget which have pagination element. You can read our previous article to learn how to add pagination in Elementor.

3. Adding Hover Effect to Individual Post Items

The code:

selector .elementor-post:hover{
     transition: all .50s ease-in-out;
    transform: scale(1.01);
    cursor: pointer;
    z-index: 1;
}

You can also use the above code on the Posts widget and Archive Posts widget. Read our previous article to learn more how to add hover effect to individual blog post items in Elementor.

4. Adding Hover Effect to Post Thumbnail/Featured Image

The code:

selector .elementor-post__thumbnail:hover{
     transition: all .50s ease-in-out;
    transform: scale(1.05);
    cursor: pointer;
    z-index: 1;
}

You can use the above code on the Posts widget and Archive Posts widget. Make sure to show the image on the main post settings.

5. Adding Hover Effect to Post Title

The code:

selector .elementor-post__title{
    display: inline;
}

selector .elementor-post__title:hover{
    text-decoration: none;
    box-shadow: inset 0 -.5em 0 #F8C273;
    color: inherit;
    display: inline;
}

You can also use the above code on the Posts widget and Archive Posts which have post title element.

6. Adding Hover Effects to Links

The code:

selector .elementor-widget-theme-post-content a:hover{
	  text-decoration: none;
    box-shadow: inset 0 -.5em 0 #FD63FD;
    color: #B017B0;
}

You can use the above on the Post Content widget when creating a custom single post template using Elementor Theme Builder. Read this post to learn more.

7. Setting the Avatar Border Radius on Post Info Widget

The code:

selector .elementor-avatar {
    border: 2px solid #FFFFFF;
    border-radius: 10px;
}

You can use this code on the Post Info widget. To use it, make sure to enable the Avatar on the meta data setting. Read here to learn more.

8. Creating Gradient Progress Bar

The code:

selector .elementor-progress-bar
{
background: radial-gradient(circle, rgba(7,149,238,1) 16%, rgba(37,252,255,1) 70%);
}

You can use the above code on create a gradient progress bar using the Progress Bar widget. Read here to learn more. For more gradient options, you can refer to the following posts:

9. Creating Gradient Text

The code:

selector .elementor-text-editor {
    background-image: linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;
}

You can use the above code on the Text Editor widget. To create gradient text on other widgets (e.g., Heading), you can simply replace the selector. Read this post to learn more.

10. Scrolling Image on Hover

The code:

selector{
    -webkit-transition: ease-in-out 4s !important;
    transition: ease-in-out 4s !important;
}
selector:hover{
    background-position: center bottom !important;
}

You can use the above code to automatically scroll image on hover. Useful to reveal a long screenshot such as a screenshot of a landing page, homepage, blog page, and so on. Read this post to learn more.

11. Changing Header on Scroll Down

The code:

.header-2 {
 transform: translatey(-80px);
 -moz-transition: all .3s ease!important;
 -webkit-transition: all .3s ease!important;
 transition: all .3s ease!important;
}


.elementor-sticky--effects.header-2  {
 height: auto!important;
 transform: translatey(0px);
}

.elementor-sticky--effects.header-1 {
 display: none!important;
}

Want to create a header that automatically changes on scroll down? If yes, you can use the above code. You can read this post to learn more.

12. Shrinking Header on Scroll Down

The code:

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px!important;
    padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

You can use the above to create a header behavior whereby it automatically shrinks on scroll down and reverts to the original size on scroll up. You can read this post to learn more.

13. Adding Image Background to Heading Text

The code:

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

You can use the above code to add image background to the Heading widget. Simply replace the image URL to use your own image. Read this post to learn more.

The Bottom Line

Elementor already has plenty of built-in options to style up every element. Be it section, column, or widget. In case they are not enough for you, you can apply your own custom styling using CSS snippets — provided that you have CSS knowledge. The ability to add custom CSS itself is only available on Elementor Pro so make sure you have Elementor Pro installed and activated on your WordPress website before adding custom CSS (read: Elementor Free vs Pro).

You can use the CSS snippets we provided above if you have the same cases for your projects.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

3 thoughts on “14 Useful CSS Snippets for Elementor”

  1. Thanks for great article.
    I want to change the color in the code of “Adding Hover Effect to Post Title”, but got a problem.
    your color code is: color: inherit;
    when I changed it to this: color:#F4CA00;
    nothing changed and the color was the same as when it was inherit.
    what should I do?

    Reply

Leave a Comment

Haven’t used Elementor Pro yet?