Ultimate Addons for Beaver Builder 文档

Advanced Timeline Module

Advanced Timeline module is your perfect solution to display historical events or processes. This module comes with both horizontal and vertical layouts and a bunch of design and customization options. Also, you can display text, media, and links as your Advanced Timeline items or add posts or pages instead.

This article will show how to create and design your Advanced Timelines with UABB』s Advanced Timeline module. 

Key Features

You can do great things with the Advanced Timeline module. For instance, you can show the evolution of your project or your company milestones. Likewise, you can use the module to explain the membership sign-up process on your website or explain other processes. Most importantly, the Advanced Timeline is very flexible and comes with a large number of features: 

Content Type: the Timeline item content can be added as Custom (text and media), or as Posts, Pages, CPTs; 

Horizontal and Vertical layout: you can choose your Advanced Timeline to use a vertical (each item is added beneath the previous one) or the horizontal layout (each item is added on the side); 

Orientation Options in the Vertical Layout: You can align your Advanced Timelines with vertical layout on the Left, Right, or Center

Powerful Query Filters: you can filter your posts and chose which ones you wish to include or exclude based on categories, tags, etc.;Infinite Load for Pagination: if you enable this option, your Advanced Timeline will automatically load further posts when scrolled down;Design & Customization: You can add spacing, choose connector designs, and set fonts, colors, and icons. In short, you can create your Timeline just the way you want. Furthermore, you can design and customize each Advanced Timeline item or apply changes for the whole Advanced Timeline.Presets: This is a collection of different ready-made designs for Advanced Timeline. 

Let』s show you how to add and design an Advanced Timeline on your website.

Create Your Advanced Timeline

You can add an Advanced Timeline to your page or a post by following these steps:

Step 1 – Start editing your post or page with Beaver Builder. In the upper right corner, click on the 「+」 icon, and click on the 「Modules」 tab, to open your module list;

Step 2 – In the 「Group」 dropdown, select the 「UABB Modules」. You will find the 「Advanced Timeline」 module under the 「Content Modules」, or you can use the search option;

Step 3 – Next, drag and drop the module to the desired position to add it to your page or post.

Note:

If you don』t see the 「Advanced Timeline」 in your UABB module list, please make sure that this module is enabled at Dashboard > Settings > UABB > Modules.

Content & Design

Once you add the Advanced Timeline module, you』ll see several tabs with options:

General Tab

Presets: you can choose one of the premade designs that come with this module – choose the one you like, and all the design settings will be applied to your Advanced Timeline items;Content: choose 「Custom」 to add item content yourself, or 「Posts」 to use your existing website content (posts, pages, or CPTs);

Depending on the content option you choose, you will see additional options.

How to create an Advanced Timeline with posts/pages?

Step 1 – Start editing your Advanced Timeline module. In the Timeline Settings, navigate to General Tab;

Step 2 – Scroll down to the 「Content」 section and choose the 「Custom」 option. Beneath the 「Content」 section, you will now see the 「Timeline Items」 section;

Step 3 – Click on the 「Add Timeline Item」 button to add a new item;

Step 4 – Click on 「Edit Timeline Item」 to edit your new item. Under the 「Content」 tab, choose the 「Label Type」:

You can chose your item label to be a 「Date」, and select the date in using the date picker below – this date will be shown on your timeline. On the other side, if you select your label to be a 「Text」, you will be able to type in the custom label text in the next field. This text will be shown istead of the date.

Step 5 – Further add 「Heading」, 「Description」 and link (optional) for your timeline item;

Step 6 – Click on the 「Style」 tab. If you wish to style this item specifically, under 「Override Global Settings」, select 「Yes」 and add your settings;

Step 7 – Click 「Save」 to save this item.

Step 8 – Repeat steps 3 to 7 for all items you wish to add to your timeline.

How to create an Advanced Timeline with custom text and media?

Step 1 – Start editing your Advanced Timeline module. In the Timeline Settings, navigate to General Tab;

Step 2 – Scroll down to the 「Content」 section and choose the 「Posts」 option. Beneath the 「Content」 section, you will now see the 「Pagination」 and 「Posts」 sections. 

Step 3 – Click on the 「Pagination」  and under 「Infinite Load」 choose if you wish to set the infinite load for your timeline posts or not;

