Search Bar

< All Topics
Widget Used
Search Bar
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to build a search content menu for your website/product. Then we have created a superior and well-designed widget. With the help, you find the content in a custom way and give a fresh look to the webpage/post/article’s search bar and which will help you to engage your audience to the website/product.

Table Of Contents
Pro tip
Why don’t you use this widget? Because with the help of this widget, you can implant and see some useful options as your website search menu for posts, pages, products, etc.

How to use the Search Bar Widget of The Plus Addons For Elementor

The Search Bar widget comes with some post source types. With the custom styling options, you can make a pleasant and suitable layout.

Requirement

You need to install Woo Commerce and Advanced Custom Fields (ACF) to make better use of this widget’s feature.

You can make better use of this widget’s feature with ​the Dynamic Listing and Woo Product Listing widget that we have already created.

General Steps

Search for the Search Bar element 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 the Search Bar widget. First, click on the Content tab.

1. Content

1) Search Bar Fields

Search Bar Repeater

Select Source

We have given two source options for the search menu. Select your desired option for the search menu. You can set the field where you want to set it, such as the top, middle, bottom, and add and remove it.

You will be able to do see & search posts according to the selected source.

The options we provided are:

1. Post
2. Taxonomy

Select Type

You can only see this field when you have selected a Post in the source menu.

We have given six Post types of the Post for the search menu. Select your desired Post type of Post for the search menu.

You will be able to do see & search posts according to the selected source.

The types we provided are:

1. Posts
2. Pages
3. Landing Pages
4. Nexter Builder
5. Plus Mega Menu
6. Products

Select Taxonomy

You can only see this field when you have selected a Taxonomy in the source menu.

We have given six Taxonomy types of the Taxonomy for the search menu. Select your desired Taxonomy type of Taxonomy for the search menu.

You will be able to do see & search posts according to the selected source.

The types we provided are:

1. Category
2. Post Tag
3. Nexter Builder Category
4. Product Category
5. Product Tag

6. Product Attributes

Label

You can set the selected source ( Post or Taxonomy ) heading title ( Label ).

Placeholder

You can set the selected source ( Post or Taxonomy ) Placeholder Text.

Show Index

By enabling this option you can see the selected source ( Post or Taxonomy ) index value.

Show Sub category

By enabling this option you can see the sub-category when you have selected the category from the select taxonomy menu.

2) Search Input

Label

You can set the search input field heading title ( label ).

Placeholder

You can set the search input field Placeholder Text.

Icon

You can set the search input field Icon.

3) Results Area

Select Result Style

We have given two types of result styles ( Style 1 and Style 2 ) for the selected source ( Post or Taxonomy ) menu. By using styles you can change the post result layout.

Posts Per Page

You can set how many posts you want to see per page.

Column

You can set the number of columns for different types of screen layouts.

Set the number of listing columns to be displayed on the desktop.
Set the number of listing columns to be displayed on the tablet.
Set the number of listing columns to be displayed on the mobile.

Result Visibility Settings

You can see which option you want to see in post results of selected sources by enabling it one by one in this setting.

You can see the title in the result area.
You can see content in the result area.
You can see the thumb (button) in the result area.
You can see product prizes for woo commerce posts in the result area.
You can see the description in the result area.
You can see the total count value in the result area.

Text Limit

We have given two types of text limit menus for the selected source.

Title Limit

You can set the limit of the title by using this option you can customize the title.

By enabling this you can see the title limit option.
You can set a limit of title in word or character.
Set the limit value of the title.
By enabling this option you can see dots after the title.

Content Limit

You can set the limit of the content by using this option you can customize the content.

By enabling this you can see the content limit option.
You can set a limit of content in word or character.
Set the limit value of the content.
By enabling this option you can see dots after the content.

Enable Scroll Bar

By enabling this option you can see the selected source menu content scroll bar.

Scroll Bar Height

You can set the height of the selected source content scroll bar.

4) Standard Search

Search Type

We have given two types of search for the search menu. Select your desired type of search for the search menu.

The types we provided are:

1. Full Match :- You have to type only the all alphabet of any word. you can type only ‘Plus Addon’ Alphabet For Exp. Plus Addon

2. Default :- You have to type only the first alphabet of any word. you can type only ‘P’ Alphabet For Exp. Plus Addon

Generic Filters

We have given six types of generic filters for the search of your post.

By enabling generic filters options one by one you can search your post-filter-wise.

You can search your post-title-wise.
You can search your post excerpt content-wise.
You can search your post content-wise.
You can search your post-permalink-wise.
You can search your post-category-wise.
You can search your post-tag-wise.

ACF Filters

We have given advanced custom fields filters options for the search of your post.

