I didn't like the square corners on the tab so I added the following in the Customizer -> Additional CSS: .elementor-tab-title { border-radius: .4em .4em 0 0; } This rounds the corners of the tabs. You can change the 'em' values to get more or less rounding.
I'm new to blogging and I'm designing my own site myself with Elementor. I love this feature and that's what got me here. I never used tags on any of the content i've made, will start using them from today. Subscribed and liked. Thanks.
Thanks for posting - makes tabs so much more powerful. I tested - it also works in Accordion. Thanks for pointing out this feature - I had no idea it was there.
Nice video again Paul, thanks! 👍 I demonstrated this at our local Elementor Meetup a couple of months ago too 😁 It's also great how we can use the identical method in Accordions and Sliders 😉 Keep up the great work 💪
count me in for one wanting to know also please. The finishing aspects of the tabs was very attractive and what I was looking forward to seeing how you did that. As soon as you have a moment to comment, that would be greatly appreciated @WPTuts. :)
I think you guys are wanting to put the little triangle at the bottom of the tabs? If this is what you are after I managed it with this. **Note the tricky part is that the wrapper has overflow:hidden; so anything outside of there is.. hidden! I added an ID to the Section for reference, a hover state and a border to the content box. .elementor-tabs-wrapper { overflow: visible !important; } #workspace_tabs .elementor-tab-title { padding: 20px 48px; } #workspace_tabs .elementor-tab-title:hover { background: #d7bc7c; color: white; } #workspace_tabs .elementor-tabs-wrapper .elementor-active { background: #b49a57 !important; position: relative; } #workspace_tabs .elementor-tabs-wrapper .elementor-active:after { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #b49a57; bottom: -10px; right: calc(50% - 10px); left: auto; width: 0; } #workspace_tabs .elementor-tabs-content-wrapper { margin-top: 24px; } #workspace_tabs .elementor-tabs-content-wrapper .elementor-tab-content { border: 1px solid #777; } Thanks for the Tut Paul!
I had the same question but I already solved using the plugin "Essential Addons for Elementor" after to install and activate, you will have the element "advanced tabs" (even on the free version) to use with the same technique on this video but with more option to edit the format than the normal "tabs" element.
This totally solves my issue. I needed a way to show several videos and using tabs is the way to go. Do you think I need to do something extra for showing videos?
Yeah i used tabs on a project i recently did for a client.. The reason was, that they had a ton of different services that needed to be displayed in neat way, so i used tabs... Thanks Paul
Thank you for the tutorial; however, is it possible to make the post non-clickable? I want to create a page with tabs and multi-column within the tabs.
This tutorial got me out of a horrible bind. I wanted to use HTML in a tab within a popup. I was forced to do this as my original plan - embedding a pdf in the tab text editor - just refused to show. So I converted the pdf to HTML and pasted that into the text editor, but....the text editor stripped out lots of the html (all style classes etc) making the display awful (yes I was using the text editor rather than visual setting). I struggled to work out what to do but having watched your tutorial, I created a template section containing only the HTML widget and pasted my code in there. And then used shortcode in the tabbed text editor. Works perfectly. {Edit: I subsequently discovered that in order for this to work these templates have to be saved as global widgets). Thank you so much for this tutorial and the many others I have watched - you really are a fine example of the best of the internet.
Hi thanks for your video! A question, in the case of a non-dynamic element, but of graphics and text, how can it be updated globally? Saving global widgets only saves individual widgets, but it is not possible to save an entire section for global use. Thanks
Hello, Thank you very much for your tutorial. I was wondering if you can help me with something... I’m using the widget tabs for a price table, and everything is working, but when i click in the other tabs, all my section starts to go up and up…My section should be static when i click in the other tabs, right ? It doesn’t stop to move up when you click... I don’t know how to fix this, i tryed to do it again but i have the same problem... Can someone help me with this ? Thanks a lot ! Your tutorials are really great !
Hi again Poul, is there a chance, using shortcode, to add the whole post grid with pagination possibility on a tab. I tried it but pagination wont work. It wont move to the next page of that particular category. Thank you in advance.
Brilliant as always Paul! Could you please do a tutorial on how to add a button to your main menu? eg: SHOP NOW looks like a button rather than just a regular menu item. Thanks in advance!
Well, isn't that an elegant approach, very smart! I'm trying to find some visually interesting way of doing 3 tabs that are all text (question then answer), and found your video, and though this doesn't work for me in this case, it's something I'm bookmarking and saving, as I think I may have a use for this in the future. Thank you. Have subbed as well, am looking forward to watching more of your content. And, you sound Geordie...are you? My Dad was from Wallsend, it's my favourite UK accent and always makes me think of him when I hear it!
Hello dear. Can i use listing gride under each tab As i am building a car listing website and i like to add 3 tabs to view dufferent listing like makes, latest ads and cities for example which all of them are texonomy from jet engine. I appreciate your reply.thank you
Hi Thanks for your video, it works except for one mistake, that the content under the tab button appear to be different places. When click first tab, it works well; while click 2nd and 3rd, then all content align to the right end of the box. I already checked the section template also posts, but still fail to fix this. Could you please help to advice where is the real problem？ many thanks in advance! John.
Excellent tutorials, but if you don't mind me asking, how would I center the tabs and add the images that are shown at the beginning of the tutorial? Thank you and keep up the great work!
Thank you Paul, very helpful as always : ) how did you later separate the tabs and leave a space below before content was pulled - as it is shown in the beginning of the video?
I had the same question but I already solved using the plugin "Essential Addons for Elementor" after to install and activate, you will have the element "advanced tabs" (even on the free version) to use with the same technique on this video but with more option to edit the format than the normal "tabs" element.
this a great idea, but i wanna use pagination with too but it's not working, it's keep showing me there's no more post to show, even they are ! and one have idea how we could tweak it ?
Templates on the second, third tab not working for me. I created carrousels and did all this, but when I preview it, the first tab is perfect but the second tab only shows one image from 6 on the carrousel. But I noticed when I resize the browser sudenly the carousel shows perfectly. I'm so confused :(
Hi Paul Again great tutorial! Just wondering is there a way I can add custom ACF data to the existing woocommerce tabs ie: I want to add 'Lead time & Forktruck required?' fileds (ACF) the standard 'Additional Information' tab. Any help much appreciated.
How to add separate bg image or video for each tab for the whole section when the tab is clicked, id, for instance, when the tabs are aligned verticle center middle
Can you do this with an inner section as well? I've created a main section with 3 columns. Inside each column is 1 inner section with a header, text and button. I save this as template and input into tabs but when I type in the url the page is displaying nothing but the header. When I remove the shortcode, the page works again. Any ideas?
Hi Paul, I have learnt so much from you and can only say a massive thank you for all your work. However, I would love to create an evenly spead out Tabs section but just cant find a way to do it. would there be any way to share how you did what you are showing at the beginning of your video please, you really would make my day and I litteraly have tried to find out all day. Thank you
Is there a solution for this type of tabs? All tabs should be closed. If I click on the first tab then he should open himself over the entire width. If I click on the second tab the first tab should close and only the second tab should open over the whole width. Is that possible and how is that done? Would it be possible with css or html? Unfortunately I do not know myself with css and html. Does anyone have a solution for this? Best regards
I was wondering are you able to make a video how to make custom product hero images for each product category using OceanWp and Elementor Pro? If you have one please share? Thank you!!!!
Dear WP Tuts (or anyone!), at the 8:40 minute mark, my screen won't show the shortcodes. It only shows "type", "author" and "date". Is this because I need to get the Pro version? I spend whole of yesterday trying to solve this, so any help is HIGHLY appreciated :) Awesome video though. Kind regards, Morten
All good but there is one main thing to be solved in Elementor Tab and that is how to make tabs display in full width or centered and not only left aligned as it is here?
Hi thanks again for the great vid! exactly what i needed. But do you know how to link to different tabs from another page? Edit: i take it back. Does not work when creating desings in elementor. Its just gives you text
A bit frustrating that you don't show how to make the tab buttons fill the entire width of the screen, same for the dividers.. That was the reason why I watched the video in the first place. Kind of a bummer
great video thanks! Hey please make a seperate video showing how you made the colored seperated tabs
Yes, that is the video I want.
What a genius way to start a video!!! By shouting a B at the very beginning... Amazing I'm really speechless right now... and a little deaf.
Hello! the problem with this is when you see it in mobile version it looks bad, why don´t u teach us on how to work on that? All the best!
I didn't like the square corners on the tab so I added the following in the Customizer -> Additional CSS:
.elementor-tab-title {
border-radius: .4em .4em 0 0;
}
This rounds the corners of the tabs. You can change the 'em' values to get more or less rounding.
THANK YOU!
Wow! it's pretty easy but don't come in mind until we see Paul sir's tutorial. 💡😇
Fantastic! the power of Shortcode... I can't stop being amazed with Elementor and its power of doing things
4 years later but this still helped me a lot, thank you!!
You helped me solve the missing piece I needed, thanks!
I'm new to blogging and I'm designing my own site myself with Elementor. I love this feature and that's what got me here.
I never used tags on any of the content i've made, will start using them from today. Subscribed and liked. Thanks.
Thanks for posting - makes tabs so much more powerful. I tested - it also works in Accordion. Thanks for pointing out this feature - I had no idea it was there.
Great tutorial. I have been using this technique since back in April. It works in Toggles, Accordions, and Sliders
as well.
Dude I love it, thankyou very much. Helped me a lot.
Nice video again Paul, thanks! 👍
I demonstrated this at our local Elementor Meetup a couple of months ago too 😁
It's also great how we can use the identical method in Accordions and Sliders 😉
Keep up the great work 💪
Awesome, just saved me a lot 3rd party plugin payments 👍
Thank you so much for this tutorial!
Wow, I love you so much. It has helped me. Just that extra info that comes in timely for me.
As always Paul very good. Seeing these types of videos gets my creative juices going 😀
Thank you so much for this tutorial! How do you make the orange buttons to switch between the tabs?
Thanks Paul! How do you get it to look like the orange buttons with shape dividers like the beginning of the video?
I'd like to know that too. I watched the video expecting to see how that's done. But a good video all the same.
count me in for one wanting to know also please. The finishing aspects of the tabs was very attractive and what I was looking forward to seeing how you did that. As soon as you have a moment to comment, that would be greatly appreciated @WPTuts. :)
I think you guys are wanting to put the little triangle at the bottom of the tabs? If this is what you are after I managed it with this.
**Note the tricky part is that the wrapper has overflow:hidden; so anything outside of there is.. hidden!
I added an ID to the Section for reference, a hover state and a border to the content box.
.elementor-tabs-wrapper {
overflow: visible !important;
}
#workspace_tabs .elementor-tab-title {
padding: 20px 48px;
}
#workspace_tabs .elementor-tab-title:hover {
background: #d7bc7c;
color: white;
}
#workspace_tabs .elementor-tabs-wrapper
.elementor-active {
background: #b49a57 !important;
position: relative;
}
#workspace_tabs .elementor-tabs-wrapper .elementor-active:after {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #b49a57;
bottom: -10px;
right: calc(50% - 10px);
left: auto;
width: 0;
}
#workspace_tabs .elementor-tabs-content-wrapper {
margin-top: 24px;
}
#workspace_tabs .elementor-tabs-content-wrapper .elementor-tab-content {
border: 1px solid #777;
}
Thanks for the Tut Paul!
I had the same question but I already solved using the plugin "Essential Addons for Elementor" after to install and activate, you will have the element "advanced tabs" (even on the free version) to use with the same technique on this video but with more option to edit the format than the normal "tabs" element.
This totally solves my issue. I needed a way to show several videos and using tabs is the way to go. Do you think I need to do something extra for showing videos?
Yeah i used tabs on a project i recently did for a client.. The reason was, that they had a ton of different services that needed to be displayed in neat way, so i used tabs... Thanks Paul
Thank you ! You solved my problem my friend with the shortcode.
Thank you for the tutorial; however, is it possible to make the post non-clickable? I want to create a page with tabs and multi-column within the tabs.
Thank you! This is exactly what i needed.
Where do I find shortcode of templates? I'm unbale to find.
This tutorial got me out of a horrible bind. I wanted to use HTML in a tab within a popup. I was forced to do this as my original plan - embedding a pdf in the tab text editor - just refused to show. So I converted the pdf to HTML and pasted that into the text editor, but....the text editor stripped out lots of the html (all style classes etc) making the display awful (yes I was using the text editor rather than visual setting). I struggled to work out what to do but having watched your tutorial, I created a template section containing only the HTML widget and pasted my code in there. And then used shortcode in the tabbed text editor. Works perfectly. {Edit: I subsequently discovered that in order for this to work these templates have to be saved as global widgets).
Thank you so much for this tutorial and the many others I have watched - you really are a fine example of the best of the internet.
Hi thanks for your video!
A question, in the case of a non-dynamic element, but of graphics and text, how can it be updated globally?
Saving global widgets only saves individual widgets, but it is not possible to save an entire section for global use.
Thanks
Is it possible to put a dynamic content using ACF and insert it in tabs?
Thank you so much! This feature is great!
Your videos are always so helpful, thanks
WOW
I surprised that you did it without any extra plugin.
than you man
Hello,
Thank you very much for your tutorial. I was wondering if you can help me with something...
I’m using the widget tabs for a price table, and everything is working, but when i click in the other tabs, all my section starts to go up and up…My section should be static when i click in the other tabs, right ? It doesn’t stop to move up when you click...
I don’t know how to fix this, i tryed to do it again but i have the same problem...
Can someone help me with this ?
Thanks a lot ! Your tutorials are really great !
For me its one of your best tutorials. Nice simple and easy to follow. Im going to use this now on my site.
Can I achieve same result for drop-down options, instead of tabs ?
It was very useful and Practical. Thanks a lot.
Excellent video! Smooth, Crisp, so easy to follow, and professional!
This is exactly what I was looking for! Thanks a lot
Your video is absolutely awesome! It has helped me so much! Thank you! Keep up the great work!
Love it Paul. You are a great help. 10/10
Awesome! So now i can build a Price Box with a content switcher for monthly and yearly prices. Very nice!
Thanks Paul! Just the info I was looking for! I almost wanted to use a plugin (which goes against my principle of using as less Plugin as possible)
No problem Steve, glad this helped. 👍
@@WPTuts Paul, your explanation on Elementor and web building is one of the best!
Great tutorial, thanks!
yes.. really helpful , this i learn from you and apply this .... thank you
Hi again Poul, is there a chance, using shortcode, to add the whole post grid with pagination possibility on a tab. I tried it but pagination wont work. It wont move to the next page of that particular category. Thank you in advance.
Brilliant as always Paul! Could you please do a tutorial on how to add a button to your main menu? eg: SHOP NOW looks like a button rather than just a regular menu item. Thanks in advance!
Well, isn't that an elegant approach, very smart! I'm trying to find some visually interesting way of doing 3 tabs that are all text (question then answer), and found your video, and though this doesn't work for me in this case, it's something I'm bookmarking and saving, as I think I may have a use for this in the future. Thank you. Have subbed as well, am looking forward to watching more of your content.
And, you sound Geordie...are you? My Dad was from Wallsend, it's my favourite UK accent and always makes me think of him when I hear it!
Hello dear.
Can i use listing gride under each tab
As i am building a car listing website and i like to add 3 tabs to view dufferent listing like makes, latest ads and cities for example which all of them are texonomy from jet engine.
I appreciate your reply.thank you
Thank you from brazil!
Hi Thanks for your video, it works except for one mistake, that the content under the tab button appear to be different places. When click first tab, it works well; while click 2nd and 3rd, then all content align to the right end of the box. I already checked the section template also posts, but still fail to fix this. Could you please help to advice where is the real problem？ many thanks in advance! John.
Awesome! Thank you sooo much!
Yes. Finally found what I was looking for
Excellent tutorials, but if you don't mind me asking, how would I center the tabs and add the images that are shown at the beginning of the tutorial? Thank you and keep up the great work!
following
.elementor-tabs-wrapper {
display: flex;
justify-content: center;
}
Thank you Paul, very helpful as always : ) how did you later separate the tabs and leave a space below before content was pulled - as it is shown in the beginning of the video?
I had the same question but I already solved using the plugin "Essential Addons for Elementor" after to install and activate, you will have the element "advanced tabs" (even on the free version) to use with the same technique on this video but with more option to edit the format than the normal "tabs" element.
I used advanced tabs and worked fine when I was building the page but in preview mode show nothing. Do you know why?
hi, any idea on how to add pagination to work in post tabs. The problem is that on refresh it goes to first tab
this a great idea, but i wanna use pagination with too but it's not working, it's keep showing me there's no more post to show, even they are !
and one have idea how we could tweak it ?
can you please suggest some free plugins by which we can do the same task .
Can the tabs in the pro version be dynamic , i mean only select one tab and populated the rest of it ? example like categories.
Hello paul, could you kindly please tell me how you did the little arrow for the active tab? thanks alot!
Very useful Paul. Well demonstrated 👍
You sir, just saved my live.
Hi there, I have installed the plugins but when I try to click on Query from elementor block settings its empty .. Any help ? I'm new
Great video loved it. Only thing is that the layout looked strange in mobile.
Templates on the second, third tab not working for me. I created carrousels and did all this, but when I preview it, the first tab is perfect but the second tab only shows one image from 6 on the carrousel. But I noticed when I resize the browser sudenly the carousel shows perfectly. I'm so confused :(
mate I gotta tell you: you're a genius. Kudos :)
Hi Paul Again great tutorial! Just wondering is there a way I can add custom ACF data to the existing woocommerce tabs ie: I want to add 'Lead time & Forktruck required?' fileds (ACF) the standard 'Additional Information' tab. Any help much appreciated.
You are A hero
Very helpful tutorial, thank you very much Paul !
Is there a way to remove the border/margin around the embedded shortcode ?
Thanks u saved my Project
This would work real good for my portfolio section, thanks paul
i love it ! i made a categories tab for a clothing store and seems nice!
Thank you for video. It was very very usefull
You always save my life, Paul... Thank You :)
Thank you. This is very useful and concise!
How to add separate bg image or video for each tab for the whole section when the tab is clicked, id, for instance, when the tabs are aligned verticle center middle
Excelente vídeo! Obrigado
you are great developer
Excellent and Exquisite information from real life experience. Keep the great work up. Happy New Year 2021 :-)
How can you make the content load only when you click on the tab above it?
Can you do this with an inner section as well? I've created a main section with 3 columns. Inside each column is 1 inner section with a header, text and button. I save this as template and input into tabs but when I type in the url the page is displaying nothing but the header. When I remove the shortcode, the page works again. Any ideas?
I need this but instead of article posts, I’d like to add a box with a small photo,text and a button. How would that be made?
Great Video.
Hi Paul, I have learnt so much from you and can only say a massive thank you for all your work. However, I would love to create an evenly spead out Tabs section but just cant find a way to do it. would there be any way to share how you did what you are showing at the beginning of your video please, you really would make my day and I litteraly have tried to find out all day. Thank you
Great! This is just what I was looking for thankyou. Do you know if it is possible to centre the tabs, rather than left align?
.elementor-tabs-wrapper {
display: flex;
justify-content: center;
}
done :-)
Slider doesn't work under tabs while using template. Can you give a solution please..
This was really good! Simplicity at its best
Very useful tutorial! But what about the mobile version? There, the tab design will be lost, in some way.
Is there a solution for this type of tabs?
All tabs should be closed.
If I click on the first tab then he should open himself over the entire width.
If I click on the second tab the first tab should close and only the second tab should open over the whole width.
Is that possible and how is that done?
Would it be possible with css or html?
Unfortunately I do not know myself with css and html.
Does anyone have a solution for this?
Best regards
I was wondering are you able to make a video how to make custom product hero images for each product category using OceanWp and Elementor Pro? If you have one please share? Thank you!!!!
Dear WP Tuts (or anyone!), at the 8:40 minute mark, my screen won't show the shortcodes. It only shows "type", "author" and "date". Is this because I need to get the Pro version?
I spend whole of yesterday trying to solve this, so any help is HIGHLY appreciated :)
Awesome video though. Kind regards, Morten
Yup, that's exactly the problem. You only get the shortcodes option if you have Elementor Pro; it's not available in the free version I'm afraid.
@@WPTuts Thank you sooooo much!! Glad there is a solution. I am thrilled to be able to move on.. I am going Pro then :D
@@normannfrederiksen no problem at all :0)
All good but there is one main thing to be solved in Elementor Tab and that is how to make tabs display in full width or centered and not only left aligned as it is here?
Great tutorial. Thanks
Amazing Thinking Buddy. Thanks
thanks, you save my life.
How to put feature image to the side? I would like to have a list going down instead of cards style layout.
Nice tips Paul, tks!
Hi thanks again for the great vid! exactly what i needed. But do you know how to link to different tabs from another page?
Edit: i take it back. Does not work when creating desings in elementor. Its just gives you text
Thank you sir you will guide us
A bit frustrating that you don't show how to make the tab buttons fill the entire width of the screen, same for the dividers.. That was the reason why I watched the video in the first place. Kind of a bummer
Hi! Thanks for the video! I want to create a gallery in tabs, but how can I align photos in horizontal? he show me in vertical