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

Slide Box Module

The Slide Box module is an interactive module which allows to display information to the users as they click or hover on them.

This module can help you create some quick sections with just a drag and drop of Slide Box module.

Here』s a screenshot of the Slide Box –

Adding Slide Box Module –

Let』s see how to use Slide Box module in Beaver Builder –

Note: Before starting make sure you have Beaver Builder and Ultimate Addons for Beaver Builder plugins installed and activated.

Step 1 – Edit page/post with Beaver Builder and opt to add new module. Search and drag-and-drop the Slide Box from the UABB』s Modules list.

Step 2 – Add a relevant title, Photo/Icon from the Image Type, select appropriate Layout options and add some description and choose heading tags.

Step 3 – Once you are done adding all the content you can configure with advanced features, colors and typography.

Configure Slide Box With Advanced Features

The various Advanced settings and Features that allow you to manage the layout, background of the module, Color and Size of the Image/Icon, and more styling options for all the elements.

Let us take a look at each settings section of the Slide Box module in brief.

Below are the few key features we have taken care of –

Customize Front & Back of Slider

There are separate sections for the Slide Box Front and Slide Box Back where you can insert the content and manage the Icon/Image position.

You can also manage the Image style from Simple, Circle, Square, or even 「Design your own」 style.

Also, you will have the options to manage the position of the Image/Icon. And also manage the Mobile Structure.

Add an CTA to the Back of Slider

They are one of the most important feature which allows the customers to take action. It basically direct the user to the required section of the website or take them to the Services Page, Contact Page, etc.

Interactive Styles for Better Engagements

We provide three Interactive Styles under the Styles tab of the module. Here you can simply select the required Style modify other settings if required.

Change the background, spacing, alignment and even an Overlay Icon which is display on viewing the back of the Slide Box.

You can also set a Minimum Height for the Styles.

How to Create a Facebook App ID for Login Form Module?

Social Login also has the option of Facebook login allowing your users to login with their Facebook Account easily.

Here are the steps the user will need to follow to generate Facebook』s App ID for the Social Login of the Login Form module –

Visit the Facebook Developers page and log in if you aren』t logged into Facebook. Make sure you are not logged in using your Business Account.

If you have already created a Facebook App before, skip to Step 2: How to Create an App for Facebook App ID.

Note: From version 1.24.2, you will need to copy the App Secret and paste it in the Social Login Settings in the backend. Step 3: How to get the App Secret ID?It is necessary for the App ID and App Secret for the Facebook Login to be visible on fronent

Step 1: Setup your Facebook Developer Account

If you are a new user and never registered to the Facebook Developer console, click on the Getting Started Button on the top left corner.You will see a Welcome Screen modal-popup to Facebook for Developers. Now clicking on Next will Create a Facebook Account for Developers.You must select Developer and you are done. Now, click on the Create First App.

Step 2: How to Create an App for Facebook App ID?

Open the My Apps menu button on the top-right corner, and select the Create App option.A Popup will open, enter a Display Name to identify the App ID. Now click on the Create App ID on the modal right corner.You will be redirected to Add a Product page, choose the Facebook Login by clicking on Set Up.Select WWW as the Platform for this App.On the next screen, enter the Site URL where you will be using the App ID and click on Save. Also, make sure your site has an HTTPS protocol for the App ID to work as expected. i.e. the site URL should have an https at the beginning.Now go to Settings > Basic below the Dashboard in the left sidebar. Here you will find the App ID which needs to be copied and pasted in the backend of the Social Login.And under the Product section in the left sidebar, choose Facebook Login product and click on Settings which will open the Client OAuth Settings.Here you will need to enter the Valid OAuth redirect URIs which will be the same you have entered in the backend.And you are done.

Step 3: How to get the App Secret ID?

You can find this setting – On the App ID screen( Facebook Developers Console page > Settings > Basic ).

The App Secret ID is encrypted and you will see it like this – *********

Click on the Show option on the same field and you will be asked to log in to see the App Secret Key.

You will need to paste the App Secret in the UABB Backend – Social Login Settings tab – Social Login > Facebook > App Secret and Save the Changes.

If you want to add the Google Social Login, visit the following link on How to Create a Google Client ID for Login Form Widget?

Introducing Pagination Support for Photo Gallery module!

From Ultimate Addons for Beaver Builder v1.28.0 we are introducing the most sought after feature in the Photo Gallery module – Pagination Support with Scroll and Load More button.

So let』s see how we can enable them on your existing Photo Gallery –

Step 1: Visit your Photo Gallery module

