Author 詩語

How many numbers of reviews can be shown for Google and Yelp?

Business Reviews module allows displaying Google and Yelp business reviews. To fetch reviews for your business you would need to add respective Google and Yelp API key. Here are some important points to note –

Your business reviews are fetched over these API keysGoogle allows only 5 reviews to fetch with Google API key.Similarly, Yelp allows fetching only 3 reviews.

Google and Yelp provide a limited number of reviews that are fixed. And this is dependent on which reviews Google and Yelp consider as the 「Most Relevant」 to your business.

Business Reviews module allows the option for auto-refreshing reviews. You can use this to fetch newly added reviews based on the time frame in which you receive reviews.

Marketing Button

This module allows adding button with icon, title and a extra line of description. So that you can write a catchy line to make easy for users to take the action.

Key features –

Add title, description, and link to the button Add icon and set its size, position, spacing Customize button with background and spacing options Text typography and color options Border style

Add content to the button

Under General tab, you can add a title, description and link.

Add Icon

From the Style tab you can choose icon for the button and manage its position, size, spacing.

Customization for button and content

Under Style tab you will find options to set colors and background for the button. Under Typography tab, font size, font family etc. can be set for the cotent.

How to Add Custom Particle Backgrounds Style?

With UABB– Particle Backgrounds you get some prebuild particle styling. Apart from these default styles you can customize and personalize background style with JSON code. You can do so with a few easy steps and don』t need to have any coding skills.

You can customize and add custom JSON code from the link here. Below are the steps –

Visit the link here to design a custom particle styling.Choose options as per requirement. You can select particles styling like shape, color, size, number, etc. From interactivity options, you can choose interactive effects on mouse hover/click. You can even set a page background for particles.Once you are done with setting custom styling, click on the Download current config (json). This will export the required JSON code for your custom styling.Open the above-downloaded file and COPY the entire code.Go to your Beaver Builder page and open the Style tab for the Row or Column you want to set background for.Under UABB– Particle Backgrounds, choose Style as Custom. Paste the above-copied code under Add Particle Json window.

Save the changes and you are done!

How to Set a Custom Placeholder Image for the Video?

When you add a video to the galley, the default placeholder image will display before playing a video. You can override this with a nice custom thumbnail that gives a finishing touch to the video gallery.

The setting can be found under Gallery > Choose a Video > Thumbnail > Custom Thumbnail

Choose the option Custom Thumbnail and set an Image.

You can adjust the Overlay Color. See How to Set Overlay Color on the Video Thumbnail on Mouse Hover?

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 Display Specific Filterable Tab as a Default on Page Load?

On page load, you might have observed that, in the filterable tabs bar, the default 「All」 tab is active. You can change this and set another tab to be active on page load.

The setting can be found under General > Filterable Photo GallerySet Default Tab on Page Load to Custom. Enter a category name that you want to set as a default tab. The category name that you will enter will display as the active tab on the page load.

Note: Make sure you enter the exact same name for the category set for the image. Refer How to Set Categories for Images?

Here is an example of how it works –

Consider some of the images are assigned a category Design. You wish to display the Design category tab active on page load. Now set Default Tab on Page Load to Custom and set Default Tab as Design ( make sure the name is exactly same as the category name set for the images )On the page load, the Design tab will be displayed as an active tab, and images that are assigned a category Design will display under it.

How to get Yelp API key?

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

With the Yelp developer documentation, you will find detailed steps. But below are necessary and selected actions you would need to take –

Create an app to obtain your private API Key.Authenticate API calls with the API Key.

Step 1 – From the link here, click on the Create App link.

Step 2 – It will take you to the login page. Login with your account details

Step 3 – You will find your API key under General > Manage App. You can enter your email ID and description on this page.

Step 4 – Copy this API key. Now, from the WordPress dashboard, visit Settings > UABB > General Settings > Business Reviews – Yelp API key, and paste the key under the Business Reviews – Yelp API Key section.

Please keep the API Key to yourself since it is the credential for your call to Yelp』s API.

Working with the UABB Color Picker

Deprecated from Version 1.3.0

Like the change in the Beaver Builder UI, UABB also comes with an enhanced color picker that looks similar to the one available in WordPress; but has an additional opacity bar too. In this document we』ll be seeing the following points:

Switching between the UABB Color Picker and Beaver Builder Color PickerIntegrate UABB with Beaver Builder Color picker/ inherit the saved colorsWhat happens when you switch the color picker?

Switching between UABB Color Picker and Beaver Builder Color Picker

1. Click on Page Builder, seen under Settings

2. Click on UABB General Settings

3. Enable or Disable the UABB Color Picker option

Note: This feature is enabled by default

4. Save Settings

Inherit Preset Colors from Beaver Builder Color Picker to UABB Color picker

The color picker in Beaver Builder allows you to preset colors and save them for later use. For those who are worried of inheriting present colors while using UABB』s color picker, we have a solution for that too.

The preset colors you saved while using the Beaver Builder color picker are inherited and added to the color panel of the UABB color picker.

Suppose I have the following colors saved using my Beaver Builder color picker

This is how my UABB color picker will look like

As seen in the images above, the present colors are inherited and added to the UABB color panel.

What happens when you switch the Color Picker?

If you have already worked on a number of elements and set colors using the present color picker, you need not worry while switching them. Whether it is switching from the Beaver Builder color picker to UABB color picker or vice versa, the selected color will be inherited automatically, until you change it manually.

Note:- For the Latest settings and features introduced in the UABB modules you can refer the following article. Releasing compatibility for Beaver Builder 2.2!

Not Able to See Particle Backgrounds

Sometimes enabling the Particle Backgrounds does not display particles in the background. This might happen because widgets are covering the entire row and there is no space for particles background to show up.

For example – In a row, you have added a heading and added a spacer above and below the heading. This will occupy the entire space in the row. So particle backgrounds added to row will not display as it has heading and spacer above it.

To solve this you can remove the spacer and add padding for the row. So that particle backgrounds will display.

How to Display Specific Video Category Tab as a Default on Page Load?

When you enable filterable gallery for videos, this option appears. On page load, you might have observed that the default 「All」 tab is displayed. You can change this tab with a Default Tab on Page Load option.

The setting can be found under the Video > Filterable Tabs > Default Tab on Page Load.

Choose option Custom and enter a category name that you want to set as a default tab. That means the category name that you will enter will display as the active tab on the page load.

Note: Make sure you enter the exact same name for the category set for the video. Refer How to Set Categories for videos?

Here is an example of how it works –

Consider some of the videos are assigned a category Lifestyle.And you wish to display the Lifestyle category tab active on page load.Choose option as 『Custom』. Then enter a Default Tab as Lifestyle ( make sure the name is exactly the same as the category name set for the videos ).Now on the page load, Lifestyle tab will be displayed as an active tab, and videos that are assigned a category Lifestyle will display under it.

Note: If you want to display 「All」 tab as a Default Tab, leave the option to FIRST.

Related documents –

How to Design Filterable Video Gallery?