Beaver Builder 2.2 release features

This document provides a quick reference for the Beaver Builder 2.2 releases with links to a number of other articles about 2.2 features.

  1. Prebuilt rows
  2. Color picker enhancements
  3. Effects
    Gradients, shape layers, entrance animations, border effects, text shadow.
  4. Row, column, and module settings changes and enhancements
    Alignment, typography, borders, synchronization when four dimension settings are required
  5. Layout spacing enhancements
    Choice of px, %, em, rem, vh, or vw as values in various settings; minimum height settings for rows and columns
  6. Responsive editing enhancements
  7. Global settings enhancements
  8. Improvements under the hood
  9. Changes to specific modules
    A lot of modules incorporate these new features or their settings have been reorganized. See  this article with details of changes to specific modules.

1. Prebuilt rows

Prebuilt rows are smaller than saved layout templates but serve the same function--quick layouts that you can customize. You can choose from dozens of prebuilt rows to add to your layout and modify as you like.

Images that appear are not stored in your media library, so you'll want to replace those. Text is the default for your site, and the new Typography section will let you customize the text settings on the Style tab.

To access prebuilt rows, on the Rows tab of the Content panel, select the group Prebuilt rows, then choose a category to see thumbnails. Drag one into your layout and modify as you like.

2. Color picker enhancements

There's now an opacity slider on the right side of the color picker (removing the need for an opacity setting in the settings pane) and the ability to set RGBa instead of hex color values. See the Related Article below for more information about the color picker.

3. Effects

3.1 Gradient backgrounds and overlays for rows and columns

You can create gradients for row and column backgrounds and background overlays.

See the Related Article below about row background color gradients and how they work in the Beaver Builder editor.

3.2 Row shape layers

Rows can now be assigned shapes with lots of customization settings. They are anchored to the top or bottom row boundary by default but can be moved and transformed in many different ways.

You can also create custom shapes and add them to the shape selection in the Settings panel. See the Related Articles below for more information.

3.3 Entrance animations

There's now a much larger choice of entrance animations besides the five fade and slide options in the Animation section on the Advanced tab, In addition, these animations are available not only for modules but also for rows and columns.

There are multiple animation options in each of the following categories:

  • Fade
  • Slide
  • Zoom
  • Bounce
  • Rotate
  • Flip
  • Fancy

3.4 New border effects

You can now create rounded corners and drop shadows, which apply to row and column backgrounds also, even when no border line has been set. All of the border settings and effects can now be set for each device size. See the Related Article below for details about the fields in the Border section.

3.5 Text shadow

A text shadow effect has been added to the new Typography section on the Style tab of select modules.

See the Related Article below for more information about the new Typography section.

4. Row, column, and module settings changes and enhancements

There are changes and enhancements to some of the row, column, and module settings, mostly on the Style tab. See the following general changes and the list of specific changes to modules in the last section.

4.1 Alignment

For modules that allow alignment, it is now selected with visual toggles instead of a list, and the setting is responsive. For more information about how to set the toggles, see the Related Article below about alignment.

4.2 Typography section

For a number of modules that have text, on the Style tab there's a new Typography section with three subsections: Font, Style & spacing, and Text shadow. The Typography section also the ability to set different responsive settings for each device size, which you can access by clicking the icon in the top line, as shown in the following screenshot. See the Related Article below for details about the new Typography section, and descriptions of the module enhancements in the last section of this article.

4.3 Border section

Settings and effects for borders have been placed into a Border section, which includes not only the type, color, and width of the border line, but also new effects for rounded corners and a box shadow that apply to the border box. As you can see from the icon in the screenshot, border settings can be set for each device size. See the Related Article below for details about the Border section.

4.4 Ability to synchronize values for all dimension settings

There's a new icon that you can use to automatically set related settings individually or together.

This icon appears with the following settings:

  • Borders: Width and Radius dimensions for each side of the border box.

4.5 Link sections consolidated to one field

The previous Link sections had three fields: one for the URL, one for choosing whether to open the link in the same window or a new one, and a nofollow option. As of Beaver Builder 2.2, there is a single Link field with checkboxes for New window and No follow. By default, these boxes are not selected, meaning the link opens in the same window and search engines will follow the link. For more information about when to use nofollow, see the Google webmaster article.

5. Layout spacing enhancements

5.1 CSS relative units: %, em, rem, vw, vh

In many Beaver Builder layout settings for length, width, height, and size, you can now use a relative unit as well as the absolute px unit. See the Related Article below on CSS units for more information about where these units occur in Beaver Builder and factors to consider in choosing one.

5.2 Responsive minimum height setting for rows and columns

You can now set a minimum height for rows and columns in various units and with a different setting for each device size.

This means that there are now three choices for height in row and column settings:

  • Default,
    Automatically adjusts to the height of the content.
  • Full height
    The row or column takes up the full height of the browser window.
  • Minimum height
    The row or column maintains a minimum height even when the content doesn't demand it.

These choices are shown in the following screenshot.

With the Minimum height setting, you can set the minimum height in pixels, viewport width, or viewport height, as shown in the following screenshot. By default, the minimum height that you set applies to all device sizes, but click the responsive icon next to strong>Minimum height to set separate values for each device size.

With both the Full height and Minimum height settings, you can set the vertical alignment of the content to top, center, or bottom.

6. Responsive editing enhancements

6.1 Improved responsive editing mode

Responsive editing mode gives you the ability to assign individual settings for large, medium, and small devices. Responsive editing mode is a view that appears when any of the following happens:

  • Click one of the small responsive icons next to specific settings for a row, column, or module.
    You'll stay in responsive editing mode even if you close the Settings window. Use the Exit button to close responsive editing.
  • On the Tools menu, click Responsive editing.
  • Type the keyboard shortcut R.
    This keyboard shortcut toggles responsive editing mode to open, change from medium to small device view, and close the responsive editing window.
    Note that keyboard shortcuts are always lowercase letters.

6.2 More responsive editing settings

Besides the responsive capability for new settings mentioned in previous sections, responsive editing capability has been added to the following settings.

  • Row and column background photos
  • Column width
    There's now a device icon on the Width field on the Style tab of columns. Formerly, responsive column widths were set in the Responsive display section of the Advanced tab.

7. Global settings enhancements

You'll see the following enhancements if you click Global settings on the Tools menu -- or click the shortcut ⌘-U (Mac) or Control-U (Windows).

  • Ability to set global margins and padding for columns for large, medium, and small devices.
  • Ability to set row and column margin and padding in either pixels or percent.
  • Ability to set minimum row height.
    See the section on minimum row height.

8. Improvements under the hood

  • Refined responsive editing logic to make it even more accurate.
  • Converted link spacing fields in the Menu module to a single dimension field.
  • FontAwesome is now loaded locally instead of from the CDN.
  • Added live preview to more module settings so changes don’t require a refresh.