詩語，作者 Ultimate Addons for Beaver Builder 文件

Video Module

Video module uses an innovative optimization technique. It provides a smart way for embedding YouTube, Vimeo videos to your page without sacrificing page speed.Following key features makes the module unique –

Loading Time Optimization – Module embeds the thumbnail image of the YouTube/ Vimeo video instead of the actual video.Custom Thumbnail Image – Set a nice thumbnail image for video with overlay color.Play Button Customizations ( Supports Image, Icon ) – Set icon or image as a play button with hover animations.

Here is a comparison between page speed – Embedding video with Traditional way vs Embedding video with Video Module.

The module allows embedding video from YouTube and Vimeo.

Video Options Available with Video Module –

YouTube VideoVimeo VideoWistia Video

Video Options For YouTube video

Autoplay: Video will play automatically on the page load.Suggested Videos: After the video you』re watching ends, the player window shows a grid of 「suggested videos.」 These video suggestions are chosen automatically from YouTube』s public video list.Player Control: Choose whether to display controls like play, pause, volume controls, full screen and more.Mute: Allows muting the video.Modest Branding: Prevent the YouTube logo from displaying in the control bar.Privacy Mode: This prevents YouTube to store the visitor』s information on your website unless they play the video.

Video Options For Vimeo video

Autoplay: Video will play automatically on the page load.Loop: Choose a video to play continuously in a loop. The video will automatically start again after reaching the end.Intro Title: Displays title of the video.Intro Portrait: Displays the author』s profile image.Intro Byline: Displays the author』s name of the video.Controls Color: Set color for the video player controls.

Video Options for Wistia Video

Link & Thumbnail Text: Unlike the YouTube and Vimeo video type, here you will need to Copy the Link & Thumbnail text from the respective Wistia』s video.Autoplay: Video will play automatically on the page load.Loop: This would let the video to play continuously Reset: This would get back to the beginning of the video displaying the video and thumbnail, make sure if they are set to display on load.Mute: Mutes the volume of the VideoShow Playbar: Displays the progress bar of the video in the bottom Playbar.

How to Get a Valid Link for Wistia Video

To get the Wistia video』s link you will need to go to your Wistia video, right-click on it and choose the last option of 「Copy Link and Thumbnail」. Now copy the same and paste it in this field.

Note: If you change the thumbnail or link from the respective Wistia』s video, make sure you paste the Link & Thumbnail text in this field again here.

Set specific play time for video

The module allows entering –

Start and End time for YouTube videoStart time for Vimeo video

When a user clicks to play the video, it will start playing from the defined start time and will stop at the defined end time.

Note:

1. To embed videos, enter a full link for the video.For example,

For YouTube video –✔️ Valid link: https://www.youtube.com/watch?v=aqz-KE-bpKQ&t=3s✖️ Invalid link: https://youtu.be/aqz-KE-bpKQ

For Vimeo video –✔️ Valid Link: https://vimeo.com/274860274✖️ Invalid Link: https://vimeo.com/channels/staffpicks/274860274

Why can』t I see Cloud Templates?

Available from Version 1.3.0

If at all you are facing a problem in finding Cloud Templates on your site, make sure you make a note of the following points:

Ensure you are on Version 1.3.0 or later of UABB.If your website is a part of a WordPress multisite network, make sure the Templates are network activated.Uncheck the override setting in Beaver Builder as you can see in the screenshot below –

Note: Make sure you have at least one template installed to view the template cloud option on the frontend.

Now, once you have ensured these points, you can take a look at this article that explains how Template Cloud works.

How to Exclude Specific Headings from Table of Contents?

You might have a requirement in certain cases where you need to hide the heading from the table of contents. We have made it possible in our UABB』s Table of Contents widget to exclude the unnecessary headings from the table.

Let』s see a couple of cases to get a clearer idea on how you can achieve the same on your end –

Case 1: Hide Headings from the Single Post Page

A Single Post Page having related posts under the post content could list its Headings under the Table of Contents.

Solution: Now, to resolve this issue, UABB provides a simple way out, we have provided a CSS class which is – uabb-toc-hide-heading. There』s no need to be afraid there』s no custom code required.

We just require to add the above-provided custom CSS to the module which is displaying the posts. The provided class could be added under the Advanced tab of the module under HTML Element > Class

Case 2: Hide Headings from the Single Page

Single Page is a simple page, which contains multiple headings added using the Heading module or using text editor,

Solution: Previous solution with a CSS class, will work the same, only the difference is that the classes will need to be added to the heading tags.

Here』s how the CSS class will need to be added, to the heading of the text editor –

