Advance Tab

Step-by-Step Tutorial on Using the Advance Tab Widget of Zyre Addon

With Zyre Addon’s Advance Tab Widget, you can add sleek collapsible sections that don’t just look good—they make your content more interactive. Whether you’re creating a FAQ page, product details, or knowledge base, this widget transforms static text into clickable content blocks that encourage user engagement and keep readers scrolling longer.

Learn How To Use Advance Tab Widget:

Exploring the Features of Advance Tab Widget

Step 1: Drag the widget

From the left panel, search or choose the Advance Tab of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

General:

  • Advance Tab Style : You can choose a predefined style from here
  • Tabs: Manage and customize tab items.
  • Contents : Set individual toggle contents.
    • Title : Set the toggle’s title text.
    • Type : Choose between different content display types.
    • Plain/HTML Text : Add content either as plain text or with HTML formatting.
    • Icon : Select an icon to display alongside the title.
    • Icon Position : Define the icon appears left or right the title.
    • Active : Enable option to have the toggle opened by default.
  • Content Display on Hover: Enable to display tab content when hovering instead of clicking.
  • Layout: Choose the layout structure for the tabs.
  • Tabs Nav Position: Set the position of the tab navigation area.
  • Space Between: Control spacing between tab items.
  • Tab Indicator: Enable and customize the active tab indicator.
  • Enable Custom Indicator: Allow custom styling for the tab indicator.

Step 3: Style tab

In the Style section, you can customize the Tabs Nav, Tabs Nav Inner, Tab Item, Tab Item Image, Tab Item Icon, Content— but make sure you have added them first.

Tabs Nav:

  • Background Type : Set background colors or gradients. Explore full background settings here.
  • Border Type : Define border style, width and color.
  • Box Shadow : Apply drop shadow.
  • Border Radius : Apply rounded corners to the element.
  • Padding : Add inner spacing inside the tabs navigation area.

Tabs Nav Inner:

  • Width: Set the width of the inner tabs container.
  • Tabs Direction: Choose the direction of the tab items (horizontal or vertical).
  • Vertical Align: Adjust vertical alignment of the tab items.
  • Space Between Tabs: Control spacing between individual tabs.
  • Background Type: Select the background style for the inner tabs area.
  • Border Type: Customize border style, width, and color.
  • Box Shadow: Apply shadow effects to the inner tabs container.
  • Border Radius: Adjust the roundness of the container corners.
  • Padding: Control inner spacing inside the container.
  • Margin: Adjust outer spacing around the container.

Tab Item:

  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Subtitle Typography: Style the subtitle text of the tab item.
  • Width: Set the width of the tab item.
  • Height: Define the height of the tab item.
  • Padding: Adjust inner spacing inside the tab item.
  • Border Type: Customize border style, width, and color.
  • Border Radius: Adjust the roundness of the tab item corners.
  • Direction of Elements: Set the layout direction of tab elements.
  • Space Between: Control spacing between elements inside the tab item.
  • Direction Titles: Define the direction of title and subtitle arrangement.
  • Align Titles: Adjust alignment of titles inside the tab item.
  • Text Align: Set text alignment for the tab content.
  • Title Order: Control the display order of title and subtitle.
  • Normal, Hover & Active States:
    • Text Color: Set title color for each state.
    • Subtitle Color: Customize subtitle color for each state.
    • Background Type: Define background style for each state.
    • Color: Adjust additional color settings for each state.
    • Box Shadow: Apply shadow effects for normal, hover, and active states.

Tab Item Image:

  • Width: Set the width of the tab item image.
  • Height: Define the height of the image.
  • Object Fit: Control how the image fits within its container.
  • Border Radius: Adjust the roundness of the image corners.
  • Padding: Add inner spacing around the image.
  • Normal, Hover & Active States:
    • Background Color: Set the background color for each state.
    • Box Shadow: Apply shadow effects for normal, hover, and active states.
    • Opacity: Control image transparency for each state.

Tab Item Icon:

  • Icon Size: Adjust the size of the tab item icon.
  • Width: Set the width of the icon container.
  • Height: Define the height of the icon container.
  • Border Radius: Adjust the roundness of the icon container corners.
  • Normal, Hover & Active States:
    • Color: Set the icon color for each state.
    • Background Color: Define the background color for each state.

Content:

  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Text Color : Set color of the text.
  • Background Type : Choose background type with color options. Explore full background settings here.
  • Border Type : Choose border style, width, and color.
  • Box Shadow : Add drop shadow effects.
  • Border Radius : Control corner roundness.
  • Padding : Control inner spacing of the content.
  • Toggle Alignment : Set the text alignment (left, center, right)

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Advance Tab come to life on your webpage!

You’re fully set up!

Share: