Column Properties screen

Configures the properties, borders, margins, padding, and background of a column for a custom page in the Page Builder.

Prerequisites

How to Start

  1. Click Build Pages Build Pages icon.
  2. On the Pages screen, do one of these:
  3. Click the right side vertical line of the row or column.
  4. Click Edit Column Properties Edit Column Properties icon.

Column Properties screen > Properties tab

Configures column for a custom page in the Page Builder.

Figure: Column Properties Properties screen

Column Properties Properties screen

Fields

Field Name Definition

Width (px)
Function:
Shows the width of the column in pixels.

To change the width of column, refer Add Column field in the Custom Page Design screen.

Accepted Values:
Read only.

Order
Function:
Specifies in which order the column shows on a custom page.
Accepted Values:
A positive integer.

Save
Function:
Saves your changes.

Save and Close
Function:
Saves your changes and closes the screen.

Column Properties screen > Container tab

Configures the borders, column padding, and margins for a column on a custom page.

Figure: Column Properties Container screen

Column Properties Container screen

Fields

Field Name Definition

Border Style
Function:
Specifies the border style around the column.
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 column.
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 column.
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 column.
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 column.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Top Left (px)
Function:
Specifies the radius in pixels for the top-left border of the column.
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 column.
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 column.
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 column.
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 column.
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 column.
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 column.
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 column.
To Open this Field:
  1. Turn on the Padding 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.

Column Properties screen > Background tab

Configures background color and background image for a column on a custom page.

Figure: Column Properties Background screen

Column Properties Background screen

Fields

Field Name Definition

Background Color
Function:
Specifies the background color for the column.
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 column.
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 column.
Accepted Values:
  • On - Stretches the background image to fully fill the column.
  • Off - Shows the background image in original size. You can set the background image of the column to be repeated.
Default Value:
Off

Repeat Mode
Function:
Specifies whether the background image of the column 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.