Add and Manage Tabbed Widgets on a Page

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.

Who can use this feature?

System Administrator | Owner | Publisher | Author

Add the Tabbed Widget to a Page

Important Note

It is recommended to use <h2> header tags in the headers of each tab to comply with ADA and site accessibility.

1. Sign in to your site.

2. Navigate to the page where you would like the tabs located.

3. Make sure that Live Edit Is On:

   

4. Select the Widgets tab:

   

5. Drag and drop the Tabbed widget to your page:

   

   Note:

   A tabbed widget cannot be placed inside another tabbed widget.

6. Enter a Name for your first tab and click Next:

   

7. Drag and drop a widget to your Tabbed Widget:

   

   Note:

   You can only add one widget per tab.

8. Click the + icon to add a new tab if needed:

   

   Note:

   Clicking the plus icon is optional and can be used as needed. You can create multiple tabs. Repeat step 7 for each new tab you create.

9. Click the Save button:

   

10. 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 a tab.

Important Note

It is recommended to use <h2> header tags in the headers of each tab to comply with ADA and site accessibility.

1. Sign in to your site.

2. Navigate to the page where your tabs are located, or create a Tabbed Widget.

3. Make sure that Live Edit is On:

   

4. 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.

5. Edit the appropriate widget:

   

6. Click the Save button:

   

Display Tabs Vertically or Horizontally

This article will show you how to change the direction of the tabs in the Tabbed widget.

1. Sign in to your site.

2. Navigate to the page where your tabs are located or create a Tabbed Widget.

3. Make sure that Live Edit is On:

   

4. Hover over the widget and select the Tabbed Widget Options icon:

   

5. Select an option under the Position dropdown menu:

   

   • Top: Align tabs at the top of the widget

     Note:

     If you select the Top position, select an Alignment from the dropdown menu:

     

     • 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

   • Left: Tabs display on the left side of the widget

   • Right: Tabs display on the right side of the widget

     Note:

     If you selected the Left or Right position, edit the Width of the tabs:

     

   • 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.

6. Click the X button to save and close the Tabbed Widget Options window:

   

7. Click the Save button:

   

Rename a Tab

1. Sign in to your site.

2. Navigate to the page where your tabs are located.

3. Make sure Live Edit is ON:

   

4. Hover over the widget and select the Tabbed Widget Options icon:

   

5. Change the tab name(s):

   

6. Click the X to exit the Widget options window:

   

7. Click the Save button:

   

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 Note:

In vertically arranged Tabbed widgets, the removal icon ("X") for the Tabbed widget may overlap with the removal icon for the widget inside the tab. This makes it difficult to remove the widget from the tab. To fix this, change the Option Set so the tabs display horizontally. This will prevent the removal icons from overlapping.

1. Sign in to your site.

2. Navigate to the page your Tabbed Widget is on:

3. Make sure that Live Edit Is On:

   

4. Locate the tab you want to delete:

   

5. Hover over the widget within the tab and click the X to remove the widget:

   

6. Click OK on the pop-up that asks Are you sure you want to delete this Widget?:

   

7. Hover over the blue "Drag Widget Here" area. This area appears once the widget in the tab has been removed. Click the X to remove the area, which will also remove the tab:

   

8. Click the Save button: