分類： 入門

Styling Checkbox / Radio / Acceptance controls in WPForms Styler module

Have you ever wanted to style the checkboxes, radio buttons of the acceptance control in a WPForms? This is made possible with the WPForms Styler module of the Ultimate Addons for Beaver Builder!

Before we move on to the styling, please make sure you can see the WPForms Styler module in the module list. If not, refer to the article here.

The next thing you』ll want to do is enable WPForms』 built-in GDPR enhancements.

To do this, go to WPForms » Settings and click the 『GDPR Enhancements』 checkbox. This will turn on specific GDPR features that you can use to help with GDPR compliance.

Once you click this checkbox, you』ll be able to add a GDPR Agreement field to your site』s forms and customize it to meet your needs.

You can style these controls by following the steps mentioned below.

Go to the Content panel of the WPForms Styler -> Input Style tab -> Input Border Style Section -> Use Custom Style Option. You can then make changes as per your requirements.

How to trigger a Modal Popup on the click of an Interactive Banner 2 and from a text of any module』s text editor?

Have you ever faced any difficulty while triggering modal popup from Interactive Banner 2 on responsive devices?

You can trigger a Modal Popup on Small Devices as you do on large devices, just follow the steps mentioned below to achieve this requirement.

To open modal popup on click of Interactive Banner 2 on responsive devices

Step 1. Add a custom class in the Interactive Banner 2 Module』s Advanced Tab.

Step 2. In the Modal Popup module』s Custom Class/ID append the 「.uabb-ib2-outter」 to your custom class i.e .open-popup.

This setting will trigger the Modal popup on an image click of an Interactive Banner 2 on a mobile device. And thereby ensuring that popup is working properly on all the devices.

How to open modal popup on click of content (specific word/line of texts) in the text editor of any module

You can trigger modal popup on content (word/sentence)  or trigger from any BB / UABB module』s text editor with UABB Modal Popup.

Step 1. Add a custom class to the required Module』s Advanced Tab.

Step 2. Assign another custom class to the word/sentence which is required to trigger a modal popup from the text editor.

Step 3. In the Modal Popup module』s Custom Class/ID add both the classes in the following sequence.

The first class will be the custom class of that particular module and the second one will be used to trigger the word/sentence.

Publish these settings and now the popup will be triggered on that word/sentence from any module』s text-editor.

For opening a Modal Popup on Dual Button you would need to follow steps mentioned above and just add the classes in the following manner -> https://goo.gl/bXKAp3 and -two for the second modal Popup.

Note:- You can trigger the Modal Popup from any other module, you just need to check for the class from the Browser』s inspector on which class the Modal popup needs to be triggered.

Advanced Posts Pagination not visible?

Unable to find the Pagination option for the UABB Advanced Posts module?

There are 2 main reasons why you may not be able to see the Pagination option within UABB』s Advanced Post module.

You are using the Masonry layout for the Advanced PostsYou are using a Custom Layout for Masonry Post Appearance when using Beaver Themer.

Just to let you know, we have added numbers and the scroll pagination option for Grid and Feed Post layouts within the Advanced Post module of UABB only.

However, we do have plans to get that working for Masonry too. You can keep a watch on the future updates.

Not Able to See Particle Backgrounds

Sometimes enabling the Particle Backgrounds does not display particles in the background. This might happen because widgets are covering the entire row and there is no space for particles background to show up.

For example – In a row, you have added a heading and added a spacer above and below the heading. This will occupy the entire space in the row. So particle backgrounds added to row will not display as it has heading and spacer above it.

To solve this you can remove the spacer and add padding for the row. So that particle backgrounds will display.

How does the Refresh Reviews option function in the Business Reviews module?

UABB Business Reviews module requires the Google API key to display reviews of Google Places and the same goes for Yelp. This article will help you understand the working of the Refresh feature in our module.

Consider your business receives multiple new reviews every day, and we have taken care of the same, which won』t require saving the module again and again after a new review is added.

For which we have provided an option to refresh the reviews list based on the time frame you set in which you require it to be refreshed.

Let』s say on average you receive a review every other hour, or a day, week, month, or even a year.

We have provided all the options, based on which your reviews list for the Google Places, Yelp reviews or both will be refreshed.

Isn』t that a time-saving feature, just set the time frame and you are good to go.

Note:- There』s a similar term in Yelp which means Refreshing your API key, not to get confused about the same with this feature.

The option to Refresh your API key can be found in the Yelp Dashboard and is needed when your API key has been compromised, for it you can disable the same and receive a new one.

