Layout - Tabs

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

{width="600" modal="regular"}

Click the Tab 1 label to display the individual tab toolbox and choose the Settings ( {width="20"} ) icon.

Enter the Tab Name that you want to use as a label.

{width="600" modal="regular"}

If needed, enter the Minimum Height for the tab.

This value can be a number with any valid CSS unit (such as 100px, 50%, 50em, 100vh) or a calculation (such as 100vh - 237px).

Choose a Vertical Alignment setting to align any content containers that are added to the tab (Top, Center, or Bottom).

If needed, set the other options using the following sections as guidance:

• Background
• Advanced

In the upper-right corner, click Save to apply the settings and return to the Page Builder workspace.

Hover over the tabs container to display the toolbox and choose the Add ( {width="20"} ) icon.

Click in the Tab 2 label to display the cursor and enter you own label for the tab.

Click the second tab again on the stage and choose the Duplicate ( {width="20"} ) icon.

Click in the YourName Copy label to display the cursor and enter you own label for the third tab.

Click the tab that you want to move.

Select and drag the Move ( {width="20"} ) icon, which appears just before the tab label text, to a new position within the tab set.

Click the tab where you want to add the content.

In the Page Builder panel, expand Elements and drag a Text placeholder to the tab.

Enter or paste some text in the editor and use the editor toolbar to format it as needed.

See Elements - Text for more information about working with the tex content type.

{width="500" modal="regular"}

In the upper-right corner, click Save.

Hover over an individual tab to display the toolbox and choose the Settings ( {width="20"} ) icon.

If needed, change any of the basic settings for the tab:

• Tab Name - Enter revised text for the tab label. You can also modify the label directly on the stage.

• Minimum Height - Enter as pixels if you want to override the automatic height. For example, you might set the minimum height to match the height of a background image to ensure that the full image is visible.

• Vertical Alignment - Choose the vertical position of content containers that are added to the tab.

Change the other settings as needed using the following sections for details.

When complete, click Save to apply the settings and return to the Page Builder workspace.

Hover over the top border of the tab set container to display the toolbox and choose the Settings ( {width="20"} ) icon.

If needed, change the Default Active Tab.

Choose the tab in the set that you want to be active when the page is loaded.

Enter the Minimum Height, in pixels, if you want to override the automatic height for the tab set.

To position the navigation tabs along the top of the tab set, choose the Tab Navigation Alignment (Left, Center, or Right).

{width="500" modal="regular"}

Set the Advanced options for the tab set:

• To control the positioning of the tab set within the parent container, choose an Alignment:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Option	Description
  Default	Applies the alignment default setting that is specified in the style sheet of the current theme.
  Left	Aligns the tab set along the left border of the parent container, with allowance for any padding that is specified.
  Center	Aligns the tab set in the center of the parent container, with allowance for any padding that is specified.
  Right	Aligns the tab set along the right border of the parent container, with allowance for any padding that is specified.

• Set the Border style applied to all four sides of the tabs container:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  Option	Description
  Default	Applies the default border style that is specified by the associated style sheet.
  None	Does not provide any visible indication of the container borders.
  Dotted	The container border appears as a dotted line.
  Dashed	The container border appears as a dashed line.
  Solid	The container border appears as a solid line.
  Double	The container border appears as a double line.
  Groove	The container border appears as a grooved line.
  Ridge	The container border appears as a ridged line.
  Inset	The container border appears as an inset line.
  Outset	The container border appears as an outset line.

• If you set a border style other than None, complete the border display options:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Border Color	Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
  Border Width	Enter the number of pixels for the border line width.
  Border Radius	Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

• (Optional) Specify the names of CSS classes from the current style sheet to apply to the tabs container.

  Separate multiple class names with a space.

• Enter values, in pixels, for the Margins and Padding to determine the outer margins and inner padding of the tabs container.

  Enter the corresponding values in the tabs container diagram.

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Container area	Description
  Margins	The amount of blank space that is applied to the outside edge of all sides of the container. Options: Top / Right / Bottom / Left
  Padding	The amount of blank space that is applied to the inside edge of all sides of the container. Options: Top / Right / Bottom / Left

When complete, click Save to apply the settings and return to the Page Builder workspace.