Organize content on a page into tabbed panels that a visitor can easily navigate through with a click.
You can use the Tabs or Tab widget to add a tabbed panel to your web page. When a tab is clicked, the content refreshes with content related to that tab without reloading the entire web page.
How do I add this widget to a page?
- Click Edit Page
- Click either + Content or the Settings icon (down-facing caret) which will be located to the right of Edit where you will need to select either Insert above or Insert below
- Choose the Tabs widget
- Click on the green + Item button in the upper-right hand corner and enter the title of the tab that you would like to be displayed, in the Tab Title field.
- Repeat the previous step until you have your complete list.
- Before clicking the green Create button there is an additional field that can be found in the Settings tab. The Color field allows you to customize the widget by picking a color from the following; None, Default, Primary, Secondary, Tertiary, Accent, and Info.
- When you are finished, click on the green Create button and your Tabs widget will show up on the page.
- Now click on the tab that you want to add items to followed by the green + icon where you can add the necessary widgets. Use can use the Layout widget to create a multi-column tab and the Text widget to add a text area to a tab.
- Repeat the previous step until you have completed all of the tabs.
- Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.
- How do I hide/show a tab?
Hiding a tab from being displayed by a Tabs widget can be done quickly. Edit the widget and click on the switch to the right of the tab title that you would like to hide, switching it to gray (hidden), and finally Update. To show an item that has been hidden, click on the switch to the right of the tab title that you would like to show switching it to green (visible), and finally Update. - How do I change the order of the tabs?
To change the order of how the tabs are being displayed by the Tabs widget. Edit the widget and click on the vertical directional arrow icon to the right of the tab title you would like to move, choose either Move Up or Move Down and finally, Update when you are done. - How do I remove a tab?
To remove a tab from being displayed by the Tabs widget. Edit the widget and click on the trash icon to the right of the tab title you would like to remove followed by Update.
