入門歸檔 - 第 10 頁共 20 頁 - Ultimate Addons for Beaver Builder 文檔

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 Set Categories for Images?

Filterable Gallery allows categorizing images. Category names that are set to images will display as Filterable Tabs title. See How to Design a Filterable Photo Gallery?

Categories can be assigned to images while adding them to Photo Gallery module. Here are the steps –

Step 1 – Select an image from the media library list.

Step 2 – UABB Categories option will appear in the media information column on the right side. You can add more than one category separated by a comma.

Particle Backgrounds For Beaver Builder

With Ultimate Addons for Beaver Builder, you get an option to set attractive particle backgrounds in Beaver Builder. Particle Backgrounds creates attractive visual effects to increase user engagement.

Key Features –

Inbuilt Style Options – Polygon / NASA / Snow / CustomParticle Layout and customization controls – Color, Direction, Size, Speed, etc.Interactive BackgroundCustom/Personalized particles background style (No Coding Required)

WHERE TO FIND THE SETTING?

UABB – Particle Backgrounds is available with all existing Beaver Builder background options like row, column background. To set the particle background for a row, edit the row, go to the Particle Backgrounds tab.

Below are the available options with UABB – Particle Backgrounds :

INBUILT STYLE OPTIONS – POLYGON / NASA / SNOW / CUSTOM

Some default styles are available for particle backgrounds. You can choose any prebuild style or can design your own custom style. The custom styling feature is explained later in this article.

PARTICLE LAYOUT AND CUSTOMIZATION CONTROLS

The selected background style can be completely customized. You can set more specific settings from Advanced Settings. Available settings are –

ColorOpacityFlow DirectionNumber of ParticlesParticle SizeMove Speed etc.

INTERACTIVE BACKGROUND

Enabling this effect will generate an interactive effect on mouse hover like shown below. To enable this effect go to Advanced Settings > Enable Hover Effect. Note that hover effects can be viewed in the frontend only.

CUSTOM/PERSONALIZED PARTICLES BACKGROUND STYLE

Apart from the default particles style, you can design your own style with different shapes, sizes, density, etc. Here is the detailed document that shows how to add a custom style.

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 Show Video Caption on Hover?

To display videos in a more descriptive form, Video Gallery provides an option to display the caption on video hover.

A caption can be a trendy text, informative text or anything that will give more information about the video.

The setting can be found under Video (tab) > Gallery. Follow the steps below to add a caption to each video.

Step 1 – Select a video from the media library list. Caption option will appear in the video settings box.

Step 2 – Caption will not appear on video unless you set it to display on hover. Navigate to Syle ( tab ) > Content > Show Caption on Hover set to Yes.

Step 3 – Set Caption Color and Typography.

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!

Design Filterable Photo Gallery with UABB

Photo Gallery module from UABB provides the feature to add filters for images. Filterable tabs will display above the gallery. Clicking on the tab will display related images. Here is the process to create filterable photo galley –

Step 1 – Enable Filterable Image Gallery option.

This option is available only for both Grid and Masonry layout.The setting can be found under General > Filterable Photo Gallery.

Step 2 – Set categories for Images. These will act as Tabs title.

The category names that are set to images will display as Filterable Tabs title.You can assign categories to the image from media library settings. See how to set categories for images? For example – If image A has assigned to categories BRANDING and DESIGN. While image B has assigned to categories PHOTOGRAPHY and WEB. Then Filterable Tabs will automatically display all 4 categories. On clicking on any of the tab will display related images.

Step 3 – Customize Filterable Tabs.

Category names will automatically display as Filterable Tabs. That means if you assign 5 different categories to images, then 5 Filterable Tabs for all those categories will be created.You can completely customize Filterable Tabs from Style and Typography options.

UABB Advanced Posts Custom Posts Layout shortcodes and usage?

Facing any difficulty while using shortcodes in the Advanced Posts』 Custom Post Layout?

You will have to use the Beaver Builder Shortcodes that will help you insert post data and metadata.

Firstly, you will need to select the Custom option from the Post Layout. You will then find the Custom Post Layout option appear below. You can take a look at the screenshot.

Here is how the default Layout looks when you click on the Edit Custom Post Layout link seen in the previous screenshot.

Wish to know more about shortcodes which can be used in our Custom Layout option? You can read about it in the following article about Beaver Themer-> https://kb.wpbeaverbuilder.com/article/572-beaver-themer-shortcode-index

Note:- The Custom Post Layout option is only available while the Beaver Themer plugin is installed and activated.

As you can see, there is a connection field available inside the custom layout. Using this, you can render the dynamic fields data. You will need to click on the plus Icon and use the required option from the dropdown to connect or insert the dynamic fields.

Here』s an article that speaks about the basics of Beaver Builder dynamic Fields Connections using which you can connect or insert Beaver Themer or custom field connections -> https://kb.wpbeaverbuilder.com/article/388-field-connection-basics-themer

You can also find custom, WooCommerce and Advanced Custom Fields dynamic connections if the respective WooCommerce Plugins and ACF plugin is installed and activated.

The values in the Connect and Insert fields for Advanced Custom Fields will be displayed in a separate window where you will need to choose the Field Type and enter the custom field name so that they can be rendered accordingly.

Below is a screenshot on how it looks like

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 Find YouTube Channel Name and Channel ID?

UABB』s video module allows displaying YouTube Subscribe Bar for video. This bar shows Subscribe to Channel Text and Button at the bottom of the video. You need to link this subscribe button with your video channel on YouTube. Read How to Display YouTube Subscribe Bar for Video?

To connect to a channel you need to enter either its name or ID. This document explains how to get name and ID for the YouTube Channel.

Find YouTube Channel Name

If you have registered your channel name on the YouTube, you can use it to link subscribe button on the video. Below are the detailed steps to get YouTube channel name –

Open the browser and go to www.youtube.comClick on the Sign In button on the upper right corner and fill the details asked (username and password).Once you have signed in with your account, click on the user icon/thumbnail image on the upper right corner.Click on the Creator Studio. VIEW CHANNEL link will appear below your name and beside the user icon/thumbnail image. Click on it.Now observe the URL. The name will appear in the URL as shown in below screenshot.

Find YouTube Channel ID

To find the Channel ID follow the steps below –