Magento Commerce, 2.3.x

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 themeA package that contains graphics and appearance information, and customizes the look and feel of the store..

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 screenshot 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
  • Heading Toolbox

    TOOL

    Icon

    Description

    Move

    Moves the heading container to another valid place on the stage.

    (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

    Assigns heading level 1 to the heading text.

    H2

    (Default) Assigns heading level 2 to the heading text.

    H3

    Assigns heading level 3 to the heading text.

    H4

    Assigns heading level 4 to the heading text.

    H5

    Assigns heading level 5 to the heading text.

    H6

    Assigns heading level 6 to the heading text.

    Heading Text

    The heading content.

    Advanced

    Alignment

    Determines the horizontal alignment of the heading in relation to the parent container.that are added to the column. 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 the parent container, with allowance for any padding that is specified.

    Center

    Aligns the heading in the center of the parent container, with allowance for any padding that is specified.

    Right

    Aligns the heading along the right border of the parent container, with allowance for any padding that is specified.

    Border

    Determines the border style that is applied to all four sides of the heading container. Options:

    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

    (Default) 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 border.

    CSS Classes

    Specifies the names of CSS classes from the current style sheet which 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 heading container. Enter the corresponding values in the diagram. Options:

    Margins

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

    Padding

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