
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; } }
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?
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;
}
Annie –
Good to hear you found a solution and thank you for posting your results 🙂
Cheers!
Lyle
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…
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
Thank you soo much this worked perfect for me, I just needed to add background-size: cover; to get what I needed.
Much appreciated!
Chris,
Good to hear you got it sorted 🙂
Cheers!
Lyle
Hey, do you have any idea how to center the tabs?
Ł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
It worked 😀 Thank you very much!
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
Hi Samuel,
Sorry I can’t be of help as I have no experience with WP.com WP.
Cheers!
Lyle
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…
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
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.
Hi John,
Unfortunately I am not aware of a way to do that.
Cheers!
Lyle
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? 🙂
Hi Felipe,
Your code is working for me 🙂 Active tab is “red” and the others are grey.
Cheers!
Lyle
Didn’t work here, the grey is not showing… But thanks for the answer! Cheers!
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.
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
Hi Ben,
Thank you 🙂
1.
.elementor-tab-title a:hover {
color: red;
}
2.
.elementor-tab-title a {
display: flex;
justify-content: center;
}
Cheers!
Lyle
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.
Hi John,
I do believe that I have answered this in the FB group 🙂
Cheers!
Lyle
Hi, how can I make the accordions expand on hover instead of click?
Hi Ezra,
No idea. I believe it would require js/jq.
Cheers!
Lyle
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
Hi Leah,
Not too sure. Let me do some testing and if I come up with anything, I’ll post back.
Cheers!
Lyle
Hey there,
I am trying to set toggle to open all tabs on page load. Is that possible?
Thanks!
Hi Ashley,
It may be possible, however I do not know how to do so.
Cheers!
Lyle
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;
}
This will center both the icon and text 🙂
.elementor-toggle .elementor-tab-title {
display: flex;
justify-content: center;
}
Cheers!
Lyle
Thank you a lot!
And one more question) Can the toggle have different titles when it is open and close?
Probably, but I have no idea how to do so.
Cheers!
Lyle
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.
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
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?
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.
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 🙂
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
Is there a css code to make the tabs corners rounded?
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
Thank you for the tutorial!
Do you have a quick hint on how to move the tabs to the right? (from the default top and left)
Many thanks!
You’re welcome 🙂
Try adding:
text-align: right;
… to the CSS provided.
Cheers!
Lyle