Nested Tabs - A Tutorial and an Overview of Elementor’s Improved Tabs Widget

Pricing Table Using Containers and Tabs in Elementor - Switch / Toggle Between Different Plans:    • Pricing Table Using Containers and Ta...  

Get Elementor: https://be.elementor.com/visit/?bta=2...
Awesome, affordable hosting: https://www.hostg.xyz/SHGec

Elementor recently released a new and improved tabs widget. It is the first nested widget to be released and it comes with some massive changes and upgrades.

The largest change is that you no longer need to use templates and shortcodes to add in content other than text. The new tabs essentially work like a container, meaning you can add in any widget you want, including other containers.

This allows you to create complex layouts. Even better, you can add in anything - a button, an image, a video, a product, blog posts or any other kind of dynamic content. And you get to edit everything on the spot, without having to search for and work inside the template.

When it comes to styling the new tabs, Elementor made sure you've very unlikely to need to use anything else other than the actual widget. While you may still need CSS for some specific cases, they are a lot more flexible than the old version.

The first important change is that you can now add in icons, including custom icons, to your tabs. Not only that, you can also change the colors of the icons for the normal, hover and active states. Each state can have its own color, which is amazing.

You can position the new tabs any way you want by using the direction and justify values. You can also make this responsive and have a different setting for the tablet view. Unfortunately, currently, the mobile view always transforms into an accordion and there's no way to turn this off in the widget directly.

You can also add different colors to different states for the tabs' background color and for the titles. When it comes to the background, you can add in a border radius to get rounded corners. This enables you to create some very cool, custom looking tabs.

Under the Content part of the ''Style'', I recommend just avoiding it entirely. The main benefit of the new tabs is that you can use them pretty much identically to containers, so that's what I recommend regarding the styling as well. Do it inside the containers directly.

If you want to avoid content around the tabs jumping up and down as your users use the tab buttons to switch the tabs, make sure each tab has the same exact height. You can do this by using the navigator to target your tab, then, under Layout, just add the same Min Height to all of the tabs.

For the cool fade in effects, just go under motion effects and add entrance animations to the individual containers or widgets located in your tabs.

#elementor #tabs #nestedtabs

Get in touch:
https://www.reialesa.com/youtube/

Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.

Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!