Ultimate Addons for Beaver Builder 文档

WP Fluent Forms Styler

The Ultimate Addons for Beaver Builder v1.28.0 introduces the WP Fluent Forms Styler module for the Beaver Builder family with lots of styling options and will help you display your Fluent Forms matching the design of your website.

Key Features –

Input field stylingCustom WP Fluent Forms』 Title and DescriptionGradient color / solid color backgroundEasy & 100% customization for Radio & checkboxDifferent styles for error messages and success messageStyling for the Submit button and secondary buttons

With this Styler module for WP Fluent Forms you will be to make changes or enhance your forms with the above key features.

Let』s see them in brief –

Custom Fluent Forms Title & Description

The styler module provides the option to set Custom WP Flunet Forms Title and Description. Let』s say you want to make some changes in the title of your form, you can do it right from the Styler module.

Input Field Styling

One of the required features in any Styler module is the ability to style the Input Fields as per your needs and to match them as per your website』s styling. You would be able to achieve the same with all the styling options provided.

Background Color Customization

To have your Contact Form stand out you might need to add some background color to customize it based on the color of your website. You can choose from the Gradient Colors to Solid Color and manage the colors accordingly.

Fully Customizable Radio & Checkbox

You can fully customize the Radio and Checkboxes with the WP Fluent Forms Styler module. There are various color and styling options under Style tab > Radio & Checkbox section.

Style the Success & Error Messages

Based on the Success Message you have set in the backend for your Fluent Forms, now from the module』s Message tab settings you can style the messages with Text color, Background Color, Radius and Shadow too.

Different Styling for Submit button and Secondary buttons

Yes, you can definitely style the Submit button and Secondary buttons to match your website style code. All the options have been stacked under the Buttons tab of the module. You can set Auto, Custom and Full width for the Submit button, as well as background color/gradient for the submit button. Other colors and options are also provided to add a finishing touch to the Submit and Other buttons too.

Go ahead and give your Fluent Forms a makeover! Update to the version 1.28.0 or the latest version of UABB to find this module.

Note: Make sure you have the WP Fluent Forms plugin installed and activated.

Introducing Pagination Support for Photo Gallery module!

From Ultimate Addons for Beaver Builder v1.28.0 we are introducing the most sought after feature in the Photo Gallery module – Pagination Support with Scroll and Load More button.

So let』s see how we can enable them on your existing Photo Gallery –

Step 1: Visit your Photo Gallery module

Step 2: Go to General Tab -> Pagination Section -> Pagination Setting and enable Pagination and select from the Load More button / Scroll Pagination.

Step 3: Save the module settings and your Photo Gallery is updated with Pagination Settings.

Note: Pagination feature will not work if the Filterable Gallery is enabled

Introducing Devices Module for Beaver Builder!

The Ultimate Addons for Beaver Builder v1.27.0 introduces the Devices module for the Beaver Builder family with lots of options, and help you display your pages on how it would look on the responsive mode of respective devices.

Key features –

Multiple devices options ( Phone, Tablet, Desktop, Laptop, Window )Different media options ( Image, Video, Image Slider, iFrame )Option to scroll image on hover.Orientation control for Tablet and Phone to switch between Portrait and landscape modeDevice control to switch between devices ( Phone, Tablet, Desktop ) on the frontend.

Choose your Device Type

We have provided all the types of Device Type in which you would love your customers to view the page.

They are –

PhoneTabletDesktopLaptopWindow

And we with all these options we have also provided Media Types more than the usual ones –

ImageVideoImage SlideriFrame

You also have the option to control the orientation of the device with just a click from Portrait to Landscape and otherwise.

And you can even use the Device Control to display the respective responsive options which are Mobile, Tablet, and Desktop.

Each options has their respective options refined to suit your requirements.

Devices Styling

You can style the device based on their skins which can be found under the Style Tab and has the options among the following Skins type –

BlackSilverWhiteRose GoldGoldSpace Grey

You can manage all the other styling for the Devices like Orientation Control Size, their Color, and Device Control Size too from this tab.

Content Layout

In this section below Device, based on the Media Type you will find the options to manage the Fit Type of Image, Scroll on Hover, Vertical Alignment, etc.

How to get Google Places API key?

Google Places API key allows connecting your project to the website. With the help of this, one can fetch Google reviews for your business. To display Google reviews with the Business Reviews module, the first thing you would need to set is the Google Places API key.