Following are the steps which need to be followed for the same –

Go to Manage AppFind the 「Refresh My API Key」 section, and click the 「Refresh My API Key」 button.Your new API Key will be displayed in place of the old one on the Manage App page.

Building Site-wide Modal Popups in Beaver Builder & UABB

Popups and opt-in forms are a trend now! Although Google has announced a lower ranking for websites displaying intrusive popups, you can still make sure your popups perform well without distracting your audience.

With the increase in the demand for popups, there are many well-known popup builders available online.

Standing by our words of making the Ultimate Addons the ONLY addon you』ll need to build a wonderful website using Beaver Builder, we give you an easy to use modal popup module that helps you design and display popups in minutes. All this without having to purchase another popup building plugin for your website.

Whether you want to share updates, promote videos, distribute coupons, or simply attract subscribers and build an email list, you can do all this using a single module.

Like those in Beaver Builder and the UABB modules, the Modal popup module can be dragged and dropped with easy settings to display it in minutes.

Creating a Modal Popup

The very first step to create a modal popup, is to simply drag and drop the UABB modal popup module on the page.

You will find the settings window as shown below.

This is where you can design the popup and control its behavior on a page. You can refer to the article here to see the various settings you can work with for the modal popup module.

Save the Modal Popup as a Template

Note: Since this includes saving a module as a template, it won』t be possible to use site-wide Modal popups with Beaver Builder lite. You need to have a paid version for this.

Once you are done designing and building this module, you can save it as a template too.

If you are planning to use the above created popup on the entire website, you can delete the popup from the above page, once you have saved it as a template on your site.

You can always re-edit your modal popups through the Saved Modules section in the Page Builder.

Embedding the Modal popup site-wide

In 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');

And if you』re looking to add a Modal Popup having Exit intent on certain pages you can add the same using the above code with some changes as shown below –

function ultimate_modal_popup() { if( is_page( 89, 90, 91, 107, 168 ) ) { // 89, and other Page IDs can be replaced by your page IDs where you require the Exit Popup to be displayed. echo do_shortcode(''); } } add_action('wp_footer', 'ultimate_modal_popup');

Note:- You can either use Page IDs or Slugs of the pages where you require the Popup to be displayed.

All set!

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

How to Display Specific Filterable Tab as a Default on Page Load?

On page load, you might have observed that, in the filterable tabs bar, the default 「All」 tab is active. You can change this and set another tab to be active on page load.

The setting can be found under General > Filterable Photo GallerySet Default Tab on Page Load to Custom. Enter a category name that you want to set as a default tab. The category name that you will enter will display as the active tab on the page load.

Note: Make sure you enter the exact same name for the category set for the image. Refer How to Set Categories for Images?

Here is an example of how it works –

Consider some of the images are assigned a category Design. You wish to display the Design category tab active on page load. Now set Default Tab on Page Load to Custom and set Default Tab as Design ( make sure the name is exactly same as the category name set for the images )On the page load, the Design tab will be displayed as an active tab, and images that are assigned a category Design will display under it.

Particles Hover Effect Not Working

In UABB – Particle Backgrounds, under Advanced Settings, you get an option to Enable Hover Effect. The hover effect is an interesting feature that will interact with the user when hovered with a mouse.

This effect will not work in the following cases –1. This will be visible only in the frontend and will not work in the backend.2. In case a content/spacer is overriding the background. For example – In a row, you have added a heading and added a spacer above and below the heading. This will occupy the entire space in the row. As the spacer has a transparent background, particle background for the will be visible but it will not be interactive since it has spacer over it. The hover effect will work outside the spacer where a cursor can have direct contact with the particles background.To solve this you can remove the spacer and add padding for the row. So that particles in the background can be interacted using the mouse.

How to find Yelp Business ID?

UABB Business Reviews module requires the Yelp API key to display Yelp reviews. This article will help you find your Yelp Business ID.

Finding Yelp Business ID is very simple –

You will find the Business ID on the Yelp』s Business URLObserve that it will appear after www.yelp.com/biz/ in the address bar and it contains the name and location of the business separated by dashes. For example, the Business ID in the following URL is 「rh-rooftop-restaurant-new-york-3「: https://www.yelp.com/biz/rh-rooftop-restaurant-new-york-3

How to Show Video Category on Hover?

Category set for the video can be displayed on mouse hover.

See How to Set Categories for Videos?

The setting can be found under the Style tab. Navigate to Syle ( tab ) > Content >Show Category on Hover and choose Yes.

You can set Category Color and Typography.