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.

You can:

  • Move the row by clicking the Move icon and dragging it.
  • Modify the row settings by clicking the Modify icon.
  • Duplicate the row.
  • Delete the row.

Set the style for the row

Click the Modify icon for a row to display the Style tab. You can make the following changes on the Style tab:

  • Set the row width, and for full-width rows, the row content width. If yo modify these settings, they override the default settings they got from Tools > Global Settings.
  • Set the row height.
  • 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. 
  • Choose whether to display or hide the row depending on device size.
  • Add a CSS id or class value the row.