Step 2: Go to General Tab -> Pagination Section -> Pagination Setting and enable Pagination and select from the Load More button / Scroll Pagination.

Step 3: Save the module settings and your Photo Gallery is updated with Pagination Settings.

Note: Pagination feature will not work if the Filterable Gallery is enabled

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 –

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.

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 set Hover Colors and Animation for Price List?

Price List module provides a feature to set the hover background color, hover border color and hover animation. It improves the usability of the price list greatly.

The setting can be found under Style tab -> General section

Along with above settings, the module provides flexibility to manage Spacing Between Price Items and Spacing Between Image & Content.

Introducing – FAQ Module for Beaver Builder!

Did you ever have a requirement where you need to add FAQs to your website? The FAQ module will now allow you to create FAQ pages or add FAQs with little to no effort and in turn, increase your click-through-rates.

Before getting into detailed information, let』s take a quick look at the key features of the module –

Quick and Easy SetupLayout options from Grid / Accordion (default)Display custom Content in the moduleOverall Customization optionsSelective Schema insertionSchema Integration as per latest Google Guidelines

Now, let』s see how you add a FAQ module and create FAQ pages with ease and also see all the key features of the module in the process –

Start with dragging-n-dropping into the Beaver Builder editorEdit or remove the default Strings as per your requirement to the Title and ContentStyle the FAQ as per your website style layoutEnable SchemaReview and verify the page on Google Structured Data Testing ToolAnd that』s it.

How to Select the Layout Options?

Navigate to the General tab > Settings > Layout to Select the Layout Options.

Here you will be able to choose from the Layout options like – Grid / Accordion ( Default )

You can also choose the Grid layout and select the Columns to be displayed.

How to Enable Schema for the FAQ Module?

Navigate to the General tab > Schema > Enable Schema Markup and choose Yes.

This will insert Schema Integration to your page.

How to Verify the FAQ Schema Added to Your Page?

Google provides a Structured Data Testing Tool. Visit this link – Tool Link.

There you will find two options to test your Structured Data containing Schema –

You can either copy your page URL and add it in the Page URL section or copy your page』s source by pressing ( CTRL + U ) and Paste it in the Code Snippet section. And press Run Test button below it.

On the next page, you will see detected Schema results – where you will need to find the FAQPage schema. If there are no errors or Warnings, your page is ready for Rich Search results to be displayed for Google.

Click on the FAQPage schema and you will find the Question and Answers you have provided in the respective Name and Text fields of the Schema Markup.

How to Preview the FAQ Schema Added to Your Page?

Google provides another tool called a Rich Results Test tool. Visit this link for the tool.

Even here you will find two options to test your page』s Rich Results for they would display on Google Search.

You can either copy your page URL and paste it in the URL section or copy your page』s source by pressing ( CTRL + U ) and Paste it in the Code section. And press Run Test URL/Test Code button below it.

The following option – 「Googlebot smartphone/Googlebot Desktop」 is just beside the Test URL/Test Code button, you will have the option to preview in 「Smartphone/Desktop」, you do not require to change here anything. But you can preview your Rich Result in Desktop view too.

Next, you will see a page that says, Page is eligible for rich results. Click on Preview Results and you will see an example of how your FAQs can be viewed on Google Search Results.

Go ahead and try out the FAQ module on your FAQ page, and make them eligible for Google Search easily,

Introducing the How-to Schema Module for Beaver Builder!

UABB brings a new module which now allows creating How-to pages or articles. And on top of it, you will have Schema Markup added to the page, without a single line of code.

Let』s see how you create How-to Pages using the module.

Before diving in, let』s take a quick look at all the features –

Automatic Schema Integration as per latest Google GuidelinesQuick and Easy SetupHelp with Default textsOverall Customization options

Let』s see the key features in details –

Quick and Easy Setup

So to get started, you will just need to drag-n-drop the How-to module in the Beaver Builder editor.

The How-to module can basically be used on How-to pages which contains a How-to in their title and contains steps to achieve certain requirements.

It is required to have How-to in the Title of the Page and contain steps. Other than that a How-to page can have Section Step Title, Estimated Cost, Duration to complete the task.

Also, you can add relevant images to each of the steps so that they display those Images in the Google Rich Snippets once ranked accordingly.

Overall Customization Options

Just like every UABB module has every feature which can be customized as per your requirement.

Even in the How-to module, you will be able to customize every part of the content added from the module.

You will find all the styling options under the Style tab of the module –

Box Style section: From here you can manage the Alignment, Background Color, Padding, and Border

Title section: The Title section will allow changing the color and managing the margin-bottom.

