Page Builder row layout options are available on any page that you create. They can be accessed from the builder 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. The screenshot below are the icons you see.
- To move the row, click the Move icon and drag it where you want it to go.
- Modify the row settings by clicking the Modify icon.
- Duplicate the row by clicking the duplicate icon.
- To delete the row simply click the Delete icon.
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.