Nested Advanced Tabs

How to Design a Nested Tabs Layout Using EA Advanced Tabs

EA Advanced Tabs allows you to orgranize your contents in an effective way. Thanks to it being straight to point, readers can instantly get the key information they are searching for. With the help of EA Advanced Tabs, you can present your contents in an amazing way. Nested Tabs layout is one of the techniques which you can use to make your site very attractive to your users.

Table of Contents:

  1. How to Activate Advanced Tabs
  2. How to Configure Default Content Type
  3. How to Configure Layout Settings
    3.1. Vertical Layout
    3.2. Horizontal Layout
  4. How to Style Advanced Tabs
  5. How to Save & Use a Template
    3.1. Save as Template
    3.2. Use Saved Template
  6. Final Outcome

1. How to Activate Advanced Tabs

Click to See the Full Documentation

The first step would be to drag the EA Advanced Tabs element into the ‘Drag Widget Here’ section. Since our goal is to get a ‘Nested Tabs‘ layout, do this action a few more times depending on the number of tabs you want. It doesn’t matter if you do that on different pages.

Nested Advanced Tabs

2. How to Configure Default Content Type

After you are done activating EA Advanced Tabs, you can then modify the Content Settings. By default, the layout is set to ‘Horizontal’ and the Content Type to ‘Content’.

You can change the Tab Title for all the Tab Items. For the first Tab Item, if you set the content type as ‘Content’, you can simply just change the ‘Icon’ and ‘Tab Content’.

Nested Advanced Tabs

Click to See Live Demo

3. How to Configure Layout Settings

After you are done with the basic configuration of your original Advanced Tabs, you will have to create few more Advanced Tabs now.

To begin, you can change the Layout from the ‘General Settings’ section.

Nested Advanced Tabs

3.1. Vertical Layout

As already mentioned in Step 2, you can modify your Icon & Content for each of your tabs here.

Nested Advanced Tabs

3.2. Horizontal Layout

By default, the layout is set to Horizontal. Simply just modify the content settings as per your preference for all the tab items.

Nested Advanced Tabs

4. How to Style Advanced Tabs

You can style all your Advanced Tabs elements as per your preference. For more information, you can check out this documentation on how to style EA Advanced Tabs.

Nested Advanced Tabs

5. How to Save & Use a Template

5.1. Save as Template

You will have to save the Advanced Tabs Section you have created as templates for each (apart from the original one). Simply click on the section with the ‘: : :’ icon and click on ‘Save as Template’.

Nested Advanced Tabs

You will then be asked to put a name for your template and simply click on ‘Save’. Your template will then be saved.

You will have to do this for each section you have created aside from the original one where we are going to use these for.

Nested Advanced Tabs

5.2. Use Saved Template

To use your saved templates, go back to the original Advanced Tabs you have created by using Step 1.

Then simply choose the ‘Content Type’ to ‘Saved Template’ for your choosing tab items. Use the dropdown to ‘Choose Template’ from the ones you have saved.

Nested Advanced Tabs

6. Final Outcome

By following these mentioned steps and a bit more modifying & styling, your final outcome would look like something like this.

Nested Advanced Tabs

This is how you can easily design a Nested Tabs Layout with EA Advanced Tabs Element.

Getting stuck? Feel to Contact Our Support for further assistance.