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.
- Prebuilt rows
- Color picker enhancements
Gradients, shape layers, entrance animations, border effects, text shadow.
- Row, column, and module settings changes and enhancements
Alignment, typography, borders, synchronization when four dimension settings are required
- Layout spacing enhancements
Choice of px, %, em, rem, vh, or vw as values in various settings; minimum height settings for rows and columns
- Responsive editing enhancements
A new Responsive Editing Mode so you can edit layouts in the simulated device size, and more responsive settings in rows, columns, and modules.
- Global settings enhancements
New responsive and unit settings for margins and padding, ability to set global minimum row height.
- Improvements under the hood
- 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
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.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:
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.
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:
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 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 you can manage in any of the following ways:
- 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.
See the Related Article below for an example of how you can use Responsive Editing Mode to edit your layouts at each device size.
6.2 More responsive editing settings
New responsive settings have been added in the following locations.
- 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.
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.