Style Properties screen

Specifies the look and feel for a custom page in Page Builder.

Video: Advanced Page Builder Features

Prerequisites

How to Start

  1. Click Build Pages Build Pages icon.
  2. On the Pages screen, do one of these:
  3. Click Edit Style Edit Style icon.

Style Properties screen > Container tab

Specifies the borders, margins, and padding for a whole page in Page Builder.

Figure: Style Properties Container screen

Style Properties Container screen

Fields

Field Name Definition

Border Style

Function:
Specifies the border style around the page.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
  • Dashed
  • Dotted
  • Double
  • Groove
  • Hidden
  • Inset
  • None
  • Outset
  • Ridge
  • Solid
Default Value:
None

Border Left (px)

Function:
Specifies the width in pixels for the left side border of the page.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Right (px)

Function:
Specifies the width in pixels for the right side border of the page.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Bottom (px)

Function:
Specifies the width in pixels for the bottom border of the page.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Top (px)

Function:
Specifies the width in pixels for the top border of the page.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Color

Function:
Specifies the background color for the page.
To Open this Field:
  1. Turn on the Border field.
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)

Border Radius Top Left (px)

Function:
Specifies the radius in pixels for the top-left border of the page.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Top Right (px)

Function:
Specifies the radius in pixels for the top-right border of the page.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Bottom Left (px)

Function:
Specifies the radius in pixels for the bottom-left border of the page.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Bottom Right (px)

Function:
Specifies the radius in pixels for the bottom-right border of the page.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Top (px)

Function:
Specifies space in pixels on the top between the content and border of the page.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Right (px)

Function:
Specifies space in pixels on the right side between the content and border of the page.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Bottom (px)

Function:
Specifies space in pixels on the bottom between the content and border of the page.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Left (px)

Function:
Specifies space in pixels on the left side between the content and border of the page.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Top (px)

Function:
Specifies space in pixels on the top of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Right (px)

Function:
Specifies space in pixels on the right side of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Left (px)

Function:
Specifies space in pixels on the left side of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Bottom (px)

Function:
Specifies space in pixels on the bottom of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Save

Function:
Saves your changes.

Save and Close

Function:
Saves your changes and closes the screen.

Style Properties screen > Background tab

Specifies the page background color and page background image for a custom page in Page Builder.

Figure: Style Properties Background screen

Style Properties Background screen

Fields

Field Name Definition

Background Color

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

Background Image URL

Function:
Specifies the URL of an image file to set as a background for the page.
Accepted Values:
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:

Stretch Background Image

Function:
Specifies whether to stretch the background image to fully fill the page.
Accepted Values:
  • On - Stretches the background image to fully fill the page.
  • Off - Shows the background image in original size. You can set the background image of the page to be repeated.
Default Value:
Off

Repeat Mode

Function:
Specifies whether the background image of the page is repeated.
To Open this Field:
  1. Turn off Stretch Background Image.
Accepted Values:
  • Don't Repeat - The background image does not repeat. The image shows one time.
  • Repeat Mode - The background image repeats both vertically and horizontally.
  • Repeat Horizontally - The background image repeats horizontally.
  • Repeat Vertically - The background image repeats vertically.
Default Value:
None

Save

Function:
Saves your changes.

Save and Close

Function:
Saves your changes and closes the screen.