Tabbed Widget: Tab Position and Alignment Options

This article will show you how to change the alignment and display of your tabs in a Tabbed Widget.

New UI Instructions

1. Sign in to your website solution
2. Ensure that you are using the New UI (click the Try New UI button if you are not) and navigate to your page:
   
3. Add a Tabbed Widget to your page, or hover over an existing Tabbed Widget and click the Tabbed Widget Options handle:
   
4. Click to expand the Position dropdown menu and select an option:
   
   
   • 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
5. If you selected the Top position, click to expand the Alignment dropdown and select an option:
   
   
   • Equal Widths: Makes the tabs the same width
   • Equal spacing: Spaces tabs according to the length of the tab name
     
     Note: Equal spacing is the default option.
   • Left: Aligns tab names to the left
   • Center: Align tab names to the center
   • Right: Align tab names to the right
6. If you selected the Left or Right position, you may also edit the Width of the tabs:
   
7. Click the Close (X) button to exit the Tabbed Widget Options dialog box:
   
   Note: The widget option edits that you have made will automatically save.
   
8. Finally, click the Save Changes button to save the page:
   

Go to Article Navigation

Old UI Instructions

1. Sign in to your website solution
2. Ensure that the Live Edit state is toggled to ON (simply click the button to change the state) and navigate to your page:
   
3. Add a Tabbed Widget to your page, or hover over an existing Tabbed Widget and click the Tabbed Widget Options handle:
   
4. Click to expand the Position dropdown menu and select an option:
   
   
   • 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
5. If you selected the Top position, click to expand the Alignment dropdown and select an option:
   
   
   • Equal Widths: Makes the tabs the same width
   • Equal spacing: Spaces tabs according to the length of the tab name
     
     Note: Equal spacing is the default option.
   • Left: Aligns tab names to the left
   • Center: Align tab names to the center
   • Right: Align tab names to the right
6. If you selected the Left or Right position, you may also edit the Width of the tabs:
   
7. Click the Close (X) button to exit the Tabbed Widget Options dialog box:
   
   Note: The widget option edits that you have made will automatically save.
   
8. Select a saving option:
   
   • Save: Will save your work without publishing
   • Save and Publish: Will save and publish (Draft Pages only)
   • Save as Copy: Will save as a unique draft/version
   • Cancel: Will cancel the changes made

Go to Article Navigation