Magento Commerce, 2.3.x

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
  • Column Toolbox

    TOOL

    Icon

    Description

    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

    Setting

    Description

    Appearance

    Determines the position of the column in relation to the row.

    Full Height

    The column extends the full height of the row.

    Top Aligned

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

    Determines the background color and opacity of the column.

    Background Image

    Determines the location of the background image, and applies the image to the column. Options:

    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.

    Allows you to either drag the image to the camera tile, or browse to the image in your local file system.

    Background Mobile Image

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

    Upload

    Uploads an image file from your local computer to the gallery, and then applies it as the column background image.

    Select from Gallery

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

    Determines how the background image is scaled in relation to the width of the column. Options:

    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

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

    Determines how the background image moves in relation to the scrolling page. Options:

    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

    Determines if the background image is repeated. Options:

    Yes

    The background image is repeated to fill the available space.

    No

    Uses only a single instance of the background image.

    Layout

    Determines the minimum height and vertical alignment of content in the column. Options:

    Minimum Height

    Determines the minimum height of the column. For example, you might set the minimum height to match the height of a background image.

    Vertical Alignment

    Determines the vertical position of content containers that are added to the column.

    Advanced

    Alignment

    Determines the horizontal alignment of content containers that are added to the column. Options:

    Default

    Applies the default setting that is specified in the style sheet of the current theme.

    Left

    Aligns content containers along the left border of the column, with allowance for any padding that is specified.

    Center

    Aligns content containers in the center of the column, with allowance for any padding that is specified.

    Right

    Aligns content containers along the right border of the column, with allowance for any padding that is specified.

    Border

    Determines the border style that is applied to all sides of the column container. Options:

    Default

    Applies the default border style that is specified by the associated style sheet.

    None

    Provides no visible indication of container borders.

    Dotted

    The container border appears as a dotted line.

    Dashed

    The container border appears as a dashed line.

    Solid

    (Default) 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.

    Border Color

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

    Determines the width, in pixels, of the container border.

    Border Radius

    Specifies the size of the radius that is used to round each corner of the column border.

    CSS Classes

    Specifies the names of CSS classes from the current style sheet which apply to the column. Separate multiple class names with a space.

    Margins and Padding

    Determines the size, in pixels, of the outer margins and inner padding of the column. Enter the corresponding values in the column container diagram. Options:

    Margins

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

    Padding

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