Work with rows

Row layout options are available on any page that you create with Beaver Builder. They can be accessed in the following way:

  • In the upper right corner, click + (plus sign) to expose the Content panel, then click the Rows tab.

To begin working on a new layout, drag and drop a row layout of your choice onto the page. Mouse over the row that you just dragged onto the page to see a set of icons that show the available actions for that row, as shown in the following screenshot.

You can:

  • Move the row by clicking the Move icon and dragging it.
  • Edit the settings by clicking the Row settings icon.
  • Duplicate the row.
  • Reset column widths for the entire row or Reset row width, which resizes the row to its global setting.
    See the Related Article below on how to set a custom global default row width.
  • Delete the row.

Set the style for the row

Click the Row settings icon for a row to display the Style tab. You can make the following changes on the Style tab.

Row and content width and max width fields

When you add a row to your layout, the initial width settings are the defaults in Tools > Global settings. If you want different defaults, see the Related Article on how to set global default row widths.

In the Width field, set the row width to Full width or Fixed.

For fixed-width rows, choose a maximum row width in the Fixed width field. Maximum width means the row can become less wide when the screen size shrinks below the max width, but can't become wider as the screen grows larger.

For full-width rows, choose whether the Content width will be Full width or Fixed. If the Content width is Fixed, choose a max width for the content. For more information about Full width, fixed width, and max width, see the Related Article on full-width and fixed-width row layouts below.

Row height

Set the row height to one of the following values:

  • Default
    The row height automatically sizes according to the row content.
  • Full height
    The row fits the browser window. You can align the content to Top, Center, or Bottom.
  • Minimum row height. (Beaver Builder 2.2)
    Set the value you want for minimum height. Use this in cases in which you want the row height to be greater than the default but less than the full browser window height. You can also choose the vertical alignment of the content in the row: Top, Center, or Bottom.

Colors section

Override default color settings for text, link, and heading colors.

Tip: Here's why it's handy to change text color in row settings rather than module settings. Suppose your default text color is black, but you want a dark background for your row, so you want all the text in the row to appear in white. By setting text color on the row, you don't have to set it for each module. In addition, when you move modules around, any module moved into that row will automatically have the right color text. If you change text color in a row setting, you can still override that by setting another text color in a module.

Background section

Create and style any of the following types of row backgrounds. Each choice opens a section with settings for that type of background.

  • None
  • Color
  • Gradient (Beaver Builder 2.2)
    See the Related Article below for information about how to use gradients.
  • Photo
  • Video
  • Slideshow
  • Parallax

Background overlay section

This section appears if you choose Photo, Video, Slideshow, or Parallax as the background type. You can select a color overlay and manipulate the opacity to show more or less of the underlying background.

Usually a background cover overlay is done using a semi-transparent white or black color to improve legibility of content on top of the row background, but in some cases a semi-transparent color is used for design effect.

Border section

Add a row border and/or border effects (as of Beaver Builder 2.2): corner rounding (radius) and a shadow effect. See the Related Article for information about how to create borders and border effects.

Top shape, Bottom shape sections (Beaver Builder 2.2)

Assign a shape overlay to the top or bottom edge of the row.& See the Related Article on adding shape overlays.

Advanced row settings

The Advanced tab offers the following settings, which appear on most Beaver Builder Advanced tabs.

Spacing section

You can change the default row margin and padding values. You can add settings for each device size or let Beaver Builder handle the smaller devices automatically. See the Related Article for basic information about margins and padding.

Visibility section

In the Breakpoint field (formerly labeled the Display field in a section called Responsive layout prior to Beaver Builder 2.2), you can set the row to display or hide based on device size.

In the Display field, you can choose to display the row always, never, or only to logged-in or logged-out users. If you have Beaver Themer installed, you can also use Beaver Logic for many more options controlling when the row is displayed.

Animation section

You can assign an entrance animation, which activates the first time the page is loaded and the row comes into view. The default is None.

If you choose an entrance animation, set the delay (how long before the animation starts, in seconds) and a duration (how long the animation lasts, in seconds.)

HTML Element section

  • Choose a different HTML container element for the row (advanced users only).
  • Add a CSS ID or class value for the row.

Tip: If you want to link to an anchor somewhere on the page, the row is the preferred place to set the anchor by creating an ID for the row on the Advanced tab. See the Related Article on smooth scrolling for instructions.