Beaver Builder 2.2 changes to specific modules

Here's a list of how the Beaver Builder 2.2 changes and enhancements have been incorporated into specific modules.

Accordion module

New features:

  • After you save a label and text in the first item of the Accordion module, it remains open in the editing screen even when the Expand first item field is set to No. This is so that you can see the style settings while editing. The published page correctly follows the Expand first item setting.
  • The Collapse inactive and Expand first item settings have been moved from the Style tab to the Items tab.
  • The Style tab has been extensively enhanced and divided into four sections shown in the following screenshot and described below.

1 Unlabeled top section (Accordion Style tab)

The top section has settings that style the item layout, with settings for item size, item spacing (the vertical space between items), and item border. The border settings use the new responsive Border section common to other modules.

The Item size field has the choices Small, Medium, and Large. This setting functions like a preset and controls padding of the item and in some cases font size, as shown in the following table. When the font size is the default (in other words the font size set by the theme), then font size is controlled by this preset. If you set a specific font size for the label or content in the Typography section on this tab, then that custom size overrules the preset.

Settings Small Medium Large
Label padding Top 10px Right 15px Bottom 10px Left 15px Top 15px Right 20px Bottom 15px Left 20px Top 20px Right 25px Bottom 20px Left 25px
Content padding Top 0px Right 30px Bottom 10px Left 15px Top 0px Right 40px Bottom 15px Left 20px Top 0px Right 50px Bottom 25px Left 25px
Font size (when font size is default set by theme) Default 20px 26px

2 Label section

Controls the styling of the item labels, which appear when the item is collapsed.

Note: Accordion labels are not marked as headings in the rendered output and without any custom settings use the default text font and size. You can customize text font and size in the Text > Text typography section.

3 Icon section

Customize the icon that appears to expand and collapse the items.

4 Content section

Controls the text that appears when the item is expanded.


Button module

Changed features on the General tab:

  • The Icon position and Icon visibility fields are hidden until an icon is selected.

The Style tab has a number of changes and is shown in the screenshot and described below.

