Tabs

Use the Tabs content type to add a set of tabs to the stage. When the Tabs placeholder is dragged from the panel to the stage, a single default tab initially appears. You can add more tabs as needed to create a full set. The width of the tab set is determined by the width of its parent container and padding settings.

Set of Tabs

Step 1: Add a Set of Tabs

  1. In the Page Builder panel under Layout, drag the Tabs placeholder to a row or column on the stage.

    Drag Tabs to Row

  2. Click the “Tab 1” label. In the toolbox, choose Settings ( ). Then, do the following:

    Tab 1 Toolbox

    • In the General section, enter the Tab Name that you want to use as a label.

      Tab Name

    • In the Background section, choose a Background Color. For this example, we entered the hexadecimal value #ffdd16.

    • Scroll down to the Advanced section, and make the following settings:

      SETTING

      Value

      Border: Solid
      Border Color: #c1c1c1
      Border Width: 1 px
      Border Radius: 20 px
    • Scroll up to the top of the page. Then in the upper-right corner, tap Save.

      The tab now has a yellow background and curved corners.

      Tab One with Settings

    • To add a tab with the same settings, return to the toolbox and choose Duplicate ( ). Then, repeat this step to add a third tab.

    • To update the labels for the other tabs, select each label. Then, type the text that you want to appear on the label.

      Tab labels can be updated either directly from the stage, or by changing the Tab Name setting.

      Matching Set of Tabs with Toolbox

  3. To open the main Tabs toolbox, point to the center top of the stage, and move the pointer down until the toolbox appears. Then, choose Settings ( ), and do the following:

    • In the General section, set Tab Navigation Alignment to “Right.”

      Tab Navigation Alignment

    • In the upper-right corner, tap Save to return to the Page Builder workspace.

      The navigation tabs are now aligned on the right.

      Right-Aligned Navigation Tabs

Step 2: Add Content

  1. In the Page Builder panel, expand the Elements section.

    • Click the first tab. Then in the Page Builder panel, drag a Text placeholder to the tab.

    • Type or paste some text in the editor. Then, use the editor toolbar to format it as needed.

      Add Text

  2. In the upper-right corner, tap Save.

To change individual tab settings:

  1. Hover over an individual tab. Then in the toolbox, choose Settings ( ).

    Individual Tab Toolbox

    Tab Toolbox Options

  2. Change the settings as needed using the field descriptions at the end of this topic for reference.

  3. When complete, tap Save in the upper-right corner to close the Edit Tab page. Then again in the upper-right corner, tap Save.

To change tab set settings:

  1. Hover over the top border of the tab set container. Then in the toolbox, choose Settings ( ).

    Individual Tab Toolbox

  2. Update the settings as needed, using the field descriptions at the end of this page for reference.

  3. When complete, tap Save in the upper-right corner to close the Edit Tabs page. Then again in the upper-right corner, tap Save.

Tab Set Toolbox

Setting Description
Move Moves the set of tabs to another position on the grid in the parent container.
Add Adds a new tab to the tab set.
(label) TABS Identifies the current container as a tab set. Hover over the top border of the container to see the toolbox.
Settings Opens the Edit Tab page, where you can change the properties of the container.
Hide Hides the tab container.
Show Shows the hidden tab container.
Duplicate Makes a duplicate copy of the current tab.
Remove Deletes the current tab set from the stage.

Individual Tab Toolbox

TOOL Icon Description
Move This control next to the tab label is used to move the individual tab to another position in the tab set.
Settings Opens the Edit Tabs page, where you can change the properties of the individual tab.
Duplicate Makes a duplicate copy of the tab.
Remove Deletes the tab from the tab set.

Individual Tab Settings

