Rows and Columns
Updated 3 months ago
What is a Row #
The Row is a container for the content elements. It is designed to add new content sections and split the content into several columns.
Where Can I Use Rows #
The Row is a universal container that can be used for:
- editing the content of the Posts, Pages, Products, and custom post types,
- editing the Page Templates used for different post types,
- editing the Reusable Blocks used inside the content, Footer, Page Templates, and other site layout elements.
Is it Mandatory to Use Rows? #
It is if you edit the page using the Live Builder or WPBakery. Rows create the baseline layout for the content you add.
What is a Column #
The Column is part of the Row that allows splitting its content into several vertical sections. By default, each new Row is added with one Column inside it. You can adjust the number of columns and their size using relevant settings.
How to Add Columns #
When you edit the content via Live Builder:
- open the Row's settings and switch to the Columns tab
- pick the number of columns you prefer
When you edit the content via WPBakery:
- click the columns icon at the top of the Row
- pick the number of columns you prefer
Why There Are Two Systems for Editing Columns and Their Sizes? #
There are two column-editing systems specific for Live Builder and WPBakery, respectively.
Only one column editing system could be active at a time and it disables the other
Live Builder uses the CSS grid templates for columns, which allows adjusting sizes and numbers for different devices and using custom sizes with dynamically changing widths.
WPBakery uses the legacy column-editing system in the Responsive Options tab of the Column settings. It defines which part of the maximum width will be the baseline width value for the column, allowing you to specify if different devices should inherit or change this value for this specific column.
How to Switch the System for Editing Columns #
Go to Theme Options > Advanced and find the "Columns Layout via CSS grid" switch.
If it's turned on, the CSS grid system is active. This implies you control and adjust column sizes and responsive behavior via Live Builder.
If it's turned off, the legacy system is active. This implies you control and adjust column sizes via the column Responsive Options via WPBakery.