Step 4 – Click on the 「Posts」 section to set how you wish your posts to appear in the Timeline.

Query Tab

You will see this tab only if you choose 「Posts」 for your content. Here you can:

Choose the post type you wish to add as your items;Select the number of posts to be displayed;Add the sorting parameter and set order in which post should be displayed;Set filters

Style Tab

Here you can style your Advanced Timeline. You will be able to set the following:

LayoutResponsive LayoutSpacingAdvanced Timeline ItemsDatesConnector

The settings you do in this tab will be applied globally for the whole Advanced Timeline.

Typography Tab

You can set the typography for your Advanced Timeline in this tab. The available options are:

Heading TypographyDescription TypographyDate Typography

Advanced Tab

The last tab holds the following options:

Spacing > MarginVisibilityAnimationHTML ElementExport/Import the module

Once you added content and designed your Advanced Timeline, click the 「Save」 button to save the changes. Once you publish/update the page or post, your changes will be applied to the front-end of your website.

FAQs

Can I Hide The Dates/Text Labels for the whole Timeline? Yes, you can do this. You can hide a date/text label by navigating to Timeline Settings > Style > Layout > Item Label. Here, choose the option 「Hide」 – this will hide the dates for all items in your timeline.

How To Translate Ultimate Addons Modules With WPML?

Ultimate Addons for Beaver Builder (UABB) is fully compatible with the popular WPML – WordPress Multilingual Translation plugin.

You can translate any of the UABB modules to any language with WPML easily.

This article shows the exact steps to translate the content you add to the UABB module.

Before proceeding make sure you have installed and activated WPML (WPML Multilingual CMS and WPML String Translation) plugin and using the latest UABB version.

Let』s consider we have a page named 『Main Services』 built using UABB Heading and UABB Button modules.

Below are the steps to translate content on this test page –

Step 1 – In the dashboard, find the page from the list, and click on the 『plus』 icon for the language you want to translate your page to.

Here we have selected the Hindi language –

Step 2 – Once you click on the plus icon, Advanced Translation Editor will show up. Here you can select a string and add a translated string for it in the input box.

Click on 『Click to edit translation』, then add translated string in the box, and click on the check mark as shown below –

Step 3 – Once you add translation to all the available strings, click on complete.

Now you can visit the page in the frontend and see translated version –

Star Rating Module

Assure the quality of your product or service with trustworthy star ratings on the website. They are great social proof to attract new visitors and encourage conversions.

The Star Rating module allows you to display star ratings anywhere on your web pages.

You can add title and star ratings with your favorite colors and typography.

Here are all settings Star Rating Module offers –

General

Title and Stars: When you add module to the page, you can set the title and configure star ratings with the following settings.

Scale: 1-5 or 1-10: Choose to display 5-star ratings or 10-star ratings.

Rating: Choose a rating you want to display. For example – if you want to show 4 stars, set a number as 4.

Unmarked Style: Solid/Outline: Choose a style for unmarked stars.

Layout: Inline/Stack: Manage the layout for title and star ratings.

Style

Rating Color: Set custom colors for marked and unmarked ratings.

Size and Spacing: Set size for stars and spacing between the stars.

Alignment: left/center/right/justify: Manage the overall alignment of the title and star ratings.

Typography

Typography options for the title

The UABB Filter Reference

Have you ever thought of customizing the Ultimate Addons for Beaver Builder?

We are here to help. We』ve added a few filters that will make customization easier and faster. Don』t see a filter you』ve thought of? Let us know. We』ll add that too!

You need to put the below code snippet in the functions.php file of your theme/child theme.

Module: Contact Form

Filter: uabb_from_emailDescription: This filter is built to control the 「from」 email address of the form submission email.

// Controls the from email address of form submission email
function function_name( $from_email ) {
$from_email = "[email protected]"; // Change this email address.
return $from_email;
}
add_filter( 'uabb_from_email', 'function_name' );

Filter: uabb_from_nameDescription: This filter is built to control the 「from」 name of the form submission.

// Controls the from name of form submission email
function function_name( $from_name ) {
$from_name = "WordPress"; // Change this name.
return $from_name;
}
add_filter( 'uabb_from_name', 'function_name' );