ACF Options

By using ACF options you can search your post ACF filter-wise.

You can put the ACF key and find the post ACF filter-wise.

5) Load More/Lazy Load

Loading Options

We have given three options for loading the post. Select your desired loading option.The options we provided are:

1. Pagination
2. Load More
3. Lazy Load

Counter Enable

By enabling this option you can see a counter limit option for pagination.

Counter Limit

You can set a counter limit for pagination.

Arrow Navigation

By enabling this option you can see the arrow navigation option for pagination.

Counter Style

We have given three styles of the counter for pagination. Select your desired style and put the arrow where you want to show. The styles we provided are:

1. After Arrow
2. Between Arrow
3. Before Arrow

Next Text

You can set the Next text title.

Next Icon

You can set the Next text icon.

Previous Text

You can set the Previous text title.

Previous Icon

You can set the Previous text icon.

Button Text

Set the Button text to the load more option.

Loading Text

Set the loading text for load more and lazy load option.

All Posts Loaded Text

Set the all post-loaded text for load more and lazy load option.

More Posts On Click/Scroll

Set the maximum number of posts to display on the click or scroll per page.

Counter

By enabling this option you can see the total counter text value option.

Counter Text

You can set the total counter text value.

6) Extra Option

AJAX Search

By enabling this option you can search your post result through ajax.

Search Character Limit

You can set the character limit after how many characters want to start searching ajax results?

Prefilled Suggestions

By enabling this option you can see the suggestions word option for the post.

Enter Suggestions Word

You can set custom suggestion words for searching your post.

Note: you can use “|” to enter multiple values in suggestion words.

Search Button

We have given some options for the search button using that you can customize the search button.

By enabling this option you can see all options of the search button.
You can set the search button text.
You can select the search button icon option from the none, icon, image.
You can choose the search button icon.
You can choose the search button image.
You can select the button icon position where you want to show.

Post Not Found Message

When your post result is not found that time you can see a post not found message. You can set custom post not found message.

2. Style

The Style tab is used for customizing the look of all the Search Bar widget components such as Label, Search Box, Drop Down, Button, Results Box, Results Heading, Results Content, Pagination, Load More/Lazy Load, Overlay Option, Background Option, Scroll Bar and Error Option.

Label Style

Set Padding, Margin, Typography, Text Color, Background, Border, Border Radius and Box Shadow for the Label.

Search Box Style

Set Padding, Inner Padding, Width, Placeholder Typography, Ajax Close/Spinner Icon Options, Placeholder Color, Text Color, Search Icon Color, Background, Border, Border Radius, Box Shadow and Box Options for the Search Box.

Drop Down Style

Set Inner Padding, Margin, Width, Typography, Text Color, Icon Color, Background, Border, Border Radius, Box Shadow, Mouse Hover Options, Scroll Bar Options and Box Options for the Drop Down.

Button Style

Set Padding, Margin, Typography, Button Alignment, Offset, Text color, Icon Color, Background, Border, Border Radius, Box Shadow, Image Options and Box Options for the Button.

Results Box Style

Set Box Option (Padding, Margin, Width, Typography, Text Color, Background, Border, Border Radius and Box Shadow) for the Results Box.

Results Heading Style

Set Padding, Margin, Total Count Typography, Total Count Text Color, Background, Border, Border Radius and Box Shadow for the Results Heading.

Results Content Style

Set Padding Options, Tile Typography, Content Typography, Woo Price Typography, Woo Short Description Typography, Price Color, Content Color, Woo Price Color, Woo Short Description Color, Background, Border, Border Radius, Box Shadow, Image Options and Result Box Options for the Results Content.

Pagination Style

Set Typography, Text Color, Background, Border, Next Button Options and Previous Button Options for the Pagination.

Load More/Lazy Load Style

Set Padding, Margin, Load More Typography, Loaded All Posts Typography, Text Color, Loaded Posts Text Color, Loading Spinner Options, Background Color, Border, Border Radius and Box Shadow for the Load More/Lazy Load.

Overlay Option Style

Set Overlay Switcher and Background for the Overlay Option.

Background Option Style

Set Alignment, Padding, Margin, Padding, Background, Border, Border Radius, Box Shadow and Backdrop Filter Options for the Background Option.

Scroll Bar Style

Set Background, and Width for the Scroll Bar.
Set Background, Border Radius, and Box Shadow for the Thumb.
Set Background, Border Radius, and Box Shadow for the Track.

Error Option Style

Set Typography, Padding, Text Color, Background, Border, and Box Shadow for the Error Option.

Preview

Here you can see with details how the Style option of the Search Bar Widget works.

3. Advanced

Advanced Tab Options are common across 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?