Column Properties screen

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


Column Properties screen

Column Properties screen > Properties tab

Configures column for a custom page in Page Builder.

Figure: Column Properties Properties screen

Column Properties Properties screen

Fields

Field NameDefinition

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, margins, and box shadow for a column on a custom page.

Figure: Column Properties Container screen

Column Properties Container screen

Fields

Field NameDefinition

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 Color
Function:
Specifies the border color for the column.
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 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

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 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

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

Shadow Color
Function:
Specifies the shadow color for a column.
To Open this Field:
  1. Turn on the Box Shadow 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

Horizontal Offset (px)
Function:
Specifies a horizontal distance in pixels between the shadow and the vertical line.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • A positive whole number - Shows the box shadow on the right side of a column.
  • A negative whole number - Shows the box shadow on the left side of a column.
Default Value:
0

Vertical Offset (px)
Function:
Specifies a vertical distance in pixels between the shadow and the horizontal line.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • A positive whole number - Shows the box shadow on the bottom side of a column.
  • A negative whole number - Shows the box shadow on the top side of a column.
Default Value:
0

Blur (px)
Function:
Specifies the number in pixels to create the blur effect on the box shadow.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
A positive integer.
Default Value:
0

Spread (px)
Function:
Specifies the radius in pixels for a box shadow.

If the value is not specified, the shadow shows on the same size as the widget.

To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • A positive whole number - Increases the size of a box shadow.
  • A negative whole number - Decreases the size of a box shadow.
Default Value:
0

Set Shadow Inside
Function:
Specifies whether to show the box shadow into the column.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • On - Shows the box shadow into the column.
  • Off - Shows the box shadow outside the column.
Default Value:
Off

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 NameDefinition

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)

Image Source
Function:
Specifies the source for an image to set as a background for the column.
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 column.
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:

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.

Column Properties screen > CSS tab

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

Figure: Column Properties > CSS tab

CSS tab

Prerequisites

Fields

Field NameDefinition

CSS Classes
Function:
Specifies custom CSS classes for a column.
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

Save
Function:
Saves your changes.

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