Row layouts overview
The Page Builder row layout options are available on any page that you create with Beaver Builder. They can be accessed by clicking Add Content > Row Layouts.
To begin customizing your page layout, drag and drop a row layout of your choice onto the page. Mouse over the row that you just dragged onto the page to see a set of icons that show the available actions for that row, as shown in the following screenshot.
Page Builder 2.x:
Page Builder 1.x:
- Move the row by clicking the Move icon and dragging it.
- Edit the settings by clicking the Row settings icon.
- Duplicate the row.
- (Page Builder 2.x): Reset columns widths for the entire row or Reset row width.
- Delete the row.
Set the style for the row
Click the Row settings icon for a row to display the Style tab. You can make the following changes on the Style tab:
- Set the row width to full width or fixed. For full-width rows, you can set the row content width to full width or fixed. If you modify these settings, they override the default settings they get from the theme and from Tools > Global Settings.
- Set the row height to Default (automatically sizes according to the row content) or Full height (fits the browser window). If you set it to full height, you can align the content to top, center, or bottom.
- Create and style various types of row backgrounds, such as color, image, or video.
- Add a row border.
- Override default settings for text, link, and heading color.
Example of changing text color on the row instead of in the module:
Suppose your default text color is black, but you want a dark background for your row, so all the text in that should appear in white. By setting text color on the row, you don't have to set it for each module. In addition, when you move modules around, any module moved into that row will automatically have the right color text.
Advanced row settings
On the Advanced tab, you can:
- Change the row margins and padding.
See the Related Article for basic information about margins and padding.
- Choose whether to display or hide the row depending on device size.
- Add a CSS ID or class value for the row.