分類： 入門

How to Design an Off-Canvas menu for Beaver Builder? ( Learn in 3 Easy Steps! )

Off-Canvas navigation is the need of the hour! It is an attractive way to display a navigation menu and possible to be triggered by a button/icon/Custom class/ID. With Ultimate Addons for Beaver Builder, showcasing such a vertical Off-Canvas menu is made easy.

UABB offers the Off-Canvas module that has an inbuilt option to display the navigation menu. Read about all available options here.

Below are the steps to create Off-Canvas menu for Beaver Builder –

Step 1 – Drag and drop UABB』s Off-Canvas module.Step 2 – Go to General -> Content Type, select Menu. All WordPress menus will appear in the list. Choose the required menu.

Step 3 – Now go to Display Settings and choose Display On – Button/ Icon / Custom Class / Custom ID.

And you are done!

In the frontend, clicking on the trigger (Button/ Icon / Custom Class / Custom ID) will open an Off-Canvas navigation menu. You can customize it with the rest of the available options with the Off-Canvas module.

Bonus Content: How to create an Off-Canvas similar to the Modules tab on our site?

Step 1: Add Title Attribute to the Menu items from the Menus under the WordPress Dashboard. You can find this option under the Appearance -> Menus

Step 2: Paste the below CSS in the Beaver Builder』s Global Settings under CSS section and it will render the Title Attribute of the Menu items on the Off-canvas –

.uabb-offcanvas-menu li.custom-class>a[title]:after {
background: #2ecc71;
}

