DocumentationCommercePage Builder

Layout - Column

Last update: Thu Aug 10 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • User

Use the Column content type to divide a page into multiple columns in the Page Builder stage. When you add a column to a row or tab or directly to the stage, the column group is initially divided into two columns of equal width. You can add or remove columns, as needed. A column can be resized by dragging the border between two columns. The width of the next column is adjusted to fill the available space within the row, tab, or stage. A single column extends the full width of the stage or its container.

w-600 modal-image
Adding a column
NOTE
If you are making significant changes to Page Builder content, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Updates in the 2.4.5 release

Page Builder capabilities are updated in the 2.4.5 release so that users now use Columns as a parent container for individual columns. This new container also supports properties for background and eliminates the need to wrap columns in a row. It reduces unnecessary markup and gives a finer control over the storefront display and experience.

You can change the layout of the Columns container by dragging a column above or below other columns in the group and stack them. This opens a new variety of possible layout combinations that can be achieved without the need for customization by developers.

Watch this video for a demonstration of how the Columns container can be used to refine your page layouts:

https://video.tv.adobe.com/v/345828?quality=12

Column toolbox

Each column has a toolbox of options that appears when you hover over the container.

Tool
Icon
Description
Move
img-md
w-25
Move icon
Moves the column and its content to another position in relation to other columns.
(label)
Column
Identifies the current container as a column. Hover over the column container to show the toolbox.
Settings
img-md
w-25
Settings icon
Opens the Edit Column page, where you can change the properties of the container.
Duplicate
img-md
w-25
Duplicate icon
Makes a copy of the current column.
Remove
img-md
w-25
Remove icon
Deletes the current column and its content.

Column grid

The grid ensures that content is aligned consistently in a column and helps the page render correctly on both desktop and mobile devices. For more information, see the Advanced Content Tools section of the Page Builder configuration.

w-500 modal-image
Grid divisions on a row with one column

In the following two-column example, the numbers in parentheses (6/12) in the top border of each column container indicate the number of grid divisions in each column and the total number of divisions. In this case, the column is the width of six grid units out of a total of 12.

w-600 modal-image
Grid divisions on row with two columns

Add a column

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

    img-md
    w-600 modal-image
    Dragging a column to the stage

    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.

    img-md
    w-600 modal-image
    Two equal columns

  2. In the upper-left corner of the column group, click the Grid tool ( Grid control ) 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.

    img-md
    w-600 modal-image
    Grid divisions on two columns

Resize a column

  1. Hover over the border between two columns.

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

    img-md
    w-600 modal-image
    Highlighted border between two columns

  2. 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).

    img-md
    w-600 modal-image
    Resized columns

Remove a column

  1. Hover over the column that you want to remove to display the toolbox and choose the Remove (+------------------------+ | img-md | +========================+ | w-20 | +------------------------+ | Remove icon | +------------------------+) icon.

    img-md
    w-600 modal-image
    Column toolbox

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

    img-md
    w-600 modal-image
    Single column with grid

  3. 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 (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+) icon.

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

      img-md
      w-600 modal-image
      Using zero padding

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

  4. Click the Close Full Screen (+------------------------------------+ | img-md | +====================================+ | w-20 | +------------------------------------+ | Close full screen icon | +------------------------------------+) icon in the upper-right corner of the workspace, and then click Save in the upper-right corner.

Change column settings

  1. Hover over the column to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+) icon.

    img-md
    w-600 modal-image
    Column toolbox

  2. 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).

  3. 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.
      img-md
      w-25
      Camera icon
      		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.

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

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

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d