Filter: uabb_contact_form_update_error_messageDescription: This filter is built to update the contact form error message.

// Updates the contact form error message
function function_name( $string ) {
$string = 'Your Error message';
return $string;
}
add_filter( 'uabb_contact_form_error_message', 'function_name' );

Module: Advanced Post

Filter: uabb_blog_posts_featured_image_sizesDescription: This filter can be used to control the featured image sizes. One can add his own registered size for featured images.

// Controls the featured image sizes
function abc($size_arr) {
$size_arr = array(
'full' => __( 'Full', 'uabb' ),
'large' => __( 'Large', 'uabb' ),
'medium' => __( 'Medium', 'uabb' ),
'thumbnail' => __( 'Thumbnail', 'uabb' ),
'custom' => __( 'Custom', 'uabb' ),
'my_custom_image_size' => __( 'My Custom Image Size', 'uabb' ),
); // Add your own size to this array.
return $size_arr;
}
add_filter( 'uabb_blog_posts_featured_image_sizes', 'abc' );
add_image_size( 'my_custom_image_size', 300, 300 );

Filter: uabb_blog_posts_excerptDescription: This filter helps manipulating the content from the Advanced post module. This will be helpful when one wants to trim content or add extra content.

// Controls content/excerpt of the blog post
function abc($content) {
$content = '';
//Do any operation with the content string (say trim the string or add any extra content etc.)
return $content;
}
add_filter( 'uabb_blog_posts_excerpt', 'abc' );

Filter: uabb_blog_posts_linkDescription: This filter can be used to change the post URL to a common one.

// Lets you change the post URL to a common one
add_filter( 'uabb_blog_posts_link', 'my_function', 10, 2 );

function my_function( $url, $id ) {
return 'your url';
}

Filter: uabb_advanced_post_title_linkDescription: This filter can be used to control the post URL link. This will be helpful when one wants to remove posts links from advanced post or to modify link html.

// Lets you remove the post anchor and display only title
function my_function( $link_html, $title, $link ) {
return $title;
}
add_filter( 'uabb_advanced_post_title_link', 'my_function', 10, 3 );

Filter: uabb_blog_posts_query_argsDescription: This filter helps to modify WP_Query arguments.

// Helps to modify WP_Query arguments
function your_function_name_goes_here( $args ) {
$args = '';
//Do any modifications to modify the args. You can add your own filtered query
return $args;
}
add_filter( 'uabb_blog_posts_query_args', 'your_function_name_goes_here' );

Module: Photo Gallery

Filter: uabb_photo_gallery_image_sizesDescription: This filter can be used to control the image sizes in the Photo Gallery module. One can add his own registered size for these images.

// Controls the photo gallery image sizes
function abc($size_arr) {
$size_arr = array(
'full' => __( 'Full', 'uabb' ),
'large' => __( 'Large', 'uabb' ),
'medium' => __( 'Medium', 'uabb' ),
'thumbnail' => __( 'Thumbnail', 'uabb' ),
'custom' => __( 'Custom', 'uabb' ),
'my_custom_image_size' => __( 'My Custom Image Size', 'uabb' ),
); // Add your own size to this array.
return $size_arr;
}
add_filter( 'uabb_photo_gallery_image_sizes', 'abc' );
add_image_size( 'my_custom_image_size', 300, 300 );

Filter: uabb_photo_gallery_tabsDescription: This filter can be used to modify Filterable Tabs.

Note: $cat_filter –  The array of image categories to display in Filterable Tabs.

// Modify filterable tabs
add_filter( 'uabb_photo_gallery_tabs', function( $cat_filter ) {
$cat_filter['old_category'] = 'New Category';
return $cat_filter ;
}, 10, 2 );

Module: Row Separator

Filter: uabb_row_separator_top_optionsDescription: This filter can be used to control the top row separator shapes. One can add his own top row separator shape. You can determine the shape in the filter mentioned below. This filter has to go along with the one for SVG shapes and they both need to have the same shape name to see the desired result

// add options to top row separator
add_filter ( 'uabb_row_separator_top_options', 'new_top_options', 10, 1 );
function new_top_options( $arr ) {
$arr[ 'triangle_custom' ] = 'Triangle Custom';
return $arr;
}

