DocumentationCommercePage Builder

Elements - Heading

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

CREATED FOR:

  • Beginner
  • Intermediate
  • User

Heading levels establish a hierarchy that organizes content and helps search engines index each page. Use the Heading content type in the Page Builder stage 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 Commerce versions and is provided to support older content. This field does not take advantage of Page Builder’s advanced features. It is recommended 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 example shows how the Content Heading and the Heading content type appear when formatted by the Luma theme.

w-700 modal-image
Content Heading and heading Levels on the storefront

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 (

w-20
Settings icon

) control.

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.

Heading editor

w-500 modal-image
Heading editor with toolbar

Heading container toolbox

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

w-500 modal-image
Heading container toolbox
Tool
Icon
Description
Move
img-md
w-25
Move icon
Moves the heading container to another valid place on the page.
(label)
Heading
Identifies the current container as a heading.
Settings
img-md
w-25
Settings icon
Opens the Edit Heading page, where you can change the properties of the container.
Hide
img-md
w-25
Hide icon
Hides the heading container.
Show
img-md
w-25
Show icon
Shows the hidden heading container.
Duplicate
img-md
w-25
Duplicate icon
Makes a copy of the heading container.
Remove
img-md
w-25
Remove icon
Deletes the heading container and its content 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 a heading

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

    img-md
    w-600 modal-image
    Dragging a heading to 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.

    img-md
    w-500 modal-image
    Placeholder in the heading editor

  3. In the toolbar, choose the appropriate heading type between H1 and H6.

  4. Change the alignment, if needed.

Edit header settings

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

    img-md
    w-500 modal-image
    Heading toolbox

  2. Update the heading content (Heading Type and Heading Text) if needed.

    You can also update this content in the heading editor.

  3. Update the Advanced settings as needed.

    • To control the positioning of the heading 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 list along the left border of the parent container, with allowance for any padding that is specified.
      Center Aligns the list in the center of the parent container, with allowance for any padding that is specified.
      Right Aligns the block 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 heading 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 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 heading container.

      Enter the corresponding values in the 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

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

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 to display the toolbox and choose the Duplicate (+---------------------------+ | img-md | +===========================+ | w-20 | +---------------------------+ | Duplicate icon | +---------------------------+) icon.

    The duplicate appears just below the original.

    img-md
    w-500 modal-image
    Duplicating a heading container

  2. Hover over the new heading container to display the toolbox and choose the Move (+----------------------+ | img-md | +======================+ | w-20 | +----------------------+ | Move icon | +----------------------+) icon.

    img-md
    w-500 modal-image
    Moving a 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.

    img-md
    w-500 modal-image
    Moving the duplicated heading into position

  4. If you want to change the heading level, click the heading text and choose the new level in the editor toolbar.

    img-md
    w-500 modal-image
    Choosing a new heading Level
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d