Edit a column

You can modify column style and layouts in the following ways.

Style tab

  • Change the column widths when you have two or more columns across.
    Widths must add up to 100% on large devices, but medium and small device column width settings can total less than 100%.
    Tip: When you have more than two columns across, it's easier to use the drag handle on the column instead of column settings.

  • Set a minimum column height. If you set a minimum column height for one column in a layer, it will propagate to all columns in the layer.
  • Equalize the column heights of all columns in the layer, then choose whether the content in the column content should be vertically aligned to the top, center, or bottom of the column.
    Parent columns must have at least two columns in the layer for the Equalize heights field to be displayed, but you only need to set it in one column for it to apply to all columns in the layer. Achild columns display the Equalize heights field.
    The following screenshot shows two columns set to equal height and vertically centered.
  • Set default text colors for the column. These colors override row colors for that column and apply to modules unless the modules have their own colors set. The options are text color, link color, text hover color, and heading color.
  • Add a background color or image.
    Note: You can't add dynamic backgrounds to columns, such as videos, slideshows, or parallax.
  • Add a column border.
    Tip: You can set individual top, bottom, left, and right borders, which you can use to create horizontal or vertical column separators.

Advanced tab

Note: In Beaver Builder 2.2, the responsive column width settings have been incorporated into the width settings on the Style tab. See the Related Article on the example of using Responsive Editing Mode to edit columns.

  • Change column margins and padding. You can also add custom settings for margins and padding for medium and small devices for that column. See the Related Article below for an example of using Responsive Editing Mode in Beaver Builder 2.2 to alter column settings.
    Tips: Individual modules don't have padding settings.
    You can set padding for the modules in the columns that contain them. Before you put out effort changing individual settings for medium and small devices, see how default and global margins and padding work in the margins and padding article in the Related Articles below.
  • In the Visibility section:
  • In the Animation section, you can set an entrance animation for the column.
  • In the HTML animation section, you can change the HTML container element (advanced users only), or add a custom ID or class for CSS rules.

Open column settings for editing

If a column has child columns, you can edit either the child or the entire parent column.

To open column settings in an empty column:

When a column is empty, access Column Settings by hovering over the empty column and clicking the Edit column icon, as shown in the following screenshot.

See the Related Articles below for how to insert a column.

To open column settings for editing in a column with a module:

  1. Mouse over a module in the column to reveal the toolbar and click Edit column, as shown in the following screenshot.

    If you see a hamburger icon in the module toolbar, click that and mouse over Edit column.
  2. Do either of the following:
    1. Mouse over Column settings.
      The area that will be affected by the column settings will have a blue overlay.
    2. If you mouse over a child column and you want to edit its parent column, click Parent settings.
  3. After you verify the scope of where the settings will apply by looking at the blue column overlay, click Column settings.