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.