Description section: This section allows changing the Description』s color and manage the margin-bottom.

Image section: This section can set alignment, width, padding and add Border to the Images of the Image.

Steps section: This section has Section Title Color and Margin option as well as the Image Width for the Images added to the individual Steps.

Automatic Schema Integration

The module helps to automatically integrate Schema from the required fields of the module and in turn, increase the Click-Through Rate(CTR) of your page on Google Search Results.

Let』s say if you don』t have your website at the top of Google Search Results, and your competitor』s website result is on the top spot. While if you are at the number three spot, so with schema-enhanced rich snippets will attract more attention and, in turn, might lead to higher CTR.

We have made sure every field is mapped using the Google Preferred JSON-LD schema markup so that you do not have to write a single line of code to integrate schema on your How-to Page.

According to the Schema.org, there are two fields which are required for the How-to Schema type. They are Title and Steps.

Google has laid down some content guidelines on where and where not to use this Schema Type.

One more important thing to note for the How-to Schema is that – the Rich Results on Google will only be displayed on mobile devices and not on the desktop.

Here』s the list of Properties we are providing in our module –

NameDescriptionImageEstimated CostEstimated TimeSupply ToolsSteps

You can also take a look at the fields that we have mapped with the properties. Here are the definitions of the How-to fields.

Also, you can test the Schema after addition on your page using the Rich Results Test Tool provided by Google.

How to Design the Email Template to Receive User Information within the email?

The Contact Form module of the Ultimate Addons for Beaver Builder is a boon for all those who wish to let their audience contact them through the website.

All the data captured through this form is forwarded to you through email on the id that you have set.

If you wish to receive the email address and phone number within the email body, you will have to add this option in the Email Template tab.

The Email Template is a tab where you can edit the message that you』ll receive in your inbox.

Following are the steps you』ll need to follow in order to receive the email address and phone number within the body of the mail.

1. Once you enable Phone and email fields, their variables will be available for use within the email template. Refer this screenshot.

2. Copy the variables of fields you want to display in the mail, and paste them in the Email template.

3. Save.

You are done! In the above example, we』ll now receive the name, email address, subject and message within the body of the mail.

Getting Started with the Ultimate Addons for Beaver Builder

An Overview:

The Ultimate Addons for Beaver Builder is an addon built to enhance your experience of working with the easiest page builder, Beaver Builder. With over 60+ advanced and creative modules and 200+ page and section templates, UABB with Beaver Builder is all you』ll need to build websites in minutes.

Let us take a quick tour through the plugin

1. To begin with: Let』s Install the Plugin

Installing the plugin is a matter of minutes! You can install the Ultimate Addons for Beaver Builder like any other plugin on your WordPress website. Purchase the plugin, download it from our store and install it through the plugins page. You can refer to the document here to know more.

Note: Make sure you at least have the Beaver Builder Lite version or Pro version to use the Ultimate Addons for Beaver Builder.

2. Let us now activate the license…

License activation is an important step so that you do not miss out on the privileges you deserve after buying a licensed copy of our plugin. In order to register your copy and activate the license of UABB you will have to follow a couple of easy steps. You can refer to the document here to know more.

3. Begin working with Templates…

The Ultimate Addons for Beaver Builder comes with over 200+ well designed templates that make building websites fun and easy. To use Sections and Page Templates, you need to install them first from the Template Cloud settings. Here is an article from our knowledge base that will help you know more. You can also refer to the set of articles here to know more about working with templates.

4. Building your First Page with UABB…

The Ultimate Addon for Beaver Builder is built to suit and match the interface and environment that Beaver Builder has. Therefore, you can simply drag and drop modules seen under Add Content -> UABB Modules, and proceed with the settings. Here is an article that will help you build a page with Beaver Builder and the Ultimate Addons for Beaver Builder.

Now, that you』ve succeeded in building a page, go on and build an entire website; Yes, in minutes!

Few other things we think you should know:

You can upgrade your license from an annual one to a Lifetime

(If you have a 1 year license now)Sure. If you choose to upgrade to lifetime license, it only costs the difference you already paid. Please see more details here.

UABB offers Global Settings

The Ultimate Addons for Beaver Builder lets you set some Global settings that can be applied to a particular module throughout the site. To know more about the global settings, you can refer to the article here.

You can disable unwanted modules

We understand the pain of piling up everything, although you might use only a few. Therefore, we let you disable the modules you do not wish to use on a site. This in turn reduces the server requests. You can enable these modules again when required. To know more about enabling / disabling modules, you can refer to the article here.

