Widget Guidelines

How to Use & Customize Advanced Tabs Widget

Estimated reading: 2 minutes 101 views

The Advanced Tabs Widget is a great way to display lots of information in the same section of your website so that the users can easily access the content that you are interested in without even reloading the page.

Follow the step-by-step instructions:

1. To customize Advanced Tabs, you can add your content before, Go to Templates.

2. Click Saved Templates.

3. Click Add New Template to create your content.

4. Create your content here, setting th content width : Full Width and don’t forget to click Publish to save your content.

5. Go to Menu Romethemekit.

6. And you will be able to see the Advanced Tabs Widget.

7. Click Add New Container.

8. Select your layout : Flexbox or Grid.

9. On the canvas select your structure.

10. Drag the widget from the Elementor 

11. Drop it on the selected area.

12. Setting :

  • Click Content → Settings.
  • Select your layout : horizontal or vertical.
  • Click Yes to show icon in the title.

13. Content Setting :

  • Click Content → Content.
  • You can select the Content Type : Saved Templates to display your content that you have created in saved templates Select Templates.
  • Click Add Item to add more content.

14. Wrapper Style (used to customize the wrapper style) :

  • Click Style → Wrapper.
  • Customize the padding, margin, radius, and border type here.

15. Tab Title Style (used to customize the tab title style) :

  • Click Style → Tab Title.
  • Customize the alignment, typography, padding, margin, radius, text, icon and background color.

16. Content Style (used to customize the content style) :

  • Click Style → Content.
  • Customize the typography, text color, margin, padding, radius, background color and border.

17. Don’t forget to click Publish to save the changes.

Share this Doc

How to Use & Customize Advanced Tabs Widget

Or copy link

CONTENTS