Heading Widget screen

Shows a heading on a custom page.

Configure the Heading widget

To configure the Heading widget for a custom page, do the procedure in this topic.

Video: Page Builder Overview

Examples

Prerequisites

How to Start

  1. Open the Custom Page Design screen.

    For information about how to open this screen, refer to Custom Page Design screen.


    Open Custom Page
  2. Click Add Widget.

    Custom Page Design screen
  3. On the Pick A Widget screen, on the Content tab, click Heading.

    Click Heading Widget

Heading Widget screen > Properties tab

Configures the properties for a heading on a custom page.

Figure 1. Heading Widget screen > Properties tab

Heading Widget screen Properties tab

Fields

Field NameDefinition

Image Source
Description:
Specifies whether to select an image from the image library.
Allowed Values:
  • Web URL - Specifies the URL for an image.
  • Image Library - Uses an image from the image library.

    To use image from image library, click Pick An Image.

Default Value:
Image Library
Limitations:
This field is available in these releases:

Background Image URL
Description:
Specifies the URL of an image file to set as a background for the heading.
To Open this Field:
  1. In the Image Source field, click Web URL.
Allowed Values:
One line of text (a string) that represents a path to an image file.

Different types of URLs can be used. For more information, refer to How Do I Create a URL For Images In Page Builder?

The file can be one of these types:

  • .png
  • .jpg
  • .jpeg
  • .gif
  • .tif
Default Value:
None
Example:
Refer to:
Limitations:

Pick An Image
Opens this Screen:
Image Picker screen
To Open this Field:
  1. In the Image Source field, click Image Library.
Function of this Screen:
Specifies an image file to show on your page or menu.
Limitations:
This field is available in these releases:

Background Color
Description:
Specifies the background color for the heading.
Allowed Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
ffffff
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Blur
Description:
Specifies the number to create the blur effect on the background image.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Center Text Vertically
Description:
Specifies to center your heading vertically.
Allowed Values:
  • On - Center your heading vertically.
  • Off - Top your heading vertically.
Default Value:
On

Line Alignment
Description:
Specifies where to show the line in your heading.
Allowed Values:
  • None - The heading does not have a line.
  • Line At Left - The line shows on the left side of your heading.
  • Text Between Line - The line shows on both sides of your heading.
  • Line At Right - The line shows on the right side of your heading.
Default Value:
None
Limitations:

Line Thickness
Description:
Specifies the thickness, in pixels, for the line associated with the heading.
To Open this Field:
  1. In the Line Alignment field, select one of these:
    • Text Between Line
    • Line At Left
    • Line At Right
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
1
Limitations:

Line Color
Description:
Specifies the color for the line associated with the heading.
To Open this Field:
  1. In the Line Alignment field, select one of these:
    • Text Between Line
    • Line At Left
    • Line At Right
Allowed Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
000000
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)
Limitations:

Line Style
Description:
Specifies the style for the line associated with the heading.
To Open this Field:
  1. In the Line Alignment field, select one of these:
    • Text Between Line
    • Line At Left
    • Line At Right
Allowed Values:
  • Dashed
  • Dotted
  • Double
  • Solid
Default Value:
Solid
Limitations:

Vertical Offset
Description:
Specifies a vertical distance between the heading and the horizontal line.
To Open this Field:
  1. In the Line Alignment field, select one of these:
    • Text Between Line
    • Line At Left
    • Line At Right
Allowed Values:
An integer.
Default Value:
0
Limitations:

Repeat Image
Description:
Specifies whether the background image is repeated vertically.
Allowed Values:
  • On - The background image repeats vertically.
  • Off - The background image does not repeat. The image shows one time.
Default Value:
On

Preview
Description:
Shows the preview of your heading.

Add
Description:
Adds the widget to the custom page.

Heading Widget screen > CSS tab

Configures the CSS classes for a heading on a custom page.

Figure 2. Heading Widget screen > CSS tab

Heading Widget screen CSS tab

Prerequisites

Fields

Field NameDefinition

CSS Classes
Description:
Specifies custom CSS classes for the heading widget.
Allowed Values:
One or more custom CSS classes from the list.

This field shows the CSS classes that are configured in the CSS files you upload on the Style Properties screen.

Default Value:
None

Add
Description:
Adds the widget to the custom page.