Author 詩語

Off Canvas Effect in Advanced Menu

Have you ever wanted to use the Off Canvas effect for Advanced Menu on your website? The Ultimate Addons for Beaver Builder has introduced this feature in version 1.6.0.

You can use this feature by following the steps mentioned below.

Step 1:

Open the Advanced Menu Settings and select the menu that you had created in Dashboard > Appearance > Menu

Step 2:

Select Responsive Toggle in the Responsive Tab.Hamburger Icon: Hamburger icon will be shown.Hamburger Icon + Label: Hamburger icon will be shown followed by the user entered label.Menu Button: A label entered by user will be shown.None: Toggle button will not be shown.

Step 3:

Select Responsive Layout > Off Canvas in the Responsive Tab.

Step 4:

Select a Direction in which you wish to show the Off Canvas Menu.

Step 5:

Enter Animation Speed for the Direction selected in step 4.

Step 6:

Select the appropriate Responsive BreakpointsDisplay on All Devices: Show Off Canvas on all devices i.e desktop, tablet, and mobile devices.Display on Medium and Small Devices Only: Show Off Canvas only in tablet and mobile devices.Display on Small Devices Only: Show Off Canvas only on mobile devices.Enter a Custom Breakpoint: Select Custom to enter a custom breakpoint.

How to filter Query Parameters in Advanced Posts?

Advanced posts are loved by a lot of people due to its flexibility to modify query parameters. But, in some cases, developers need to modify the query parameters which are not specified in options. Let』s say you are displaying events using Advanced posts module and you want to disregard past events. Let』s assume that the event date is specified in meta with key `event_date`. Also we are checking with HTML id `events-list` before modifying the parameters so that this won』t be applied to all blog post modules on the site.

