DocumentationCommercePage Builder

Layout - Tabs

Last update: Thu Sep 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • User

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

w-500 modal-image
Set of tabs
NOTE
If you are making significant changes to Page Builder content, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Toolboxes

When you are working with the Tabs content type, you add and edit individual tabs and the tabs container that holds one or more tabs. Each tab has its own toolbox that you use to design tabs on the Page Builder stage.

Individual tab toolbox

w-500 modal-image
Tab toolbox
Tool
Icon
Description
Move
img-md
w-25
Move icon
This control next to the tab label is used to move the individual tab to another position in the tab set.
Settings
img-md
w-25
Settings icon
Opens the Edit Tabs page, where you can change the properties of the individual tab.
Duplicate
img-md
w-25
Duplicate icon
Makes a copy of the tab.
Remove
img-md
w-25
Remove icon
Deletes the tab from the tab set.

Tabs container toolbox

w-500 modal-image
Tab container toolbox
Tool
Icon
Description
Move
img-md
w-25
Move icon
Moves the set of tabs to another position on the grid in the parent container.
Add
img-md
w-25
Add icon
Adds a 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
img-md
w-25
Settings icon
Opens the Edit Tab page, where you can change the properties of the container.
Hide
img-md
w-25
Hide icon
Hides the tab container.
Show
img-md
w-25
Show icon
Shows the hidden tab container.
Duplicate
img-md
w-25
Duplicate icon
Makes a copy of the current tab.
Remove
img-md
w-25
Remove icon
Deletes the current tab set from the stage.
NOTE
Hidden elements are stored in the database and invisible to customers. However, these elements are visible to search engines and other bots that crawl your site. They are also returned as part of the content if requested through an API call with an attribute of invisibility, unless you remove them from the stage.

Add an individual tab

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

    img-md
    w-600 modal-image
    Dragging tabs to a row

  2. Click the Tab 1 label to display the individual tab toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+) icon.

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

    img-md
    w-600 modal-image
    Entering the tab name

  4. 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).

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

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

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

Add a set of tabs

The following steps start with an individual tab and create a set of three tabs within a tabs container. If you do not already have an individual tab, follow the previous instructions to add a single tab to the stage.

  1. Hover over the tabs container to display the toolbox and choose the Add (+---------------------+ | img-md | +=====================+ | w-20 | +---------------------+ | Add icon | +---------------------+) icon.

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

  3. Click the second tab again on the stage and choose the Duplicate (+---------------------------+ | img-md | +===========================+ | w-20 | +---------------------------+ | Duplicate icon | +---------------------------+) icon.

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

w-600 modal-image
Matching set of tabs with toolbox

Move a tab within the set

  1. Click the tab that you want to move.

  2. Select and drag the Move (+----------------------+ | img-md | +======================+ | w-20 | +----------------------+ | Move icon | +----------------------+) icon, which appears just before the tab label text, to a new position within the tab set.

Add content to a tab

You can any content type to a tab just as you can to a row. Use the following steps for adding a text content type as an example.

  1. Click the tab where you want to add the content.

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

  3. 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.

    img-md
    w-500 modal-image
    Editing text content added on the tab

  4. In the upper-right corner, click Save.

Change individual tab settings

  1. Hover over an individual tab to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+) icon.

  2. 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.

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

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

Background

  • Background Color - Specify the background color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value. This setting determines the background color of the row. You can also adjust the opacity of the color.

    img-md
    w-200
    No color (default)

    You can enter a value in three ways:

    • A predefined color name, such as White

    • The hexadecimal color value for the color, such as #ffffff

    • The rgba value for the color, with opacity percent, such as rgba(255, 255, 255, 0.75)

    If you want to choose a color, click the swatch to the left of the No Color box.

    img-md
    w-600 modal-image
    Choosing a color swatch

    If you click the color box to open the color picker again, the box below the slider shows the current red, green, blue, and alpha values (rgba). The last number indicates the current opacity percentage as a decimal. You can use the slider to adjust the opacity, or enter the desired decimal value.

    img-md
    w-600 modal-image
    Setting opacity
    note note
    NOTE
    Page Builder also supports a transparency layer, or alpha channel, in background images that can be used to create backgrounds with varying degrees of opacity.

  • Background Image - If needed, use the provided tools to choose a background image to apply to the tab:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Tool Description
    Upload Uploads an image file from your local computer to the gallery and then applies it as the background image for the tab.
    Select from Gallery Prompts you to choose an existing image from the gallery as the background image for the tab.
    img-md
    w-25
    Camera icon
    		Allows you to either drag the image to the camera tile or browse to the image in your local file system.

  • Background Mobile Image - If needed, use the same tools to choose a different background image to be used for display on mobile devices.

  • Background Size - Choose how the background image is scaled in relation to the width of the tab:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Description
    Cover The background image covers the full width of the tab.
    Contain The background image is limited to the width of the tab area.
    Auto Applies the size from the current style sheet.

  • Background Position - Choose how the background image is anchored in relation to the tab: Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right

  • Background Attachment - Choose the attachment type to determine how the background image moves in relation to the scrolling page:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Description
    Scroll The attached background image is synchronized to move down as the page scrolls.
    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 - Set to Yes to repeat the background image to fill the available space in the tab.

Advanced

  • To control the horizontal alignment of content containers that are added to the tab, 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 content containers along the left border of the tab, with allowance for any padding that is specified.
    Center Aligns the content container in the center of the tab, with allowance for any padding that is specified.
    Right Aligns the content container along the right border of the tab, with allowance for any padding that is specified.

  • Set the Border style that is applied to all four sides of the tab 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:

    img-md
    w-600 modal-image
    Border Color
    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.

    The row in the following example has a border radius of 15.

    img-md
    w-500
    Row with border radius of 15

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

    Separate multiple class names with a space.

  • Enter values, in pixels, for the Margins and Padding to specify the outer margins and inner padding of the column.

    Enter each corresponding value in the tab 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

Change tab set settings

  1. Hover over the top border of the tab set container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+) icon.

  2. If needed, change the Default Active Tab.

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

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

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

    img-md
    w-500 modal-image
    Right-aligned navigation tabs

  5. 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

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

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d