分類： 入門

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.

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 use the Image Separator effectively?

The Image separator module place an image between two rows swiftly. Here are a few Details you would want to know about this module –

How to use an Image Separator?

1. Add a New Page or open an existing one in the Page Builder.

2. Under the Modules tab click on the drop down to open options and select UABB Modules

3. Scroll down to Image Separator and drag and drop it on the page.

You will find a settings window opened.

Customizing the Image Separator:

Under the General settings you can:

Add an image you wish to use.Set the Size of the image.Select the style, i.e. Simple, Circle, Square or you can design it yourself.Set the image position, i.e. Bottom or TopSet the Gutter (push the image outside or pull it in)Add a link if you wish to make it a clickable image.

Under the Animation tab, you can manage all the animation related settings for the image.

You can select among 40+ animation styles available.You can set the delay timeYou can set the number of times you wish to repeat the animation.Set the Viewport position that will trigger the Animation.

The Advanced settings can be used in case you wish to add margins, Responsive layout, visibility, animation and the CSS Selectors.

Add margins to the top, bottom, left and right of the image.Enable the image to be displayed on all devices, or enable it for a particular device.Decide whether you wish to display the image always, or to logged in users or logged out users or never.Select an Animation and set the delay time.Set CSS Selectors, i.e. an ID or a class for the image.

Save your Settings after you are done customizing the image separator.

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.

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.

Business Hours Module in UABB

The Business Hours module is needed for all businesses who wish to display the day and time of when they』ll be available for their users and customers. UABB version 1.9.0 brings in the Business Hours module that will help you display stylish business hours table on your website. Take a look at a few Business Hours demonstrations here.

Let us take a walkthrough to help you understand the settings of this module.

Like all the other modules of Beaver Builder, or the Ultimate Addons for Beaver Builder, the Business Hours module can simply be dragged and dropped on your page and customized as required. Here are a few settings that you can manage with the setting tabs of this module.

Adding Days and Time using the Content Tab

The Content tab allows you to add the day with their respective working hours. It lets you add multiple timings as well as change the font color, background color for time and day individually. Just click on the Edit Day option to edit the respective day and its attributes.

You can choose to add a day and manage things further as you wish to display.

Styling the display of days and time with options like Alignment, Spacing, etc.

Within the style tab of the Business hours settings, you can change the day and timing style like alignment, spacing, divider and decide whether you want to display it as striped. You can provide a background color, border type and border-radius for the box.

Managing the Typography of the Days and Time being displayed

The Typography tab allows you to change the typography of the day and timing. You』ll be able to select a Font family, size, line height, color, text transform, decoration and letter spacing.

Additional settings such as margins, animations and custom coding

The Advanced tab allows you to manage some additional settings like the margins, responsiveness, animation and visibility to users. It also lets you add some additional HTML code if required.

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.

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.

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 –

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.