分類： 入門

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?

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 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 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 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 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 open a modal popup from another module?

The Ultimate Addons for Beaver Builder comes with a modal popup module that can be displayed automatically, or on the click of a button, text, image, or through any other module.

In order to display a modal popup from another module, you will have to use a unique class name or ID that is shared between the Modal popup and the respective module.

Here are the steps you need to follow:

1. In the Modal popup settings, under the Display settings tab, select to display the popup on a Custom Class / ID.

2. Enter the unique class name in the text box below.

Note: Add a 「.」 before a class name and a 「#」 before an ID.

3. Make sure the same class name is entered in the Advanced Settings tab of the module you wish to use.

Note: DO NOT add a 「.」 before a class name and a 「#」 before an ID.

This method will display the modal popup on the click of the button or link in the other module.

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