Filter: uabb_row_separator_svg_triangle_customDescription: This filter will add a new SVG shape

/// Modify the SVG html
add_filter( 'uabb_row_separator_svg_triangle_custom', 'criticalink_row_svg', 10, 2 );
function criticalink_row_svg( $svg_html, $row ) {
return 'write your svg here';
}

Filter: uabb_row_separator_bot_optionsDescription: This filter can be used to control the bottom row separator shapes. One can add his own bottom row separator shape. You can determine the shape in the filter mentioned below. This filter has to go along with the one for SVG shapes and they both need to have the same shape name to see the desired result

// add options to bottom row separator
add_filter ( 'uabb_row_separator_bot_options', 'new_bot_options', 10, 1 );
function new_bot_options( $arr ) {
$arr[ 'split_custom' ] = 'Split Custom';
return $arr;
}

Filter: uabb_row_separator_svg_split_customDescription: This filter will add a new SVG shape

/// Modify the SVG html
add_filter( 'uabb_row_bot_separator_svg_split_custom', 'criticalink_row_svg', 10, 2 );
function criticalink_row_svg( $svg_html, $row ) {
return 'write your svg here';
}

Filter: enable_uabb_modules_backendDescription: This filter will render UABB Modules in the Dashboard

/// Render UABB Modules in the WordPress Backend
add_filter( 'enable_uabb_modules_backend', 'enable_modules_backend_wp' );
function enable_modules_backend_wp( $val ) {
return $val = true;
}

Module: Image Carousel

Filter: uabb_image_carousel_sizesDescription: This filter can be used to control the image sizes in the Image Carousle module. One can add his own registered size for these images.

/// Add custom Image Sizes for Image Carousel
function abc($size_arr) {
$size_arr = array(
'full' => __( 'Full', 'uabb' ),
'large' => __( 'Large', 'uabb' ),
'medium' => __( 'Medium', 'uabb' ),
'thumbnail' => __( 'Thumbnail', 'uabb' ),
'my_custom_image_size' => __( 'My Custom Image Size', 'uabb' ),
);
return $size_arr;
}
add_filter( 'uabb_image_carousel_sizes', 'abc' );
add_image_size( 'my_custom_image_size', 300, 300 );

Module: Woo Products

Filter: uabb_woo_out_of_stock_stringDescription: This filter will replace the 「OUT OF STOCK」 text of products from UABB woo-products grid or carousel.

// Changes the "OUT OF STOCK" message from Woo-Products module to your desired string.
add_filter( 'uabb_woo_out_of_stock_string', 'change_out_of_stock_string' );
function change_out_of_stock_string ($default) {
//Return new string
return 'Coming Soon';
}

Module: Testimonials

Filter: uabb_testimonial_rating_iconDescription: This filter will help you to replace the rating icon in Testimonial module. Please make sure you have chosen two different icons to style.

The first icon will replace the filled star rating icon. To replace this icon you need a Unicode of the font-awesome icon.

To explore the font-awesome icons. Please visit the font-awesome icon gallery.

// You can change the rating icon in the UABB Testimonial module.
add_filter( 'uabb_testimonial_rating_icon', 'change_testimonial_rating_icon' );
function change_testimonial_rating_icon ($default) {
// Icon unicode for rating filled star icon
echo '
.uabb-testimonial .uabb-rating__input.uabb-checked ~ .uabb-rating__ico:before {
content: "f293";
}
';
// Class name for empty star icon.
return 'fa-bluetooth-b';
}

Filter: uabb_testimonials_next_arrow_icon & uabb_testimonials_previous_arrow_icon Description: This filter is to change the previous and next carousel arrows with any arrow icon.

add_filter( ' uabb_testimonials_next_arrow_icon ', 'uabb_next_icon' );function uabb_next_icon() { return 'icon class'; } add_filter( ' uabb_testimonials_previous_arrow_icon ', 'uabb_previous_icon' );function uabb_previous_icon() { return 'icon class'; }

Module: Business Reviews

Filter: add_filter( 『uabb_reviews_google_url_filter』, 『uabb_url_fun』 );Description: Added a Filter to display reviews in a language other than English

add_filter( 'uabb_reviews_google_url_filter', 'uabb_url_fun' );

