Author 诗语

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 Set Categories for Images?

Filterable Gallery allows categorizing images. Category names that are set to images will display as Filterable Tabs title. See How to Design a Filterable Photo Gallery?

Categories can be assigned to images while adding them to Photo Gallery module. Here are the steps –

Step 1 – Select an image from the media library list.

Step 2 – UABB Categories option will appear in the media information column on the right side. You can add more than one category separated by a comma.

Related Documents –

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

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.

Can not find the Parallax Option in Beaver Builder?

If you are not able to see the Parallax option in the Beaver Builder, chances are you』re using the free / lite version of Beaver Builder which does not offer the parallax feature. If you need the parallax effect along with other features of Beaver Builder, you may consider purchasing it from here.

However, should you wish to stick with the lite version, you may keep the background image fixed as displayed in the screenshot below. It will create an effect that will be very similar to parallax.

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 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 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!

Design Filterable Photo Gallery with UABB

Photo Gallery module from UABB provides the feature to add filters for images. Filterable tabs will display above the gallery. Clicking on the tab will display related images. Here is the process to create filterable photo galley –

Step 1 – Enable Filterable Image Gallery option.

This option is available only for both Grid and Masonry layout.The setting can be found under General > Filterable Photo Gallery.

Step 2 – Set categories for Images. These will act as Tabs title.

The category names that are set to images will display as Filterable Tabs title.You can assign categories to the image from media library settings. See how to set categories for images? For example – If image A has assigned to categories BRANDING and DESIGN. While image B has assigned to categories PHOTOGRAPHY and WEB. Then Filterable Tabs will automatically display all 4 categories. On clicking on any of the tab will display related images.

Step 3 – Customize Filterable Tabs.

Category names will automatically display as Filterable Tabs. That means if you assign 5 different categories to images, then 5 Filterable Tabs for all those categories will be created.You can completely customize Filterable Tabs from Style and Typography options.

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.

UABB Modules List Empty on Frontend Editor/ All UABB Modules Not Displaying on Frontend Editor

Do you find some or most of the UABB modules not appear in the frontend editor?Unable to find all the UABB modules on the frontend, although they are enabled in the UABB modules settings? Some UABB modules displaying on frontend.

The first step would be to check whether you have enabled the modules. Here is an article you can refer to.

UABB Modules list empty in Frontend Editor

Apart from the UABB  modules list, we have a feature which lists UABB modules under the Beaver Builder』s Standard Category.

Now if the above setting is enabled, your client can disable and enable UABB modules from the Beaver Builder settings. Hence we also list our UABB modules under the Beaver Builder modules.

We have introduced a notification on top of our modules section which mentions the same.

You can click on the link to take you directly to the Beaver Builder modules settings, where you can enable the UABB modules and find them under the UABB modules list in the frontend editor.

Selected UABB Modules Not displaying in frontend editor

Can』t find the Gravity Forms Styler / CF7 Styler / WooModules in the frontend editor?

To find the above mentioned UABB modules, you need to make sure you』ve installed and activated the respective third-party plugins that this feature is dependent on. For example, plugins like Gravity Forms plugin, Contact Form 7 and WooCommerce modules need to be installed and activated.

Until these plugins are installed and activated you won』t see the respective UABB modules under UABB and Beaver Builder.