Setting Description
Background
Background Color Determines the background color and opacity of the tab.
Background Image Determines the location of the background image, and applies the image to the tab. Options:
UploadUploads an image file from your local computer to the gallery, and then applies it as the background image for the tab.
Select from GalleryPrompts you to choose an existing image from the gallery as the background image for the tab.
Allows you to either drag the image to the camera tile, or browse to the image in your local file system.
Background Mobile Image Determines the location of the background image that is to be used for mobile devices, and applies the image to the tab. If left blank, the standard desktop background image is used. Options:
UploadUploads an image file from your local computer to the gallery, and then applies it as the tab background image.
Select from GalleryPrompts you to choose an existing image from the gallery as the tab background image.
Allows you to either drag the image to the camera tile, or browse to the image in your local file system.
Background Size Determines how the background image is scaled in relation to the width of the tab. Options:
CoverThe background image covers the full width of the tab.
ContainThe background image is limited to the width of the content area.
AutoApplies the default background size that is specified in the style sheet of the current theme.
Background Position Determines the anchor point of the image in relation to the tab. Options: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, Bottom Right
Background Attachment Determines how the background image moves in relation to scrolling. Options:
ScrollThe background image is synchronized to move down as the container scrolls down the page.
Fixed(Not available for mobile) The background image does not move as the container scrolls over the image, and is fixed at the specified background position.
Background Repeat Determines if the background image is repeated. Options:
YesThe background image is repeated to fill the available space.
NoUses only a single instance of the background image.
Layout
Minimum Height Determines the minimum height of the tab. For example, you might set the minimum height to match the height of a background image.
Vertical Alignment Determines the vertical position of content containers that are added to the tab.
Advanced
Alignment Determines the horizontal alignment of content containers that are added to a tab. Options:
DefaultApplies the default setting that is specified in the style sheet of the current theme.
LeftAligns content containers along the left border of the tab, with allowance for any padding that is specified.
CenterAligns content containers in the center of the tab, with allowance for any padding that is specified.
RightAligns content containers along the right border of the tab, with allowance for any padding that is specified.
Border Determines the border style that is applied to all sides of the tab. Options:
DefaultApplies the default border style that is specified by the associated style sheet.
NoneProvides no any visible indication of borders.
DottedThe tab border appears as a dotted line.
DashedThe tab border appears as a dashed line.
SolidThe tab border appears as a solid line.
DoubleThe tab border appears as a double line.
GrooveThe tab border appears as a grooved line.
RidgeThe tab border appears as a ridged line.
InsetThe container border appears as an inset line.
OutsetThe tab border appears as an outset line.
Border Color Determines the color of the container border. You can specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border Width Determines the width in pixels of the tab border.
Border Radius Specifies the size of the radius that rounds each corner of the border.
CSS Classes Specifies the names of CSS classes from the current style sheet that are to be applied to the tabs. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the tab. Enter the corresponding values in the container diagram. Options:
MarginsThe amount of blank space, in pixels, that is applied to the outside edge of all borders of the tab. Options: Top, Right, Bottom, Left.
PaddingThe amount of blank space, in pixels, that is applied to the inside edge of all borders of the tab. Options: Top, Right, Bottom, Left

Tab Set Settings

Setting Description
General
Default Active Tab Determines which tab is active when the page loads. Options: (All current tabs by label.)
Minimum Height Specifies the minimum height of the tab set in pixels.
Tab Navigation Alignment Determines the alignment of the navigation tabs along the top of the tab set.
LeftAligns the tabs along the left margin of the container.
CenterAligns the tabs in the center of the container.
RightAligns the tabs along the right margin of the container.
Advanced
Alignment Determines the horizontal alignment of content containers that are added to a tab. Options:
DefaultApplies the default setting that is specified in the style sheet of the current theme.
LeftAligns content containers along the left border of the tab, with allowance for any padding that is specified.
CenterAligns content containers in the center of the tab, with allowance for any padding that is specified.
RightAligns content containers along the right border of the tab, with allowance for any padding that is specified.
Border Determines the border style that is applied to all sides of the tab. Options:
DefaultApplies the default border style that is specified by the associated style sheet.
NoneProvides no any visible indication of borders.
DottedThe tab border appears as a dotted line.
DashedThe tab border appears as a dashed line.
SolidThe tab border appears as a solid line.
DoubleThe tab border appears as a double line.
GrooveThe tab border appears as a grooved line.
RidgeThe tab border appears as a ridged line.
InsetThe container border appears as an inset line.
OutsetThe tab border appears as an outset line.
Border Color Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border Width Determines the width in pixels of the tab border.
Border Radius Specifies the size of the radius that rounds each corner of the border.
CSS Classes Specifies the names of CSS classes from the current style sheet that apply to the tabs. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the tab. Enter the corresponding values in the container diagram. Options:
MarginsThe amount of blank space, in pixels, that is applied to the outside edge of all borders of the tab. Options: Top, Right, Bottom, Left
PaddingThe amount of blank space, in pixels, that is applied to the inside edge of all borders of the tab. Options: Top, Right, Bottom, Left