Elementor

Elementor – Style the tabs, accordion, and toggle widgets

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

The tabs, accordion, and toggle widgets in Elementor can be styled from within Elementor, but those styles apply to all the respective items in each widget.

There may be times when you would like to apply certain styles to the individual items, including perhaps, a background image.  That is what this tutorial shows you how to do using relatively simple CSS.

For each of the three widgets, all I did in Elementor was add an additional item and additional text in the second and third items.

It should be noted that if and when you add additional items, you will have to add an additional block of CSS for that widget type and increment the [data-tab] or [data-section] value accordingly.

The rest is done with CSS. I use the Simple CSS plugin and recommend that you do as well.

Color names are used instead of the hexadecimal values as it is easier for those who are not accustomed to them to be able to see what’s going on. The W3Schools HTML Color Names page is a good resource for those wanting to find out more on the subject.

Tabs Widget

 

/* Elementor Tabs Widget*/
#my-tabs1 [data-tab="1"] {
    background-color: lightblue;
}

#my-tabs1 [data-tab="2"] {
    background-color: lightgreen;
}

#my-tabs1 [data-tab="3"] {
    background: url("FULL_URL_OF_IMAGE") no-repeat fixed center;
    background-size: cover;
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: 18px;
    
}

@media (min-width: 768px) {
  #my-tabs1 [data-tab="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
  }
}

Accordion Widget

 

/* Elementor Accordion Widget*/
#my-accordion [data-section="1"]{
  color: white;
    background-color: cadetblue;
}

#my-accordion [data-section="2"]{
  color: white;
    background-color: seagreen;
    
}

#my-accordion [data-section="3"]{
  color: white;
    background: url("FULL_URL_OF_IMAGE") no-repeat fixed center;
    background-size: cover;
}

@media (min-width: 768px) {
  #my-accordion [data-section="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
  }
}

Toggle Widget

 

/* Elementor Toggle Widget*/
#my-toggle [data-tab="1"] {
    color: white;
    background-color: steelblue;
}

#my-toggle [data-tab="2"] {
    color: white;
    background-color: goldenrod;
}

#my-toggle [data-tab="3"] {
    background: url("FULL_URL_OF_IMAGE") no-repeat fixed center;
    background-size: cover;
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: 18px;
    
}

@media (min-width: 768px) {
  #my-toggle [data-tab="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
  }
}

