Elementor 3.10 finally gives us Nested capabilities and this is awesome when creating unique content for Tabs. No need to create lots of templates like we used to 🙂
Awesome!
Book your 1-2-1 Consultation: https://websquadron.co.uk/socials
Nested Tabs – Elementor 3.10 – New Feature – No need for templates – Elementor WordPress Tutorial
We love to create – share – respond – and deliver.
🧐 Learn with our Mastery Modules: https://websquadron.co.uk/web-design-mastery/
🔗 All of our Important Links: https://websquadron.co.uk/socials/
😃 Join our Facebook Group: https://www.facebook.com/groups/3309523509284305
😃 Get Code Snippets Pro: https://r.freemius.com/10565/3304295/
😃 Get Elementor Pro: https://be.elementor.com/visit/?bta=25741&nci=5383
😃 Boost your YouTube Analysis: https://www.tubebuddy.com/websquadron
👕 Get our Merchandise: https://websquadron.co.uk/merchandise
🥹 Support us: https://paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit https://websquadron.co.uk
source
If you're using the Elementor Nested Tabs Widget (introduced in v3.10) then you'll be aware of how it doesn't look great on the mobile.
This bit of CSS code sorts it out 🙂
https://youtu.be/5QChefE_gn8
I got a great help that you said the 'short code' method to use TAB widget. Thank you~
I will try Nest TAB later when I build with container mode!
Thank you so much ! Appreciate your content
@websquadron Hey brother, happy new year! have you found a way to make the tabs the same width regardless of amount of text in each tab? I've nested a three column grid under one of the three tabs, so its driving me nuts that the tabs are not aligning to nested grid.
Thank you so much help me do my work today!
thanx for mentioning version of elementor to be use
As of the time of this writing, Elementor has already addressed the limitations mentioned in this video.
wow this is great. can i make the tabs sticky on the top or left
This is exactly what I was searching for how to do and your video helped me so much! The explanation was clear, precise, and to the point. Thank you.
and click the save changes, thanks
bye.
Thanks! The old tab style was useless!
@websquadron how to open certain tab with URL?
Very nice and simple explanation! The english is easy is clear and easy to understand, thanks!
Thank you for this!
Geez.!!
Can the tabs serve as a website menu and freeze at the top while the nested content scrolls?
Imran any idea how we can create a responsive mobile horizontal scrollable & draggable Tab Menu with right and left arrows in elementor pro? like the one youtube has. Thanks
It seems that adding images into the Tabs Titles doesn't work now with the nested tabs.
Absolutely brilliant xxx
Hi,
I created my whole website without flex containers, but now just for these nested elements i have enabled flex container and havent changed sections to containers, would it affect my site or now?
Hi! i tried and my tabs appears but not the content of them :/
What you think its the problem? ):
Thank you – I truly look forward to watching and learning from your videos and examples. I have implemented a few, and I continue to keep watching and now introducing my employer to your videos. Wado (Cherokee for thank you)
great tutorial! thanks.
Maybe you can help please?
I have a button on a home page .
I need to go to specific tab when press the button(from home page).
Would love to see how to keep nested tabs closed by default.
I've let it go. Great job
Keep going , Thanks !
Really great and quick explaining for this new tabs features.
What about the way to add custom post by adding shortcode or alternative ?
In my case i create rooms via custom post and i would like to use tabs to displays my custom post by adding only shortcode page or alternative (i don't think that is there a way to have a custom post shortcode).
I just tried following the steps in the order you explain, it works awesome, FYI on my elementor there isn't a tab called "experimentations" but I found it under "features". The folks from Elementor FAILED to explain this steps, they must have a long line of support tickets. Thanks again!
You explained the ONE thing elementor failed to explain in their tab video, thank you So much!
I have activated these options but I still don't see new menu and tabs widget
Hi Imran. Awesome tutorials as usual. excuse my ignorance but is there a way to have the Tabs widget closed by default? I'm using containers and the latest version of Elementor Pro 3.12. Thanks mate.
Thank you very much for this video, however I am having an error, in each tab I have a different slider, the first one works without any problem but in the other tabs the slider does not work correctly. Do you know any solution?
Hello Imran, any solution for mobile?
Thanks man
Thanks brother very helpful for me ❤.
Thank you sir
Thank you!!!!
How to Open a Specific Elementor Tab
Do you know if there is a way to link to these tabs from the menu? Like if I wanted to navigate to /page/#tab3 ? Thanks for the content!
thanks man, do you think they will remove this in next update?
Great video. I love the new nested tabs. Thanks
The new Tabs are very good looking on desktop, but not on mobile…now the viewer doesn't know there's a TAB 2; if we stuff a lot of content in TAB 1, the viewer needs to scroll a long way to find out there's TAB 2 in our website…I've tried a few old coding to hide the tabs' contents (only open when we click), but it's not working…sad…We are NGO, and I'm trying to add a few donation options with a form attached under the tabs' content, but my boss has rejected the design (for not showing others TABs on top). Now I don't know what to do to keep my design (and I don't want to add any plugins which might crush my theme)…
I'm using the Nested tabs for a jobs overview page. So i have a tab for all job, for only the marketing jobs, only the Hr jobs etc. But now i'm wondering if its possible to only show the tabs that actualy have jobs/content in it? I've created the jobs with ACF/CPT/ele custom skin
Great video! Love the new feature. I still do appear to have the stacking of the tabs in the mobile view. I know you did some videos on the previous tabs and wondering if you may do the same for this as the code in your previous videos does not appear to work with the new tabs widget.
hello how do i keep titles above titles or headings above the content in mobile view?
is there a possibilty to make this as hover over the tabs and not clickable?
Adding an extra breakpoint for desktops would be great option, you could use nested tabs as a nested accordion. Possibly with some code. What do You think?
Thank you for your video! This is really crazy amazing, already using in my development. Found this issue on mobile: In the first tab I have quite a long text – so long, that it overflows the viewport. So when you finished viewing all the contents of the first tab, you want to click the second tab. You do so, and the problem is that the contents of the second tab are hoping to the point where the second tab's title is, leaving me on the point of the content where the contents of the first tab was ending. Do you have an idea of how it can be fixed?
after activating the nested tabs, the widget completely disappeared… I can edit old tabs, but I can't create new tabs, the widget is just not showing up in the widget list. It doesn't show up when I search for tabs, neither.