Ultimate Addons for Beaver Builder 文件

How to Display YouTube Subscribe Bar for Video?

Video module provides an option to display a YouTube Subscribe Bar. When you choose to display a YouTube video, this option will appear as a separate tab.

Below are the options available under YouTube Subscribe Bar tab –

Select Channel ID/Channel Name: You need to link the subscribe bar with your video channel on YouTube. To connect to a channel you need to choose either its name or ID and enter the value. Read How to Find YouTube Channel Name and Channel ID?Subscribe to Channel Text: Edit text that displays on the Subscribe Bar.Show Subscribers Count: Choose if you want to display the current subscriber』s count.Text Color, Background Color: Customize the Subscribe Bar completely with these options.Padding: Manage space around the bar.

Default Thumbnail Broken in Video Module

Sometimes when you display video with UABB Video module, you might face the broken thumbnail image for the video. This article will help understanding why this happens.

1. If the video is set as private and not available as a public then the thumbnail might look broken. As the video is private thumbnail cannot be accessible by the video module.
# Solution – In this case, you can set a custom thumbnail image for the video. Refer article here.

2. If the video type is selected as Vimeo and the link entered is from YouTube or vice versa. Then it shows a broken thumbnail.
# Solution – Make sure you enter a correct URL for selected video type.

How to Find YouTube Channel Name and Channel ID?

UABB』s video module allows displaying YouTube Subscribe Bar for video. This bar shows Subscribe to Channel Text and Button at the bottom of the video. You need to link this subscribe button with your video channel on YouTube. Read How to Display YouTube Subscribe Bar for Video?

To connect to a channel you need to enter either its name or ID. This document explains how to get name and ID for the YouTube Channel.

Find YouTube Channel Name

If you have registered your channel name on the YouTube, you can use it to link subscribe button on the video. Below are the detailed steps to get YouTube channel name –

Open the browser and go to www.youtube.comClick on the Sign In button on the upper right corner and fill the details asked (username and password).Once you have signed in with your account, click on the user icon/thumbnail image on the upper right corner.Click on the Creator Studio. VIEW CHANNEL link will appear below your name and beside the user icon/thumbnail image. Click on it.Now observe the URL. The name will appear in the URL as shown in below screenshot.

Find YouTube Channel ID

To find the Channel ID follow the steps below –

Gravity Form – Tab Index

Have you ever come across an instance when a user clicks on the tab key and is taken top another form field? This happens because Gravity Forms assumes its tab index values.

You can avoid this! You need to change the tab index on your forms so that they work as expected.

How to set a tab index?

Add the tab index value to the form when placing the form on a page or within a post.

As for the number, just make it bigger than the number of fields you』ve got in your previous form, and you』re done!

To know more about Gravity Forms tab index, you can refer to the article here.

Business Hours Module in UABB

The Business Hours module is needed for all businesses who wish to display the day and time of when they』ll be available for their users and customers. UABB version 1.9.0 brings in the Business Hours module that will help you display stylish business hours table on your website. Take a look at a few Business Hours demonstrations here.

Let us take a walkthrough to help you understand the settings of this module.

Like all the other modules of Beaver Builder, or the Ultimate Addons for Beaver Builder, the Business Hours module can simply be dragged and dropped on your page and customized as required. Here are a few settings that you can manage with the setting tabs of this module.

Adding Days and Time using the Content Tab

The Content tab allows you to add the day with their respective working hours. It lets you add multiple timings as well as change the font color, background color for time and day individually. Just click on the Edit Day option to edit the respective day and its attributes.

You can choose to add a day and manage things further as you wish to display.

Styling the display of days and time with options like Alignment, Spacing, etc.

Within the style tab of the Business hours settings, you can change the day and timing style like alignment, spacing, divider and decide whether you want to display it as striped. You can provide a background color, border type and border-radius for the box.

Managing the Typography of the Days and Time being displayed

The Typography tab allows you to change the typography of the day and timing. You』ll be able to select a Font family, size, line height, color, text transform, decoration and letter spacing.

Additional settings such as margins, animations and custom coding

The Advanced tab allows you to manage some additional settings like the margins, responsiveness, animation and visibility to users. It also lets you add some additional HTML code if required.

How to use the Image Separator effectively?

The Image separator module place an image between two rows swiftly. Here are a few Details you would want to know about this module –

How to use an Image Separator?

1. Add a New Page or open an existing one in the Page Builder.

2. Under the Modules tab click on the drop down to open options and select UABB Modules

3. Scroll down to Image Separator and drag and drop it on the page.

You will find a settings window opened.

Customizing the Image Separator:

Under the General settings you can:

Add an image you wish to use.Set the Size of the image.Select the style, i.e. Simple, Circle, Square or you can design it yourself.Set the image position, i.e. Bottom or TopSet the Gutter (push the image outside or pull it in)Add a link if you wish to make it a clickable image.

Under the Animation tab, you can manage all the animation related settings for the image.

