Layout - Column

In the Page Builder panel under Layout, drag a Column to the stage.

{width="600" modal="regular"}

The column group is now divided into two columns of equal width. Each column is a separate container for content and has its own set of toolbox options.

{width="600" modal="regular"}

In the upper-left corner of the column group, click the Grid tool ( ) and adjust the grid size as needed.

Positioning content on the grid helps to align content consistently and renders the page correctly on both desktop and mobile devices. For more information, see the Advanced Content Tools section of the Page Builder configuration.

{width="600" modal="regular"}

Hover over the border between two columns.

The border is highlighted and the toolbox for the selected column appears.

{width="600" modal="regular"}

Hold down the mouse button to show the grid and drag the border to a new position on the grid.

The width of both columns adjusts to reflect the change. The new width of each column appears after the label, such as 4/12 (four out of 12) and 8/12 (eight out of 12).

{width="600" modal="regular"}

Hover over the column that you want to remove to display the toolbox and choose the Remove ( {width="20"} ) icon.

{width="600" modal="regular"}

If the column contains content, click OK to confirm.

To speed up the process in the future, you can skip the confirmation step by selecting the Do not show this again checkbox.

The column group now has a single column (12/12) and grid. Because the grid is available only for columns, you can use this technique to show the grid.

{width="600" modal="regular"}

If you want the column group to extend the remaining column to the full width of the row or stage:

• Hover over the column to display the toolbox and choose the Settings ( {width="20"} ) icon.

• Scroll down to the Advanced section and set all four Padding values to 0.

  {width="600" modal="regular"}

• In the upper-right corner, click Save to close the Edit Column page.

Click the Close Full Screen ( {width="20"} ) icon in the upper-right corner of the workspace, and then click Save in the upper-right corner.

Hover over the column to display the toolbox and choose the Settings ( {width="20"} ) icon.

{width="600" modal="regular"}

Change the Appearance settings as needed.

• Choose the alignment setting that determines the position of the column in relation to its container.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Option	Description
  Full Height	The column extends the full height of its container.
  Top Aligned	The column is aligned at the top of its container.
  Centered	The column in centered in the middle of its container.
  Bottom Aligned	The column is aligned at the bottom of its container.

• If needed, enter the Minimum Height for the column. For example, you might set the minimum height to match the height of a background image.

• If you set the minimum height, set the Vertical Alignment to control the position of content containers that are added to the column (Top, Center, or Bottom).

Change the background for the column content.

• Background Color - Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value. This setting determines the background color of the column.

• Background Image - If needed, use the provided tools to choose a background image to apply to the column:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Tool	Description
  Upload	Uploads an image file from your local computer to the gallery and then applies it as the background image for the column.
  Select from Gallery	Prompts you to choose an existing image from the gallery as the background image for the column.
  {width="25"}	Allows you to either drag the image to the camera tile or browse to the image in your local file system.

• Background Mobile Image - If needed, use the same tools to choose a different background image to be used for display on mobile devices.

• Background Size - Change this setting to determines how the background image is scaled in relation to the width of the column:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Cover	The background image covers the full width of the column.
  Contain	The background image is limited to the width of the content area.
  Auto	Applies the default background size that is specified in the style sheet of the current theme.

• Background Position - Change this setting to determine the anchor point of the image in relation to the column. Options: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, or Bottom Right

• Background Attachment - Change this setting to determine how the background image moves in relation to the scrolling page:

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Option	Description
  Scroll	The background image is synchronized to move down as the page scrolls.
  Fixed	(Not available for mobile) The background image does not move as the container scrolls over the image, and is fixed at the specified background position.

• Background Repeat - If you want to repeat the background image to fill the space, change this setting Yes.

Update the Advanced settings as needed.

• To control the horizontal positioning of content containers that are added to the column, choose an Alignment:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Option	Description
  Default	Applies the alignment default setting that is specified in the style sheet of the current theme.
  Left	Aligns the content containers along the left border of the column container, with allowance for any padding that is specified.
  Center	Aligns the content container in the center of the column container, with allowance for any padding that is specified.
  Right	Aligns the content container along the right border of the column container, with allowance for any padding that is specified.

• Set the Border style, which is applied to all four sides of the column container:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  Option	Description
  Default	Applies the default border style that is specified by the associated style sheet.
  None	Does not provide any visible indication of the container borders.
  Dotted	The container border appears as a dotted line.
  Dashed	The container border appears as a dashed line.
  Solid	The container border appears as a solid line.
  Double	The container border appears as a double line.
  Groove	The container border appears as a grooved line.
  Ridge	The container border appears as a ridged line.
  Inset	The container border appears as an inset line.
  Outset	The container border appears as an outset line.

• If you set a border style other than None, complete the border display options:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Border Color	Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
  Border Width	Enter the number of pixels for the border line width.
  Border Radius	Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

• (Optional) Specify the names of CSS classes from the current style sheet to apply to the column container.

  Separate multiple class names with a space.

• Enter values, in pixels, for the Margins and Padding to specify the outer margins and inner padding of the column.

  Enter each corresponding value in the column container diagram.

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Container area	Description
  Margins	The amount of blank space that is applied to the outside edge of all sides of the container. Options: Top / Right / Bottom / Left
  Padding	The amount of blank space that is applied to the inside edge of all sides of the container. Options: Top / Right / Bottom / Left

When complete, click Save to apply the settings and return to the Page Builder workspace.