function uabb_url_fun() {
$add_query_filter = array(
'key' => 'AIzaSyDhIYunhIVTIBIYSWfrMAsCoDmhJNB4JNc',
'placeid' => 'ChIJ345NFGXAwjsRS8VmWAm4Azc',
'language' => 'mr',
);
return $add_query_filter;
}

Filter: add_filter( 『uabb_reviews_date_format_filter』, 『uabb_date_format』 );Description: Added a filter to change the review date format.

add_filter( 'uabb_reviews_date_format_filter', 'uabb_date_format' );

function uabb_date_format() {
$date_format = d-m-y;
);
return $date_format;
}

Module: Image-carousel

Filter: uabb_image_carousel_next_arrow_icon & uabb_image_previous_next_arrow_icon Description: This filter is to change the previous and next carousel arrows with any arrow icon.

add_filter( ' uabb_image_carousel_next_arrow_icon ', 'uabb_next_icon' );

function uabb_next_icon() {
return 'icon class';
}
add_filter( ' uabb_image_carousel_previous_arrow_icon ', 'uabb_previous_icon' );

function uabb_previous_icon() {
return 'icon class';
}

Module: Video-Gallery

Filter: uabb_video_gallery_carousel_next_arrow_icon & uabb_video_gallery_carousel_previous_arrow_icon Description: This filter is to change the previous and next carousel arrows with any arrow icon.

add_filter( ' uabb_video_gallery_carousel_next_arrow_icon ', 'uabb_next_icon' );

function uabb_next_icon() {
return 'icon class';
}
add_filter( ' uabb_video_gallery_carousel_previous_arrow_icon ', 'uabb_previous_icon' );

function uabb_previous_icon() {
return 'icon class';
}

Module: Woo-Products

Filter: uabb_woo_products_next_arrow_icon & uabb_woo_products_previous_arrow_icon Description: This filter is to change the previous and next carousel arrows with any arrow icon.

add_filter( ' uabb_woo_products_next_arrow_icon ', 'uabb_next_icon' );

function uabb_next_icon() {
return 'icon class';
}
add_filter( ' uabb_woo_products_previous_arrow_icon ', 'uabb_previous_icon' );

function uabb_previous_icon() {
return 'icon class';
}

Module: Woo-Categories

Filter: uabb_woo_categories_next_arrow_icon & uabb_woo_categories_previous_arrow_icon Description: This filter is to change the previous and next carousel arrows with any arrow icon.

add_filter( ' uabb_woo_categories_next_arrow_icon ', 'uabb_next_icon' );

function uabb_next_icon() {
return 'icon class';
}
add_filter( ' uabb_woo_categories_previous_arrow_icon ', 'uabb_previous_icon' );

function uabb_previous_icon() {
return 'icon class';
}

Module: FAQ

Filter: uabb_faq_schema_force_renderDescription: This filter is used to force render the schema markup in some cases.

add_filter( 'uabb_faq_schema_force_render', 'force_render' );
function force_render() {
return true;
}

Module: Social Share

Filter: uabb_social_share_pinterest_img_sizeDescription: This filter is used to change the image size for Pinterest Social Share Type.

add_filter( 'uabb_social_share_pinterest_img_size', 'change_img_size' );
function change_img_size() {
return 'full'; // Change image size here
}

We』ll keep updating this page. Keep coming back for more.

What Are UABB Presets and How To Use Them?

UABB module offers a number of styling options like colors, typography, layout, spacing, alignment, and so on. Browsing through these options to get that perfect look for the module can be time-consuming, especially if you are a non-designer. You might spend a bunch of time and still did not get that desired design.

To save you from this hassle, Ultimate Addons for Beaver Builder provides a super useful feature called Presets. Let』s understand more about this.

What Are the Presets?

Presets are pre-made design templates for UABB modules that will help you to speed up your website designing process.

While working with UABB modules, you can simply choose any style from a list of professionally designed, sleek, and classic presets. Presets will help you to quickly create great designs.

Presets will save your time in playing around different settings for modules. It will give you a set of different styles for modules.

How To Use Presets?

Presets are available with following UABB modules –

