Ultimate Addons for Beaver Builder 文檔

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 Add Rows And Columns to the Table?

How to add a row to the Table?

ADD ITEM under Table Header/Table Body tab. It will add a Cell box.Edit newly added Cell. Choose Action -> New Row. Save it.This new cell will appear as the first column to new row.

How to add columns to the Table?

ADD ITEM under Table Header/Table Body tab. It will add a Cell box.Edit newly added Cell. Choose Action -> New Cell. It will add a new column to the above row.Add a text to the column, save it and you can see it appearing in the table.Add as many columns you want with ADD ITEM button. The number of the newly added cell will be equal to the number of columns.ADD ITEM button will add cells horizontally.After adding columns if you wish to add a new row follow steps given above for How to add a row to the Table?

Conclusion:

If you wish to add content on a new line – add a row. If you wish to add content next to existing cell – add a column (cell).For example – If you wish to add 3*3 table, then first add a new row then add two cells after it. Again add a new row and two cells after it. Repeat the process once again.

Screen Recording 2018-09-25 at 07.45.25.98 PM.mp4

How to add Table Header?

What is Table Header?

A row that appears at the top of the table giving a title to columns beneath is Table Header. It is defined with the

tag.

Multiple rows and columns can be added to Table Header. See How To Add Rows And Columns to the Table?

Add Item under the Table Header tab. Edit it. Choose it as a new row or new cell. Below are the other options –

Content

Enter a heading/title for the column beneath.
For Example – If you want to create a table to compare A and B gadgets, then type A in one item and B in another item.

Advanced Options: Select Yes to explore more.

Styling – Color and Background Color can be applied to each column separately to create a nice look for headers. Set this for an individual cell. It will overwrite the global styling.
Row Span & Column Span – This allows merging two or more table cells located in the same row or column into a single cell.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.
Custom Column Width – Set the custom width for the column. This width will be adopted by all the columns below this header cell.
Icon / Image – This allows you to add icon from the provided list or image to the header field. Icon/Image can be added with or without content.
Link –  Add a link to cell content.

How to add Table Content?

Table module allows adding text, number, HTML, image, the icon in the content area.

After adding Table Header, content can be added to Table Content in the table.

Multiple rows and columns can be added to Table Content. See How To Add Rows And Columns to the Table?

Add Item under the Table Content tab. Edit it. Choose it as a new row or new cell. Below are the other options –

Content

Enter a heading/title for the column.

Advanced Options: Select Yes to explore more.

Styling – Color and Background Color can be applied to each column separately to create a nice look for headers. Set this for an individual cell. It will overwrite the global styling.
Row Span & Column Span – This allows merging two or more table cells located in the same row or column into a single cell.
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.
Icon / Image – This allows you to add icon from the provided list or image to the header field. Icon/Image can be added with or without content.
Link –  Add a link to cell content.

How to Style the Table?

Table Module allows creating beautiful table designs. You can add style to Table Header, Body, Search / Show Entries that will make the table stand out more effectively and make it easy to read.

Odd and Even rows can be highlighted with different color options. The different color can be set to rows when hovered with a mouse.

Style tab in Table Module provides multiple options for designing.

Header Settings

It provides options to style top row of the table.Note: Color and Background Color options are available for each column cell separately under Advanced Settings.

Body Settings

It provides options to style content section of the table.Different color options are available for Odd and Even rows under Striped Effect setting.

Header Image Settings

Image / Icon added from the individual cell in the header can be styled globally with this.

Body Image Settings 

Image / Icon added from the individual cell in the table body can be styled globally with this.

Entries Dropdown & Search Field 

If the table is set to display the Entries Dropdown & Search Field,  those fields can be styled. Read How to add Sortable and Searchable Table? How to Show Entries Dropdown?

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 –

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

Facing Issues with CSV Import?

Sometimes you may face issue while importing CSV file to UABB Table module. It might be the case that you have a CSV with the invalid format. Specially old CSV files might not work as expected. In such cases, you can re-download the CSV files and try them with the module. Below are the steps that will show how you can re-download the CSV.

For MAC UsersFor Windows UsersFor Google Sheets users (recommended)

For MAC Users

File that is created with Numbers app can be exported as CSV as shown below:
Step 1 – Open a file with Numbers and click on File -> Export To -> CSV

Step 2 – Set following options:

2.1 Uncheck 「Include table names「
2.2 Set Text Encoding as Unicode(UTF-8)

For Windows Users

If you have a file created with MS Office then below are the steps to export the file as CSV:

Step 1 – From the top bar, click on Data menu.
Step 2 – Click on the From Text icon.
Step 3 – Go to the location of the file that you want to import. Click on the filename and then click on the Import button. The Text Import Wizard – Step 1 or 3 windows will now appear on the screen.
Step 4 – Choose the file type 65001: Unicode (UTF-8) from the drop-down list that appears next to File origin. Click on the Next button.
Step 5 – It will display the 『Text Import Wizard – Step 2 or 3』 window. Select the Comma delimiter. Click on the Next button.
Step 6 – Select Column data format as general and click on Finish button.

2018-10-04_17-50-11.mp4
Now click on File > Save as, select the location and click on yes/ok for all popups.

For Google Sheets users

This is the easy and sure way to export CSV files. It works well even with your old files. Just import your old files with Google Sheets from File > Import and download it again. You can create/upload file to Google Sheets and then download them as CSV using following steps –

Click on File -> Download as -> Comma-separated values (.csv, current sheet)

You can even import CSV files to Google Sheets that are now working with the Table module, download them again and import to the module.

After successfully exporting CSV files, upload it with UABB Table module to create a table. Refer a link here.

How to Style Play Button?

Video module offers an option to customize the play button of the video. The setting can be found under Thumbnail (tab) > Play Button. 

Play Button can be set as Default, Image or Icon.

For Image 

Choose an appropriate image from the Media Libary.Hover Animation option adds a cool look to the play button.

For Icon 

Select an icon from the icon list.You can set a normal and hover color for the icon.Hover Animation can be applied to the icon.