A valued featured that you can include in your new website is a search form that allows users to search through all your website’s content. The search module of the page designer lets you include it on your pages, wherever you choose to locate it on the page and with a customizable design.

Content settings

These are the content options that allow you to control what appears on this module.

Text

Type the placeholder text that you want to use for the search field.

Elements

Show or hide the search button.

Exceptions

Exclude pages and posts from the search results.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Design settings

Search Field

Adjust the color of the placeholder text.

Text

Customize the text orientation, color, and shadow.

Input Text

Adjust the input text design settings including the font type, weight, style, alignment, color.

Button Text

Change the design of the search button’s text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color, and width.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

Let’s add a search button to our homepage with the following characteristics:

Placeholder text: Type here…

Placeholder color: #0c71c3

Border color: #0c71c3

Button and border color: #000000

Button text color: #FFFFFF

Width: 25%

Module Alignment: center

Rounded corners: 8px

Border color: #dddddd

There we have it! Simple.