Also, in any other case, you will just need to use the same class as provided, to exclude the specific heading from the table of contents.

Video Gallery Module

Video Gallery module allows showcasing YouTube & Vimeo videos with innovative optimization technique. With this module, you can add a number of videos to the page without sacrificing page speed.

Below are the key points for the Video Gallery module –

Loading Time OptimizationFilterable Video GalleryGrid / Carousel LayoutEasy Video Sorting & OrderingDifferent Styles for Play ButtonAbility to Play Videos in Lightbox or InlineCustom Thumbnail and Thumbnail overlay effectsAbility to Add and Style the Video Caption

To add video to the gallery enter a valid URL. Below is the example for valid and invalid URLs.

For YouTube video –
✔ Valid link: https://www.youtube.com/watch?v=aqz-KE-bpKQ&t=3s
✖ Invalid link: https://youtu.be/aqz-KE-bpKQ

For Vimeo video – ✔ Valid Link: https://vimeo.com/274860274 ✖ Invalid Link: https://vimeo.com/channels/staffpicks/274860274

FOR WISTIA VIDEO –

To get the Wistia video』s link you will need to go to your Wistia video, right-click on it and choose the last option of 「Copy Link and Thumbnail」. Now copy the same and paste it in the Link & Thumbnail field.

Note: If you change the thumbnail or link from the respective Wistia』s video, make sure you paste the Link & Thumbnail text in this field again here.

Loading Time Optimization

This module uses the same optimization technique that is introduced for the Video module. Module embeds the thumbnail image of the YouTube/ Vimeo video instead of the actual video.

Filterable Video Gallery

This feature allows categorizing videos. It displays all video categories with Filterable Tabs. Clicking on the tab will display the video assigned to the respective category. Videos will display with a default shuffling animation. Read how to design a filterable video gallery? You can display specific category tab as a default on page load.

You can add Title for Filterable Tab. That will describe more about the filterable tabs and video gallery. Enable Title for Filterable Tab option and enter a title. You can customize the title under Vide ( tab ) > Filterable Tabs > Title for Filterable Tab.

Screen Recording 2018-10-16 at 12.21.56.44 PM.mp4

Grid / Carousel Layout

Display all videos on a page with Grid layout or display them in a nice slider with Carousel. Choose the best layout to make your gallery look stunning.

Easy Video Sorting & Ordering

After adding videos to the list you can reorder them with simple drag and drop. Videos can be sorted by categories with Filterable Video Gallery option.

Different Styles for Play Button

The setting can be found under Style (tab) > Play Button.

Play Button can be set as Image or Icon.

For Image

Choose an appropriate image from the Media Libary.Hover Animation option adds a cool look to the play button.

For Icon

Select an icon from the drop downYou can set a normal and hover color, text shadow for the icon.Hover Animation option is available under the HOVER tab.

Ability to Play Videos in Lightbox or Inline

The inline option will play video in the video layout itself. While the lightbox option will play video in a nice popup.

Custom Thumbnail for Video

You can set a nice thumbnail image for the video that will display before playing a video. Read in detail here.

Adjust the Overlay Color. See How to Set Overlay Color on the Video Thumbnail on Mouse Hover?

Ability to add the Video Caption and Style it

A caption will add short descriptive worlds about a video. You can display them on video hover. See How to Show Video Caption on Hover?

How to use the Template Cloud?

Available from Version 1.3.0

The Ultimate Addons for Beaver Builder is built to help you improve the entire experience of website building for you. While we focus on site performance and speed, we also make sure it does not add extra load on your websites. This is why we created Template Cloud.

Template Cloud is a virtual space where all the row and page templates will be available. You simply need to download the ones you』ll need in order to build a website. This makes sure that your site loads only the templates that you are about to use.

You』ll find the Template Cloud under:

Settings -> UABB -> Template Cloud

Let us take a look at how you can install the

Page TemplatesSections

1. Click on the 「Let』s Get Started」 button.

2. When clicked, it fetches all the latest templates that are available on our cloud server.

Page Templates

Page templates are the individual page templates that we have designed for you. You can install the ones you like and wish to use on your website.

When you hover on a template, you will see two options: Preview or Install

On the page Builder, under templates, this is how your installed templates will be marked within the Template Cloud.

After installing the templates from the template cloud, you』ll see all the installed templates under the Templates tab of the Page Builder.

Click and happy editing

Sections (Row Templates)

Sections are the row templates that are categorized for ease of use and understanding

You will have to install a particular category to see the sections available within it.

After installing the row sections from the template cloud, you』ll see all the installed row sections under the Rows tab of the Page Builder.

You can now simply drag and drop the section you like.

Start editing