/* Advanced Query Parameters filtering for UABB Posts module */ function your_prefix_uabb_blog_posts_query_args( $args, $settings ) {// Give an HTML id and check it before modifying arguments so that it will not be applied to all blog post modules on the site. if ( $settings->id == 'events-list' ) { $args['orderby'] = ''; $args['meta_key'] = 'event_date'; $args['nopaging'] = true; $args['posts_per_page'] = '2'; $args['meta_query'] = array( 'key' => 'event_date', 'compare' => ' date( "Ymd" ), 'type' => 'DATE' ); } return $args; } add_filter( 'uabb_blog_posts_query_args', 'your_prefix_uabb_blog_posts_query_args', 20, 2 );

We are using `uabb_blog_posts_query_args` filter to accomplish this. You can take a look at all our filter reference.You need to put the above code snippet in functions.php file of your theme/child theme.

This is just one example. You have lots of possibilities to filter posts with WP Query Parameters.

How to Set Description for Category in WooCommerce?

WooCommerce product category group the similar products together. Category description display more information about the created group.

One can add a description to the category at the time of creation or can edit the already created categories to add it.

Option 1. From WordPress backend navigate to Products > Categories. Add a new category and description to it.

Option 2. From WordPress backend navigate to Products > Categories. Edit the already created category and add a description to it.

Woo – Categories Module allows to showcase categories on any page with great designs.

How to Set Multiple Column Fields in CF7 Styler Module?

We often need to set multiple form fields in columns, while designing a form. This is where we need to write some custom CSS code to design the form. With the Contact Form 7 Styler module, it is very easy to display fields in multiple columns by using predefined column classes listed below. You just need to add Custom CSS Class as required in the CF7 wrapper shortcode. Please take a look at the screenshots below.

You can add a class to the wrapper of the div as shown below.

One Column Display

uabb-cf7-col-1

Two Column Display

uabb-cf7-col-2

Three Column Display

uabb-cf7-col-3

Four Column Display

uabb-cf7-col-4

Five Column Display

uabb-cf7-col-5

Six Column Display

uabb-cf7-col-6

How to Exclude your Current Post from Advanced Post module?

Many times, you would want to display all the posts using an Advanced Post module. But, at the same time you might want to exclude a post which is current. You can do this using the Advanced Post Module action with the Ultimate Addons for Beaver Builder.

You can paste the following code in the functions.php file of your theme / child theme to exclude the current post from rendering.

// Helps one exclude current post form the loop.function uabb_advance_post_custom_args( $args ) { // Do any operation with the $args. $args['post__not_in'] = array( get_the_ID() ); return $args; } add_filter( 'uabb_blog_posts_query_args', 'uabb_advance_post_custom_args', 10, 1 );

How to Exclude WooCommerce Products with Woo-Products Module?

Many times, you would want to display all the products. But, at the same time, you might want to exclude some particular products. You can do this using the Woo – Products module.

The Query Builder of the Woo – Products module allows you to either display All Products or filter them as per your requirements. You can exclude particular products from a particular list using options listed under the Query tab.

Below are the available options:

Exclude Product
Start typing the product name and select it manually to exclude from the product list.For Example- If available products are X, Y, and Z. Selecting All Products option will display X, Y, Z products. But if you wish to exclude Y product then type Y in the text box. It will exclude the Y product from the list and will display only X and Z.

Exclude Current Product
If you wish to exclude currently displaying product from all product list to avoid a duplicate appearance, use this option. Set the toggle to exclude current product.For Example- If available products are X, Y, Z and they come under same category A. If products from category A set to display on all single product page. Then while viewing X product, all products including X will be displayed at the bottom of the page.To avoid the duplicate appearance of X opt to Exclude the Current Product so that only Y and Z will be displayed on X product page. Similarly, Y will be excluded from its single product page and X, Z will be displayed

Styling Contact Form 7 Radio Buttons and Checkboxes

Have you ever felt the need to style radio buttons and checkboxes in your Contact Form? We have introduced Radio Button and Checkbox Styling options.

In order for them to work properly, you need to wrap each item with label element by checking the field as shown below.

This option has to be checked while creating both radio buttons and checkboxes.

Unable to see Gravity Form Styler module

Please make sure following things on your website –

1. You have installed minimum version 1.5.0 or greater of Ultimate Addons

2. You have installed & activated Gravity Form plugin

3. Gravity Form Styler module is enabled in UABB Modules settings

4. Gravity Form Styler module is enabled in Beaver Builder Module settings

How to set Grid and Carousel layout for WooCommerce products?

The General tab in the Woo – Products Module allows you to select a layout and skin for your WooCommerce products.

Below are the available options:

Layout

Query Builder will allow you to choose products to be shown. And with the layout option, one can arrange them well.

1. Grid

This layout will display products in a 「rows and columns」 structure.WooCommerce products will display in the Grid layout.More options like a number of Columns and number of Products Per Page will be available under Grid Options. (?)Based on the Grid Options, you can set pagination style using the Pagination tab. You can set the Pagination Type and Alignment.

2. Carousel 

This layout will display products in a slider.More options will be available under Slider Options. (?)Choose Arrows and/or Dots for navigation.Select Total Product number, Products to Scroll at a time.Choose slide to Autoplay and to activate an Infinite Loop.Manage the Transition Speed.

Skin 

Skin is predefined style options for products. Choose a Classic or Modern style for the product. Both will display Add to Cart button, Sale Flash, and Quick View option at different positions.

How to Add Custom Links to Photo Gallery images?

UABB』s photo gallery module allows you to add a number of images under a single module so that they can be displayed collectively and viewed together.

There are times when you may need to add a custom link for every image in the gallery.

You can do this by following the steps mentioned below.

1. Begin by adding an Image link in the Image detailsOpen your media library. Click on the image, and enter the link you wish to add as the image link.

2. Add the images in the gallery

3. Select Custom Link as the Click ActionScroll down in the General Settings of the Photo Gallery module.

Note: You will have to add a link to every image as done in Step 1.