Info BoxDual ButtonHeadingDual Color HeadingBusiness HoursFAQ SchemaTeamAdvanced AccordionAdvanced TabsCountdown

It will be available for more UABB modules with upcoming updates.

To access presets follow below steps –

Step 1 – Click to edit module. You will notice the 「Presets」 option under the 「General」 tab.

Step 2 – Select any of the Presets to see the design applied to your widget. To switch back to plain (default) design, please select the 「Default」 option.

Step 3 – From here you are free to modify the module content, and all settings if needed including the settings applied by Preset selected.

Step 4 – Update to save changes.

NoteIf you have already designed a module using Presets, keep in mind that selecting the 「Default」 option will reset the module to its initial plain style. Thus, please don』t select the 「Default」 option unless resetting is your intention.

Unable to See Caldera Forms Styler Module?

Caldera Forms Styler module allows you to design your form beautifully. If you are not able to see this module in the UABB』s module list please check the following things –

If the Ultimate Addons for Beaver Builder (UABB) plugin is updated to v1.30.4 and above. This version will deprecate the Caldera Form Styler module. As per the official statement from Caldera Forms, the plugin will be retired on 31 Dec 2021. So Caldera Form Styler module won』t be available for new users after UABB v1.30.4  Caldera Forms plugin is installed and activated. Caldera Forms Styler widget totally depends on the Caldera Forms plugin and will not be available unless the Caldera Forms plugin is installed and activated.Caldera Form Styler widget is activated from Dashboard > Settings > UABB > Modules and also from the Beaver Builder Modules list.

Caldera Forms Styler Module

Update: Ultimate Addons for Beaver Builder v1.30.4 and above deprecates the Caldera Forms Styler module. As per the official statement from Caldera Forms, the plugin will be retired on 31 Dec 2021. So Caldera Form Styler module won』t be available for new users after UABB v1.30.4

Though the module will continue working for existing users as the Caldera Form plugin is still working. So if you have used the Caldera Form plugin and Caldera Form Styler module, it will continue working without any interruption. Future updates for the UABB Caldera Form Styler module will be dependent on further notice from the Caldera Form plugin. As per the authors of the Caldera Form plugin, Caldera Forms will be eventually converted to Ninja Forms. Read more in their detailed post here.

Ultimate Addons for Beaver Builder brings to you the Caldera Forms Styler module. Helping you style and customize Caldera Forms to match your website design and color scheme.

Below are some key features of the module –

Input Fields StylingGradient / Color Background for formEasy & 100% Customization for Radio & CheckboxDifferent styles for Success / Error messagesGradient Color Options for Submit Button

Let』s see the features in details and how we can design to design the Caldera Form using our module –

Even here just drag-n-drop the module on the Beaver Builder editor and select the Caldera Form from the list and make it as per your website style and design scheme.

Input Fields Styling

The input fields can be styled as per required by visiting the Style tab of the module and under the Form Fields section. Here you will find the option to manage the Field Size, Padding, Color, Border, and even the Spacing between the fields.

Gradient / Color Background for Form

You can set a Gradient or a Simple Color to your Caldera Forms just by visiting the Forms section under the Style Tab.

Easy & 100% Customization for Radio & Checkbox

Ever wanted to customize or make changes to the Radio or Checkboxes of the Caldera Forms. We have you covered, just head over to the Radio & Checkbox section from the Style tab. You will also, find the option of Override Current Style, by default it fetches the default Checkbox and Radio button styling. But by using this option you can override its styles as required.

[ Screenshot of the Checkbox section ] Verify the String of the Override label

Different Styles for Success / Error Messages

The settings in this section allow us to set a different Position for the Error message and also allows to set various colors for the Error message or Success Message including changing the Background Color of the Input fields.

Gradient Styling Options for Submit Button

Having a color styling option could get a bit boring for any Submit button, to keep it refreshing we have provided the Gradient Styling options so that you can customize the Styling using a Linear or Radial Gradients and also with other Border, and Hover Colors

Advanced Tabs Module

Ultimate Addons for Beaver Builder has one of the most used modules which helps enhance the look of your pages with interactive Advanced Tabs module.

[Screenshot]

Below are some key features of the module –

