Ultimate Addons for Beaver Builder 文檔

Woo – Mini Cart Module

The Ultimate Addons for Beaver Builder v1.29.0 introduces the Woo – Mini Cart module for the Beaver Builder family with cool options that will help you display your Inline/Floating cart that matches the design of your website.

Key features —

Cart Styles – Icon/Text/Icon+TextDropdown Styles – Dropdown/Modal/Off CanvasCart Position – Inline/FloatingShow Badge ( Items Count )Show Subtotal

Below are the steps to use the Woo – Mini Cart Module for Beaver Builder –

Adding Woo – Mini Cart module

Let』s see how to use Woo – Mini Cart module in Beaver Builder –

Note: Before starting make sure you have Beaver Builder, Ultimate Addons for Beaver Builder, and WooCommerce plugins activated. Ensure you are above version 1.29.0 and above.

Step 1 – Edit page/post with Beaver Builder and insert the module to the desired Beaver Builder row.

Step 2 — Select a style for the Mini Cart on how you would like to display with some Text/Icon or Both.

Step 3 — Now, with options like Custom Text for the Cart, Show/hide the Subtotal or Badge. Also, you can control the position of the badge to display inline or Top. And finally, manage the alignment of the module too.

Step 4 — Some cool options are available under the Cart section of this module. Here you can handle the options to display the Preview Cart details in the Dropdown that can be showed on Hover/Click. And also display the Cart Details in the Modal or Off-Canvas.

Also, you will find the Cart Button Position – Inline/Floating under the Cart Content

Step 5 — Matching the Mini Cart and it』s preview based on the Beaver Builder』s settings preview is one of the most important things.

Following are the Styling options for the Woo – Mini Cart module for Beaver Builder —

Cart Icon/Cart Badge — You can style the Cart Icon and Badge from the Cart Style section of the module.Cart Container — Under this option, you can manage the background type, Cart Height, Cart Width, Padding and Spacing between View Cart & Checkout button.Cart styling — Further you have options to style the Cart Button』s Typography, Cart icon size, Color, Subtotal, empty message, Overlay Color, etc.

Further we have sections for settings like –

Cart Sub Total / Cart Title / Cart Message – You can modify the Text Color, Background Color, Border and Padding.Cart Message / Empty Cart Message– Including the above settings you can align the options.Item Container – Options here include Item Name Color, Item Image Border, Item Qunatity & Price Color, Remove Item Icon Size, Color and Border.View Cart Button / Checkout Button – These provide further options to manage the Typography, Space, Color options to make them look better.Responsive options — All these options are with responsive settings so that you can manage them on different screen sizes.

How to Enable Taxonomy Filters in Advanced Posts?

Many users want to showcase their portfolio or blog posts with filters. These can be filtered by category, tags or custom taxonomy. Advanced posts module allows you to use taxonomy filter when post appearance is selected as masonry. List of taxonomies appears depending on selected custom post type. Please note, if taxonomies are not registered for custom post type, filter section will not appear.

Here are a few steps you can follow to enable filters in the Advanced Posts module:

1. In General tab select post appearance as Masonry.

2. Select appropriate Taxonomy Filter and Layout among buttons and drop-down.

3. Now you can style filter by navigating to Style tab. If you have selected drop-down layout, you can apply typography to elements by navigating to the Typography tab.

You can also use multiple filters on the same page.

Is it Possible to Close a Modal Popup on the Click of a Button or Text?

We have already seen how you can create a modal popup, design and manage its behavior in Beaver Builder. Refer to the article here.

What if you wish to allow users to close the popup when they click on some text or a button present on it?

You can do this too!

You can use the 「uabb-modal-close」 class to do so.

All you need to do is:

1. Under the Content tab of Modal popup settings, select Type = Content.

2. Use the class within any HTML code that you wish to add.

Example

Continue shoppingHere, the modal will get closed when the user clicks on 「Continue shopping」.

Filters/Actions for Hotspot Module

Filters / Actions available for Hotspot Module are listed below.

Filter: uabb_hotspot_next_labelDescription: This filter will help to Modify 「Next」 text in the hotspot tour.

add_filter( 'uabb_hotspot_next_label', function( $next_label, $settings ) {
// Modify the string here
return $next_label;
}, 10, 2 );

Filter: uabb_hotspot_previous_labelDescription: This filter will help to Modify 「Previous」 text in the hotspot tour.

add_filter( 'uabb_hotspot_previous_label', function( $previous_label, $settings ) {
// Modify the string here
return $previous_label;
}, 10, 2 );

Filter: uabb_hotspot_endtour_labelDescription: This filter will help to Modify 「End Tour」 text in the hotspot tour.

add_filter( 'uabb_hotspot_endtour_label', function( $endtour_label, $settings ) {
// Modify the string here
return $endtour_label;
}, 10, 2 );

