Heading

Heading levels establish a hierarchy that organizes content, and helps search engines index each page. Use the Heading content type to add a text container with a heading level from H1 to H6 to the stage. Headings are formatted according to the style sheet that is associated with the current theme.

The Content Heading field in the Content section can be used to add an H1 heading to the top of the page. However, the field is a legacy from previous versions of Magento and is provided to support older content. Because this field does not take advantage of Page Builder’s advanced features, we recommend that you leave the Content Heading field blank and use the Page Builder Heading content type to add headings of any level to the page. The following screen shows how the Content Heading and the Heading content type appear when formatted by the Luma theme.

Content Heading and Heading Levels

You can drag a heading from the Elements section of the Page Builder panel to a row, column, or tab set on the stage. The heading level and alignment can be controlled from the editor toolbar on the stage, or by using the Settings ( ) control.

Heading with Toolbar

As with all content containers, the toolbox appears when you hover over the container.

Heading with Toolbox

To add a heading

  1. In the Page Builder panel, expand Elements. Then, drag a Heading placeholder to a row, column, or tab set on the stage.

  2. In the editor, enter the heading text over the Edit Heading Text placeholder.

    By default, the heading text is assigned a level two (H2) heading type.

    Placeholder in Heading Editor

  3. In the toolbar, do the following:

    • Choose the appropriate heading type between H1 and H6.

    • Change the alignment, if needed.

  4. When complete, click Save in the upper-right corner.

To edit header settings

  1. Hover over the heading container. Then, choose Settings () in the toolbox.

    Header Toolbox

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

  3. When complete, click Save and return to the Page Builder workspace. Then, click Save to save the page.

To duplicate a heading

For a formatted heading with specific settings, it is more efficient to duplicate the heading, rather than start over with a new placeholder.

  1. Hover over the heading container. Then, choose Duplicate () in the toolbox.

    The duplicate appears just below the original.

    Duplicate Heading

  2. To move the new heading, hover over the container. Then, choose Move () in the toolbox.

    Move Heading

  3. Select and drag the heading until the red guideline marks the new position.

    The top and bottom borders of each container appear as dashed lines while the heading is moved.

    Move Duplicate Heading

  4. If you need to change the heading level, click the heading text. Then, choose the new level in the toolbar.

    Choose New Heading Level

Heading Toolbox

Tool Icon Description
Move Moves the heading container to another valid place on the page.
(label) HEADING Identifies the current container as a heading.
Settings Opens the Edit Heading page, where you can change the properties of the container.
Hide Hides the heading container.
Show Shows the hidden heading container.
Duplicate Makes a duplicate copy of the heading container.
Remove Deletes the heading container and its content from the stage.

Heading Settings

Setting Description
Heading Type Assigns a heading level between H1 - H6 and formats the text according to the style sheet that is associated with the current theme. Options: H1 / H2 (Default) / H3 / H4 / H5 / H6
Heading Text The heading content.
Advanced  
Alignment Determines the horizontal alignment of the heading in relation to its parent container. Options:
Default - Applies the default setting that is specified in the style sheet of the current theme.
Left - Aligns the heading along the left border of its parent container, with allowance for any padding that is specified.
Center - Aligns the heading in the center of its parent container, with allowance for any padding that is specified.
Right - Aligns the heading along the right border of its parent container, with allowance for any padding that is specified.
Border Determines the border style that is applied to all sides of the heading container. Options:
Default - Applies the default border style from the style sheet that is associated with the current theme.
None - Provides no visible indication of 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.
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 container border.
Border Radius Specifies the size of the radius that is used to round each corner of the container border.
CSS Classes Specifies the names of CSS classes from the current style sheet that apply to the heading. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the row. Enter each corresponding value in the row container diagram.
Margins - The amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the heading container. Options: Top / Right / Bottom / Left
Padding - The amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the heading container. Options: Top / Right / Bottom / Left