分類： 入門

DIY Troubleshooting

Are you unable to edit modules or see that changed values are not being saved? Try the following method.

You will need to temporarily deactivate all plugins for few minutes except UABB and Beaver Builder. Then, activate them one by one, until the problem returns. This will help you understand which plugin is causing the problem.

Here』s a brief video of how you can debug this issue –

If you find out that our plugin is causing this issue, you can surely open a support ticket so that we can look into the issue and resolve it at the earliest.

While if you have any further questions, you can Get in touch. We will be happy to help!

How to Enable Quick View for WooCommerce Products?

A quick view option in the Woo – Products Module shows the product details in a popup. This allows users to take a closer look at the product and its details without moving on to a new page.

This setting can be found under the Layout tab enabled or disabled from the Woo – Products module options.

When enabled, it will add a Quick view badge to the product image and will show a popup on its click.

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

Translating UABB using Loco Translate

Loco Translate is a great WordPress plugin that makes translating any WordPress plugin or theme very easy by allowing you to edit translations in your WordPress dashboard.

Step 1: After you have installed and activated Loco Translate on your site, Go to Loco translate -> Plugins and select Ultimate Addons for Beaver Builder

Step 2: Click 『New Language』 to select your language

Click New Language to select your language

Step 3: Select your language in WordPress Language dropdown, Select system directory to store the translation files. The files stored in the system directory are not lost after plugin updates.

Options to be selected in loco translate

Step 4: Now click on any string you want to translate to your language, Add your translation in the text field. When you are done with adding your translations, just click save.

Add translations and save them

Note –

Make sure you have changed your WordPress language to the language you want to use.

Also worth Checking –

Translate UABB using Poedit.Translating UABB using Glotpress – The official methodBasics of Glotpress

Woo – Categories Module

Have you ever thought of displaying various product categories on a single page? This is a great way to display all the categories you offer and let the users choose the one that they need.

The Woo – Categories module of the UABB allows you to display all your product categories on a single page.

You can take a look at our demos to see how the module displays WooCommerece product categories beautifully – Demo Page.

Let us take a look at some customizations that you can work on.

Choose categories to display from Query and set their layout from General options.

General – Grid/ Carousel– Select grid ( rows and columns structure ) or carousel ( slider ) to display all categories.– Select total categories count to display.– You can select a number of columns for the category on the desktop and on other devices.– The displayed category will be dependent on filter settings as described below in Query section.– By default, recently created categories will be displayed.

Query– Filter available with Query tab allows you to choose the exact categories to display.– Show All will display all available categories while Only Top-Level will display parent categories.– To show particular category/categories, choose Match These Categories and start typing the required category name. You can enter more than one category here.– Similarly, to exclude a particular category/categories, choose to Exclude These Categories and start typing the required category name.– The number of categories displayed depends on the Categories Count under the General tab.– Enabling Display Category Description will display category description entered in backend under Products > Categories > {Any Category} > Edit > Description.– Enabling Display Empty Categories will display categories which are not assigned to any products.– Order by allows you to set categories order according to Name/Slug/ Description/ Count (Assigned Product Count).  You can also choose the Descending or Ascending order from the drop-down.

Note:1. This module will be visible only if you have the WooCommerce plugin installed and activated on your website.

Translating Ultimate Addon for Beaver Builder with GlotPress

Ultimate Addon for Beaver Builder is translation ready out of the box. This means that all the strings in the plugin can be translated to your language very easily. In this article, let』s explore how you can get it in your own language.

Contributing your Localization through GlotPress

We maintain our translations on a GlotPress project. If you want to contribute translations to your language, just register for an account on the same GlotPress project and start contributing to the translations.

When any language is more than 90% translated we add that language to the plugin so that it is available to all the users. But if your language is not 90%  translated, you can still download the language manually and start using it, We encourage everyone to contribute translations so that all the users will benefit from it.

Downloading translations manually

Head over to https://translate.brainstormforce.com/glotpress/projects/bb-ultimate-addon/ and look for your language in the list.

Now scroll down on the page where you will see the options to export the translations

Select the format to be 『Machine Message Object Catalog  .mo』 and then select export.

Make sure the name of the exported file is  for example, Great Britain English should be en_GB.mo

Upload the file on your server

The file that you just downloaded should be uploaded in – /wp-content/languages/plugins/bb-ultimate-addon/

Notes –

The language of your WordPress installation should be the same as you want for our plugin. To change the language of WordPress, go to – Dashboard > Settings > General.The file should have a correct name so WordPress can read it. You may refer this article for more information.

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.

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?

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.

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,