Edit a column
You can modify column style and layouts in the following ways.
- 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.
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 Breakpoint field, select the device sizes on which the column is displayed. See the article on changing visibility by device size.
- In the Stacking order field, choose Reversed if you want the columns to stack in the reverse order. See the Column Layouts Overview article for an example of default column stacking.
- In the Display field, you can limit visibility based on user login status. If you have Beaver Themer installed, you can fine-tune visibility using conditional logic.
- 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:
- 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.
- Do either of the following:
- Mouse over Column settings.
The area that will be affected by the column settings will have a blue overlay.
- If you mouse over a child column and you want to edit its parent column, click Parent settings.
- Mouse over Column settings.
- After you verify the scope of where the settings will apply by looking at the blue column overlay, click Column settings.