Row separators can be found in Row Settings

Unlike other modules, Row Separator settings are found when you edit a row. Learn how to use this module here.

We have articles that will help

You』ll find a number of articles published in various categories that promise to help and guide you while working with the Ultimate Addons for Beaver Builder. You』ll find them here.

Finally, we take pride in offering world class support.

Go ahead and create your website. May it be as awesome as you are!

How to Create a User Registration Form using Beaver Builder?

Looking to create a user registration form using Beaver Builder?

Well, we have the easiest solution for you. User Registration Form module of Ultimate Addons for Beaver Builder allows creating such forms with ease and convenience.

Let』s see how you can create and add a user registration form for your website in three simple steps –

Note: Make sure you have the Membership option enabled under the WordPress General Settings under Dashboard -> Settings -> General -> Membership. This would allow any user to register on your website.

Also, below the same option you need to set the New User Default Role, this role will be set for the new user when he/she registers on your website.

Let』s say you have a Membership site, and you require the user to register on your website and to have a default User Role as Subscriber.

So here you will have to set a default User Role, this role will be set for the user when he/she registers on your website.

To know more about all the User Roles the WordPress provides, refer to the following article.

Now, let』s see the steps –

Step 1: Create a User Registration Form Using the Module

To create a user registration form, make sure you have the UABB plugin updated to version 1.22.0 and the module is activated.

Next, create or add a New Page and edit the page where you want to add the User Registration Form module.

Now, drag and drop the module, and you will see the default Form Fields.

You can either remove or add other fields like Username, First Name, Last Name, and Confirm Password.

On individual edit form field, you have the option to manage the Required, change the field type, edit the Label, Placeholder, Enable Required and Input Width option.

Other than that, you will be able to add or remove the Label of the field.

Step 2: Configure Your Form Settings

To configure, visit the General Settings section, here you will be able to do the following –

New User RoleChoose After Registration Actions

Let』s see this section in detail –

New User Role

Let』s say you have a Membership site, and you require the user registering on your website to have a default User Role as Subscriber.

So here you can set a default User Role, this role will be set for the user when he/she registers on your website.

To know more about all the User Roles the WordPress provides, refer to the following article.

Choose After Registration Actions

We provide the following Actions which can be performed after the User registers using the Registration Form module –

Redirect After RegisterHide After RegisterAuto LoginSend Email

Let』s see them in detail –

Redirect After Register: Using this option you can redirect the user after successful registration to a Thank You page or a login page. You can paste the required Page URL in the URL field under this option.

Hide After Register: Sometimes you might require hiding the registration form after the user has successfully registered. This option will hide the Registration Form and display the Successful message and provide a link to visit the login page for logging in to the respective website. You can find the option in the General settings section.

Auto Login: This option will get the user to logged in to your website automatically after registration. The user will not require to login after registration as he will be directly logged into the website after the successful registration.

Send Email: This option will send an email to the User with a message that he/she has been successfully registered to your website. You can customize the email content under the Email section.

You can also use this feature and use a single Email Form field to register a user. Refer to this article on How to Create a Registration Form with Only Email Field in Beaver Builder?

Further, you can Style the user registration form from the Style tab of the module, you can refer to this article to help you Style and understand the options for the form styling.

This completes the creation and configuration process for the User Registration Form module. Now the form is ready to be used on the Live Website.

Step 3: Add the User Registration Form to Your Website

Just like any other Beaver Builder module, you can directly drag and drop to add this module. Or you can save the section containing the module and fetch the Saved Module, Saved Row on the required registration page.

Here are a few more ways as mentioned in this article to help add this or any other module in the Beaver Builder editor.

Example: User Registration Form on a WooCommerce Page

Let』s say for example we want to create a custom WooCommerce – My Account Page. Let』s name the page as Custom Account Page –

Now, click on the Launch Beaver Builder button, and you will be taken to the Beaver Builder editor.

Using the above-mentioned steps we can create a similar Registration Form and Save the same which we will be using on the Custom Account Page.

You can style and design or modify the form completely as per your requirement.

Lastly, to set the page as My Account Page visit the WordPress Dashboard and under – WooCommerce > Settings > Advanced > Page Setup > My Account Page select the My Account Page as – Custom Account Page

This would display the page containing UABB』s User Registration Form module on the WooCommerce Account page.

Conclusion:

There you go, you are now ready to register users using the Registration Form module of UABB! You can create a stylish Registration Form for your website using Beaver Builder and UABB.

Go ahead and visit your Beaver Builder editor to create a stylish Registration Form for your new users.