Layout - Column
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.
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:
Column toolbox
Each column has a toolbox of options that appears when you hover over the container.
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
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.
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.
Add a column
-
In the Page Builder panel under Layout, drag a Column to the stage.
img-md w-600 modal-image 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 -
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.
img-md w-600 modal-image
Resize a column
-
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 -
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) and8/12
(eight out of 12).img-md w-600 modal-image
Remove a column
-
Hover over the column that you want to remove to display the toolbox and choose the Remove (+------------------------+ | img-md | +========================+ | w-20 | +------------------------+ | | +------------------------+) icon.
img-md w-600 modal-image -
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 -
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 | +--------------------------+ | | +--------------------------+) icon.
-
Scroll down to the Advanced section and set all four Padding values to
0
.img-md w-600 modal-image -
In the upper-right corner, click Save to close the Edit Column page.
-
-
Click the Close Full Screen (+------------------------------------+ | img-md | +====================================+ | w-20 | +------------------------------------+ | | +------------------------------------+) icon in the upper-right corner of the workspace, and then click Save in the upper-right corner.
Change column settings
-
Hover over the column to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.
img-md w-600 modal-image -
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
, orBottom
).
-
-
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 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
, orBottom 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.