Note: Make sure you have at least one template installed to view the template cloud option on the frontend. If you have installed templates and unable to see – try removing the templates, refresh the Template Cloud using the button on the top-right corner and install them again.

Introducing Table of Contents Module for Beaver Builder

UABB brings one of the required feature for a Blog or any lengthy page. You might want a Table of Contents to be displayed at the start of the page content. This module will help you display page』s or post』s content in a beautiful way without manually need to create a list of the titles.

Liked the table with the contents outlined above? You will be able to create a similar one using the Table of Contents module.

Using this module you will be able to add a table of contents at your desired location on the page. To start using the module, just like you add any other module in Beaver Builder editor –

Drag and drop the Table of Contents module Or search for the Table Of Contents module to drag and drop in the Beaver Builder editor

There are a few styling features, let』s first get started with the Key Features –

Fully customizable Table Heading and ContentsCollapsible Button to Hide Table』s ContentExclude Specific HeadingsSmooth Scroll

Let』s see the key features in details and drag and drop the module to get started –

Fully customizable Table Heading and Contents

Every section of the module is fully customizable. You can customize the Heading of the Table, Contents. Background, Border, Width, Alignment, Collapsible button, responsiveness, and color.

Collapsible Button to Hide Table』s Content

Sometimes you might find lengthy Contents in the table of contents covering the length of the page. Here the user might want to hide the titles of the Table and to view the first title』s content.

To achieve this we provide a down arrow button on the table called a Collapsible button. On clicking this button, it would hide the table』s contents and the user will be able to view the content below the Table of Contents.

Here you have options to display a button with text or Icon to hide the Contents of the Table.

Exclude Specific Headings

You could come across some cases, where you might need to exclude a specific heading of your post or page from the Table of Contents. Let』s say you are displaying related posts on the Post page using a Posts module.

Here we might need to exclude the headings from the Posts widget, you will simply need to add the following class to the Posts widget under Advanced > HTML Element > Class – uabb-toc-hide-heading

That』s it! Now the Posts module』 headings won』t be displayed in the Table of Contents module.

Also, checkout the following doc to know all the cases on How to Exclude Specific Headings from Table of Contents?

Smooth Scroll and Scroll to Top

Apart from changing the contents』 links color, you can click on the content title to take you directly to the respective title. And after enabling the Smooth Scroll option you will be scrolled to the respective title smoothly.

You can find this feature under the General tab, under the Scroll Effect section.

Also, you will find an option of Scroll To Top in the same section which helps to add a button on the bottom-right of the page.

Now, there』s no magic to add a well-designed index to your website』s pages! We』ve made it way easier and convenient with the Table of Contents module of the Ultimate Addons.

Simply update to the latest version 1.23.0 of UABB and add Table of Contents to all the lengthy posts and pages as required.

How to Create a User Registration Form with Only Email Field in Beaver Builder?

You can create a registration form containing only an Email Field using Beaver Builder and Ultimate Addons for Beaver Builder!

Firstly you will need to drag and drop a User Registration Form module on the Beaver Builder Editor and remove all the default Form Fields except the Email field.

Now, under the After Register Actions section under the General tab, enable the Send Email option, this would – send the new user an email about their successful account creation.

On enabling this option, an Email tab will be visible on the fourth tab, under which you will be able to customize your email template which will be sent to the User.

Here you will find the following shortcode [PASSWORD] this would send the user the Password in the email.

The user can use the Password received in the email and email used to log in to your website.

How to Open a Specific Section of Content Toggle from a Remote Link?

You can open either section of the content toggle from a remote link. That means you can use a link on any page to trigger either section of the content toggle. Below are the detailed steps –

Step 1: Add an ID uabb-toggle-init to the parent row of Content Toggle. Note that add ID uabb-toggle-init only. Other ID will not work.

Step 2: Sections of the Toggle module can be identified as content-1 and content-2 IDs. If you want to open the 2nd section use ID 『content-2『 after the URL. That means add 『/#content-2′ at the end to the page URL.

For Example –

Consider you have pages A and B. Content toggle is set on page A with section 1 and section 2. You want to open a section 2 of content toggle from page B. In this case, follow the steps –

Step 1: Add a uabb-toggle-init as ID to the parent row of Content Toggle.
Step 2: On page B, use a text, button or anything you wish to link the content toggle section. Use a URL for page A and add #content-1 (for the first section of content toggle ) or #content-2 (for the second section of content toggle ) at the end of the URL. Like -> your-domain/page-name/#content-2

Refer to the following video, which shows that the second toggle element is opened as we clicked on the button which then redirects us to the page having the Content Toggle.

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?

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