How can I install the Ultimate Addons for Beaver Builder?

Before we begin with the installation, we extend a warm welcome and wish you a wonderful experience with UABB.

In order to install the Ultimate Addons for Beaver Builder on your WordPress Website, you will have to follow the steps mentioned below.

Login to our store.Go to My Accounts -> DownloadsDownload the plugin. You』ll get a zip file on your computer.On your WordPress website, install the zip file like you install any other plugin.Activate the plugin.Activate the UABB license. You can get the license from here.

You are all set to create wonders with Beaver Builder and the Ultimate Addons for Beaver Builder!

Slide Box Module

The Slide Box module is an interactive module which allows to display information to the users as they click or hover on them.

This module can help you create some quick sections with just a drag and drop of Slide Box module.

Here』s a screenshot of the Slide Box –

Adding Slide Box Module –

Let』s see how to use Slide Box module in Beaver Builder –

Note: Before starting make sure you have Beaver Builder and Ultimate Addons for Beaver Builder plugins installed and activated.

Step 1 – Edit page/post with Beaver Builder and opt to add new module. Search and drag-and-drop the Slide Box from the UABB』s Modules list.

Step 2 – Add a relevant title, Photo/Icon from the Image Type, select appropriate Layout options and add some description and choose heading tags.

Step 3 – Once you are done adding all the content you can configure with advanced features, colors and typography.

Configure Slide Box With Advanced Features

The various Advanced settings and Features that allow you to manage the layout, background of the module, Color and Size of the Image/Icon, and more styling options for all the elements.

Let us take a look at each settings section of the Slide Box module in brief.

Below are the few key features we have taken care of –

Customize Front & Back of Slider

There are separate sections for the Slide Box Front and Slide Box Back where you can insert the content and manage the Icon/Image position.

You can also manage the Image style from Simple, Circle, Square, or even 「Design your own」 style.

Also, you will have the options to manage the position of the Image/Icon. And also manage the Mobile Structure.

Add an CTA to the Back of Slider

They are one of the most important feature which allows the customers to take action. It basically direct the user to the required section of the website or take them to the Services Page, Contact Page, etc.

Interactive Styles for Better Engagements

We provide three Interactive Styles under the Styles tab of the module. Here you can simply select the required Style modify other settings if required.

Change the background, spacing, alignment and even an Overlay Icon which is display on viewing the back of the Slide Box.

You can also set a Minimum Height for the Styles.

Advanced Icons Module

The Advanced Icons module allows adding beautiful Icons and Images that are designed to entice the users to visit the links.

Or you can display series of Images of clients you have worked for.

It can help you create some quick Icons/Images sections with just a drop of this module.

Here』s a screenshot of Advanced Icons –

Adding Advanced Icons Module

Let』s see how to use Advanced Icons Module in Beaver Builder –

Note: Before starting make sure you have Beaver Builder and Ultimate Addons for Beaver Builder plugins installed and activated.

Step 1 – Edit page/post with Beaver Builder and opt to add new module. Search and drag-n-drop Advanced Icon from the UABB modules list.

Step 2 – Select a relevant Icon, or insert an Image and choose its structure to display Horizontally or Vertically.

Step 3 – Once you are done choosing a structure you can style the Icons/Images with individual style settings or global settings.

Customize the Advanced Icon with Advanced Settings

The Advanced Settings in the Advanced Icon allow you to Style the Icons/Images by managing the Icon Size, Alignment.

Also, you have the option to choose from the two Color Presets, and also manage the Icon Color/Hover Color, Background Color/Hover Color.

You can also set the Gradient colors.

Table Responsive Support

We are introducing the responsive support for the Table module which will now let you display the Table as Stacked. This feature is introduced in Ultimate Addons for Beaver Builder version 1.28.7 and above.

How to Enable the New Responsive Layout Option for Stacked?

Let』s see how to enable this responsive option in the Table module in Beaver Builder –

Note: Before starting make sure you have Beaver Builder and Ultimate Addons for Beaver Builder plugins activated.

Let』s see where you can find this option –

Step 1 – Edit page/post with Beaver Builder and opt to add the module. Search and choose Table from the modules list.

Step 2: Make necessary data to the Table Content and Table Body.

Step 3: Go to the Features tab of the Table module. Now, under the Responsive section select Stacked. Now on the mobile responsive view, you will be able to view the Table as Stacked as shown in the initial video.

Business Reviews module

Business Reviews is a very interesting module that allows displaying specific stars based reviews of your Businesses using the Beaver Builder. You can list the most famous Google Places and Yelp or both at once. This enables you to display your brand value』s across respective platforms on your site.

We have also taken into account Schema Markup based on your Business Type so that they will help the various search engines return more informative results for users in Google Search results.