Google Maps Platform have detailed article about how to get API key. But below are quick and required steps to get API key –

Step 1 – Go to your Google API Console

Step 2 – From the 『Select a Project』 drop-down menu, select or create the project.

Step 3 – On the project page click 『ENABLE APIS AND SERVICES『

Step 4 – Type 『Places API『 in the search area. Select the 『Places API『 from search results and click the 『ENABLE『 button

Step 5 – On the 『Places API』 page select 『Credential『 tab and 『Create credential『 / 『API key『 option

Step 6 – Copy the created API key. Now, from the WordPress dashboard, visit Settings > UABB > General Settings, and paste the key under the Business Reviews – Google Places API Key section. 

Note: Google has now made it mandatory to have an active billing account associated with your API key. Click here to enable billing.

Google reCAPTCHA v2 and v3 in Contact Form and User Registration Form for Beaver Builder

reCAPTCHA is widely used and one of the most popular ways to prevent your website from spamming and abuse by preventing bots from being able to create users or while logging in.

Here for the User Registration and Contact Form module, if you choose to use reCAPTCHA to protect your website.

You will need to add reCAPTCHA keys, you first need to get the reCAPTCHA keys from the Google website. We have provided integration with the latest reCAPTCHA i.e. reCAPTCHA v3 and also for reCAPTCHA v2.

We would recommend using the reCAPTCHA v3 to make the registration form on your website spam and abuse-free. As it allows verifying a user or a bot without any user interaction.

Even the latest version is known to be easy on humans, and hard on the bots. Thereby, reducing user friction during the onboarding process.

 reCAPTCHA v2

Firstly, let』s add a New Page and Edit With Beaver Builder

Drag and drop the User Registration Form module in the Beaver Builder editor.

Enable the reCAPTCHA option in the User Registration Form module from the Anti-Spam Protection tab > reCAPTCHA section > reCAPTCHA.

To see the reCAPTCHA on your website, you will need to get the site key and secret key. (There』s another field to change the Score Threshold if desired. If you notice bots manage to get around the reCAPTCHA, increase the score ).

Note: Make sure you choose the correct version of reCAPTCHA and enter the correct keys in the fields.

Step 1: To get the keys, visit the Google reCAPTCHA site and select reCAPTCHA v2.

Step 2: Add a Label to identify this instance. 

Step 3: Add a domain, e.g. www.your-site-url.com

Step 4: Enter an admin email address or add a new one

Step 5: Accept the Terms of Service and Submit.

Step 6: On Submission, you will be redirected to the next page, from their copy both the Site Key and the Secret Key.

Step 7: Choose whether to place the reCAPTCHA badge to the right (bottom of the page), left (bottom of the page), or inline.

Step 8: Click Save

You will now see the reCAPTCHA badge. Refer to the image shown below for the inline reCAPTCHA position.

 reCAPTCHA v3

For the reCAPTCHA v3 just make sure you select the correct type for the reCAPTCHA and enter them in the fields.

Step 1: To get the keys, visit the Google reCAPTCHA site and select reCAPTCHA v3.

Step 2: Add a Label to identify this instance. 

Step 3: Add a domain, e.g. www.your-site-url.com

Step 4: Enter an admin email address or add a new one

Step 5: Accept the Terms of Service and Submit.

Step 6: On Submission, you will be redirected to the next page, from their copy both the Site Key and the Secret Key.

Step 7: Choose whether to place the reCAPTCHA badge to the right (bottom of the page), left (bottom of the page), or inline.

Step 8: Click Save

As per the Badge Position set, you will now see the reCAPTCHA badge. Refer to the image shown below for the inline reCAPTCHA position.

Similarly, you can see a reCAPTCHA badge on the bottom-left and bottom-right corner of the page when the respective Badge Position for reCAPTCHA is set.

And here』s the screenshot of Contact Form with reCAPTCHA –

We also have another Anti-Spam protection tool called Honeypot using this you can fight the spammers. You just need to enable the Honeypot field and your form has doubled the protection to fight the spammers.

About Beta Versions

While working on a major update for the Ultimate Addons for Beaver Builder, we make it a point to release a few beta versions before the final stable product. If you wish to try the new features, test and share feedback, you can try the beta version until the stable one is ready.
We strongly recommend you to use the beta version of the plugin on a test environment only. Do not use it on a live site. This will let you try new features and make a note of errors and bugs without worrying what breaks. We would love to hear from you.
The beta version may further come in multiple minor updates until we are perfectly sure of releasing the final version.

