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.
|1.||In the Page Builder panel under Layout, drag the Tabs placeholder to a row or column on the stage.|
|2.||Click the “Tab 1” label. In the toolbox, choose Settings ( ). Then, do the following:|
|a.||In the General section, enter the Tab Name that you want to use as a label.|
|b.||In the Background section, choose a Background Color. For this example, we entered the hexadecimal value
|c.||Scroll down to the Advanced section, and make the following settings:|
|d.||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.
|e.||To add a tab with the same settings, return to the toolbox and choose Duplicate ( ). Then, repeat this step to add a third tab.|
|f.||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.
|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:|
|a.||In the General section, set Tab Navigation Alignment to “Right.”|
|b.||In the upper-right corner, tap Save to return to the Page Builder workspace.|
The navigation tabs are now aligned on the right.
|1.||Hover over an individual tab. Then in the toolbox, choose Settings ( ).|
|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.|
|1.||Hover over the top border of the tab set container. Then in the toolbox, choose Settings ( ).|
|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 Settings
Default Active Tab
Determines which tab is active when the page loads. Options: (All current tabs by label.)
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.
Aligns the tabs along the left margin of the container.
Aligns the tabs in the center of the container.
Aligns the tabs along the right margin of the container.
Determines the horizontal alignment of content containers that are added to a tab. Options:
Applies the default setting that is specified in the style sheet of the current theme.
Aligns content containers along the left border of the tab, with allowance for any padding that is specified.
Aligns content containers in the center of the tab, with allowance for any padding that is specified.
Aligns content containers along the right border of the tab, with allowance for any padding that is specified.
Determines the border style that is applied to all sides of the tab. Options:
Applies the default border style that is specified by the associated style sheet.
Provides no any visible indication of borders.
The tab border appears as a dotted line.
The tab border appears as a dashed line.
The tab border appears as a solid line.
The tab border appears as a double line.
The tab border appears as a grooved line.
The tab border appears as a ridged line.
The container border appears as an inset line.
The tab border appears as an outset line.
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.
Determines the width in pixels of the tab border.
Specifies the size of the radius that rounds each corner of the border.
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:
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.
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.
A quick rating takes only 3 clicks. Add a comment to help us improve Magento even more.