Options to have Icons on Tab Title with Icon Position optionActive Tabs styling and Layout options- Horizontal/VerticalChoose from Tab Appearance Options – Simple/Bar/Icon Fall, etc.Responsive Mode for Tabs with responsive Breakpoint optionAbility to insert Content/Photo/Video Embed Code to Tabs contentAnd also insert Saved Rows/Saved Module/etc to Tabs content while using with Beaver Builder Pro.Multiple Styling OptionsEasy & 100% Customization for Tabs Title, Content, & Icons

How to Use the Advanced Tabs module on Beaver Builder Page?

Step 1: First, search the panel for the 「Advanced Tabs」 Module, in the Beaver Builder Editor, and drag & drop the module onto the page.

Step 2: In the Tab Items tab, add or duplicate items and start editing individual items with Title. Tab Icon and Content as per your requirement.

Step 3: Visit the second tab of the module which is Tab where you can select the Tab layout – Horizontal/Vertical. Also, you can select the appearance on how the Tab is supposed look. Additionally, this Tab has padding, responsive options, etc to further style the Tab title section.

Step 4: The next Content section, it would help style the content of your tabs.

Step 5: If you want to change the typography of the Tabs and Content you can modify from the respective Tab/Content and further from the Typography tab.

Let』s see the settings in brief and how to make better use of it —

3) Explanation about the settings which we provide in the Advanced Tab

Thoughts?

4) Please explain how the color settings work for all the Top Appearance options.

Styling Settings

Search Module

The Ultimate Addons for Beaver Builder v1.30.0 introduces the Search Module for your Beaver Builder pages or anywhere on your pages you feel like.

Just not the Search box we provide a wide range of layout options for Search box, layout options, etc.

Key Features –

Different Layout options (Input Text only, Button Only, Both Input Field & Button)Styling options for each layoutOptions For button layout – Expand on click, Fullscreen layoutAJAX search supportOptions for AJAX search results customization

Let』s dive deep and see how to make the best use of this new module –

How to Add Search Module on Beaver Builder Page?

Step 1: First, search the panel for the 「Search」 Module, in the Beaver Builder Editor, and drag & drop the module onto the page.

Step 2: In the Layout tab, choose the Display Layout options you want to display your Search Bar on your pages/posts. You can also select among other options like Both Input Field & Button, Input Field Only, Button Only.

Step 3: Choose the layout – Inline/Stacked.

Step 4: If you want to change the style of the buttons, select the Button Icons, Icon Position, and under the Style tab of the Search module you can set the Width, Height, Color, Input Style, Button Style, and more.

Let』s see the settings in brief and how to make better use of it —

Layout Options

As the name suggests, under the layout tab you will be able to manage the layout options of the Search module.

Let』s see what are the options further and how it can help quickly setup the module

Display Layout: You can choose from Input Field Only, Button Only, or 「Both Input Field & Button」

Layout: This layout option let』s choose an Inline or Stacked layout for the Search bar. Note: This option is only available with the 「Both Input Field & Button」

Placeholder Text: You can edit or modify the default Placeholder text

Button Text: You can edit or modify the default Button text

Enable AJAX Search: This option will help display quick results as you type in the Search Bar

Button Icons – Icons: You can select the Icons for the Button under this option.

Icon Position: Before Text/After Text are the options for the positions

Styling Options

The Styling options range from different options to style the Search Bar, manage width, Color, etc.

Search Container: Under this section you can manage the Width of the Search Container, Height with responsive options, Background Color, Border, Padding too.

Input Style: Here you can manage the Text Color, Background Color, Border, Padding too.

Button Style: In this section manage the alignment of the button, Text Color, Icon Color, Border Color, etc.

Filters/Actions for WooCommerce Products

Filters / Actions available for WooCommerce Products are listed below.

Module: Woo Products

Filter: uabb_woo_out_of_stock_stringDescription: This filter will replace the 「OUT OF STOCK」 text of products from UABB woo-products grid or carousel.

// Changes the "OUT OF STOCK" message from Woo-Products module to your desired string. add_filter( 'uabb_woo_out_of_stock_string', 'change_out_of_stock_string' ); function change_out_of_stock_string ($default) { return 'Coming Soon'; //Return new string }

uabb_quick_view_title_before

Fires at the beginning of the quick view title

