Search Form
How to Configure and Style Search Form #
Search Form lets you add an advanced AJAX search panel for your site. By using this element, you can customize the look of your search bar just the way you want inside Elementor. It gives complete flexibility to style it any way you want and make your documentation attractive to your WordPress site visitors.
How To Activate Search Form #
To use this Sastra Addons element, find the ‘Search Form (AJAX)’ element from the ‘Search’ option under the ‘Elements’ tab. Simply just drag and drop the ‘Search Form (AJAX)’ element into any section you want in Elementor Editor.
After you have successfully done with step 1, this is how the element is going to look like.
How To Configure The Content Settings #
Under the content tab, you will see several options like ‘Search’. You can configure these settings to customize the content of your Search Form.
Search #
From this section, you can choose the ‘Select Query’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to use select query. You have the freedom to use the toggle to enable or disable the ajax search, open link in new tab, show ajax thumbnails, show view results button, show description, disable button link and hide or display button. Than you can set description words limit, no results text, placeholder and aria label as well.
Moreover, you can use drop-down for button style and button type. You can set button text or icon as your preference.
Click to see Live Demo #
How to Style Search Form #
To customize Search Form, click on the ‘Style’ tab, and you will find many different options here.
Input #
From this section, you can set input field color, background color, placeholder color, border color and box shadow with focused and normal options. Than you can change typography, alignment and padding.
Moreover, you can styling to border with border radius.
Button #
From this section, you can set button text color, background color and border color with hovered and normal options. You can change button position, typography, width, border size and border radius as well.
Ajax #
From this section, you can set search list background color, background hover color, box shadow and transition duration. Also you can change horizontal position, container width, max width and top distance with supported all devices.
In view result sub-section, you can set result color, hover color, background color, background hover color, typography, transition duration, padding and border radius.
Moreover, you can styling to title, description, close button, scrollbar, no result and many more.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Search Form as per your preference.
With Search Form, this is how you can easily design an amazing search panel to help users.
Getting stuck? Feel free to contact our amazing Support Team for any assistance.
Subscribe & Download
Enter Your Email Address to Know About the Latest Updates & Features.