Nested Tabs - Elementor 3.10 - New Feature - No need for templates - Elementor Wordpress Tutorial
HTML-код
- Опубликовано: 12 сен 2024
- 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: websquadron.co...
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: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your RUclips Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk
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 :)
ruclips.net/video/5QChefE_gn8/видео.html
Thank you for providing the fix for this! Armed and Ready
Oh god realy?
Thank You!! it was very usefull for a Restaurant Menu. Thank you so much!!
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.
Before watching this, I was ready to learn some CSS to make some buttons change the image displaying, as a couple of tutorials taught.
This content here is gold!
Perhaps one tip would be for you to add some keywords about "swap image", "button image slider" or something like that, because I didn't know the "tabs" feature, and that was not the keyword I was searching at first, but that's exactly what I was searching for!
Hopefully that would make some more people find this video.
Thank you so much!
Glad it helped! Great tips.
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)
Thank you brother i've been struggling with finding an effective way to display different tabs. You are a big help!
You explained the ONE thing elementor failed to explain in their tab video, thank you So much!
wich is?
dont remember exaclty but I think it may be 1) to first activate nested from experiments, 2) you should always use a new element tab on new element container, not use an old tab, nor mix a new with old,
I love this (bugs will probably be fixed soon) cause a use case I can immediately think of is this:
Architecture client that does work for multiple "industries". I can create a gallery for each industry, i.e: residential, public sector, resorts & hotels, and just name each tab to relevant industry and have it as an easy-to-navigate portfolio. VIOLA!
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!
Very nice and simple explanation! The english is easy is clear and easy to understand, thanks!
This is what I was searching for. Thank you
THIS IS MY EUREKA MOMENT OMG
Thanks Imran, good to see this. Hopefully this feature will come out of alpha soon - I'm a bit reluctant to use these experimental features on live sites.
Great turorial, it saved my life 😁
Glad it helped!
Thanks bro..this exactly I was want.
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!
Yup they renamed it a few months ago
Thanks Imran - This is exactly the step-by-step on the version of Tabs [Why are they called "nested" tabs? What is nested about them?] that I was looking for!
Adding containers inside is why they’re nested :)
Now finally THIS is a $olid Elementor features update!
Thank you so much help me do my work today!
Thanks dawg
Thanks brother very helpful for me ❤.
you are awesome!
You rock too!
Great video. I love the new nested tabs. Thanks
BIG THANKS MATE!!
Thanks! The old tab style was useless!
Absolutely brilliant xxx
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.
I need to explore a solution for the mobile and integrate that old solution with the nested tabs.
The solution for the mobile is coming tomorrow - around 11am UTC - Thursday 30th March 2023. Keep an eye out for it.
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 :)
ruclips.net/video/5QChefE_gn8/видео.html
thanks
I've let it go. Great job
This is so relieving. I'm beginning to be scared of over using this because I'm gonna use and use and use the tabs widget hence forth 😅
Thanks bro, that's work🎉🎉
Thank you so much ! Appreciate your content
thank you so muchhhhhhh
THANKS G!
THANK YOU
thank you a lot continue
thanx for mentioning version of elementor to be use
Extremely useful, tyvm
Thank you for this!
Keep going , Thanks !
Thanks alot
Awesom man 😍😍😍🔥🔥🔥🔥🔥
thanks you
u saved me
Why did mine come up with a hover feature already attached to it? I deleted it and added a new one and they keep coming up with a hover effect. Its a dark blue oval and I cant get it off
Thank you!!!!
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 know.
I’m trying to find a way to solve that
The solution for the mobile is coming tomorrow - around 11am UTC - Thursday 30th March 2023. Keep an eye out for it.
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 :)
ruclips.net/video/5QChefE_gn8/видео.html
When click on tab1 the pdf will opend in new tab how to do that this type action in the nestedtab?
Hmmm.... probably some JS
VERY USEFULL
Thank you sir
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?
Very true
Nice update
@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.
As of the time of this writing, Elementor has already addressed the limitations mentioned in this video.
Yup. This video is old now.
I was tired of doing template and putting shortcodes.
Me too
wow this is great. can i make the tabs sticky on the top or left
You can change the orientation
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).
Might need to add separate posts and then set them via Tab with Query to limit the categories.
@@websquadron So impossible to quickly add a port or page (already created) inside each tab ?
@@elnicolino Ah right, you just want to add a particular post. You could create a template, and then sett the display condition to be a particular post or page and then add the shortcode.
Love your content! I do have a question, have you had issues creating anchor links to each tab? I have a contact page that has a few different enquiry forms and I want to be able to link different CTAs to the relevant form tab.
Have you added the ID to the tab?
I have added the ID to tab. The url changes based on the ID but doesn't scroll down to the relevant section @@websquadron
I’ve also contacted elementor and they said this function is not yet available and would require extra coding to get the anchor link to trigger the tabs. If you know of any available code that can do this that would be amazing!
I found another one of your videos with the extra code, it all works now. Don’t know how I missed that part. Thanks heaps!
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.
And you have Flexbox activated too?
@@websquadron I found the problem, if anyone else has the same problem. The plug-in „theplusaddons“ is not compatible with the new tabs. You can activate the widget in the theplusaddons widget manager, but the left side (where the options should be, after you add the tabs widget) is completely empty. I contacted the theplusaddons support, we‘ll see if they can fix the compatibility with their plugin.
@@wodkah So glad to see this comment. I mean I almost pulled my hair out. I enabled the Flexbox container and I enabled Nested elements but the Tabs widget wholly disappeared. I was looking for two hours at what am I doing wrong and then I found your comment and realized I am using the same "theplusaddons" plugin. Have you ever received any response from them? Should I also open a ticket to force them to fix this issue? How did you manage to force Elementor Tabs to appear? In my setup, it only works if I disable Theplus addons. I have their own Tabs widget but I want to use a new one from the Elementor team. I can use Elementor Tab only if I completely disable ThePlus addons. However, some of the features on my site use this plugin.
@@leonprofes8544 hi, so I was in contact with their support and after report the problem, the devs of theplusaddons updated the plugin really quick. After the update everything works.
Are your plugins updated? If the problem still exists, open a ticket with their support. Their support is great and they answer really fast.
@@wodkah Hi! All my plugins were up to date. However, after your response, I browsed through Theplus addons settings and there's an area called "Elementor Pro" widgets. It contains a widget list from Elementor pro and "Tabs" was disabled. And it seems that whenever you enable ThePlus Tab widget, then Theplus addons automatically disable the "Elementor" Tab widget. Makes sense, however, you can turn it ON manually. Anyway, it works now. Thanks for your response!
I have activated these options but I still don't see new menu and tabs widget
You have activated Flexbox and Nested?
And you are not using BETA or Dev Version?
@@websquadron ah I did activate flexbox and nested but not using beta or dev that could be the issue
@@mrchaudhary1709 You're not meant to be using BETA or Dev.
@@websquadron i am confused now. Does it come with beta only for now? Or its available in regular version?
@@mrchaudhary1709 It's been out for ages. Which version of Elementor Pro are you using?
Nice :) I wonder if I could make the tabs labels sticky (if the content of one of them is higher than a viewport)?
Hmmm, possibly with some code... I think...
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?
No it's okay as you can have both on the page.
muito bom
Can the tabs serve as a website menu and freeze at the top while the nested content scrolls?
The new nested can do that
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.
Tabs doesn’t work like that so closing the first wouldn’t work
@@websquadron I'm confused. I watched a tutorial of yours 9 months ago on having tabs closed by default and it used html widget and some jquery code. I have some tab set up and the buttons at the top left corner of my site and i would like them closed until the user clicks one to open it.
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?
Can you email me a screenshot?
info@websquadron.co.uk
Or send me the url so I can see it in action.
Hi! i tried and my tabs appears but not the content of them :/
What you think its the problem? ):
Any optimisation applied?
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
Will need to think about that.
Thanks Imran please make a video tutorial if you can get an idea how to do it using navigation widget in elementor pro. Thanks bro@@websquadron
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?
have you got any JS Aggregation optimisation enabled?
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
Hmmmm.... interesting question as it's dependent on the content. Also it would depend on what the content is? Is it a Post that sits inside each 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!
Hmmm that’ll need looking at
is there a possibilty to make this as hover over the tabs and not clickable?
I recall someone adding some JS to enable that, but can't recall where I saw that.
I can only see an option to add a paragraph of text to my tab, not ad elements. Any ideas?
Have you enabled containers and nested?
@@websquadron I thought I had, then double checked and hadn't saved it. Stupid of me! Very much appreciate the response though!
Would love to see how to keep nested tabs closed by default.
See this code: ruclips.net/video/7EdpqoO87xE/видео.html
I have a question, could i make a pods teamplate, and put it inside Elementor single post??? How?
I'd need more details, but technically yes.
and click the save changes, thanks
bye.
What about nested Bento grids in tabs?
Can be done as I've added/tested multi-child container layouts inside Tabs. Have you had any issues?
@@websquadron not yet, but I have a couple of layout ideas. I want to create a new website for business, and a tabbed area for some services could be interesting with Bento grids inside.
It seems that adding images into the Tabs Titles doesn't work now with the nested tabs.
What’s the code that you’re adding?
@@websquadron The same from your other video ruclips.net/video/T1bnDWcKe9U/видео.html I tried to disable the nested columns and then it works, but I need to use the templates for the content.
Have you tried it?
You could make a mega menu with that
Indeed, yup.
hello how do i keep titles above titles or headings above the content in mobile view?
We did a separate video on that. Check for Tabs Titles.
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 :)
ruclips.net/video/5QChefE_gn8/видео.html
@websquadron how to open certain tab with URL?
I’m still trying to crack that
@@websquadron able to achive that with Elementskit advance tab but another problem appered that its tab title stays in center. after a lot of searching cant find the css code to make it left align.
also do u know how to do same thing in elementor carousal widget, open particular slide in that carousal with URL
Geez.!!
Hello Imran, any solution for mobile?
Thanks man
Coming soon
As I am testing out some code.
Like really soon!
The solution for the mobile is coming tomorrow - around 11am UTC - Thursday 30th March 2023. Keep an eye out for it.
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 :)
ruclips.net/video/5QChefE_gn8/видео.html
Is it possible the free version of elementor boss?
Yes this comes with Elementor Free
And you didn't even mention that at small breakpoints the tabs turn into an accordion automatically?
Ooops, yes I forgot that.
The solution for the mobile is coming tomorrow - around 11am UTC - Thursday 30th March 2023. Keep an eye out for it.
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 :)
ruclips.net/video/5QChefE_gn8/видео.html
Can’t do this with mine…
Haver you got the nested features enabled?
thanks man, do you think they will remove this in next update?
Nope :)
@@websquadron hey bro is there a way to fix the mobile vertical to horizontal view with nested widget ???
How to Open a Specific Elementor Tab
by link
Not sure
Brooo it's not responsiveeeee
elementor free?
I only ever use EL Pro. It's needed for the Nested Widgets.
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).
I’ll need to test that out
@@websquadron 🙏
@@websquadron awesome work as always, did you ever manage to find a way to link to a specific tab I have had no luck with Google search at all