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.

Written by the Team at Pixel Jar

We hope you got something useful out of that post. If you'd like to read more we have an active blog with topics across the spectrum of website development. If you're researching information for a project we'd love to talk to you about it.

WordCamp Orange County 2017

WordCamp Orange County 2017

June 10th and 11th were the dates for WordCamp Orange County 2017. It also marked the 8th year that Pixel Jar has been involved with the event. We are proud to have started in 2010. Robert Nienhuis from Nien Studios joined with us in 2011 and has been a part of it ever since. While…
Read More
ecommerce website development next steps

Ecommerce Website Development – Next Steps

We previously wrote a post designed to help you make some initial decisions about starting out with ecommerce website development. These are definitely questions that we ask when we’re approaching a new project – whether it’s an internal project for one of our plugins or for a client. Once we’re past the basics, understanding how…
Read More

How Can We Help You?

We want to build your next project.

Connect with Pixel Jar

Our Community

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

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