Ultimate Addons for Beaver Builder 文档

How to add WooCommerce Add To Cart button on the page?

Woo – Add To Cart Module allows you to add a WooCommerce Add To Cart button anywhere on the page. It allows the user to add a product to cart, on the click of the button with predefined quantity and then navigates the user to cart page.

Refer a demo for Woo – Add To Cart Module here. The information boxes displayed with the button on demo page are designed separately with other modules.

Below are the available options for Woo – Add To Cart Module –

Product– Start typing name of the product that you wish to add to the cart when the user clicks the button. Also, choose the Quantity.– When a user clicks the button, the selected product will be directly added to the cart.– You can choose if you want to Auto Redirect to Cart Page on the click of the button.

Button (?)– Various options to customize the button are available here.– More options are available under the Style tab.

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

How to use Row Separator feature effectively?

A webpage is often made up of a number of rows and sections. Separating these rows and sections with a simple horizontal line is old fashioned. The Ultimate Addons for Beaver Builder has a row separator module that allows you to use artistic separators that separate one row from the other.

Here are a few Details you would want to know about this module.

How to use a Row Separator?

1. Add a New Page or open an existing one in the Page Builder.

2. Insert a row on the page.

3. Click on Row Settings

4. Go to the Effects tab in the Row Settings.

You will find around 14 Separator options for the Top and bottom.You can select the separator you wish to use for each.

5. Select the Type of Row Separator you wish to insert

You can then…

Set width in percentage and size in pixelsSet the Size for Medium-sized devices and small-sized devicesSelect a background color for the same

6. Save Settings

Where can I find Row Separator?

The Ultimate Addons for Beaver Builder comes with a set of Row Separators that you can use across your website.

Since, this is a feature that enhances row settings, you will find the Row Separator feature in Row Settings -> Effects tab.

Refer this screenshot –

To know more about how to use the Row Separator module effectively, please refer to this article.

How to Add Custom Links to Photo Gallery images?

UABB』s photo gallery module allows you to add a number of images under a single module so that they can be displayed collectively and viewed together.

There are times when you may need to add a custom link for every image in the gallery.

You can do this by following the steps mentioned below.

1. Begin by adding an Image link in the Image detailsOpen your media library. Click on the image, and enter the link you wish to add as the image link.

2. Add the images in the gallery

3. Select Custom Link as the Click ActionScroll down in the General Settings of the Photo Gallery module.

Note: You will have to add a link to every image as done in Step 1.

Styling Contact Form 7 Radio Buttons and Checkboxes

Have you ever felt the need to style radio buttons and checkboxes in your Contact Form? We have introduced Radio Button and Checkbox Styling options.

In order for them to work properly, you need to wrap each item with label element by checking the field as shown below.

This option has to be checked while creating both radio buttons and checkboxes.

How to Set Multiple Column Fields in CF7 Styler Module?

We often need to set multiple form fields in columns, while designing a form. This is where we need to write some custom CSS code to design the form. With the Contact Form 7 Styler module, it is very easy to display fields in multiple columns by using predefined column classes listed below. You just need to add Custom CSS Class as required in the CF7 wrapper shortcode. Please take a look at the screenshots below.

You can add a class to the wrapper of the div as shown below.

One Column Display

uabb-cf7-col-1

Two Column Display

uabb-cf7-col-2

Three Column Display

uabb-cf7-col-3

Four Column Display

uabb-cf7-col-4

Five Column Display

uabb-cf7-col-5

Six Column Display

uabb-cf7-col-6

Off Canvas Effect in Advanced Menu

Have you ever wanted to use the Off Canvas effect for Advanced Menu on your website? The Ultimate Addons for Beaver Builder has introduced this feature in version 1.6.0.

You can use this feature by following the steps mentioned below.

Step 1:

Open the Advanced Menu Settings and select the menu that you had created in Dashboard > Appearance > Menu

Step 2:

Select Responsive Toggle in the Responsive Tab.Hamburger Icon: Hamburger icon will be shown.Hamburger Icon + Label: Hamburger icon will be shown followed by the user entered label.Menu Button: A label entered by user will be shown.None: Toggle button will not be shown.

Step 3:

Select Responsive Layout > Off Canvas in the Responsive Tab.

Step 4:

Select a Direction in which you wish to show the Off Canvas Menu.

Step 5:

Enter Animation Speed for the Direction selected in step 4.

Step 6:

Select the appropriate Responsive BreakpointsDisplay on All Devices: Show Off Canvas on all devices i.e desktop, tablet, and mobile devices.Display on Medium and Small Devices Only: Show Off Canvas only in tablet and mobile devices.Display on Small Devices Only: Show Off Canvas only on mobile devices.Enter a Custom Breakpoint: Select Custom to enter a custom breakpoint.

Overlay Effect in Advanced Menu

Have you ever wanted to use the Overlay effect for Advanced Menu on your website? The Ultimate Addons for Beaver Builder has introduced this feature in version 1.6.0.

You can use this feature by following the steps mentioned below.

Step 1:

Open the Advanced Menu Settings and select the menu that you had created in Dashboard > Appearance > Menu

Step 2:

Select Responsive Toggle in the Responsive Tab.Hamburger Icon: Hamburger icon will be shown.Hamburger Icon + Label: Hamburger icon will be shown followed by a user entered label.Menu Button: A label entered by user will be shownNone: No Toggle button will be shown.

Step 3:

Select Responsive Layout > Overlay in the Responsive Tab.

Step 4:

Select Effects for the Overlay Menu.

Step 5:

Enter Animation Speed for the Effect selected in step 4.

Step 6:

Select appropriate Responsive BreakpointsDisplay on All Devices: Show Overlay effect on all devices i.e desktop, tablet, and mobile devices.Display on Medium and Small Devices Only: Show Overlay effect only in tablet and mobile devices.Display on Small Devices Only: Show Overlay effect only on mobile devices.Enter Custom Breakpoint: Select Custom to enter a custom breakpoint.

WP CLI Commands

Ultimate Addons for Beaver Builder v1.3 adds support for some WP-CLI command.
In case you have not heard of WP-CLI
WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs and much more, without using a web browser.
Activate your license of Ultimate Addons for Beaver Builder using WP-CLI
wp brainstormforce license activate uabb
Deactivate your license of Ultimate Addons for Beaver Builder using WP-CLI
wp brainstormforce license deactivate uabb
PS – In the commands above, don』t forget to replace with your actual purchase key.
 

BTW, Recently we contributed a WP-CLI command to Beaver Builder plugin core to clear its cache
wp beaver clearcache
This will clear the beaver builder cache on your site.
wp beaver clearcache --network
This will clear the beaver builder cache on all the WordPress multi sites.

Equal height option of Advanced Post module isn't working properly?

Equal height option of Advanced Post is a purely JavaScript dependent functionality, where we are calculating the post height on page load & applying that height through JavaScript.

Sometimes, this functionality fails to calculate the equal height of blog posts if the LazyLoad feature is enabled by any third party plugin or the theme that you are using.

Basically, Lazy-load is the functionality which loads images when image area comes in viewport. With this scenario – Advanced Post』s equal height option fails to calculate the exact height of blog posts.

In order to use the equal height option, regretfully you would need to disable the Lazy Load functionality.