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: Heading Widget screen > Properties tab

Heading Widget screen Properties tab

Fields

Field NameDefinition

Image Source

Function:
Specifies whether to select an image from the image library.
Accepted Values:
  • Web URL - Specifies the absolute 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

Function:
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.
Accepted Values:
One line of text (a string) in URL format that points to an image file.

The file can be one of these types:

  • .png
  • .jpg
  • .jpeg
  • .gif
  • .bmp
  • .tif
Default Value:
None
Example:
https://mysite.com/demo/image/upload/Sample.jpg
Limitations:

.jpeg and .tif format files are permitted, and .bmp format files are not permitted in these releases:

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

Function:
Specifies the background color for the heading.
Accepted 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

Function:
Specifies the number to create the blur effect on the background image.
Accepted Values:
A positive integer.
Default Value:
None

Center Text Vertically

Function:
Specifies to center your heading vertically.
Accepted Values:
  • On - Center your heading vertically.
  • Off - Top your heading vertically.
Default Value:
On

Line Alignment

Function:
Specifies where to show the line in your heading.
Accepted 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

Function:
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
Accepted Values:
A positive integer.
Default Value:
1
Limitations:

Line Color

Function:
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
Accepted 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

Function:
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
Accepted Values:
  • Dashed
  • Dotted
  • Double
  • Solid
Default Value:
Solid
Limitations:

Vertical Offset

Function:
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
Accepted Values:
An integer.
Default Value:
0
Limitations:

Repeat Image

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

Preview

Function:
Shows the preview of your heading.

Add

Function:
Adds the widget to the custom page.

Heading Widget screen > CSS tab

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

Figure: Heading Widget screen > CSS tab

Heading Widget screen CSS tab

Prerequisites

Fields

Field NameDefinition

CSS Classes

Function:
Specifies custom CSS classes for the heading widget.
Accepted 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

Function:
Adds the widget to the custom page.