Ultimate Addons for Beaver Builder 文档

Unable to see the WPForms Styler Module in UABB?

Please make sure the following things are present on your website –

Step 1: You have installed the Ultimate Addons for Beaver Builder version 1.20.0 or higher.

Step 2: You have installed & activated the WP Forms plugin. You will find it under WordPress Dashboard > Plugins

Step 3: WP Forms widget is enabled in UABB Module settings. You will find it under WordPress Dashboard > Settings > UABB > Modules, also make sure the WPForms Styler Module is enabled under WordPress Dashboard > Settings > Beaver Builder > Modules

Styling Checkbox / Radio / Acceptance controls in WPForms Styler module

Have you ever wanted to style the checkboxes, radio buttons of the acceptance control in a WPForms? This is made possible with the WPForms Styler module of the Ultimate Addons for Beaver Builder!

Before we move on to the styling, please make sure you can see the WPForms Styler module in the module list. If not, refer to the article here.

The next thing you』ll want to do is enable WPForms』 built-in GDPR enhancements.

To do this, go to WPForms » Settings and click the 『GDPR Enhancements』 checkbox. This will turn on specific GDPR features that you can use to help with GDPR compliance.

Once you click this checkbox, you』ll be able to add a GDPR Agreement field to your site』s forms and customize it to meet your needs.

You can style these controls by following the steps mentioned below.

Go to the Content panel of the WPForms Styler -> Input Style tab -> Input Border Style Section -> Use Custom Style Option. You can then make changes as per your requirements.

How to Trigger Off-Canvas on the Click of a Menu Element?

The Off-Canvas module of the Ultimate Addons for Elementor allows you to display the off-canvas based on various actions. In this article, we』ll see how to trigger an off-canvas on the click of a WordPress Menu element. You can do this using a custom CSS class.

Here are a few steps you need to follow:

Step 1: Drag-drop Off-Canvas module and set it as per your requirements.

Step 2: Open Display Settings of the Off-Canvas module. Select the Custom Class option from the dropdown menu.

Add your custom class name in the field as shown below.

Step 3: Now go to WordPress Dashboard -> Appearance -> Menu

Step 4: Create a Custom Menu element on the click of which you wish to trigger an off-Canvas.

Step 5: Enable the CSS Classes option under the Screen Option settings

Step 6: Add the respective CSS class name ( the one you entered in step 2 ) under the selected menu element.

Also, select the location you wish to display the menu element on. Like we』ve selected Primary Menu in the screenshot below.

 Trigger the Off-Canvas Sitewide

The above process will open an off-canvas window only on the page where you have added the off-canvas module. If you wish to trigger this Off-Canvas on the entire website and make it work with all your pages/posts, use the 『wp_footer『 hook with a PHP function. You can paste the following code into the functions.php file of your theme/child theme.

function ultimate_off_canvas() {
echo do_shortcode('');
}
add_action('wp_footer', 'ultimate_off_canvas');

You would need to replace your-off-canvas-section-id in the above code. To get this ID, follow steps below –

1. Save the off-canvas module you set in step 1 above as a template.

2. Get the ID for this saved template. Refer to an article here. This assures that the Off-Canvas you just created, will be displayed on all the pages/posts of your website!

How to Design an Off-Canvas menu for Beaver Builder? ( Learn in 3 Easy Steps! )

Off-Canvas navigation is the need of the hour! It is an attractive way to display a navigation menu and possible to be triggered by a button/icon/Custom class/ID. With Ultimate Addons for Beaver Builder, showcasing such a vertical Off-Canvas menu is made easy.

UABB offers the Off-Canvas module that has an inbuilt option to display the navigation menu. Read about all available options here.

Below are the steps to create Off-Canvas menu for Beaver Builder –

Step 1 – Drag and drop UABB』s Off-Canvas module.Step 2 – Go to General -> Content Type, select Menu. All WordPress menus will appear in the list. Choose the required menu.

Step 3 – Now go to Display Settings and choose Display On – Button/ Icon / Custom Class / Custom ID.

And you are done!

In the frontend, clicking on the trigger (Button/ Icon / Custom Class / Custom ID) will open an Off-Canvas navigation menu. You can customize it with the rest of the available options with the Off-Canvas module.

Bonus Content: How to create an Off-Canvas similar to the Modules tab on our site?

Step 1: Add Title Attribute to the Menu items from the Menus under the WordPress Dashboard. You can find this option under the Appearance -> Menus

Step 2: Paste the below CSS in the Beaver Builder』s Global Settings under CSS section and it will render the Title Attribute of the Menu items on the Off-canvas –

.uabb-offcanvas-menu li.custom-class>a[title]:after {
background: #2ecc71;
}

