Author 詩語

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 Display YouTube Subscribe Bar for Video?

Video module provides an option to display a YouTube Subscribe Bar.  When you choose to display a YouTube video, this option will appear as a separate tab.

Below are the options available under YouTube Subscribe Bar tab –

Select Channel ID/Channel Name: You need to link the subscribe bar with your video channel on YouTube. To connect to a channel you need to choose either its name or ID and enter the value. Read How to Find YouTube Channel Name and Channel ID?Subscribe to Channel Text: Edit text that displays on the Subscribe Bar.Show Subscribers Count: Choose if you want to display the current subscriber』s count.Text Color, Background Color: Customize the Subscribe Bar completely with these options.Padding: Manage space around the bar.

How can I use the Modal Popup module effectively?

Like all the modules available in Beaver Builder and the Ultimate Addons for Beaver builder, the Modal popup module of UABB can be simply dragged and dropped on the page you wish to use it on.

Let us take a look at the various settings that help us create a good looking and a better performing modal popup.

You』ll find 5 different tabs in the settings window.

Content settingsDisplay settingsClose Button settingsTypographyAdvanced Settings

Content Settings

You can

Decide whether you want to enable the Preview of the modal popup in the back end.Decide what kind of content will it have; Text, Photo, Video Embed code, Video from YouTube, Vimeo or iFrame.Adjust the other popup settings like the background and overlay color, opacity, content width, animation effects and more.

Display Settings

You can

Decide how you wish to display the popup: automatically (Exit Intent, Well timed), on click of an icon, button, text or an image, or with a class or ID.Work on further settings like the anchor text, the text on the button, the icon or image, and the class or ID and the cookie settings too.

Close Button Settings

You can

Decide whether the close button should be an icon or an image.Work on the further settings for icons and images.Decide whether you want to enable additional methods (clicking on the overlay or through the ESC key) of closing a modal popup.

Typography

You can

Select the Font family, the size and line height of the text you place on the popup.

Advanced Settings

You can

Set the margin widthSet the layout as per the devices the popup will be displayed on.Adjust the visibility: always, never or to logged in or logged out users.Animation and the delayAdd CSS selectors if any.

If you are on the agency version of Beaver Builder and wish to create a site-wide modal popup, here is an article you could refer to.

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

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

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.

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