The Tabbed Widget provides a way to create a unique look for your page. You can create tabs to separate the widgets for a specific topic in one central location. It also allows your users to click and view the content.
Article Navigation
Add the Tabbed Widget to a Page
Instructions
- Sign in to your site and navigate to the page where you would like tabs located
- Ensure that Live Edit Is On
- Select the Widgets tab
- Drag and drop the Tabbed widget to your page
Note: A tabbed widget cannot be placed inside another tabbed widget. - Enter a Name for your first tab and click Next
- Drag and drop a widget to your Tabbed Widget
Note: You can only add one widget per tab. - Click the + icon to add a new tab
- Repeat steps 4 to 7 for each new tab you create
- Click Save
- View your new tabbed widget
Edit Content in a Tabbed Widget
Only one widget can be added to each tab. Additionally, a tabbed widget cannot be placed inside of a tab.
Instructions
- Sign in to your site and navigate to the page where your tabs are located or create a Tabbed Widget
- Ensure that Live Edit is On
- Select the tab you would like to edit
Note: To change tabs, you must click on the area around the tab name. Clicking on the text will select the text for editing. -
Edit the appropriate widget
- Click Save
Display Tabs Vertically or Horizontally
This article will show you how to change the direction of the tabs in the Tabbed Widget.
Instructions
- Sign in to your site and navigate to the page where your tabs are located or create a Tabbed Widget
-
Ensure that Live Edit is On
- Hover over the widget and select the Tabbed Widget Options icon
- Select an option under the Position drop-down
- Top: Align tabs at the top of the widget
- Left: Tabs display on the left side of the widget
- Right: Tabs display on the right side of the widget
-
Stacked Accordion: Tabs display a vertical list of expanding accordions
Note: It is possible to have multiple tabs open at once, which cannot be done with any Position setting.
- If you selected the Top position, select an Alignment from the drop-down
- Equal Widths: Makes the tabs the same width
- Equal spacing: Spaces tabs according to the length of the tab name
- Left: Align tab names to the left
- Center: Align tab names to the center
- Right: Align tab names to the right
- If you selected the Left or Right position, edit the Width of the tabs
- Click the X in the top right corner, edits will automatically save
- Select the Save button at the top of the page
Rename a Tab
- Log in to your site and navigate to the page where your tabs are located
- Turn on Live Edit
- Hover your mouse over your tabbed widget and select the Options icon
- Change the tab name(s)
- Select X to exit the Widget options window
- Scroll to the top and select Save
Delete a Tab in the Tabbed Widget
When you remove a tab, you must first remove the widget within the tab and then you can remove the tab itself.
Important Notes
In vertically arranged Tabbed widgets, the Tabbed widget's removal icon ("X") may overlap the removal icon of the widget within the tab. This makes it difficult to remove the widget from the tab. In these cases, the Option set will need to be changed so that the tabs display horizontally in the Tabbed widget and the removal icons do not overlap.
Instructions
- Log in to your site and navigate to the page your Tabbed widget is on
- Ensure that Live Edit Is On
- Select the tab you want to delete
- Hover over the widget within the tab and click the X to remove the widget
- Reply OK to the pop-up that asks Are you sure you want to delete this widget?
- Hover over the blue Drag widget here area, visible once the widget in the tab has been removed, and click the X to remove the area, which will then remove the tab
- Click Save
Feedback About the Article
Let us know what was helpful or not helpful about the article below.3 comments
It would be helpful if at the end of this help article you showed an example of a completed tabbed widget with multiple tabs, so the user could know what to expect the outcome to be when the widget is used.
Most of our users don't insert a calendar under a tabbed widget. They use them for a regular page. I agree with Jonathan, that a better example could be used with the the widget.
Thank you for the feedback! We have updated the example to include more applicable widget options.
Please sign in to leave a comment.