Rows and Columns in WPBakery Page Builder

WPBakery Page Builder uses rows and columns as the basic structure to organize page content.

A row contains one or more columns, while columns hold content elements such as text blocks, images, icons and buttons.

How to add a row

In the WPBakery Frontend Editor, click Add Element or the plus icon in the navigation bar and select Row.

A new row includes one column that occupies the full width of the row. You can add content elements inside this column or divide the row into multiple columns.

How to add columns to a row

Click the Change Layout icon inside the row. You can then choose one of the predefined column layouts or create a custom row layout.

For example, selecting the two-column layout divides the row into two equal columns and the layout indicator displays this as 1/2 + 1/2.

You can also choose layouts with three or four columns, depending on how you want to organize the content.

How columns work inside a row

You can add columns manually within the same row.

When the columns already fill the available width, any additional column moves to the next line. For example, if four columns fill the first line, a newly added full-width column appears beneath them while remaining inside the same row.

This allows you to create more complex page structures without adding a separate row for every line of content.

Add content to columns

Once you have selected the column layout, add content elements inside each column. For example, you can place text in one column and an image in another to display them side by side.

WPBakery uses a responsive grid for rows and columns. You can further adjust column widths and responsive behavior for different devices through the available responsive settings.