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.

blocks for building a brand message

Building Blocks of a Strong Brand Message

We’ve all heard the saying “it isn’t just what you say, but also how you say it”. Today’s hyper-competitive business climate makes this more applicable than ever. Existing and potential customers are making decisions every day not just based on “what” but also “how” and “why.” As a result, it’s crucial that your brand messaging…
Read More
Project Management life

Project Management for Life

Last year one of the Pixel Jar staff, Dave Margowsky, decided to relocate. This event tested his project management skills in a real life setting. Since we work as a distributed team we embraced the move. After he was done we talked about writing a post that would be relevant for our readers. We’ll let…
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.