Post Search Bar

< All Topics
Widget Used
Post Search
Knowledge Required
Advanced

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.

Pro tip
Always place the search form where it is the most visible to your users i.e. header or sidebar. Don’t place it inside areas such as footer where users can have a hard time finding it.

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.

Table Of Contents

General Steps


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.

1. Content

Select Style for the Post Search widget..

Layout

Style

We have provided you with two styles to choose from.

Style 1
In this style, the search button is inside the field.

Style 2
In this style, the search button is outside the field.

Alignment

Set the position of your search form. You can set it to left, center or right.

Search Field

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.

Search Button

Button Text

Add a text to your search form button.

Icon Font

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.

Icon Library

Select your icon of choice to be set on the search button.

Icon Position

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.

Icon Spacing

Use the slider to set the spacing between the icon and the text. Use the slider to set it. Our suggestion is 15px.

Icon Size

Set the icon size based on your website design by using the slider.

2. Style

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.

Search Field

Use this option to set the typography, placeholder text color, padding, background, border and box shadow options.

Search Button

Similar to what we explained above, style your button using the options.

Responsive

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

3. Advanced

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

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?