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 layout
• Options For button layout – Expand on click, Fullscreen layout
• AJAX search support
• Options 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.