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

Create Table by Uploading CSV

Table module allows uploading the CSV file to create a table.

CSV (Comma Separated Values) format is a plain text format in which values are separated by commas. You just need to upload it to Table module and table will form on the basis of CSV file. Below are the steps to upload CSV file –

From the Table Header > Table Source select CSV file.Click on the box under Upload a CSV File.Upload your CSV file from the media uploader.Click on Insert Media.A table will form on basis of CSV file.

Note:

Uploaded CSV will not be visible in media like images or video. CSV files will not be saved as media. So every time you wish to create a table with CSV file you need to upload a CSV file again. This is because Beaver Builder Framework does not have a facility to upload CSV file type.You can add a Sortable and Searchable table or show Entries Dropdown with this table as well. Read How to add Sortable and Searchable Table? How to Show Entries Dropdown? You can even style this table with settings available under the Style tab. Read How to Style the Table?

Introducing Table Module

UABB provides a multifunctional Table module that lets you create a table with any number of rows and columns. The table can be used for any purpose such as a comparison between products/ sales, displaying schedules, displaying changelogs and many more.

Table module allows creating searchable and sortable tables that are easy to read. It also enables the entries drop-down for longer tables that are difficult to refer to.

You can create beautiful tables with advanced styling and features. Below are the important links for related articles –

Different Table Source

1. You can create the table manually by adding the table header and content.
How to add Table Header?
How to add Table Content?
How To Add Rows And Columns to the Table?
How to Merge Columns and Rows in Table?

2. Create a table automatically using a CSV file.
Create Table by Uploading CSV

Ability to Add Sortable and Searchable Table. Show Entries Dropdown

This is a distinct feature of the Table module. It makes sorting and searching long tables easy.
How to add Sortable and Searchable Table? How to Show Entries Dropdown?

Image / Icon Option for Table Cells

You can set the image/icon for all table cells to give more information about the content. Global and local styling options are available for image/ icon.
How to Override Global Settings for Image / Icon?

Customize Table Completely

Different styling and typography options let you customize table completely.
How to Style the Table?

What Does Background Process in UABB Update Mean?

With UABB version 1.20.2 we are introducing a background process. This is related to updating the image URLs in the UABB templates.

In this article let』s see what does process will do and how to run it? But before that let』s understand –

How Images in UABB Template Worked Till Now [before v1.20.2]?

UABB offers pre-designed Page Templates and Sections in Template Cloud. You just need to import them and use on your pages.

When you insert template from Template Cloud, images used in this template are displayed from our server. That means if you import a template on your page and observe the URL for the images used, you will see images coming from our server URLs like –

uabb.sharkz.inuabbtemplates2.sharkz.indownloads.brainstormforce.com

With UABB version 1.20.2 we are changing these URLs for the images that will be stored in the Media Library of your website. And this will be done with this background process on your website.

How Images in UABB Template Will Work Now?

With UABB version 1.20.2 –

When you import/use a template, all required images in the template will be added to the media library on your websiteNow the images will have your website URL as they will be hosted in your media libraryOn pages where you have used templates with these images, UABB will replace the source URL from our server to your website URL.

In this way images, those are used to come from our server will now display from your website』s media library.

Note – This will be applicable ONLY if you use UABB template.

Why We Are Doing This?

Currently, images used in UABB templates are hosted on our UABB server.

With an increasing number of UABB users, the number of template downloads is also increasing. Since images used in templates are rendring from our server it is increasing a load on the server.Increased number of requests take down the server sometimes. Eventually, users face a broken image issue on their websites.

How to Run This Background Process?

When you update UABB to version 1.20.2 you will see notice to run Background Process on plugin』s page. The notice will have 3 actions –

Start the Process – the Background process will start importing images to your media query. The process will run in the backend and you will be notified once done. Remind Me Later – You will get a reminder after 1 week. Till then images will be served from UABB server.

Background Process might take a little time to complete depending on the templates used. This process will run in the backend so you don』t have to pause your work for this. Once completed you will get a notification on the plugin』s page.

Things to Note –

In case after completing the Background Process you see old UABB URLs for images – Don』t worry. We will automatically run the background process every 24 hours for 3 days and upload images to the media. Running a Background process on the existing website will not affect anything in the frontend. It will only add images to the media library. In case you are not using any UABB template please IGNORE the notice.

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

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 cancel my yearly subscription?

Starting from Dec 09, 2016, we』ve enabled subscription for all customers who buy a yearly license. This means, they will be charged the license renewal fees automatically.

If you do not prefer a subscription and want to make payments for license renewal manually, you can simply cancel it here.

How to update plugin manually through FTP

Sometimes it happens that due to some issue you can not update the plugin from WordPress directly. So for this you need to follow the Geeky Method i.e update from FTP.

Follow the simple steps below to update plugin manually

Download and Extract the plugin that you want to be installed in your WordPressLog into FTP Account using FileZilla or similar program.Go to wp-content/plugins directoryUpload the plugin in the directoryOnce the file is uploaded, then go to WordPress and just activate the newly updated plugin.

Note: Please make sure that the folder you upload contains all sub-files and not a folder

You can watch the below video for better understanding

How to Display Your Form in a Single Line using WPForms Styler Module?

You can create and display Inline Forms using the WPForms form builder. And yes they are supported using the UABB』s WPForms Styler module too.

In our example, we』ll be creating a form with three form fields: First Name, Last Name, and Email.

To display the form in a single line, navigate to Settings » General in your form builder and add the CSS class inline-fields to the Form CSS Class field.

After that, you might require reducing the height of your form, you can set the placeholder text and select Hide Label for each field in Advanced Options.

Here』s how the form will display inline on the front end:

That』s it! Now you will be able to create forms that will be displayed in a single line.