Ultimate Addons for Beaver Builder 文件

Introducing Login Form Module for Beaver Builder

Looking to add a custom login form or just need to add a Login Form with an option of Social Login? Don』t worry, UABB is bringing you the Login Form Module for Beaver Builder with such nice features.

Just drag and drop the Login Form on your Beaver Builder page, style and modify it as per your color scheme and your website is ready to welcome new users with a brand new login form.

Let』s see the Key Features –

Custom Form – Username / Password Social Login support – Facebook / GoogleOption to hide custom form – login only with social buttonsCustom redirects for Login & Logout Show / hide / customize labelsEasy & 100% customization optionsLog In Button style optionsField validation style options

Below are the key settings of the Login Form module –

Login Form Fields

On the initial drag and drop you will see the default WordPress Login Fields which are Username or Email Address and Password, Remember Me checkbox, Log In button.

They do have some styling different than the WordPress login form, but being able to style the labels, field style and also the message color takes it a step ahead.

You can even change the labels and display the Lost your password and Register button. And the Register button has an option to provide custom text and link to it. This will help you to provide your custom Registration Page URL. Read on How to Create a User Registration Form using Beaver Builder?

Also, you will have the option to provide custom redirects after a successful login or logout. Making it easier to create redirects as per your requirement.

And the last feature, to take your login experience to the next level is the Social Login feature. You will have the option of Facebook and Google Login. For which you will need to get the respective client IDs from the Google console and Facebook』s developer console.

Custom Redirects

Need the user to be redirected to a custom URL, we can achieve this using the Login Form module.

Just enable these settings from the last section of the General Tab of the module. Add your URLs to where you would like the user to be redirected and you are done.

Social Login and Register

This feature of the Login Form will help your users log in to your website making it as simple as ever. On clicking on the respective Social Login, the user will just need to authorize the website and he will be logged in using his Social Profile.

In this age of social media, getting the users registered and logged in to your website in the simplest ways will only increase your registrations. Isn』t that, cool?

Visit the links, if you want to figure out the Steps to Create a Google Client ID and also for the Facebook App ID?

Style the Login Form

Under the Style tab, you will find styling options for the Login Form –

Form Style section: Set the background style, Form Padding, Border, Row Gap, spacing, etc.

Input Style section: Style the input fields from this section.

Checkbox Style section: The Remember Me checkbox can be styled from this section.

Error Message Style section: The error messages can be given some padding, change their colors, etc.

Login Button Style section: The Login button of the form can be styled from this section.

Social Button Style section: From here the Social Button can be made Inline or Stack and also manage the spacing between Facebook and Google Social Login buttons.

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?

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

Introducing Retina Image Module for Beaver Builder

The Ultimate Addons for Beaver Builder now allows you to add Retina Image for high definition screens, removing any need for using other Retina plugins or tools.

Here in this article, we will see how we can implement the Retina Image on your website using the Retina Image module.

Let』s see some important features of this Retina Image module.

Key features of the Retina Image module –

Upload the Retina Image for High Definition screensProvides SVG support for image or Logo

Like all the other modules for Beaver Builder, the Retina Image module can simply be dragged and dropped in the row or column you want it to appear.

You can then proceed with the various settings that allow you to add the Default Image, Retina Image and display custom caption. Let us take a look at each settings tab of the Advanced Heading module.

Below are the settings available for the Retina Image module –

 Retina Image

Under the General tab, you will see a few options –

Default Image and Retina Image: Under the Default and Retina Image section you will be able to add your default Image as well as the Retina Image.

Below the Retina Image section, you will see other sections like Size and Alignment, Caption and Link under which you will be able to set the Image Size, Alignment, Caption, and Link.

 Styling

Under the Style tab, you will see two options –

The Image Style section will allow you to set the Background Size, Color, Border Radius, Image Effect.

While the Caption section only displays when you have set the Custom Caption in the General tab.

Honeypot field in User Registration Form for Beaver Builder

In UABB』s version 1.22.0, we introduce the User Registration Form module for Beaver Builder having the Honeypot field to fight spammers.

Here we provide a Honeypot field, which is a better way than to fight pesky spammers rather than using reCAPTCHA.

Table of Contents

What is Honeypot?Advantages of using Honeypot?How to Setup Honeypot in User Registration Form module?

 What is Honeypot?

Honeypot field helps you fight spammers, by adding a hidden field only visible to spambots. This field helps the admin identify whether the user is a spambot and not a user.

When a spambot fills in the honeypot field, the form is rejected as spam. Thereby, the spambot will get stuck and won』t be able to submit the form.

Therefore, Honeypot is a great alternative as it will not bother users to go through maths and Image problems to register on your website. And the valid users will be able to register with ease and convenience.

 Advantages of using Honeypot?

Prevents spambots from attackingHelp understand future attack preventionHelps focus on the malicious users making the investigation easierOne-click setup

 How to Setup Honeypot in User Registration Form module?

To set up the Honeypot field in the User Registration Form module you need to create a page and Edit with Elementor.

After that, you will just need to drag and drop the module in the Beaver Builder editor.

Next, in the Anit-Spam Protection tab > Honeypot enable the Honeypot option.

That』s all, now publish the page and your User Registration Form is now protected from the Spammers.

You are now ready to make your website』s registration form spam-free using the User Registration Form module. We also provide Google reCAPTCHA support to our module.

How to renew yearly license?

1. Please login to your store account and open Purchase History page.

https://store.brainstormforce.com/purchase-history/

2. Click on the 「View Licenses」 link of your purchase.

3. On manage license page you can find the link to extend your license. Just click on that link & complete the payment procedure to renew your license.

Note: The expiration date of your license would be exact 12 months from the date on which license has purchased / expired.

Example: If you purchased in July 2016, and renewed in May 2017. Then your license would expire in July 2017, giving you one full year ( 12 months ).

Frequently Asked Questions about User Registration Forms

We have listed down a few Frequently Asked Questions which you might have while using the User Registration Forms –

 1. How Do I Enable/Disable User Registration?

The option to enable and disable the User Registration in WordPress is found under the WordPress Dashboard > Settings > General > Membership > Anyone can register

Note: Make sure this setting is enabled while you are using the User Registration module.

 2. How Do I Manage a New User Role on WordPress after Registration?

Managing or assigning a User a pre-defined User Role upon registration can be done from the WordPress Dashboard > Settings > General > New User Default Role

Note: Make sure you select respective User Role based on your website』s User Requirement, while you are using the User Registration module.

 3. How Do I Manage Users on WordPress after Registration?

After the Users are registered successfully on your website, and you would like to update the User Role for few users. To do so you will need to visit the WordPress Dashboard > Users > All Users

From here you can edit the User and update his user role as per your requirement.

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.

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?