Tabs module
Tabs modules provide a compact display of many related assets. A tab module contains a title, description, and individual tabs. Each tab typically contains modules, each with its own title, description, and assets.
For a wire frame example of what this content type can look like on your site, see Tabs module design,
Creating tab modules
To create a tab module:
- In the header, click .
- From the Create list, select Tabs Module.
- Using the following table as a reference, complete the fields as needed.
- Complete your site's workflow and publish the tabs module.
- Main
- Overrides
- Styles
| Field | Description |
|---|---|
| Title | Enter a title for this asset. This title is visible to the visitors to your site. |
| Description | Enter a description that describes this asset. This description is visible to the visitors to your site. |
| Tabs | Add tabs to the tab module by doing the following: 1. Click Add Tab Item. 2. In the form for configuring a tab, enter an Internal Name and Title. 3. Click Add Module. 4. In the module picker, select one of the available modules, and configure it as required. Tip: You can use the module picker's search field to quickly find a specific module or style. 5. Repeat steps 1–4 to add more tabs to the tab module. |
| Call To Action | Select None, Internal or External. - None—No call to action button is displayed. - Internal—A call to action button is displayed that links to an internal asset. - External—A call to action button is displayed that links to an external URL. When setting up an internal or external call to action, you have the option to set how the link will behave. Select either Internal or External, then specify a target or, for internal links only, an anchor to which you link visitors. |
| Call To Action Button Text | Enter text appearing on the call-to-action button. This text is visible to the visitors to your site. |
The following illustration shows just one example of how Brightspot renders a tabs module.
| Field | Description |
|---|---|
| Anchor | Modify the anchor to something that would make sense when appearing in an Anchor field's drop-down menu on another asset. This allows you to directly link to this module in another asset. Being specific makes it easier to identify in a list of other anchors. |
Tab Styles
| Field | Description |
|---|---|
| Template | Select the template of this module from the list of options. Templates are visual presentation presets that differ depending on the type of module. |
| Preset | Select one of the following: - None—Applies styling from the site's theme. - Custom—Opens a form to customize the site's theme for this asset. - (Various)—Aside from None or Custom, there may be additional options in this list depending on the value selected in the Template field. If the selected template has presets, then those presets are able to be selected in this list and applied. For information about configuring template presets, see Creating a template preset. |
| Choose a Background Color | Enter the hexadecimal value of a background color for this module. For instance, entering #000888 provides a dark blue background. |
| Use Text Colors | Select the color to use for text. - Standard—Use the text color specified in the site's theme. - Inverse—Use the inverse of the text color specified in the site's theme. |
| Color Scheme | Select the color scheme to use for this page. - Standard—Use the text color specified in the site's theme. - Inverse—Use the inverse of the text color specified in the site's theme. |
| Header Text Alignment | Overrides the default alignment of the header as specified in your theme's CSS file. You can choose from Left, Center, or Right. |
| Module Padding Top | Overrides the default padding at the top of the module as specified in your theme's CSS file. You can choose from None, Small, Medium, or Large. |
| Module Padding Bottom | Overrides the default padding at the bottom of the module as specified in your theme's CSS file. You can choose from None, Small, Medium, or Large. |