Elements - Heading

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

{width="600" modal="regular"}

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.

{width="500" modal="regular"}

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

Change the alignment, if needed.

Hover over the heading container to display the toolbox and choose the Settings ( {width="20"} ) icon.

{width="500" modal="regular"}

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

You can also update this content in the heading editor.

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

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

Hover over the heading container to display the toolbox and choose the Duplicate ( {width="20"} ) icon.

The duplicate appears just below the original.

{width="500" modal="regular"}

Hover over the new heading container to display the toolbox and choose the Move ( {width="20"} ) icon.

{width="500" modal="regular"}

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.

{width="500" modal="regular"}

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

{width="500" modal="regular"}