Hey Ash here from Elementor in this Tutorial we'll explore fantastic Examples of how to make the most of Elementor's nested tabs feature Nested Tabs are an excellent way to Organize content to make it more Accessible By using nested tabs you can create a Hierarchical structure that makes it Easy for users to navigate through your Content and quickly find what they're Looking for throughout this tutorial We'll highlight some excellent use cases For nested tabs and provide tips on best Practice for incorporating them into Your own designs so if you're ready to Dive into the world of nested tabs let's Get started nested tabs example number One categorize your content with ease It is generally best practice to Maintain a consistent structure when Using tabs however this does not mean There is no room for creativity You can still experiment with the layout While adhering to the design language Here's how we did it in our events Hall Example First let's establish our design Language in image A title that includes the Hall's name And its capacity a text element that Provides details about the venue and a Button We will apply spacing settings to each
Tab container and only change the item's Direction We will then copy and paste the inner Container of the first tab into the Second one Add the content And duplicate it to create a consistent Layout thanks to these tabs flexbox Features the contents width for just to Fit within a single container side by Side For the third tab we'll make a slight Change this time we want the items to be Arranged in three rows with the image on The left and the text and button on the Right We will set the main tabs container item Direction to column paste the inner Container Change its setting to row Adjust the image's height And duplicate it to create a consistent Layout Ultimately we played with the layout While staying true to the design Language and categorizing the content Nested tabs example number two add any Widget you like nested tabs allow us to Create customized structures such as Pricing plans using highly configurable Widgets like the pricing table Let's begin by adding the tabs widgets After that I will delete the following Two tabs to reveal a workflow trick
Later on first ensure that our container Is set to a row Direction ensuring our Price tables can be placed side by side Next drag in the price table widget The price table widget is a highly Customizable widget which allows you to Input many content types with numerous Configuration and styling choices we Will place three price table widgets Next to each other to ensure each has The same width set it to custom and 31 Of the container under the advanced tab Once we have one fully prepared we can Duplicate it and modify the content to Fit another pricing plan Now that we have all of our pricing Plans ready for one period which is Monthly we can go back to our tabs Widget and duplicate the first tab this Will repeat it with all of the widgets And styling of its container all you Need to do then is rename your tab in This case semi-annual and adjust the Content of your pricing plans then Repeat this process once more for your Annual plans we've built pricing plans For different periods in just a few Minutes styling two widgets only once Nested tabs example number three guide Your visitors using tabs you can provide Step-by-step instructions or tell a Story to your visitors to supercharge Your messaging include imagery such as Icons on the tabs themselves
Use the same layout for each tab or step Then briefly explain the steps in a few Words and let the images do the job for You break your design or layout into Separate assets so that you can animate Them individually and create a more Dynamic effect when they come together Lastly don't forget to add Lottie Animations for added visual interest Ed tabs example number four use tabs to Filter content take advantage of the Power of dynamic content and combine Widgets like nested tabs and the loop Grid to create your own category filters Begin by adding the tabs widget and Renaming each tab to match the Categories you want to display In the first tab container add the loop Grid widget Select the template type in our case It's products choose a template or Create one on the spot and adjust the Number of columns to your liking under Query include buy terms and type the Category name It will appear as a suggestion for you To select Next copy the loop grid widget you just Created and paste it inside the Container of the second tab then under Query delete the previous category name And type in the new one repeat this Process as many times as you need to to Display all of your desired categories
This is an excellent way to filter your Products portfolio items as well as Custom post types nested tabs example Number five nests within nests Let's finish with an advanced example Where we build a custom dashboard using Nested tabs within nested tabs Our main tabs widget allows the user to Navigate through the different Functionalities of the app we use the CSS ID feature provided in each tab to Rotate the navigation titles of the tabs Using a single line of CSS code repeated For each tab Let's delete the content of the first Tab to recreate it together first add The tabs widget and to keep our UI Organized our navigation will be on top And we will justify the items to stretch So that each tab will take up equal Space horizontally Next insert a custom icon for each tab Under the style tab We can change the icon's position and Size Increasing the gap between tabs and the Space between content will help us Achieve a look that makes it difficult To Guess that it's a tabs widget Finally we will use the power of Containers and the loot grid widget to Categorize the audio content of this web Application by using nested tabs Alongside Elementor Pro you can bring
Any Vision to life Thanks for tuning in to this tutorial on Five great use cases with nested tabs We hope you found these examples and Tips helpful for organizing your content And improving user experience Remember to hit that subscribe button so You don't miss out on future tutorials And design inspiration keep creating and We'll see you in the next one Foreign
