詩語，作者 Ultimate Addons for Beaver Builder 文檔

How to add Sortable and Searchable Table? How to Show Entries Dropdown?

Sometimes it is irritating for a user to search for specific table entry by scrolling table all the way down and up. Table module provides some cool options that allow a user to sort a table with few clicks and search for a particular section in minimum time.

Table module provides options to make the table sortable and searchable. Sortable tables are effective as they allow the user to sort the table by clicking on table headings. While searchable tables make searching task super easy for a user. It displays a search box for the table so that the user can search exact content from the table.

Table module also allows controlling the number of entries in a table.

Features tab in Table module list these settings-

Sortable Table

Enabling this option will display arrows in all table heading section.A user can sort table entries on the click of arrows in table headings.Clicking on the arrow will sort the table alphabetically.

Searchable Table

Enabling this option will display a search box above the table.A user can type the string or content that needs to be searched/filtered.The row that has matching content will be displayed.

Show Entries Dropdown

This option let the user control the number of entries to display.A user can select a number of rows that should display.

You can enhance the design of Search / Show Entries Box from Style > Entries Dropdown and Search Field section. Color, Background, Border, Padding can be adjusted to match these boxes with your design theme.

Gravity Form – Tab Index

Have you ever come across an instance when a user clicks on the tab key and is taken top another form field? This happens because Gravity Forms assumes its tab index values.

You can avoid this! You need to change the tab index on your forms so that they work as expected.

How to set a tab index?

Add the tab index value to the form when placing the form on a page or within a post.

As for the number, just make it bigger than the number of fields you』ve got in your previous form, and you』re done!

To know more about Gravity Forms tab index, you can refer to the article here.

Bulk Editing for Video Category Names

Video Gallery module comes with a feature to add Category for every video in the gallery.

These categories help to set filters for the Gallery. You can read more about it here.

But sometimes you may want to change the category name. In that scenario, you might need to edit each video and edit the name, which is quite a tedious task to do.

Do not worry, we have a rescue filter available for this. This filter will help you bulk edit a particular category name. It is used as shown below.

add_filter( 'uabb_video_gallery_filters', 'function_name', 1, 1 ); function function_name( $filters ) { $filters['vimeo'] = 'My edited Vimeo title'; return $filters; }

Above filter will change the category name Vimeo to My Edited Vimeo Title.

How to Override Global Settings for Image / Icon?

When you add a cell to the Table, you get an option to add an image/icon for the cell. When you edit the cell, under Advanced Options you can add image/icon.

Global Style

Global styling for the image/icon is available under the Style tab.Header Image Settings offers options to style image/icon for cells in Table Header.While Body Image Settings offers options to style image/icon for cells in Table Content.These are the global settings that will be applied to all image/icons in the Table Header / Table Content.

Individual Style

Above global styling can be overridden to highlight or change particular cell』s image/icon. Global style options like color and size can be overridden by Advanced Settings for a particular cell.Edit the item, under Advanced Options > Icon / Image, you get the option to select icon or image. Here you can set the color/ size for the image/ icon.These are individual cell settings that will override the global settings.

How to Find YouTube Channel Name and Channel ID?

UABB』s video module allows displaying YouTube Subscribe Bar for video. This bar shows Subscribe to Channel Text and Button at the bottom of the video. You need to link this subscribe button with your video channel on YouTube. Read How to Display YouTube Subscribe Bar for Video?

To connect to a channel you need to enter either its name or ID. This document explains how to get name and ID for the YouTube Channel.

Find YouTube Channel Name

If you have registered your channel name on the YouTube, you can use it to link subscribe button on the video. Below are the detailed steps to get YouTube channel name –

Open the browser and go to www.youtube.comClick on the Sign In button on the upper right corner and fill the details asked (username and password).Once you have signed in with your account, click on the user icon/thumbnail image on the upper right corner.Click on the Creator Studio. VIEW CHANNEL link will appear below your name and beside the user icon/thumbnail image. Click on it.Now observe the URL. The name will appear in the URL as shown in below screenshot.

Find YouTube Channel ID

To find the Channel ID follow the steps below –

Open a Specific Filterable Tab from URL

When you enable Filterable Tab for Video Galley, it shows all available video categories as filterable tabs. On the page load, you can display default or custom category as an active tab. Refer How to Display Specific Video Category Tab as a Default on Page Load?

Apart from the above option, you can specify the category in the URL, that will display as an active tab on page load. You can use this URL to open a specific tab from a remote module.

Add category name as 「/#category-name」 after the page URL.

Below is the example that shows how this works –

Step 1 – Let』s say you have a category 『Music『 in the video gallery.
Step 2 – To open this category as a default one, use add 「/#music」 after the URL.

How to trigger a Modal Popup on the click of a Menu Element?

Many a times, you would want to display a popup when a user clicks on a Menu element. You can do this using the Modal popup module that comes with the Ultimate Addons for Beaver Builder.

Here are a few steps you need to follow:

1. Create a new row template by adding modal popup inside it.

2. In Display Settings of Modal Popup, select Custom Class / ID option & enter the unique class name there.

3. Now go to WordPress Dashboard -> Appearance -> Menu

4. Enable the CSS Classes option under the Screen Option settings

5. Add the respective CSS class name ( which you entered in step 2 ) under the selected menu element.

6. Now embed the modal popup site wideIn 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');

You just need to replace your-saved-row-slug with the slug name of your Saved Row template.

Please refer this article to know, how to get the template slug or ID for a shortcode.

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

How to Merge Columns and Rows in Table?

Sometimes you may need to combine a number of rows and columns to display a single cell. You can easily do so with Table widget.

Advanced Options for cell allows merging two or more table cells located in the same row or column into a single cell. Edit Item > Advanced Options will offer options for rowspan and colspan.

By default, value for Column Span and Row Span will be 1. Add the number for column and row that needs to merge.

For Example – If you wish to combine 2 columns to the current cell then add Column Span value 3. It will add 2 columns to the current cell.

Row Span is shown in the following screenshot –

Column Span is shown in the following screenshot –

Default Thumbnail Broken in Video Module

Sometimes when you display video with UABB Video module, you might face the broken thumbnail image for the video. This article will help understanding why this happens.

1. If the video is set as private and not available as a public then the thumbnail might look broken. As the video is private thumbnail cannot be accessible by the video module.
# Solution – In this case, you can set a custom thumbnail image for the video. Refer article here.

2. If the video type is selected as Vimeo and the link entered is from YouTube or vice versa. Then it shows a broken thumbnail.
# Solution – Make sure you enter a correct URL for selected video type.

How to add WooCommerce Add To Cart button on the page?

Woo – Add To Cart Module allows you to add a WooCommerce Add To Cart button anywhere on the page. It allows the user to add a product to cart, on the click of the button with predefined quantity and then navigates the user to cart page.

Refer a demo for Woo – Add To Cart Module here. The information boxes displayed with the button on demo page are designed separately with other modules.

Below are the available options for Woo – Add To Cart Module –

Product– Start typing name of the product that you wish to add to the cart when the user clicks the button. Also, choose the Quantity.– When a user clicks the button, the selected product will be directly added to the cart.– You can choose if you want to Auto Redirect to Cart Page on the click of the button.

Button (?)– Various options to customize the button are available here.– More options are available under the Style tab.

Note:1. This widget will be visible only if WooCommerce plugin is installed and activated.2. If the widget is not visible in the UABB modules list, then check if it is enabled from UABB settings. (?)