Here are the new features in Beaver Builder 2.5.
The new Outline panel lets you view the structure of your page layout in an outline format.
Access the Outline panel by clicking the Outline icon to the left of the Done button in the editor:
See the article about the Outline panel for more information.
There are two new layout templates and several new content templates. Here's a thumbnail snapshot of the two new layout templates in the Landing pages group:
And here's a thumbnail snapshot of the eight new layout templates in the Content pages group.
Some older layout templates have also been deleted in this release. The following screenshot shows the layout templates in the Landing pages group that have been deleted (Associates, Biz, Sell, Grande, Deluxe, Subscribe).
The following screenshot shows the layout templates in the Content pages group that have been deleted (About Us, Design Portfolio, FAQs).
See this article for an overview of layout templates.
When you click a link to select an icon in the Beaver Builder editor, an icon picker opens, in which you can search through all the sets of icons that you have enabled. The icon picker now uses the graphQL system that powers the icons page at fontawesome.com, which has resulted in the changes shown in the following screenshot and described in the list below:
- The old version of the icon picker opens in a full window. The new version opens in a smaller lightbox.
- Both versions search font slugs in all available libraries: Font Awesome and any others.
- If the Font Awesome plugin is installed, the new version searches the Font Awesome libraries for both font slug and font name and searches other font libraries for font slug only.
- The old version shows which Font Awesome libraries the icons are associated with. The new version does not distinguish between Font Awesome libraries in the search result.
- The old version lets you select a single icon library to work with. The new version does not have this filter.
- Font Awesome custom kits appear at the top of the icon libraries.
In rows, columns, and modules, whenever there is a numerical Top, Bottom, Right, or Left setting, the labels now appear as icons, as shown in the following screenshot.
These new labels apply to the following settings:
- border radius
There is now a Width setting for horizontal as well as vertical layouts. The behavior is slightly different depending on the type of layout. See the Button Group article for more details.
Contact Form labels (the Show labels/placeholders setting on the General tab) can be translated.
There's a Background overlay option for individual slides.
On the Link tab for individual slides, if you add a button, the Padding option is responsive.
Changes to the Style tab:
- There is now the standard horizontal alignment setting, and you can set alignment differently for large, medium, and small devices.
- There is now the standard Typography section for both the number and text settings.
See the Countdown module article for all the details.
The code editor in the HTML module has line numbers and automatic line wrap.
The Alignment setting on the Style tab, which horizontally aligns the entire icon group within its column, now has a Responsive Settings icon to set different alignments at large, medium, and small devices.
The ability to add text labels to individual icons in the Icon Group module has been reverted. As in Beaver Builder 2.4, the Icon Group module contains a group of icons, no text.
On the General tab, the settings were rearranged so the List items section appears at the top, and settings from the original top section now appear in the lower sections.
See the List module article for more details.
The Menu module has the following new features. See the Menu module article for more complete descriptions.
The menu now closes when tabbing through the last of the items in a menu.
- Link to Menu page from the Layout setting when there is no menu
- A centered inline logo option
- Option to add search
- Option to responsively stack or wrap horizontal menu items
- Typography settings in the Dropdowns section, to style the text in dropdowns for submenus.
- A new Responsive dropdown section, to style responsive dropdown settings differently from the dropdown settings for larger devices.
- A Responsive toggle section with options to set the toggle size, submenu dropdown background colors, text colors, and borders.
If you have WooCommerce installed, there's a WooCommerce tab with options to display the WooCommerce Dynamic Cart, with additional settings on the Style tab.
- In the bar display of the number, you can now set the height of the bar.
On the General tab, when Layout is set to Bars counter, then on the Style tab in the Bar styles section, there is a new setting for Bar height. This option also has a Responsive Settings icon so you can adjust the height differently for large, medium, and small devices.
- You can hide the number entirely in the bar display.
On the General tab, set Number position to Hidden.
- The Style tab now has the standard Typography section for both numbers and text.
For details, see the Number Counter module article.
If you want to display a defined set of posts or pages, categories, or tags in a custom order, you can set this up on the Content tab. As of Beaver Builder 2.5, you can reorder your custom selection in any of the Filter section settings by dragging listed items. For example, in the following screenshot showing three posts about insects, you can change the order of posts in the Match these posts setting.
Now includes the standard Beaver Builder Typography section for the Post Title and Post Info sections.
Now includes the standard Beaver Builder Typography section for the Post Title, Post Info, and Post Content sections.
The Pricing Table module has several enhancements, summarized in this screenshot and explained in the following sections.
For a complete description of the module settings, see the Pricing Table module article.
There's a new Toggle pricing option where you can choose a single price or a toggle to display dual pricing. If you enable the toggle, you can also choose the two billing options (the default is Monthly/Yearly). Then in each pricing box, there are fields to enter the price for each billing option. On the front end, there's a toggle with the two billing options, as shown in the screenshot above.
For each price column, you can select an option to display a ribbon with custom text in the top center, upper left corner, or upper right corner.
You can optionally add the following to each pricing feature row:
- A feature icon
An icon added to an individual feature overrides an icon that is set for all features.
- A tooltip
You can add text for a tooltip. On the front end, this is displayed as a question mark to the right of the pricing feature text. Clicking on the question mark reveals the tooltip text.
This screenshot shows an example of one pricing feature in one pricing box with both a custom icon and a tooltip:
Each feature in a Pricing Box now has its own Style tab with the standard Beaver Builder Typography section.
Typography sections have also been added to the Title and Price in each pricing box and the Toggle Pricing icon at the top of the table.
The Separator module has new responsive toggles for both the Height and Alignment settings, with the result that you can now specify different settings for height, width, and alignment for large, medium, and small devices. See the Separator module article for details.
For details, see the Separator module article
The Google+ icon has been removed from the Social section on the Controls tab. See the Slideshow module article for details.
The Mailpoet 3 integration now shows all lists.
There are two additional options on the Structured data tab: contentUrl and embedUrl. For details see the Video module article.
- You can now set the width for single columns.
- You can now set custom positions for column backgrounds. If you use a Photo background in your column's Style settings, the Position option has a Custom position option where you can set the X position and Y position in either pixels or percent. This feature is already available for row photo backgrounds. See the background effects section in this article.
For posts (including pages and custom post types) that use a Beaver Builder layout, there's now an Add Duplicate option, allowing you to duplicate Beaver Builder layouts right from the All pages or All posts screen in the WordPress admin panel.
See the article about duplicating pages for more information. You can still duplicate pages from the Tools menu in the Beaver Builder editor.
In the Beaver Builder section in the WP admin panel, under Saved rows, Saved columns, and Saved modules, there's now a Shortcode column with an automatically generated shortcode for each saved item. Clicking the shortcode automatically copies it to your clipboard.
See the shortcode article for details.
There are a couple of improvements in what users see when their user role does not allow them to use Beaver Builder and they open a Beaver Builder page for editing in WordPress.
The following screenshots show Beaver Builder 2.4 and 2.5 for comparison. The following shows the screen when the logged-in user is not allowed to open Beaver Builder and clicks Edit to open a Beaver Builder page or post for editing in the WordPress standard editor.
In both the older and newer releases, the person with restricted access sees a View page button in the location in which there's normally a Launch Beaver Builder button. The Use Standard Editor link does not open either editor.
The second change in behavior is when the user is restricted from using the Beaver Builder and has selected the Disable the visual editor when writing option in their WordPress profile. In Beaver Builder 2.4, when they opened a Beaver Builder page they'd see the page in the WordPress code editor. In Beaver Builder 2.5, they see the same view/editor options as in the previous case:
There is now basic support for the official Font Awesome Plugin so you can use that plugin's shortcodes in your Beaver Builder layouts, improve search in the icon picker, and make it easier to add Font Awesome Pro icons. See the articles about enabling icon sets in Beaver Builder and enabling Font Awesome Pro icons.
Beaver Builder now supports SEOPress.
You can set the line height to be 0 in any Typography section.
If your hosting environment or the size of the page you're editing is such that you notice sluggish behavior in the editor, you can reduce the capacity of or disable the History Manager with a URL parameter or through wp-config.php.
You can disable smooth scrolling for a target from any link that occurs on the same page. When smooth scrolling is disabled, the link jumps to its target when clicked, rather than dynamically scrolling the page. See the article on smooth scrolling links.
Errors are now output only if the
showerrors parameter is in the URL. For details, see the Beaver Builder Debug Mode article.
You can use WP-CLI to change the values in Tools > Global Settings in the Beaver Builder editor. There are two commands: one to return a list of global settings and the other to change specific settings. See the WP-CLI article for more details.
If you want to completely disable the Outline Panel, add the following filter to your child theme's functions.php file:
fl_builder_subscribe_form_services filter lets you add a service to the list displayed in the Subscribe Form module. Here's an example.