An Introduction to Beaver Builder Rows

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.

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.

WordPress Themes with Purpose

WordPress Themes with Purpose

WordPress Themes. The first thing you think about when you’re starting a new WordPress project. The importance of this choice will have repercussions for as long as you own your website. Decisions are often made by users who see an amazing demo site, but don’t ask the important questions like – “Do I have images…
Read More
data privacy

Data Privacy and You

Data privacy is not a new topic. This aspect of data protection has been a focal point in the WordPress space since the GDPR was announced in 2017. We’ve written about it both prior to it’s adoption, and then again as it relates to advertising privacy.  However, data privacy is more relevant now, than ever.…
Read More

Learn how to understand your website's strengths and weaknesses, and how to make changes for the best possible chance at success.

Download Now

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.