Magento Commerce, 2.3.x

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
  • Tab Set Toolbox

    TOOL

    Icon

    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:

    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.

    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:

    Upload

    Uploads an image file from your local computer to the gallery, and then applies it as the tab background image.

    Select from Gallery

    Prompts 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:

    Cover

    The background image covers the full width of the tab.

    Contain

    The background image is limited to the width of the content area.

    Auto

    Applies 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:

    Scroll

    The 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:

    Yes

    The background image is repeated to fill the available space.

    No

    Uses 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:

    Default

    Applies the default setting that is specified in the style sheet of the current theme.

    Left

    Aligns content containers along the left border of the tab, with allowance for any padding that is specified.

    Center

    Aligns content containers in the center of the tab, with allowance for any padding that is specified.

    Right

    Aligns 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:

    Default

    Applies the default border style that is specified by the associated style sheet.

    None

    Provides no any visible indication of borders.

    Dotted

    The tab border appears as a dotted line.

    Dashed

    The tab border appears as a dashed line.

    Solid

    The tab border appears as a solid line.

    Double

    The tab border appears as a double line.

    Groove

    The tab border appears as a grooved line.

    Ridge

    The tab border appears as a ridged line.

    Inset

    The container border appears as an inset line.

    Outset

    The 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 which 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:

    Margins

    The amount of blank space, in pixels, that is applied to the outside edge of all borders of the tab. Options: Top, Right, Bottom, Left.

    Padding

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

    Left

    Aligns the tabs along the left margin of the container.

    Center

    Aligns the tabs in the center of the container.

    Right

    Aligns 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:

    Default

    Applies the default setting that is specified in the style sheet of the current theme.

    Left

    Aligns content containers along the left border of the tab, with allowance for any padding that is specified.

    Center

    Aligns content containers in the center of the tab, with allowance for any padding that is specified.

    Right

    Aligns 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:

    Default

    Applies the default border style that is specified by the associated style sheet.

    None

    Provides no any visible indication of borders.

    Dotted

    The tab border appears as a dotted line.

    Dashed

    The tab border appears as a dashed line.

    Solid

    The tab border appears as a solid line.

    Double

    The tab border appears as a double line.

    Groove

    The tab border appears as a grooved line.

    Ridge

    The tab border appears as a ridged line.

    Inset

    The container border appears as an inset line.

    Outset

    The 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 which 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:

    Margins

    The amount of blank space, in pixels, that is applied to the outside edge of all borders of the tab. Options: Top, Right, Bottom, Left.

    Padding

    The amount of blank space, in pixels, that is applied to the inside edge of all borders of the tab. Options: Top, Right, Bottom, Left.