Things you should know before using the beta version –

Beta releases contain the early versions of a major update. They might be released a couple of weeks or a few days before the final version. Although we make sure every version offered to you is tested, there might be some minor bugs that need to be worked on.
During the beta phase there is a freeze on code. This means that only the present errors and bugs will be fixed. Apart from these, any feedback requesting for a new feature will be considered only in the next major update.
We will make sure we inform you prior to the first beta release before a major update.

Where can you download the beta version?

When beta versions are available, you can download them from your My Accounts page. You will find a section for Beta Testing under downloads.
These versions can also be updated on your WordPress website using the updater when new versions are released.

How can I install a Beta Version?

You can install and get going with a Beta version in 4 easy steps.

Deactivate & uninstall UABB plugin from your website. Don』t worry, nothing will be lost!
Download beta version from the given link.
Now install downloaded beta version.
Clear Beaver Builder & browser cache of your website.

How can I update the plugin?

Auto updates are not sent for Beta releases. Therefore, in order to switch from a beta version to the updated version of a plugin, you will have to download the updated file and install the plugin manually.

Share your feedback!

If you have something to share; whether it is a good experience working on the new features or errors and bugs you come across, please do share them with us in our support center, or post it our Facebook group for other users

How to Design the Email Template to Receive User Information within the email?

The Contact Form module of the Ultimate Addons for Beaver Builder is a boon for all those who wish to let their audience contact them through the website.

All the data captured through this form is forwarded to you through email on the id that you have set.

If you wish to receive the email address and phone number within the email body, you will have to add this option in the Email Template tab.

The Email Template is a tab where you can edit the message that you』ll receive in your inbox.

Following are the steps you』ll need to follow in order to receive the email address and phone number within the body of the mail.

1. Once you enable Phone and email fields, their variables will be available for use within the email template. Refer this screenshot.

2. Copy the variables of fields you want to display in the mail, and paste them in the Email template.

3. Save.

You are done! In the above example, we』ll now receive the name, email address, subject and message within the body of the mail.

How to set Hover Colors and Animation for Price List?

Price List module provides a feature to set the hover background color, hover border color and hover animation. It improves the usability of the price list greatly.

The setting can be found under Style tab -> General section

Along with above settings, the module provides flexibility to manage Spacing Between Price Items and Spacing Between Image & Content.

Woo – Categories Module

Have you ever thought of displaying various product categories on a single page? This is a great way to display all the categories you offer and let the users choose the one that they need.

The Woo – Categories module of the UABB allows you to display all your product categories on a single page.

You can take a look at our demos to see how the module displays WooCommerece product categories beautifully – Demo Page.

Let us take a look at some customizations that you can work on.

Choose categories to display from Query and set their layout from General options.

General – Grid/ Carousel– Select grid ( rows and columns structure ) or carousel ( slider ) to display all categories.– Select total categories count to display.– You can select a number of columns for the category on the desktop and on other devices.– The displayed category will be dependent on filter settings as described below in Query section.– By default, recently created categories will be displayed.

Query– Filter available with Query tab allows you to choose the exact categories to display.– Show All will display all available categories while Only Top-Level will display parent categories.– To show particular category/categories, choose Match These Categories and start typing the required category name. You can enter more than one category here.– Similarly, to exclude a particular category/categories, choose to Exclude These Categories and start typing the required category name.– The number of categories displayed depends on the Categories Count under the General tab.– Enabling Display Category Description will display category description entered in backend under Products > Categories > {Any Category} > Edit > Description.– Enabling Display Empty Categories will display categories which are not assigned to any products.– Order by allows you to set categories order according to Name/Slug/ Description/ Count (Assigned Product Count).  You can also choose the Descending or Ascending order from the drop-down.

Note:1. This module will be visible only if you have the WooCommerce plugin installed and activated on your website.

How to Enable Quick View for WooCommerce Products?

A quick view option in the Woo – Products Module shows the product details in a popup. This allows users to take a closer look at the product and its details without moving on to a new page.

This setting can be found under the Layout tab enabled or disabled from the Woo – Products module options.

When enabled, it will add a Quick view badge to the product image and will show a popup on its click.