The Tabbed Box component contains multiple content areas, where each can be viewed by clicking the respective tab at the top of the box - much like file folders or page markers in a book. To get started, click Add Content at the top of the website editor, then drag the component to a page of your site. Next, click on the component to open the options panel.
Managing Tabs
By default, the component will have three tabs to start with shown in a list in the options panel. To add more, click the Add button, and to remove one click the red X for the tab you wish to remove. You can rearrange the order by clicking the three vertical dots on a tab and dragging it to a new position in the list.
To edit an individual tab, click on it in the list. You can edit the text of the tab by updating the Label text option. You can also add content to the tab by clicking the Add Content button shown in the options panel. Alternatively, you can drag components directly to the tab in the component itself.
Design
The styling of the component will use your theme styling by default, however you can customize the look of the component by changing the Style option to custom. Once you do this, the following options become available:
- Tab Background - This is the background used for the tabs at the top of the component, and can be a color, gradient, image, or image with overlay.
- Active Tab Background - This is the background of the active tab, which helps visitors know which tab they are looking at. It has the same background options available for other tabs.
- Content Background - With this option you can control the background of the content area of all tabs. Similar to the tab background, you can choose a color, gradient, image, or image with overlay.
- Border - Use this option to add a border around the tabbed box. You can control the width, style, and color of the border.
Spacing
The Margin option found in this option group controls how much space there is around the tabbed box within the component. You can set this separately for different screen sizes by clicking the desktop/mobile icon.