.uabb-offcanvas-menu li>a[title]:after { color: #fff; font-size: 0.7em; font-weight: 600; position: relative; content: attr(title); padding: 0.3em 0.6em; top: -2px; left: 12px; letter-spacing: 0.5px; line-height: 1em; background-color: #f7b91a; text-transform: uppercase !important; border-radius: 2px; }

Note: The class custom-class is added from the Screen Options under CSS classes for respective menu items which requires a specific color,

You can change the background color and other settings as per your requirements.

Step 3: Publish the CSS and find the Tags as displayed on your Off-Canvas.

How to Design Filterable Video Gallery?

Video Gallery module provides the feature to create a filterable gallery. Here are the steps –

Step 1 – Enable Filterable Video Gallery option.

This option is available only for Grid layout.The setting can be found under Video (tab) > Filterable Tabs.Enabling this option will display all categories assigned for videos. See how to create categories in the next step.「All」 Tab Label is a label to the main category, where all videos in the gallery will be displayed. Edit it if required.For option Default Tab on Page Load, read How to Display Specific Video 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 Style ( tab ) >  Title.

Step 2 – Set categories for videos.

The category names that are set to videos will display as Filterable Tabs title.In the below screenshot Lifestyle, Fitness are categories.

You can directly assign categories to the video. See how to set categories for videos?For example – If video A has assigned to category Music. While video B has assigned to category Photography. Then Filterable Tabs will automatically display these 2 categories along with the main 『All』 category. On clicking on any of the tab will display related video.

Step 3 – Customize Filterable Tabs.

Category names will automatically display as Filterable Tabs.That means if you assign 5 different categories to videos, then 5 Filterable Tabs for all those categories will be created.You can completely customize Filterable Tabs with the settings under Style (tab) > Filterable Tabs.

How to Disable the White Label Settings Permanently?

Ultimate Addons for Beaver Builder allows you to white label the plugin and show it as your own. You can read our white label settings article to know more.

Normally, the white label settings can be hidden by checking the respective box on the settings page. But, if your customer deactivates & activates the plugin then those settings are visible again.

To avoid this and for adding extra security layer you can hide the White Label settings completely by declaring below constant in the wp-config.php file at the root of your WordPress installation.

define( 'WP_UABB_WHITE_LABEL', true );

Once this is done, the White label settings will be hidden forever.

How to hide the Google Map』s Info Window on Page Load

Are you unable to hide the Info Window on Page Load and don』t know where to look in the module? You are in the right place to help you find out the same.

Each Address of the Google Map module has the option to Disable the Info Window on Load.

To find the same just visit the individual Address of the Google Map module and go the Info Text tab.

At the bottom, you can find the option you were looking to Disable the Info Window on Load.

How to get Yelp API key?

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

With the Yelp developer documentation, you will find detailed steps. But below are necessary and selected actions you would need to take –

Create an app to obtain your private API Key.Authenticate API calls with the API Key.

Step 1 – From the link here, click on the Create App link.

Step 2 – It will take you to the login page. Login with your account details

Step 3 – You will find your API key under General > Manage App. You can enter your email ID and description on this page.

Step 4 – Copy this API key. Now, from the WordPress dashboard, visit Settings > UABB > General Settings > Business Reviews – Yelp API key, and paste the key under the Business Reviews – Yelp API Key section.

Please keep the API Key to yourself since it is the credential for your call to Yelp』s API.

How to Trigger Off-Canvas on the Click of a Menu Element?

The Off-Canvas module of the Ultimate Addons for Elementor allows you to display the off-canvas based on various actions. In this article, we』ll see how to trigger an off-canvas on the click of a WordPress Menu element. You can do this using a custom CSS class.

Here are a few steps you need to follow:

Step 1: Drag-drop Off-Canvas module and set it as per your requirements.

Step 2: Open Display Settings of the Off-Canvas module. Select the Custom Class option from the dropdown menu.

Add your custom class name in the field as shown below.

Step 3: Now go to WordPress Dashboard -> Appearance -> Menu

Step 4: Create a Custom Menu element on the click of which you wish to trigger an off-Canvas.

Step 5: Enable the CSS Classes option under the Screen Option settings

Step 6: Add the respective CSS class name ( the one you entered in step 2 ) under the selected menu element.

Also, select the location you wish to display the menu element on. Like we』ve selected Primary Menu in the screenshot below.

 Trigger the Off-Canvas Sitewide

The above process will open an off-canvas window only on the page where you have added the off-canvas module. If you wish to trigger this Off-Canvas on the entire website and make it work with all your pages/posts, use the 『wp_footer『 hook with a PHP function. You can paste the following code into the functions.php file of your theme/child theme.

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

You would need to replace your-off-canvas-section-id in the above code. To get this ID, follow steps below –

1. Save the off-canvas module you set in step 1 above as a template.

2. Get the ID for this saved template. Refer to an article here. This assures that the Off-Canvas you just created, will be displayed on all the pages/posts of your website!

How to Set Categories for Videos?

Video Gallery Module provides the feature to create a filterable gallery. The category names that are set to video will display as Filterable Tabs title. See How to Design Filterable Image Gallery?

Categories can be assigned to videos while adding or after adding them to the Video Gallery module. Here are the steps –

Step 1 – Select a video from the list and click on Edit Video.

Step 2 – Categories option will appear in the individual video settings box. You can add more than one category separated by a comma.

Related Documents –

How to Show Video Category on Hover?

How does the tour feature work with UABB Hotspot module?

This is attractive and innovative feature. As the name suggests this feature lets the user take a tour for all markers. Tour will follow the order in which markers are created. Starting from the first marker, a tooltip will gradually display for other markers after a specified time interval.

Note: Hotspot Tour feature will not work unless Tooltip is enabled. This is because the tour is displayed on the tooltip. It also displays navigation (previous, next) links for the tour.

How to set markers and enable the tour?

In the Hotspot module, after selecting an image, click on the Marker tab. Click on Edit Marker > Marker, and set required markers for the image. Now go to the Hotspot Tour tab and Enable the Tour.

Hotspot Tour Options:

Repeat Tour: After completing round for all markers user can navigate from last to the first marker if this option is enabled.Hide Non-Active Markers: Markers who do not participate on the tour can be hidden. Autoplay: It will autoplay tour for all markers. Interval between Tooltips (sec): After this time interval, the next tooltip will appear. This defines the time between displaying two tooltips. Launch Tour: When you set tour on autoplay, you can decide when to start it. This option will allow a user to start the tour on the click of a button or when hotspot comes in the viewport. Overlay Button: This will allow starting the tour if in the above option button click is selected. Once button is clicked tour will autoplay unless End Tour option is clicked.

How to Add Custom Particle Backgrounds Style?

With UABB– Particle Backgrounds you get some prebuild particle styling. Apart from these default styles you can customize and personalize background style with JSON code. You can do so with a few easy steps and don』t need to have any coding skills.

You can customize and add custom JSON code from the link here. Below are the steps –

Visit the link here to design a custom particle styling.Choose options as per requirement. You can select particles styling like shape, color, size, number, etc. From interactivity options, you can choose interactive effects on mouse hover/click. You can even set a page background for particles.Once you are done with setting custom styling, click on the Download current config (json). This will export the required JSON code for your custom styling.Open the above-downloaded file and COPY the entire code.Go to your Beaver Builder page and open the Style tab for the Row or Column you want to set background for.Under UABB– Particle Backgrounds, choose Style as Custom. Paste the above-copied code under Add Particle Json window.

Save the changes and you are done!

Unable to display more than 5 Google reviews/3 Yelp Reviews?

UABB Business Reviews module requires the Google Places API key to display reviews of Google Places and the same goes for the Yelp. This article will help clarify your query regarding why you can only display a specific number of Reviews in Google Places and Yelp.

Did you notice that you are unable to display not more than 5 Google reviews in this module?

Well, there are some challenges which make this process a bit complicated to display more than 5 reviews.

Firstly to be able to retrieve all the reviews for a given business is only supported if you are a verified business owner and it requires other requirements that only work once those criteria are passed.

Due to the complexity of the same, we are not including the same right now in our module, you can follow the steps which needs to be followed – https://issuetracker.google.com/issues/35825957#comment71

Here』s the reason for the Yelp reviews not returning more than 3 Yelp Reviews – https://www.yelp.com/developers/documentation/v3/business_reviews

If there are changes or it gets eased moving ahead in the future we will surely make changes accordingly in our module.