An Introduction to Beaver Builder Rows

It is not atypical for sites that we work on to be utilizing a page builder of some kind. Our favorite page builder tool is Beaver Builder. The most useful structure for Beaver builder elements is the row. You’ll notice that when you start editing with the Beaver Builder page editor that you’re presented with an open area where you can start placing rows to build out the layout for your page.

All of your elements; images, text, and spacers are constructed of individual modules. However, all of these individual modules are collected into rows. It is these rows that become the most functional structure for controlling layout. Using rows we can manipulate content the same way that we do with an individual module. It can drag and drop around page, it can be duplicated, you can edit the content, you can assign actions to it, and you can delete the row. 

Beaver Builder Row Style Settings

Most importantly though, a row has row settings. The row settings give you some broader controls over the whole row. Styles gives you access to both general styles for the row and some more detailed options. The general style settings allow you to choose full or fixed width for the row itself, or the content within the row, as well as adjusted the height of the row. The more specific style settings give you control over colors, backgrounds, and borders.

Additional Row Settings

If you’re using add-ons for Beaver Builder like Ultimate Addons for Beaver Builder you’ll find that there are several additional row settings tabs available to you in the row settings. However, all users of Beaver Builder will have access to the advanced settings tab.

The advanced tab lets you manipulate the display for your row. Here you can add simple things like margins and padding. There are some really powerful tools that will allow you to affect the display of the row on various devices. These responsive controls make it easy to hide the row on certain devices or to hide the row from logged in (or logged out) users. For the savvy users, this tab allows you to add a CSS class or ID to a row so it can be targeted with your stylesheet or with some Javascript.

As with all settings, when you’re happy with your changes be sure to click “save” for your row settings before you publish your changes.

Please note: Links to external companies may be affiliate links. If you use our links, we may earn a small commission.