Key Features –

Supports Google & Yelp ReviewsInbuild Schema Type – Place / Organization / Service Prebuilt Skins – Box (default) / Card / BubbleGrid & Carousel Layout for review boxesOption to Show/Hide Reviewer Info like Reviewer Name, Date reviewed on, etc. Filter reviews by – Rating/ Review DateStar rating style – Default / CustomReview box style and spacing controls

Render reviews based on your business to the Module

Displaying Google and/or Yelp reviews require you to render the ID for your business. This helps the module to connect to your business and fetch the respective reviews. Under General > Review from, choose if you wish to display Google and/or Yelp reviews.

For Google reviews –

Search your business on Google Map and get the Google Place ID. Here is step by step guide to get Google Place ID.After entering the ID, if you face issues in fetching the reviews make sure you have entered the correct Google Map API key. See how to get the API key.Note: Maximum 5 Google reviews can be displayed (Content > Layout > Reviews to Show). Read why?

For Yelp reviews –

Get the Yelp Business ID. Here is step by step guide.After entering the ID, if you face issues in fetching the reviews make sure you have entered the correct Yelp API key. See how to get the API key.Note: Maximum 3 Yelp reviews can be displayed (Content > Layout > Reviews to Show). Read why?

Choose Layout Style

You can display a Grid or Carousel style among the various layout optionsThe module offers ready-made clean layouts and styles for all the reviews.

Skin ( General > Skin > Select Style ): This arranges review meta information like date, ratings, reviewer image, name, etc. in different positions. So that you can display review as card, bubble or default box.Grid & Carousel Layout ( General > Layout > Select Layout ): This will set all reviews in the grid or carousel (slider) layout. Layout tab also offers a setting for a number of Reviews to Show. Select the number of Google (maximum 5) and Yelp (maximum 3) reviews to display.

Style the reviews

Under General tab you get settings to manage reviews as follows –

FiltersFilter reviews by – Date or RatingMinimum Rating – Choose to display reviews above particular Star RatingsRating – Choose to display star ratingsStar Icon Style – Choose to display a default star style or customize it.Review Text – This gives control over the text of the review

After displaying the reviews you can filter them based on the Date, Review, or display them as it is. You can also select if you want to display only 5 Stars or only 4 Stars review based or as per your preference of Minimum Rating.

Reviewer Information

You can hide/display information of the people who wrote a review for your business. Under General > Reviewer Info, select to hide/display name and image (profile picture) of the reviewer.

You can manage the space of every element of the Business Reviews, like the space between the Rows and Columns, between Reviewer Name, Date, Rating, etc…

Inbuild Schema Type

Note: After the recent Google Review schema changes ( applicable from 16th September 2019 ), we are deprecating the Schema Support from UABB』s version 1.22.0.

Previously, we used to support Place, Organization and Service Schema. But after this update Places and Service are not valid items under the AggregateRating as per the new rules of the Google Review snippet.

While Organization is the valid Item under the AggregateRating but in this case, the name field is required to be added under the Organization schema type.

As per the new rule in Google schema, all the self-serving reviews embedded by the 3rd party widget are not going to display review rich results anymore for the organization schema.

Social Share Module

The Ultimate Addons for Beaver Builder v1.28.4 brings some much sought after features for the existing Social Share module.

Following are some of the new features you would notice –

Multiple Social Share Presets Floating ButtonHover animationsColor Skins

Let』s see them in brief and how it would make it easier to make your posts to be shared with your users –

Social Share Presets

There are various presets provided with the module starting with the default presets which would give the original look and feel for the existing users.

Next, you will see the following presets which are as follows –

GradientMinimalFlatFramedBoxed icon

Each of them have respective options to help modify them as per your requirement.

Position – Inline / Floating

This feature would basically allow you to make the Social Icons float and also position it on the left and right. You can find this option under the new section on the Social Share modules』 first tab under the General section.

We have also provided an option to manage the Vertical Floating Position this would enable the Icons to be visible as per the choice of your vertical position.

This Style options are provided under the Style tab of the module.

With the existing shape options for the Social Icons now you can select the number of icons in single column or keep it on Auto. And also the Alignment of the Icons from Left, Right, or Center.

Animations

There are some very interactive animations provided with this new update for Social Share module.

You can find them under the Style tab of the module.

Here are all the animations listed out here –

GrowShrinkPulsePushPopFloatSinkFloat Shadow

Color Skins

Sometimes it』s preferable to start with the default Social Icons colors or you would need to match with your color code.

This scenario has been looked into and for which we have the custom skins. These skins would help you choose between the Primary and Secondary colors including the Hover color.

Note

Do update to the latest version 1.28.4 and above to find these new features.Also, we have deprecated the Google Plus option from the social share as Google has shut down the Google Plus servers.