Column

Use the Column content type to divide a row into multiple columns. When a column is added to an empty row, the row is initially divided into two columns of equal width. You can add additional columns, 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 in the row. If a row has only a single column, it extends the full width of the row.

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

Adding a Column

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

Grid Divisions on Row with One Column

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 the row.

Grid Divisions on Row with Two Columns

To add a column

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

    Drag Column to Row

    The row 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.

    Row with Two Equal Columns

  2. In the upper-left corner of the row, click the small, circular Grid control ( ).

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

    Grid Divisions on Row with Two Columns

To resize a column

  1. Hover over the border between two columns.

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

    Highlighted Border Between Two Columns

  2. Hold down the mouse button to show the grid. Then, 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, as “4/12” (four out of twelve) and “8/12” (eight out of twelve).

    Resized Columns

To remove a column

  1. Hover over the column that you want to remove. Then in the toolbox, choose Remove ( ).

    Toolbox

  2. If the column contains content, tap OK to confirm.

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

    The row 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 for any row. Single Column with Grid

    • If you want the column to extend the full width of the row, do the following: Hover over the column. Then in the toolbox, choose Settings (), and do the following:

      • Scroll down to the Advanced section.

      • Set all four Padding values to zero (0).

        ![](/m2/b2b/user_guide/images/images-ee/page-builder-tutorial1-row-settings-advanced-margins-padding-zero.png){: .zoom}
        _Zero Padding_
        
      • In the upper-right corner, tap Save to close the Edit Column page.

  3. In the upper-right corner of your page, tap Save.

To change column settings

  1. Hover over the column. Then in the toolbox, choose Settings ( ).

    Column Toolbox Options

  2. Update the settings as needed using the field descriptions at the end of this page for reference.

  3. When complete, tap Save in the upper-right corner to close the Edit Column page. Then again in the upper-right corner, tap Save.

Column Toolbox

TOOLIconDescription
Move

Moves the column and its content to another position in relation to other columns in the row.
(label)

COLUMN

Identifies the current container as a column. Hover over the column container to show the toolbox.
(position / grid size)Specifies the grid guideline that determines the column width, and the total number of guidelines in the row. For example, "3/12" indicates that the column is the width of three guidelines out of a total of of twelve in the grid.
Settings Opens the Edit Column page, where you can change the properties of the container.
Duplicate Makes a duplicate copy of the current column.
Remove Deletes the current column and its content.

Column Settings

SettingDescription
Appearance Determines the position of the column in relation to the row.
Full Height The column extends the full height of the row.
Top AlignedThe column is aligned at the top of the row.
Centered The column in centered in the middle of the row.
Bottom Aligned The column is aligned at the bottom of the row.
Background
Background ColorDetermines the background color and opacity of the column.
Background ImageDetermines the location of the background image, and applies the image to the column. Options:
UploadUploads an image file from your local computer to the gallery, and then applies it as the background image for the column.
Select from GalleryPrompts you to choose an existing image from the gallery as the background image for the column.
Allows you to either drag the image to the camera tile, or browse to the image in your local file system.
Background Mobile ImageDetermines the location of the background image that is to be used for mobile devices, and applies the image to the column. If left blank, the standard desktop background image is used. Options:
UploadUploads an image file from your local computer to the gallery, and then applies it as the column background image.
Select from GalleryPrompts you to choose an existing image from the gallery as the column background image.
Allows you to either drag the image to the camera tile, or browse to the image in your local file system.
Background SizeDetermines how the background image is scaled in relation to the width of the column. Options:
CoverThe background image covers the full width of the column.
ContainThe background image is limited to the width of the content area.
AutoApplies the default background size that is specified in the style sheet of the current theme.
Background PositionDetermines 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, Bottom Right
Background AttachmentDetermines how the background image moves in relation to the scrolling page. Options:
ScrollThe 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 RepeatDetermines if the background image is repeated. Options:
YesThe background image is repeated to fill the available space.
NoUses only a single instance of the background image.
LayoutDetermines the minimum height and vertical alignment of content in the column. Options:
Minimum HeightDetermines the minimum height of the column. For example, you might set the minimum height to match the height of a background image.
Vertical AlignmentDetermines the vertical position of content containers that are added to the column.
Advanced
AlignmentDetermines the horizontal alignment of content containers that are added to the column. Options:
DefaultApplies the default setting that is specified in the style sheet of the current theme.
LeftAligns content containers along the left border of the column, with allowance for any padding that is specified.
CenterAligns content containers in the center of the column, with allowance for any padding that is specified.
RightAligns content containers along the right border of the column, with allowance for any padding that is specified.
BorderDetermines the border style that is applied to all sides of the column container. Options:
DefaultApplies the default border style that is specified by the associated style sheet.
NoneProvides no visible indication of container borders.
DottedThe container border appears as a dotted line.
DashedThe container border appears as a dashed line.
Solid(Default) The container border appears as a solid line.
DoubleThe container border appears as a double line.
GrooveThe container border appears as a grooved line.
RidgeThe container border appears as a ridged line.
InsetThe container border appears as an inset line.
OutsetThe container border appears as an outset line.
Border ColorDetermines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border WidthDetermines the width, in pixels, of the container border.
Border RadiusSpecifies the size of the radius that is used to round each corner of the column border.
CSS ClassesSpecifies the names of CSS classes from the current style sheet which apply to the column. Separate multiple class names with a space.
Margins and PaddingDetermines the size, in pixels, of the outer margins and inner padding of the column. Enter the corresponding values in the column container diagram. Options:
MarginsThe amount of blank space, in pixels, that is applied to the outside edge of all sides of the column container. Options: Top, Right, Bottom, Left.
PaddingThe amount of blank space, in pixels, that is applied to the inside edge of all sides of the column container. Options: Top, Right, Bottom, Left.