function quick_before_title( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_title_before', 'quick_before_title', 10, 2 );

uabb_quick_view_title_after

Fires at the end of the quick view title

function quick_after_title( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_title_after', 'quick_after_title', 10, 2 );

uabb_quick_view_price_before

Fires at the beginning of the quick view price

function quick_view_price_before( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_price_before', 'quick_view_price_before', 10, 2 );

uabb_quick_view_price_after

Fires at the endof the quick view price

function quick_view_price_after( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_price_after', 'quick_view_price_after', 10, 2 );

uabb_quick_view_rating_before

Fires at the beginning of the quick view rating

function quick_view_rating_before( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_rating_before', 'quick_view_rating_before', 10, 2 );

uabb_quick_view_rating_after

Fires at the end of the quick view rating

function quick_view_rating_after( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_rating_after', 'quick_view_rating_after', 10, 2 );

uabb_quick_view_short_description_before

Fires at the beginning of the quick view short description

function quick_view_short_description_before( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_short_description_before', 'quick_view_short_description_before', 10, 2 );

uabb_quick_view_short_description_after

Fires at the end of the quick view short description

function quick_view_short_description_after( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_short_description_after', 'quick_view_short_description_after', 10, 2 );

uabb_quick_view_add_to_cart_before

Fires at the beginning of the quick view add to cart

function quick_view_add_to_cart_before( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_add_to_cart_before', 'quick_view_add_to_cart_before', 10, 2 );

uabb_quick_view_add_to_cart_after

Fires at the end of the quick view add to cart

function quick_view_add_to_cart_after( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_add_to_cart_after', 'quick_view_add_to_cart_after', 10, 2 );

uabb_quick_view_category_before

Fires at the beginning of the quick view category

function quick_view_cat_before( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_category_before', 'quick_view_cat_before', 10, 2 );

uabb_quick_view_category_after

Fires at the end of the quick view category

function quick_view_cat_after( $post_id ) { echo '

'; } add_action( 'uabb_quick_view_category_after', 'quick_view_cat_after', 10, 2 );

Filters / Actions for Woo Categories module

uabb_woo_category_single_product_string

Filter: uabb_woo_category_single_product_stringDescription: This filter will replace the 「Product」 text of product count from UABB woo-categories grid or carousel when there is a single product in the category.

// Changes the "Product" message from Woo-Categories module to your desired string.

add_filter( 'uabb_woo_category_single_product_string', 'change_product_string' );
function change_product_string($default) {
return 'Item'; //Return new string
}

uabb_woo_category_multiple_product_string

Filter: uabb_woo_category_multiple_product_stringDescription: This filter will replace the 「Products」 text of product count from UABB woo-categories grid or carousel when there are multiple products in the category.

// Changes the "Products" message from Woo-Categories module to your desired string.

add_filter( 'uabb_woo_category_multiple_product_string', 'change_products_string' );
function change_products_string($default) {
return 'Items'; //Return new string
}

woocommerce_before_subcategory

Fires at the beginning of the WooCommerce subcategory

function content_before_subcategory( $category ) { echo '

'; } add_action( 'woocommerce_before_subcategory', 'content_before_subcategory', 10, 2 );

woocommerce_before_subcategory_title

Fires at the beginning of the WooCommerce subcategory title

function content_before_subcategory_title( $category ) { echo '

'; } add_action( 'woocommerce_before_subcategory_title', 'content_before_subcategory_title', 10, 2 );

woocommerce_shop_loop_subcategory_title

Fires the WooCommerce shop loop subcategory title

function woo_shop_loop_subcat_title( $category ) { echo '

'; } add_action( 'woocommerce_shop_loop_subcategory_title', 'woo_shop_loop_subcat_title', 10, 2 );

woocommerce_after_subcategory_title

Fires at the end of the WooCommerce shop loop subcategory title

function content_after_subcategory_title( $category ) { echo '

'; } add_action( 'woocommerce_after_subcategory_title', 'content_after_subcategory_title', 10, 2 );

woocommerce_after_subcategory

Fires at the end of the WooCommerce shop loop subcategory Content

function content_after_subcategory( $category ) { echo '

'; } add_action( 'woocommerce_after_subcategory', 'content_after_subcategory', 10, 2 );