Letting your website users quickly search through your website content is very important. A search form helps you achieve it. The user will enter a keyword and click the search button and it will yield results in front of the user’s screen quickly.
How to use the Post Search Menu Widget of The Plus Addons For Elementor
The Post Search Bar widget comes with 2 different layout styles to choose from. Let’s understand how to use this widget in the tutorial below.
Search for the Post Search Bar widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.
We have provided you with two styles to choose from.
In this style, the search button is inside the field.
In this style, the search button is outside the field.
Set the position of your search form. You can set it to left, center or right.
Search Field Placeholder
Enter the placeholder text of your search form here.
Search Icon Prefix
Add an icon from the dropdown to be placed ahead of the placeholder text. If you don’t want to add the icon, just click on the close button.
Add a text to your search form button.
Select your desired icon font type. The options are:
Font Awesome: It shows a list of all the Font Awesome icons to choose from.
Icon Minds: Similarly, this also shows a list of all the Icon Minds icons to choose from.
Select your icon of choice to be set on the search button.
Set the position of your icon on the search button. You can set it to left or right. The icon is displayed ahead or at the end of text.
Use the slider to set the spacing between the icon and the text. Use the slider to set it. Our suggestion is 15px.
Set the icon size based on your website design by using the slider.
The Style tab is used for customizing the appearance of all the Post Search widget components.
Prefix Search Icon
Use this option adjust the size of the search icon. You can also change the color and adjust the icon position.
Use this option to set the typography, placeholder text color, padding, background, border and box shadow options.
Similar to what we explained above, style your button using the options.
Set maximum width as per your device type.
On Scroll View Animation
On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View On Scroll View Animation Tutorial
Want to get nerdier with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View The Advanced Tab Tutorial