分类： 入门

How to Create a Google Client ID for Login Form Module?

Social Login is a very widely used feature, and with many users having an account on Google and making a Google Login will only make the process of user onboarding and logging in easier than ever.

To add the Login Form module of Beaver Builder with an option of Google Login, you need to get the Google Client ID –

Firstly, you will need to drag and drop the Login Form module on the page and enable the Social Login for Google from the Social Login tab of the module.

Now you will need to follow these steps to create an app on the Google Console to use the Social Login –

Step 1: Setup the Project

Visit and register your website on Google at https://console.developers.google.com/You will need to be logged in with your Google Credentials.If you don』t have a project yet, you will need to create one by clicking on the blue Create Project button on the right side. While if you already have a project click on the name of your project in the dashboard instead, which will open a modal and click on New Project.Click the Create ButtonName your Project, and click on Create again on the top right corner of the modal.Once you have a Project you will end up in the Dashboard.

Step 2: Setup the Credentials

Select the OAuth consent below the Dashboard and Credentials from the right sidebar!Let the default Application Type be Public. Enter a suitable name for your Application under the 「Application name」, which will appear as the app asking for consent later on.Add relevant information in the below fields.Fill out the 「Authorized domains」 field with your domain name probably: your-site-url.com without any subdomains.Press Save and you will be redirected to the Credentials screen. Make sure all fields are filled out otherwise the Save button won』t work.

Step 3: Setup the OAuth credentials

Redirected to the Consent screen click on the Create credentials button in the center of the page.It will open up a dropdown, select the OAuth Client ID.In the next screen, you will have multiple Application Type for the applications which use OAuth ID. You must select the Application Type as Web Application.You will see new options below, start with the Name of your Application.Add the Authorized JavaScript Origins which must be exactly your domain name. e.g. https://your-site-url.com without any subdomains.Add the relevant Authorized redirect URIs this must be the same which will be added to the backend of the Social Login settings under the Dashboard > Settings > UABB > Social Login.Now, click on the Create Button.A modal should pop up with your credentials. If it doesn』t open, go to the Credentials tab in the left-side bar and select your app by clicking on the name you entered. You will be able to copy the Client ID from here.

Paste the Client ID in the Social Login settings in the backend under WordPress Dashboard > Settings > UABB > Social Login > Google Client ID section. And you』ve set up the client ID for Social Login successfully.

If you want to add the Facebook Social Login, visit the following link on How to Create a Facebook App ID for Login Form Module?

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?

Can not find the Parallax Option in Beaver Builder?

If you are not able to see the Parallax option in the Beaver Builder, chances are you』re using the free / lite version of Beaver Builder which does not offer the parallax feature. If you need the parallax effect along with other features of Beaver Builder, you may consider purchasing it from here.

However, should you wish to stick with the lite version, you may keep the background image fixed as displayed in the screenshot below. It will create an effect that will be very similar to parallax.

How to update UABB?

The two main methods to update UABB are:

One Click Auto UpdateManual Update

One Click Auto Update

1. Go to Dashboard -> Updates

You will find the update listed below. If not, you can click on Check Again button.

2. Click on Update

Note: Your copy of UABB should be registered in order to receive the one click updates. To know more about UABB registration, you can refer to the article here.

Manual Update

1. Login to our store and open the Downloads page.

2. Download the latest version from this page

3. Uninstall the previous version from your website (Deactivate and Delete)

4. Install the Latest version of the addon.

Other auto update options –

Automatic Background Updates

Automatic background updates do not require any action from your end to update the plugin and as the name suggests – everything happens in the background. By default, this only happens in special cases, which is controlled by the WordPress security team for patching critical vulnerabilities.

In case, if you would like to enable Automatic Background Updates for all plugins and themes on your website, you can install this plugin on your website.

If you would like to enable Automatic Background Updates only for UABB, you can paste this PHP code snippet in the function.php file of your child theme.

Update Multiple Websites from One Control Panel

If you manage multiple websites, it might be a hassle to visit their backend individually to keep them updated and maintained. However, there are many third party softwares available that help you manage all the websites and updates from one central control panel easily. Just a few of them are –

https://infinitewp.com/https://managewp.comhttps://mainwp.com/

Unable to see the address on entering?

Actually, the UABB』s Google Map requires location co-ordinates rather than Location as you add in the Beaver Builder』s Map module.

Their Google API is different, hence different functioning.

No worries, you just need to visit the link below the Latitude or Longitude field to get your location』s coordinates and paste them in the Latitude and Longitude fields.

Below is the screenshot where you can find the Tool and above the same are the fields where the Latitude and Longitude co-ordinates need to be added.

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 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?

UABB Modules List Empty on Frontend Editor/ All UABB Modules Not Displaying on Frontend Editor

Do you find some or most of the UABB modules not appear in the frontend editor?Unable to find all the UABB modules on the frontend, although they are enabled in the UABB modules settings? Some UABB modules displaying on frontend.

The first step would be to check whether you have enabled the modules. Here is an article you can refer to.

UABB Modules list empty in Frontend Editor

Apart from the UABB  modules list, we have a feature which lists UABB modules under the Beaver Builder』s Standard Category.

Now if the above setting is enabled, your client can disable and enable UABB modules from the Beaver Builder settings. Hence we also list our UABB modules under the Beaver Builder modules.

We have introduced a notification on top of our modules section which mentions the same.

You can click on the link to take you directly to the Beaver Builder modules settings, where you can enable the UABB modules and find them under the UABB modules list in the frontend editor.

Selected UABB Modules Not displaying in frontend editor

Can』t find the Gravity Forms Styler / CF7 Styler / WooModules in the frontend editor?

To find the above mentioned UABB modules, you need to make sure you』ve installed and activated the respective third-party plugins that this feature is dependent on. For example, plugins like Gravity Forms plugin, Contact Form 7 and WooCommerce modules need to be installed and activated.

Until these plugins are installed and activated you won』t see the respective UABB modules under UABB and Beaver Builder.

Unable to See CF7 Styler and Gravity Forms Styler module

Please make sure following things on your website –

1. You have installed minimum version 1.5.0 or greater of Ultimate Addons

2. You have installed & activated Gravity Form plugin for Gravity Forms Styler and Contact Form 7 plugin for CF7 Styler modules.

3. Gravity Form Styler and CF7 Styler module is enabled in UABB Modules settings

4. Gravity Form Styler and CF7 Styler module is enabled in Beaver Builder Module settings

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.