The CSS required to do this 👇 /* Style the tabs - each tab has its own ID - find it by inspecting it */ #elementor-tab-title-1421 { border-top-left-radius: 100px; border-bottom-left-radius: 100px; padding-left: 30px; padding-right: 30px; border: solid #101010 3px; } /* Style how the tabs look when you hover over them */ #elementor-tab-title-1421:hover { background-color: #101010; color: #FFFFFF; } /* Repeat this process for all tabs */ #elementor-tab-title-1422 { padding-left: 30px; padding-right: 30px; border-top: solid #101010 3px; border-bottom: solid #101010 3px; } #elementor-tab-title-1422:hover { background-color: #101010; color: #FFFFFF; } #elementor-tab-title-1423 { border-top-right-radius: 100px; border-bottom-right-radius:100px; padding-left: 30px; padding-right: 30px; border: solid #101010 3px; } #elementor-tab-title-1423:hover { background-color: #101010; color: #FFFFFF; } /* This makes sure the tabs are all in the same row on mobile */ @media screen and (min-width: 320px) { #h-tabs .elementor-tabs-wrapper { display: flex; flex-direction: row; } } @media screen and (min-width: 320px) { #h-tabs .elementor-tab-mobile-title { display: none; } } /* Control the padding on mobile */ @media screen and (min-width: 320px) { .elementor-widget-tabs .elementor-tab-desktop-title { padding-top: 15px; padding-bottom: 15px; } /* Add some padding to the whole tabs bar */ #h-tabs .elementor-tabs-wrapper { padding-left:10px; padding-right: 10px; } /* This makes the tabs stay centered regardless of screen resolution */ #h-tabs .elementor-tabs-wrapper { display: flex; justify-content: center; } /* Style how the tabs look when active */ .elementor-260 .elementor-element.elementor-element-879dc77 .elementor-tab-title.elementor-active, .elementor-260 .elementor-element.elementor-element-879dc77 .elementor-tab-title.elementor-active { background-color: #101010; color: #ffffff; }
Thank you SO much for this video - it helped me solve a weeks-long issue in seconds, by changing just one character. Typical, haha! I even contacted Elementor Pro Support, and they were completely useless. Every other video I've found is a soft sell for an Elementor add-on plugin, so I'm really happy I finally found this one. Subscribed!
Yeah, dealing with tabs can get frustrating, the potential is there but so are the limits. I'm glad the video was helpful, thank you for your support! 🙏
Hopefully, in the future, Elementor will come up with tabs with way more options regarding functionality and customization and in doing so, open up the space for more quality content related to them. They have the potential to be a very powerful tool but currently, their limitations are pretty apparent. Thank you very much for your support, I appreciate it!
Hey, that tutorial was very helpful, thank you!✌🏼 Is there a way to style the background color of each tab individually when active? Your solution only works on every tab, if I get it right.
Hi! Very easily. For each tab, you just add in ''background-color: #yourcolor;". That's going to change the background color for the inactive buttons. The colors on hover are explained in the video and for your active buttons, if adding in your inactive colors removes the active color you set, just add in !important to it, like this: ''background-color: #yourcolor !important;".
Great video, you just saved me lol. I wanted the tab titles to look like buttons. I named the Class CSS as tabs1 and added this code to create a gap between the items. .tabs1 .elementor-tabs-wrapper .elementor-tab-title { margin-right: 20px; border-style: solid; }
Hello Richard. I'm certain it is possible with CSS, either by using icons or styling the tabs so they look like actual folders. However, that's a little more advanced, so personally I would probably use a plugin and just add icons to the tabs. Here's an article on this I found though, might help you out: catalin.red/css3-jquery-folder-tabs/
Which part of the CSS are you trying to apply to the nested tabs? Since you can do pretty much everything shown in the video with just the nested tabs directly, I'm curious which part you're having issues with. With nested tabs, try adding a CSS ID to the tab - you can do so under content, where you can assign each tab its own unique ID. Use that to target it and then just add in your CSS, it's actually even easier. If it still doesn't work, try adding !important to override all of the previous styling. Let me know how it goes!
@@Reialesa i have one more issue. the part where on mobile view that the tabs do not stack up on each other, "#h-tabs .elementor-tab-mobile-title { display: none;" I cannot seem to find the correct name (.elementor-tab-mobile-title) when using nested tabs. please help 🙏
That's going to be a little more complicated and not something I'd recommend using the tabs for. I recommend looking up a tutorial on switching out the content when you click an icon or an image and using that instead.
Thank you for your kind words! I've never had to use that before so I'm not sure what the exact process is like, but I found a tutorial that seems to describe exactly what you're looking for: element.how/elementor-open-specific-tab-toggle-accordion/
Hi, I am Steven, thank you for the video, I wanna ask a question: Can I use this CSS to my website if I use Essential Addons for Elementor Plugin? I just want each tab in the same color with the content background (each content have different color like the video)
Hello Steven! Unfortunately, I have no experience with that plugin, but I just took a look at the Essential Addons website and it seems that you can control colors pretty easily within there, without extra CSS. If you mean changing each individual tab's background color when it's active/selected, that's a little bit more tricky and the CSS in this video won't do that - it's going to change all of them at once. What I think you can do, that you likely can not do with just the plugin, is add different colors for each tab for when you hover over them.
@@Reialesa Yeah, unfortunately, it didn't work...Yes, you got what I mean, I need them to change the color when active. Anyway thank you for your reply and your video, I think I might have to give up that plugin and do it all with your video.
I'm having an issue where in the staging area the css applies correctly but after publishing to the site the colors retain the colors that the widgets applied. Any ideas on a solution?
If I understand correctly, one is a staging site and the other is a live website? If so, try double checking that you're using the correct tab titles. It could be that the CSS is simply a bit different on both websites and that the tab titles aren't the same. If they are the same, try going into your dashboard and go under ''Elementor'' - ''Tools''. Press ''Regenerate Files & Data''. Also, clear your website cache (not just your browser cache). Hopefully, one of these should do the trick. Let me know how it goes! 🙌
wow, know i can solved my problem,, big thanks,, life saver and i've one question, can i make 2 colom title? example tab 1, tab 2 on top and tab 3, tab 4 under tab 1 and tab 2? *Update Point 2 Solved ☺☺☺
Happy to help! If you have an HTML button, you're going to have to style it with CSS - if it's created via a template, you have to edit the template. I don't really have a completely clear idea about how your setup looks, but this is an example of how you can center align an HTML button (put it in a div): Click Me!
When you have a lot of tabs, your best option when it comes to responsiveness is to stack them on top of one another. Or use really short tab titles, like 1, 2, 3... so each individual title takes up as little space as possible.
Happy to help! If you mean the active state, unfortunately, making each tab have a different active state color isn't possible with this CSS. If we're talking about just the hover effect, for mobile, you'd have to combine it with the media queries. So, it would look something like this: @media screen and (max-width: 767px) { #elementor-tab-title-2051:hover { background-color: red; } } @media screen and (max-width: 767px) { #elementor-tab-title-2052:hover { background-color: green; } } And just repeat that for every tab and add in your own color. If you're confused about media queries, I suggest checking out www.w3schools.com/cssref/css3_pr_mediaquery.php
I have a video coming up soon about Elementor's new nested tabs - it's not about custom CSS, but if I find enough cool things to do with CSS, perhaps one of those will be about the active states. Hopefully it works!
For the active part I used .elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active { background-color: #fff !important; } But mobile there is no colour???
From what I can tell, that's not targeting it correctly. It's supposed to look something like this: .elementor-widget-tabs .elementor-tab-title.elementor-active, .elementor-widget-tabs .elementor-tab-title.elementor-active a Try (finding) that and let me know how it goes! 💪
The CSS required to do this 👇
/* Style the tabs - each tab has its own ID - find it by inspecting it */
#elementor-tab-title-1421 {
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
padding-left: 30px;
padding-right: 30px;
border: solid #101010 3px;
}
/* Style how the tabs look when you hover over them */
#elementor-tab-title-1421:hover {
background-color: #101010;
color: #FFFFFF;
}
/* Repeat this process for all tabs */
#elementor-tab-title-1422 {
padding-left: 30px;
padding-right: 30px;
border-top: solid #101010 3px;
border-bottom: solid #101010 3px;
}
#elementor-tab-title-1422:hover {
background-color: #101010;
color: #FFFFFF;
}
#elementor-tab-title-1423 {
border-top-right-radius: 100px;
border-bottom-right-radius:100px;
padding-left: 30px;
padding-right: 30px;
border: solid #101010 3px;
}
#elementor-tab-title-1423:hover {
background-color: #101010;
color: #FFFFFF;
}
/* This makes sure the tabs are all in the same row on mobile */
@media screen and (min-width: 320px) {
#h-tabs .elementor-tabs-wrapper {
display: flex;
flex-direction: row;
}
}
@media screen and (min-width: 320px) {
#h-tabs .elementor-tab-mobile-title {
display: none;
}
}
/* Control the padding on mobile */
@media screen and (min-width: 320px) {
.elementor-widget-tabs .elementor-tab-desktop-title {
padding-top: 15px;
padding-bottom: 15px;
}
/* Add some padding to the whole tabs bar */
#h-tabs .elementor-tabs-wrapper {
padding-left:10px;
padding-right: 10px;
}
/* This makes the tabs stay centered regardless of screen resolution */
#h-tabs .elementor-tabs-wrapper {
display: flex;
justify-content: center;
}
/* Style how the tabs look when active */
.elementor-260 .elementor-element.elementor-element-879dc77 .elementor-tab-title.elementor-active, .elementor-260 .elementor-element.elementor-element-879dc77 .elementor-tab-title.elementor-active {
background-color: #101010;
color: #ffffff;
}
Thank you SO much for this video - it helped me solve a weeks-long issue in seconds, by changing just one character. Typical, haha! I even contacted Elementor Pro Support, and they were completely useless. Every other video I've found is a soft sell for an Elementor add-on plugin, so I'm really happy I finally found this one. Subscribed!
Changing the tab title colours has been wrecking my head! Thank you 👏
Yeah, dealing with tabs can get frustrating, the potential is there but so are the limits. I'm glad the video was helpful, thank you for your support! 🙏
I have tried myself and just need to change the ID to li id and it works!!! Thank you so much for your video and the CSS!!! Very appreciate.
Awesome, really glad it worked!
Finally someone to provide a good solution to this tab stacking behaviour on mobile! Thanks a lot man :)
I'm happy to help, thank you taking the time to watch the video and write a comment, I appreciate the support! 🙏
A true service to humanity. Thank you.
Thank you, I'm glad it helped!
Was thinking about making a video on this. You beat me to it. Great tutorial
Hopefully, in the future, Elementor will come up with tabs with way more options regarding functionality and customization and in doing so, open up the space for more quality content related to them. They have the potential to be a very powerful tool but currently, their limitations are pretty apparent. Thank you very much for your support, I appreciate it!
Please reproduce (babies) Uriel. The internet needs more like you.
Really helpful, saved me from buying a whole plugin just for this. Thanks!
That's great to hear, thank you for the awesome comment 💪
Hey, that tutorial was very helpful, thank you!✌🏼
Is there a way to style the background color of each tab individually when active?
Your solution only works on every tab, if I get it right.
hey how does one change the background color of the inactive buttons
Hi! Very easily. For each tab, you just add in ''background-color: #yourcolor;". That's going to change the background color for the inactive buttons. The colors on hover are explained in the video and for your active buttons, if adding in your inactive colors removes the active color you set, just add in !important to it, like this: ''background-color: #yourcolor !important;".
Great video, you just saved me lol. I wanted the tab titles to look like buttons. I named the Class CSS as tabs1 and added this code to create a gap between the items.
.tabs1 .elementor-tabs-wrapper .elementor-tab-title {
margin-right: 20px;
border-style: solid;
}
That's awesome, I'm glad the video was helpful! Mind sharing the website so I can see what you created?
I'd like to style my tabs so they look just like the physical manila folders inside a filing cabinet. Is that possible with css?
Hello Richard. I'm certain it is possible with CSS, either by using icons or styling the tabs so they look like actual folders. However, that's a little more advanced, so personally I would probably use a plugin and just add icons to the tabs. Here's an article on this I found though, might help you out: catalin.red/css3-jquery-folder-tabs/
thanks !! it worked but not in nested tabs though. Guess i gotta go back to templates lol
Which part of the CSS are you trying to apply to the nested tabs? Since you can do pretty much everything shown in the video with just the nested tabs directly, I'm curious which part you're having issues with. With nested tabs, try adding a CSS ID to the tab - you can do so under content, where you can assign each tab its own unique ID.
Use that to target it and then just add in your CSS, it's actually even easier. If it still doesn't work, try adding !important to override all of the previous styling. Let me know how it goes!
@@Reialesa IT WORKED !! adding "e-n-tab-title-xxxx" to each tab item css id 👍
Awesome, I'm glad you got it working! 💪
@@Reialesa i have one more issue. the part where on mobile view that the tabs do not stack up on each other, "#h-tabs .elementor-tab-mobile-title {
display: none;" I cannot seem to find the correct name (.elementor-tab-mobile-title) when using nested tabs. please help 🙏
ok its "#h-tabs .e-collapse"
This is what i need. Thanks for sharing bro
Happy to help! Thank you for your support 🙌
Life saver. Thanks, my friend!
Happy to help, thank you for your awesome comment 🙌
is there a way I can use icons for the title instead of text in mobile
That's going to be a little more complicated and not something I'd recommend using the tabs for. I recommend looking up a tutorial on switching out the content when you click an icon or an image and using that instead.
Hi, thanks for a great tutorial - I need to for example link from another page to "tab 2" on this page - how do I do that?
Thank you for your kind words! I've never had to use that before so I'm not sure what the exact process is like, but I found a tutorial that seems to describe exactly what you're looking for: element.how/elementor-open-specific-tab-toggle-accordion/
Great video. Thanks!
I'm glad you liked it, thank you for your support! 🙌
Hi, I am Steven, thank you for the video, I wanna ask a question: Can I use this CSS to my website if I use Essential Addons for Elementor Plugin? I just want each tab in the same color with the content background (each content have different color like the video)
Hello Steven! Unfortunately, I have no experience with that plugin, but I just took a look at the Essential Addons website and it seems that you can control colors pretty easily within there, without extra CSS. If you mean changing each individual tab's background color when it's active/selected, that's a little bit more tricky and the CSS in this video won't do that - it's going to change all of them at once. What I think you can do, that you likely can not do with just the plugin, is add different colors for each tab for when you hover over them.
@@Reialesa Yeah, unfortunately, it didn't work...Yes, you got what I mean, I need them to change the color when active. Anyway thank you for your reply and your video, I think I might have to give up that plugin and do it all with your video.
I'm having an issue where in the staging area the css applies correctly but after publishing to the site the colors retain the colors that the widgets applied. Any ideas on a solution?
If I understand correctly, one is a staging site and the other is a live website? If so, try double checking that you're using the correct tab titles. It could be that the CSS is simply a bit different on both websites and that the tab titles aren't the same.
If they are the same, try going into your dashboard and go under ''Elementor'' - ''Tools''. Press ''Regenerate Files & Data''. Also, clear your website cache (not just your browser cache). Hopefully, one of these should do the trick. Let me know how it goes! 🙌
wow, know i can solved my problem,, big thanks,, life saver
and i've one question, can i make 2 colom title? example tab 1, tab 2 on top and tab 3, tab 4 under tab 1 and tab 2?
*Update
Point 2 Solved ☺☺☺
Awesome, I'm happy to hear that! 💪 So, if I understand correctly, you managed to solve your issue?
Awesome! Thanks.
Pls, How can I centre the content. I have an HTML button that's aligned left.?
Happy to help! If you have an HTML button, you're going to have to style it with CSS - if it's created via a template, you have to edit the template. I don't really have a completely clear idea about how your setup looks, but this is an example of how you can center align an HTML button (put it in a div):
Click Me!
Fixed. Thanks.
If we have more than three tabs for example 5, will the responsive works.
When you have a lot of tabs, your best option when it comes to responsiveness is to stack them on top of one another. Or use really short tab titles, like 1, 2, 3... so each individual title takes up as little space as possible.
Thanks!!! I have a question... How can I put a different tab title background for each tab for mobile?
Happy to help! If you mean the active state, unfortunately, making each tab have a different active state color isn't possible with this CSS. If we're talking about just the hover effect, for mobile, you'd have to combine it with the media queries. So, it would look something like this:
@media screen and (max-width: 767px) {
#elementor-tab-title-2051:hover {
background-color: red;
}
}
@media screen and (max-width: 767px) {
#elementor-tab-title-2052:hover {
background-color: green;
}
}
And just repeat that for every tab and add in your own color. If you're confused about media queries, I suggest checking out www.w3schools.com/cssref/css3_pr_mediaquery.php
@@Reialesa thanks a lot!!! unfortunaly I meant the active state :(
I have a video coming up soon about Elementor's new nested tabs - it's not about custom CSS, but if I find enough cool things to do with CSS, perhaps one of those will be about the active states. Hopefully it works!
For the active part I used
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active {
background-color: #fff !important;
}
But mobile there is no colour???
From what I can tell, that's not targeting it correctly. It's supposed to look something like this:
.elementor-widget-tabs .elementor-tab-title.elementor-active, .elementor-widget-tabs .elementor-tab-title.elementor-active a
Try (finding) that and let me know how it goes! 💪