An Introduction to Beaver Builder Rows

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.

Recorded with Beaver Builder version 1.8 and WordPress 4.9.6

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.

How Can We Help You?

We want to build your next project.

Connect with Pixel Jar

Does Your Website Need a Tune Up?

Run a Multi-Point Inspection on your website now!

  • Check speed rankings
  • Test security vulnerabilities
  • Find site optimizations

Our Community

Subscribe to learn more about the goings on at Pixel Jar and AdSanity.
  • Note: Your email will be added to our CRM and be used to send emails from Pixel Jar. You can unsubscribe from our emails at any time.

  • This field is for validation purposes and should be left unchanged.
Partner

WPEngine

We are proud partners at WPEngine hosting.

Learn More
Partner

Sucuri

We are proud partners at Sucuri website security.

Learn More
4.9 of 5 Stars

Clutch Reviews

Our reputation is everything. We currently hold a 4.9 star review at Clutch.

Learn More
5 of 5 Stars

Google Reviews

Read client reviews of our work on Google where we have a 5 of 5 star record.

Learn More