No results found. Try again with different words?

Search must be at least 3 characters.

    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.

    Was this article helpful?

    Did not find a solution? We are here to help you succeed.

    Related Docs

     

    Grab this rare opportunity to save up to 50%

    WOAH, HOLD ON THERE!

    Don't Miss Our Biggest Discount

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    You are backed by 100% risk-free money-back guarantee.

    Grab Our Biggest Discount Of All Time. Don’t Miss Out!

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Scroll to Top