.uabb-offcanvas-menu li>a[title]:after { color: #fff; font-size: 0.7em; font-weight: 600; position: relative; content: attr(title); padding: 0.3em 0.6em; top: -2px; left: 12px; letter-spacing: 0.5px; line-height: 1em; background-color: #f7b91a; text-transform: uppercase !important; border-radius: 2px; }

Note: The class custom-class is added from the Screen Options under CSS classes for respective menu items which requires a specific color,

You can change the background color and other settings as per your requirements.

Step 3: Publish the CSS and find the Tags as displayed on your Off-Canvas.

Off-Canvas Module

The Off-Canvas module allows you to design a stunning off-canvas panel that can slide-in over your page.  The off-canvas panel can be triggered with a button, text, image, icon or through any other module. This panel can display Content, Menu, Saved Rows, Saved Modules, Saved Page Templates.

Key features –

The off-canvas panel can display – Content, Menu, Saved Rows, Saved Modules, Saved Page Templates. Trigger off-canvas content with – Icon / Image / Text / Button / Custom Class / Custom IDOff-Canvas window width and position option (Left/Right)Off-Canvas window appear effect (Slide/Push)Preview off-canvas window in the backendClose Button style having options like Icon, Alignment, Size, ColorOff-Canvas window background color and content spacing

Below are the settings available for the Off-canvas Module

 Content

Under the Content section, you will see two options –

Preview Off Canvas: Enabling this option will give you a preview of the Off-Canvas so that you can see how it will appear in real-time.Content Type: Choose what type of content you wish to display in the off-canvas window. available options are – Content (text, HTML) / Menu / Saved Rows / Saved Module / Saved Page Templates

 OFF-CANVAS

Under Off-Canvas section, you will see four options –

Width: This allows you to control the width of the canvas. You can specify the width in px and responsive devices with toggle.Position ( left/right ): Choose a direction off-canvas content should appearAppear Effect: Choose entry effect for the off-canvas window.Overlay Color: This will be applied to the rest of the window than off-canvas. It will help to highlight the off-canvas window.Close Off-Canvas on Menu Link: This setting on being enabled will close the Menu on Menu item click.

Canvas background color and padding can be managed from Style tab > Off Canvas

 Close Button

Under the Close Button section in the General Tab, you will find multiple options –

You can customize the button that will close your canvas. You can set the Close Icon, select its Size, Icon Color, Icon Background Color, position and related style of the close button. Options to close popup on ESC Keypress and on Overlay Click are available.

 Display Settings

Display settings will allow you to choose a trigger for canvas. You can display it on the click of a text, icon, button or any other element (with CSS class/ID).

Read how you can trigger a canvas from Menu Element or from another Beaver Builder module.

How to find Google Place ID?

UABB Business Reviews module requires the Google Places API key to display reviews of Google Places. This article will help you find your Google Place ID.

It is very easy to get Google Place ID of your business –

Step 1 – Visit link here.

Step 2 – Enter your business location. A location drop pin will display your Place ID.

Step 3 – Copy the Place ID: xxxxxxxxxxxxxxxxxxxx and you will need to paste it in the module under the Google Place ID.

How to use Business Reviews Filters to better display Reviews?

We have provided various filters in the Business Reviews module, which will help design the reviews in a fast and efficient manner as per your requirement.

So how should go about designing and what are the options available –

Filter by – Date, Rating, none

You can filter the reviews based on the Date on which the review was posted on, or based on Rating and the last one is the default.

Minimum Rating

Need to display reviews based on the Star Rating, we provide the option to display ratings based on the Minimum Star Ratings.

You can choose to display reviews which have…..

How to find Yelp Business ID?

UABB Business Reviews module requires the Yelp API key to display Yelp reviews. This article will help you find your Yelp Business ID.

Finding Yelp Business ID is very simple –

You will find the Business ID on the Yelp』s Business URLObserve that it will appear after www.yelp.com/biz/ in the address bar and it contains the name and location of the business separated by dashes. For example, the Business ID in the following URL is 「rh-rooftop-restaurant-new-york-3「: https://www.yelp.com/biz/rh-rooftop-restaurant-new-york-3

How does the Refresh Reviews option function in the Business Reviews module?

UABB Business Reviews module requires the Google API key to display reviews of Google Places and the same goes for Yelp. This article will help you understand the working of the Refresh feature in our module.

Consider your business receives multiple new reviews every day, and we have taken care of the same, which won』t require saving the module again and again after a new review is added.

For which we have provided an option to refresh the reviews list based on the time frame you set in which you require it to be refreshed.

Let』s say on average you receive a review every other hour, or a day, week, month, or even a year.

We have provided all the options, based on which your reviews list for the Google Places, Yelp reviews or both will be refreshed.

Isn』t that a time-saving feature, just set the time frame and you are good to go.

Note:- There』s a similar term in Yelp which means Refreshing your API key, not to get confused about the same with this feature.

The option to Refresh your API key can be found in the Yelp Dashboard and is needed when your API key has been compromised, for it you can disable the same and receive a new one.

Following are the steps which need to be followed for the same –

Go to Manage AppFind the 「Refresh My API Key」 section, and click the 「Refresh My API Key」 button.Your new API Key will be displayed in place of the old one on the Manage App page.

Unable to display more than 5 Google reviews/3 Yelp Reviews?

UABB Business Reviews module requires the Google Places API key to display reviews of Google Places and the same goes for the Yelp. This article will help clarify your query regarding why you can only display a specific number of Reviews in Google Places and Yelp.

Did you notice that you are unable to display not more than 5 Google reviews in this module?

Well, there are some challenges which make this process a bit complicated to display more than 5 reviews.

Firstly to be able to retrieve all the reviews for a given business is only supported if you are a verified business owner and it requires other requirements that only work once those criteria are passed.

Due to the complexity of the same, we are not including the same right now in our module, you can follow the steps which needs to be followed – https://issuetracker.google.com/issues/35825957#comment71

Here』s the reason for the Yelp reviews not returning more than 3 Yelp Reviews – https://www.yelp.com/developers/documentation/v3/business_reviews

If there are changes or it gets eased moving ahead in the future we will surely make changes accordingly in our module.