Changed features on the Style tab:

  • The previous Colors section has been removed.
    The background and text color fields in that section have been moved to the new Background and Text sections, respectively.
  • The previous Structure section was removed.
    For the Round corners field, use the Radius field in the Borders section.
    Set font size at Text > Typography > Font > Size.
    Button width, button alignment, and padding appear in the unlabeled first section (#1 in the screenshot).
    See the Related Article below for how to set the alignment toggles.
  • The Responsive style section was removed, because the Alignment field has a responsive icon setting that you can click to set alignment for each device size.
  • The Background style field (now located in the Background section) no longer has a Transparent option.
    To create a transparent button, in the Background section use the color picker to set a background color with reduced opacity, then in the Border section add a border if you wish.
  • The Transition field has been relabeled the Background animation field, but the functionality remains the same: if enabled, there‚Äôs a 0.2-second linear transition from resting state to hover state.

New features on the Style tab:

  • If you choose Custom in the Width field, you can select the px, vw, or % unit of measurement.
    Here's an article that has a good description of viewport width.
  • The new Typography section appears within the Text section (see the Related Article below), which means you can set font family and a number of other font settings.
  • The new Border section has been added (see the Related Article below for details), which means you can now set a border on any button style, and you can set it differently for each device size.

Call to Action module

The Style tab has been reorganized into three sections, as shown in the following screenshot and described below.

  • 1 Unlabeled section
    Settings for the layout of the call to action components (inline or stacked), module background color, a border, and padding between the call to action border and its content, with settings for Top, Right, Bottom, and Left, in px, em, or % units.
  • 2 Heading section
    Settings for the heading portion of the call to action: heading color and

    the new Typography section, including new settings for font and a text shadow effect. See the Related Article below for details.

  • 3 Text section
    Settings for the text portion of the call to action: text color and the new Typography section.

Changed features on the Style tab:

  • The Structure section has been removed.
    The Layout field still appears at the top in the first unlabeled section.
    The Spacing field has been converted to a Padding field, which appears at the end of the first unlabeled section. You can set the padding differently on each side and set different padding for each device size.
  • The Heading structure section has been removed.
    The Heading tag field appears on the General tab.
    Instead of the Heading size field, set heading size at Heading > Heading Typography > Font > Size.
  • The Colors section has been removed.
    Set text color at Heading > Heading color and Text > Text color.
    The Background color field appears in the first unlabeled section.
    Opacity is now set in the color picker rather than in a separate field.

Callout module

The main changes to the Callout module are on the Style tab and Image tab, described in the sections below. The Call to Action tab has been renamed to the Link tab.

Callout General tab

The Heading tag field (h1, h2, h3) was moved from the Style tab. Other settings are unchanged.

Style tab

The Style tab has been reorganized into three sections, as shown in the following screenshot and described below.

  • 1 Unlabeled section

    Settings for module background color, border, alignment of the callout components, and padding between the callout border and its content, with settings for Top, Right, Bottom, and Left, in px, em, or % units.
    See the Related Article below for how to set the alignment toggles.

  • 2 Heading section
    Settings for the heading portion of the callout: heading color and the new Typography section, including new settings for font and a text shadow effect. See the Related Article below for details.
  • 3 Text section

    Settings for the text portion of the callout: text color and the new Typography section.

Changed features on the Style ;tab:

  • The Structure section has been removed.
    The Alignment field appears in the first unlabeled section.
  • The Heading structure section has been removed.
    The Heading tag field appears on the General tab.
    Instead of the Heading size field, set heading size at Heading > Heading Typography > Font > Size.

Image tab

On the Image tab, the settings are different depending on whether you select a photo or an icon in the Image type field.

Changed features for photos:

  • There's a new Photo style section.
    The Photo crop field has been moved to this section.
    There's a new Width setting for the photo, in px, vw, or %.
    There's a new Alignment field, which can be set for each device size. See the Related Article below for how to set the alignment toggles.
    The new Border section lets you set a border or border effects. See the Related Article below.

Icon settings haven't changed.

Link tab (formerly Call to Action tab)

The two main sections, Link and Call to Action, haven't changed.

If you set the Call to action > Type field to Link (formerly labeled Text), there's a new Link text section, as shown in the following screenshot and described below.

The Link text section lets you assign link color, and the Link typography subsection is the new standard Typography section. For more details, see the Related Article below about the typography settings.

If you choose Button as the link type, a number of Button settings sections become visible, as shown in the following screenshot and described below.

These button sections have most of the options of the Button module. The Button text section includes the new Typography section, and the Button border section includes the new Border section. See the Related Articles below for more information about the new Typography and Border sections.


Heading module

The HTML tag setting (h1, h2, etc.) was moved from the Style tab to the General tab, and the default setting has changed from h3 to h2.

The Style tab settings except for color were integrated into the new Typography section. Because the Typography section includes the ability to set typography differently for each device size, the Mobile structure section was removed. See the Related Article below about the new Typography section.


Icon module

The Style tab settings have been rearranged and enhanced in the following ways.

  • The Size and Alignment fields have been moved to the top of the Settings tab (formerly under a Structure tab).
    See the Related Article below for how to set the alignment toggles.
  • The Alignment setting can be set responsively, so the Mobile structure section was removed.
  • There's a new Text subtab, with text spacing (distance from the icon), text color, and the new Typography section. See the Related Article about the Typography section for details.

Map module

Changed feature:

  • The Height setting now has a unit choice of px or vh (viewport height, in hundredths).

New feature:

  • The Border section was added, with the full set of border line and border effect settings. For more information, see the Related Article below about the Border section.

Settings on the Style tab were regrouped for consistency with other modules. There are four sections:

  • Menu
    Sets menu alignment (left, center, right) and background color. Click the icon to customize the setting for large, medium, and small devices.
  • Links
    Sets link and link background colors, link padding, and link typography. See the Related article below on typography for more information about those settings.
  • Separators
    Show or hide vertical separators between menu items and define the separator color.
  • Dropdowns
    For submenu items that display when there are child pages, there are settings for the dropdown background color and two types of padding--the padding inside the dropdown background area, and the padding inside the box that highlights the text.

The following diagrams illustrate how the color settings interrelate in the main and submenus. Link color and Link hover color in the Links section on the Style tab control link text colors in both the main and submenus. Link hover color controls both the current page link and the highlighting of links on mouseover. Link hover background color controls the background color that is displayed, both for the current page and for mouseovers to other pages in both the main and submenu. In the Dropdown section, Dropdown background color controls the color of the dropdown box.

Tip: As of Beaver Builder 2.2, the opacity of the background color setting is part of the color setting in the color picker. See the Related Article about the color picker for more information.

Menu module color settings

The following diagram shows the separator, padding, and shadow settings. In this example, in the Separators section, the Separators field is set to Yes and the separator color is set to white with reduced opacity. The separators display as vertical bars in horizontal menus and as horizontal bars in vertical menus, as you can see in the horizontal menu and the vertical submenu in this screenshot. The dropdown shadow appears as a very faint shadow along the edge of the dropdown box. In the Dropdown section, Dropdown link padding controls the padding between the individual link background box border and the link text, while Dropdown padding controls the padding between the dropdown background border and the link background boxes.

Tip: If you want the link background box to stretch to the left and right edges of the dropdown background box, change Dropdown padding to 0px.

Enhancements:

  • The responsive settings icon was adding to the Alignment setting on the Style tab.
    See the Related Article below for how to set the alignment toggles.
  • The Submenu spacing field was divided into two fields, Dropdown padding and Dropdown link padding.
  • Link text font, size, and now appear in the Typography section, with additional settings, all of which can be customized for large, medium, and small devices.

Photo module

As of Beaver Builder 2.2, the Photo module has a Style tab.

Changed features:

  • The Alignment and Crop settings from the General tab were moved to the Style tab.
  • There is now a responsive editing icon on the Alignment field.
    See the Related Article below for how to set alignment.

New features:

  • The Style tab has a Width setting to set the image to any width, with a choice of px, vw, or % units. There's also an icon to set width differently for large, medium, and small devices.
  • The Style tab includes the new Border section for responsive border and border effect settings.
    See the Related Article below for more information about the Border section.

Posts module

The Style tab has been reorganized, with additional settings in the following subsections:

  • Post title
  • Post info
  • Post content

Within each subsection, there is a text color field and Typography settings. The Post content subsection has additional settings for Link color and Link hover color, as shown in the following screenshot.

Note:

These two link color settings apply to post content but don't appear when content is excerpted from the post automatically. To see the link color, you need to either select full-text post content in List layout or add content with an <a> link to the Excerpt field in the WordPress editor. These conditions are shown in the following two screenshots.

1. Link color appears in full-text content List layout:

2. Link color appears when excerpt comes from WP Excerpt field:

If you don't see the Excerpt field in your Edit post screen click Screen options at the top of the screen and ensure the Excerpt checkbox is selected.


Separator module

Instead of choosing between full width and a custom percent width, the new Width field defaults at 100% but lets you set a custom width in %, px, or vw units.

The Separator module now has an Alignment setting, for left, center, and right. Note that unlike the alignment fields in other modules, this setting cannot be set differently by device size.


Tabs module

New features on the Style tab:

  • Background color setting
  • Border width setting, in pixels.
  • A new Label section, which affects the tab titles and contains the following fields:
    • Text color: applies to all of the tab titles.
    • Active color: overrides the tab title text color for the active tab.
    • Padding: the space between the tab edge and the tab title, in a choice of px, em, or % units.
    • Typography section.
      See the Related Article below about the Typography section.
  • A new Content section, which affect the text portion of the tabs and contains the following fields:
    • Text color
    • Padding
    • Typography section

Testimonials module

New feature:

  • The new Typography section appears on the new Style tab.

Changed features:

  • The Testimonials tab is renamed to the Items tab.
  • The General tab is gone.
  • The arrow icons have been changed to dots and the Dots settings are on the Style tab.
  • There's a new Slider tab, with the following fields moved from the General tab:
    • Autoplay (yes, no)
    • Delay, in seconds
    • Transition (slide, fade)
    • Transition speed, in seconds
    • Transition direction (right to left, left to right)
  • There's a new Style tab, with the following fields:
    • Layout (wide, compact) (moved from the General tab).
    • A Text section, with a new Text color field and the new Typography section.
    • A Dots section (for wide layouts), or an Arrows section (for compact layouts), with the ability to show or hide the arrows/dots and set the arrow/dot color.

Text Editor module

The Text Editor module has a new Style tab, with the following settings.

  • Text color 
  • Typography section
    See the Related Article below for details about the Typography section.

Note: You can still set color and font size in the text editor on the General tab. Usually, if you use the toolbar to add a custom color or font size, <span> tags are inserted with the appropriate color or font-size attribute. If you're setting a color of font size for the entire set of text, it's better to use the Style tab, because it results in cleaner markup. However, if you do set custom values for portions of the text by using the text editor toolbar, the custom value will override the settings on the Style tab for that portion of the text.