Author 诗语

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

Introducing User Registration Form Module!

The User Registration Form module of Ultimate Addons for Beaver Builder helps you to create and design the perfect user registration forms on your website. You also have the option of redirecting the user to Custom URL, auto-login, and sending an email after successful registration using this module.

Here are the key features of the User Registration Form module –

Option to Register only with the Email fieldForm Fields – Username, First Name, Last Name, Email, Password, Confirm PasswordAlso provides Anti-Spam protection using Honeypot and reCAPTCHA featureSubmit Button customizationsInput field width option for all form fieldsOption to Hide/Show the Label fieldsSet the New User Role for User Registration Form moduleRedirect the user to a specific URL after a successful registrationAuto-Login or Send Email option after a successful registrationProvides Lost Your Password & Login Page optionsProvides Password Strength Checker optionSuccess / Error message customizations

Below are the settings available for the User Registration Form module –

Form Fields

The first tab which is the General tab of the User Registration Form module will provide you with the options to choose the User Registration Form fields. Here only by providing the Email field, you can register users to your site if required.

Other than the Email field you have the options to add Username, First Name, Last Name, Password, and Confirm Password to your Registration Form.

Another important feature we provide is the Honeypot form field, this provides an added level of security to your user registration forms from the spammers and bots. Just add the Honeypot form field and it is done. Simple, right?

You will also be able to set a size for the Form fields from extra small to extra large based on your requirements. And you will find the Required Mark option which can be enabled to add asterisk mark from here to the labels on the form.

After Register Actions

Under the General Tab, you will see After Register Actions section under which you will find various after Registration options like Redirect, Auto-Login, Send Email –

Following are the above-mentioned options with a detailed description –

Redirect After Register: After the user enters his/her details for registration he/she can be redirected to a custom URL.

Auto-Login: On Enabling this option the user after successful registration will be automatically logged in to the site without requiring to log in again.

Send Email: On enabling this option the User after Successful registration can be sent an Email about their registration on your website.

General Settings

You will find the options to display the fields below the form like – Lost your Password, Login, Password Strength Checker and options to disable all the label fields at once.

Also, the option to set the New User Role or by default it would assign the User role as per the WordPress backend setting.

Register Button

Under the Register Button tab, you will be able to Customize the Register Button as per your requirements. You can edit the text of the Register Button, set the Size, Alignment, Width and also add an Icon with its positioning before and after the text along with the Icon Spacing between the text.

Success and Error Messages

You have the option to change the Success and Error Messages under the General Tab > Success / Error Messages section –

Style the User Registration Form

Under the Style tab, we have different sections like –

Form Style section: You can set the Background type like Color, Gradient or None by default. Manage the Padding, Border, Columns Gap, Rows Gap, etc. of the Form.

Input Style section: From here you can manage the Padding, Background color, Border, and Border Active Color.

Validation section: Set the Color, Border styling, and Padding for the Success Field Validation and Error Field Validation.

DIY Troubleshooting

Are you unable to edit modules or see that changed values are not being saved? Try the following method.

You will need to temporarily deactivate all plugins for few minutes except UABB and Beaver Builder. Then, activate them one by one, until the problem returns. This will help you understand which plugin is causing the problem.

Here』s a brief video of how you can debug this issue –

If you find out that our plugin is causing this issue, you can surely open a support ticket so that we can look into the issue and resolve it at the earliest.

While if you have any further questions, you can Get in touch. We will be happy to help!

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.

Woo – Products Module

UABB provides a powerful Woo – Products module to showcase WooCommerce products on any page. It is the most flexible module that allows you to display WooCommerce products in grid and carousel layout. We have added stylish skin options to enhance the layout design and we will be adding more in future.

The Woo – Products module of UABB has an inbuilt Query Builder that allows you to filter and show the exact range of products.

See the stunning layouts for Woo – Products on the demo page.

Below are the options available with the module –

General (Grid and Carousel layout)This option includes Grid and Carousel layout options. Classic or Modern Skin options add more style to the product layout. See how to set the layout.

QueryAn efficient inbuilt Query Builder provides all necessary filter options that allow displaying exact products. See how to use the query builder.

LayoutAllows managing Columns Gap and Image Hover Style. You can also control the display of product content like Product Category, Title, Ratings, Price, Short Description, Add to Cart Button. (?)

Quick ViewA quick view option shows the product details like title, description, price etc. in a popup/lightbox. (?)

Sale FlashAllows you to display/hide a sale bubble with a product. You can also enter Custom Flash String if required. (?)

Featured FlashProducts that are set as featured will be displayed with a flash bubble. Default string will be 『New』. You can enter Custom Flash Content if required. (?)

Note:1. This module will be visible only if you have the WooCommerce plugin installed and activated on your website.2. If the module is not visible in the UABB module list, then check if it is enabled from UABB settings. (?)

Translating UABB using Loco Translate

Loco Translate is a great WordPress plugin that makes translating any WordPress plugin or theme very easy by allowing you to edit translations in your WordPress dashboard.

Step 1: After you have installed and activated Loco Translate on your site, Go to Loco translate -> Plugins and select Ultimate Addons for Beaver Builder

Step 2: Click 『New Language』 to select your language

Click New Language to select your language

Step 3: Select your language in WordPress Language dropdown, Select system directory to store the translation files. The files stored in the system directory are not lost after plugin updates.

Options to be selected in loco translate

Step 4: Now click on any string you want to translate to your language, Add your translation in the text field. When you are done with adding your translations, just click save.

Add translations and save them

Note –

Make sure you have changed your WordPress language to the language you want to use.

Also worth Checking –

Translate UABB using Poedit.Translating UABB using Glotpress – The official methodBasics of Glotpress

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.

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.

Translating Ultimate Addon for Beaver Builder with GlotPress

Ultimate Addon for Beaver Builder is translation ready out of the box. This means that all the strings in the plugin can be translated to your language very easily. In this article, let』s explore how you can get it in your own language.

Contributing your Localization through GlotPress

We maintain our translations on a GlotPress project. If you want to contribute translations to your language, just register for an account on the same GlotPress project and start contributing to the translations.

When any language is more than 90% translated we add that language to the plugin so that it is available to all the users. But if your language is not 90%  translated, you can still download the language manually and start using it, We encourage everyone to contribute translations so that all the users will benefit from it.

Downloading translations manually

Head over to https://translate.brainstormforce.com/glotpress/projects/bb-ultimate-addon/ and look for your language in the list.

Now scroll down on the page where you will see the options to export the translations

Select the format to be 『Machine Message Object Catalog  .mo』 and then select export.

Make sure the name of the exported file is  for example, Great Britain English should be en_GB.mo

Upload the file on your server

The file that you just downloaded should be uploaded in – /wp-content/languages/plugins/bb-ultimate-addon/

Notes –

The language of your WordPress installation should be the same as you want for our plugin. To change the language of WordPress, go to – Dashboard > Settings > General.The file should have a correct name so WordPress can read it. You may refer this article for more information.

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.