You can select among 40+ animation styles available.You can set the delay timeYou can set the number of times you wish to repeat the animation.Set the Viewport position that will trigger the Animation.

The Advanced settings can be used in case you wish to add margins, Responsive layout, visibility, animation and the CSS Selectors.

Add margins to the top, bottom, left and right of the image.Enable the image to be displayed on all devices, or enable it for a particular device.Decide whether you wish to display the image always, or to logged in users or logged out users or never.Select an Animation and set the delay time.Set CSS Selectors, i.e. an ID or a class for the image.

Save your Settings after you are done customizing the image separator.

How can I use the Modal Popup module effectively?

Like all the modules available in Beaver Builder and the Ultimate Addons for Beaver builder, the Modal popup module of UABB can be simply dragged and dropped on the page you wish to use it on.

Let us take a look at the various settings that help us create a good looking and a better performing modal popup.

You』ll find 5 different tabs in the settings window.

Content settingsDisplay settingsClose Button settingsTypographyAdvanced Settings

Content Settings

You can

Decide whether you want to enable the Preview of the modal popup in the back end.Decide what kind of content will it have; Text, Photo, Video Embed code, Video from YouTube, Vimeo or iFrame.Adjust the other popup settings like the background and overlay color, opacity, content width, animation effects and more.

Display Settings

You can

Decide how you wish to display the popup: automatically (Exit Intent, Well timed), on click of an icon, button, text or an image, or with a class or ID.Work on further settings like the anchor text, the text on the button, the icon or image, and the class or ID and the cookie settings too.

Close Button Settings

You can

Decide whether the close button should be an icon or an image.Work on the further settings for icons and images.Decide whether you want to enable additional methods (clicking on the overlay or through the ESC key) of closing a modal popup.

Typography

You can

Select the Font family, the size and line height of the text you place on the popup.

Advanced Settings

You can

Set the margin widthSet the layout as per the devices the popup will be displayed on.Adjust the visibility: always, never or to logged in or logged out users.Animation and the delayAdd CSS selectors if any.

If you are on the agency version of Beaver Builder and wish to create a site-wide modal popup, here is an article you could refer to.

How to open a modal popup from another module?

The Ultimate Addons for Beaver Builder comes with a modal popup module that can be displayed automatically, or on the click of a button, text, image, or through any other module.

In order to display a modal popup from another module, you will have to use a unique class name or ID that is shared between the Modal popup and the respective module.

Here are the steps you need to follow:

1. In the Modal popup settings, under the Display settings tab, select to display the popup on a Custom Class / ID.

2. Enter the unique class name in the text box below.

Note: Add a 「.」 before a class name and a 「#」 before an ID.

3. Make sure the same class name is entered in the Advanced Settings tab of the module you wish to use.

Note: DO NOT add a 「.」 before a class name and a 「#」 before an ID.

This method will display the modal popup on the click of the button or link in the other module.

How to trigger a Modal Popup on the click of a Menu Element?

Many a times, you would want to display a popup when a user clicks on a Menu element. You can do this using the Modal popup module that comes with the Ultimate Addons for Beaver Builder.

Here are a few steps you need to follow:

1. Create a new row template by adding modal popup inside it.

2. In Display Settings of Modal Popup, select Custom Class / ID option & enter the unique class name there.

3. Now go to WordPress Dashboard -> Appearance -> Menu

4. Enable the CSS Classes option under the Screen Option settings

5. Add the respective CSS class name ( which you entered in step 2 ) under the selected menu element.

6. Now embed the modal popup site wideIn order to be able to embed a popup and make it compatible with all your themes, we will use the 『wp_footer『 hook with a PHP function. You can paste the following code in the functions.php file of your theme / child theme.

function ultimate_modal_popup() { echo do_shortcode( '' );}add_action('wp_footer', 'ultimate_modal_popup');

You just need to replace your-saved-row-slug with the slug name of your Saved Row template.

Please refer this article to know, how to get the template slug or ID for a shortcode.

This assures that the modal popup you just created, will be displayed on all the pages of your website!

How to enable Pagination for Advanced Posts module

Finding it difficult to find the Pagination even after enabling the Pagination under the Grid and Feeds layout.

Here』s what needs to be done to find the Pagination below the Grid Layout.

Step 1: Let』s say you have 30 number of posts and under the posts, you want to display the pagination. So you would need to set the Posts Count to 30 from the Query Tab of the module. Refer below image

Note: If you want to show all of your posts then you can use the select All option under the Number of Posts to Display and follow the below steps similar to the Custom option.

Step 2: Now under the Style tab of the Module if you would need to set Posts Per Page to 5. This would display 6 pagination Numbers below the Grid Layout of the Advanced Posts module.

Here』s a screenshot of how the Pagination would be displayed below the Posts.

So basically, how the pagination works is that it divides the total number of posts by posts per page and accordingly displays the pagination below the posts.