The Tab Widget

Add tabs to your page to redirect you to other content in the same page

Ariane Ramirez avatar
Written by Ariane Ramirez
Updated over a week ago

Tabs are perfect for displaying different subjects that you want to show on the same page. This feature will allow your page visitors to move from one subject to another by clicking one of the tab buttons.

Add a Tab Widget to a Page

Click the Add [+] Button to slide out the Page Elements menu. Click the Tabs element from the menu, then drag it to a section on the page.

Property Settings Menu

Click the [settings icon] to load the property settings of the Navigation object.

Tab Builder

  • Add a tab

  • Delete a tab

  • Change the order of the tabs

  • Edit the tab label

  • Add a description to the tab

  • Add an icon to the tab

Tab Color

You can choose the colors of the tab on its normal state, when hovered and if it's an active tab

Typography

You can choose a font style, change the size and color of the text for all the tabs

Position & Padding

  • Position - You can move the object’s position upward or downward.

  • Padding - You can control the padding of the tabs

Tab Spacing

Use the spacing dials to adjust the space between tabs

Tab Size

Use the width dials to resize the width of the tab widget

Tab Alignment

  • Container - set the alignment of the tab widget

  • Tabs - set the alignment of the tabs in side the tab widget

Tab Display Options

  • Tab Availability - show or hide all the tabs in the tab widget

  • Tab Position - set whether the tabs will show up on top, bottom, left side, or right side of the content

Tab Borders

You can adjust the following tab border setting for each state (normal, hovered, active) :

  • Border Style (solid or dashed)

  • Border Color

  • Border Thickness

  • Rounded Corners

Tab Action (When Clicked)

  • Do Nothing - when the tab is clicked, it will not do any action

  • Switch tabs - when the tab is clicked, it will show the content of that tab

Other Element Options

Click the dropdown arrow next to the settings icon of the element or right click on the element to show the the other options.

  • Cut - the element will be removed from the page and can be pasted in another part of the page or on a different page

  • Copy - the element will be copied and can be pasted in another part of the page or on a different page

  • Paste Below - a copied or cut element will be pasted below the selected element

  • Switch to Tab - allows you to switch to a tab you want to view

  • Add a New Tab - allows you to add a new tab in the tab element

  • Rename - the element will be renamed instead of having the default element label

  • Duplicate - the element will be duplicated and placed below the selected element

  • Delete - the element will be deleted from the page

  • Tabs Settings - it will open the settings menu on the left side of the screen

  • Help with Tabs - it will open up a new tab and redirect to a help article about the element


Did this answer your question?