43 thoughts on “Elementor – Style the tabs, accordion, and toggle widgets”

  1. Avatar

    Thanks for this video!
    I am looking for a way to only give the title tabs a background colour so it does not effect the whole background like in your video. Can this be done too, and if os, how please?

  2. Avatar

    It’s ok, found the solution by adding this css:

    .elementor-12 .elementor-element.elementor-element-b5c2fi3 .elementor-tab-title.active {
    background-color: #e3e0e0;
    }

    .elementor-12 .elementor-element.elementor-element-b5c2fi3 .elementor-tab-title {
    background-color: #f7f7f7;
    }

  3. Avatar

    I would like to know how to do the exact opposite from Annie, I have images in my toggle menu but I would only like the image to show in the title section, and have a white background with text in the content section, can’t seem to figure it out…

    1. Avatar

      Hi Chris,
      To target each toggle item separately (i.e. a different image for each) then use this and repeat with the other toggle item data-tab values (this is for the second one):

      #my-toggle .elementor-tab-title[data-tab=”2″] {
      background-image: url(“URL_TO_IMAGE”);
      }

      To have all toggle items have the same image background, just leave off the [data-tab=”X”] like this:

      #my-toggle .elementor-tab-title {
      background-image: url(“URL_TO_IMAGE”);
      }

      Cheers!
      Lyle

  4. Avatar

    Thank you soo much this worked perfect for me, I just needed to add background-size: cover; to get what I needed.

    Much appreciated!

    1. Avatar

      Łukasz,
      Give the Elementor Tabs widget a CSS ID (on the Advanced tab). In this example, I used center-tabs
      Then this CSS should do the job:

      #center-tabs .elementor-tabs-wrapper {
      display: flex;
      justify-content: center;
      }

      Cheers!
      Lyle

  5. Avatar

    Hi. Thank you very much for your videos, I found very usefull.
    I am using a WordPress.com WP, and followed all the steps for some examples, tabs, accordions, and Im not successfull. I inserted the code in Simple CSS, and in Elementor widget, Advanced tab I placed the reference to it, but It seems WP ignores the code and nothing happens in terms of appearence. All stays the same.
    Can you imagine why?

    Yours
    Samuel

  6. Avatar

    I would like to give each tab title a different image, but only when active and hover. Do you know how?
    .elementor-tab-title.elementor-active
    and
    .elementor-tab-desktop-title:hover
    but different image for each title…

    1. Avatar
      Sniffle Valve

      Hi Nick,
      You could use this, changing the dimensions and image URLs as needed. To have each tab have different images, you would need to adjust the CSS as in the tutorial using the [data-tab=”1″].

      .elementor-tab-title.elementor-active {
      width: 200px;
      height: 200px;
      background-image: url(“URL to image”);
      background-repeat: no-repeat;
      }

      .elementor-tab-title:hover {
      width: 200px;
      height: 200px;
      background-image: url(“URL to image”);
      background-repeat: no-repeat;
      }

      Cheers!
      Lyle

  7. Avatar

    For the accordion is there a way to make it to where the options always open from the top? Currently, if you click an option while one is already open, it opens from the bottom.

  8. Avatar

    Awesome thanks a lot!
    How to do just a line on bottom of tabs, like this: https://prnt.sc/ngfu9o

    I got the active tab css, but not the others. take a look:
    #unoteste .elementor-tab-desktop-title {
    box-shadow: inset 0px -2px 0px 0px #dddddd;
    }
    #unoteste .elementor-tab-desktop-title.elementor-active {
    box-shadow: inset 0px -2px 0px 0px #ed5a29;
    }
    Any help with the other tabs css? 🙂

    1. Avatar

      Hi Felipe,
      Your code is working for me 🙂 Active tab is “red” and the others are grey.
      Cheers!
      Lyle

        1. Avatar

          If you can sent me the site URL via the contact form (if you don’t want it public), I can take a look to see what may be the cause.

  9. Avatar

    Great video! I did run across 2 issues with the toggle though.

    1. How do I make the toggle title change color on hover? In Elementor I can only set a different color when it’s activated.

    2. How do I center the toggle titles and icons? It is only possible to align them either left or right…

    Thanks a lot in advance

    1. Avatar
      Sniffle Valve

      Hi Ben,
      Thank you 🙂
      1.

      .elementor-tab-title a:hover {
      color: red;
      }

      2.

      .elementor-tab-title a {
      display: flex;
      justify-content: center;
      }

      Cheers!
      Lyle

  10. Avatar

    Hi, how can I fix the indentation when there is a lot of text creating a second line? Right now it is aligning to the icon but not to the first letter of the first line of the list item.
    Thanks in advance.

  11. Avatar

    Hi,
    I have five toggle tabs and am trying to indent the the second tab (to give the appearance that it is a “sub” title to the first toggle tab, but cannot figure out how to do it. Example:
    Toggle tab 1 (first toggle tab)
    Toggle tab 2
    Toggle tab 3
    Toggle tab 4
    Toggle tab 5

    1. Avatar

      Hi Leah,
      Not too sure. Let me do some testing and if I come up with anything, I’ll post back.
      Cheers!
      Lyle

  12. Avatar

    Hello! How do I center the toggle icons? It is only possible to align it either left or right.
    The following code changes only the position of title, no icon(

    .elementor-tab-title a {
    display: flex;
    justify-content: center;
    }

    1. Avatar

      This will center both the icon and text 🙂

      .elementor-toggle .elementor-tab-title {
      display: flex;
      justify-content: center;
      }

      Cheers!
      Lyle

  13. Avatar

    On my page it seems Elementor assigns the [data-tab=”x”] to BOTH the tabs title area and content area separately. Thus, instead of one image being a continuous whole when the tab is clicked (as in your video), the image starts over in the content area. I just wanted a simple gradient to run down the tab, with each tab’s color being unique. Having a bear of a time achieving this.

    1. Avatar

      Hi Christopher,
      Not too sure if that is possible given the structure of the tabs widget. When I get some time I’ll try a few things and post back here if I come up with something.
      Cheers!
      Lyle

      1. Avatar

        How did you get your image on tab #3 to be a single continuous image across both the tab title and tab content areas rather than starting over in the content part?

        1. Avatar

          Check the CSS for that in the tutorial page. Perhaps create your gradient background as an image, upload it, and add it as in the tut.

  14. Avatar

    Thanks for the quick tutorial. Sadly, I couldn’t get it to work and the default tab styling on my page seems to be very successful with frustrating me. I really hate that pink color:

    https://prnt.sc/qekvpu

    Plus: I like the way you pronounce ‘Seneca’ – that`s my favorite airplane 🙂

    1. Avatar

      Hi Yadley,
      Not too sure what’s going on that it won’t work for you. Do you have, like I do in the tut, the Elementor > Settings set to use the theme’s colors and fonts? Also, if you could send a contact form with the site URL, I could take a closer look (I don’t care for URLs in the comments, for obvious reasons 😉 )
      Cheers!
      Lyle

    1. Avatar

      You can use this CSS to make the tab content and title rounded. I have added the border color as well if you need that:

      .elementor-tabs .elementor-tab-content, .elementor-tabs .elementor-tab-title {
      border-style: solid;
      border-radius: 12px;
      border-color: red;
      }

      Cheers!
      Lyle

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top