As a web designer, Crocoblock is the ultimate plugin that you need to cater to almost all functionalities. It’s like an all-in-one masterpiece that every developer needs as a tool. We all know the exhaustion that comes with finding plugins. And having Crocoblock on your portfolio will ensure you get things done faster & more efficiently.
And indeed Crocoblock is a heavy investment. However, the perks that come with it will be 100% worth it. What really stands out about Crocoblock plugins is how they complement each other. It’s mind-blowing, to say the least. If you’re looking for the ultimate tool to elevate your web design business, then I welcome you to experience the magic of Crocoblock.
What is JetSearch?
JetSearch is a fast search plugin, compatible with Elementor that essentially exhibits results by relevance without the need to necessarily refresh web pages. As a user, you’re able to search within any custom posts, default pages & categories.
If you’re working with an E-commerce website, JetSearch gives a friendly user experience when searching for products.
We’ll explore how you can integrate JetSearch on an Elementor website.
Customizing placeholder text in the search field
An appropriate position to place the search field is on the header of the website. To do this. open the header that you intend to place the ajax search on with Elementor.
Find the Ajax search on the elements tab, and drag it to the header page, according to your desired position.
Once you have the ajax search active, you’ll now be able to change the placeholder text from the content tab.
You can also add an icon for a more detailed look on the “input icon” option as shown above. You are able to do further customizations from the style tab.
Customizing search results content
While on the content tab of the Ajax search widget, navigate to the “results area” to edit search results settings.
You can customize results according to:
- Search form
- By input box & categories list
- Custom
If set by search form, the “result’s width” will go hand in hand with the widget’s general width.
If you go with the “by input box and categories list” option, the results width area will be according to the width of the input box.
If you resort to going with the “custom” option you’ll be able to manually enter your customized width according to your liking.
In an instance where your posts have thumbnails, it would be a good idea to turn on the “show post thumbnail” option.
With this option, you’re able to set a universal picture as your thumbnail when the product/post is not selected.
With the post content option, you’re able to add a short description under your post/product upon display. Your post content type can be set to “post content“, “post excerpt” or “custom field“.
For an Ecom website, you can activate the “show product price” and the show product rating for a more comprehensive search result.
You can also enable the “show results counter” option to display the total number of results shown.
By activating the “show all results” option, you can click on the “see all results” button to explore all results.
Having a navigation element, enables your users to interact with posts at a more defined level. You can set the navigation to “hide“, “show in header“, or “show in header & footer“.
These settings showcase the number of pages in accordance with your search request. Nevertheless, it is practically impossible to utilize pagination & navigation at the same time. Most of the time, pagination will be presented with bullets, while navigation will usually take the form of arrows.
To set up, navigate back to the ajax search widget on Elementor. Proceed to activate the “search query” option. You can sort results settings based on relevance, date & other conditions.
On the “results navigation” sector, either choose bullet pagination or number pagination. For both options, there are 3 different settings in relation to where the pagination will appear on the search bar.
- Header
- Footer
- Both header & footer
For number pagination, the search results will appear as below:
For bullet pagination, the search results will be presented as the picture below:
Feel free to explore more styling options for both bullet & number pagination on the style tab.
Sorting search results by relevance
For search results by relevance to be effective, make sure that your content displays a particular potential keyword adequately for it to appear easily when someone searches for it on the search bar.
It is essential that you put the keyword on your title, posts, and on the excerpt option for maximum exposure.
To set up sorting by relevance, navigate to your ajax widget on Elementor. While on the content tab, proceed to unfold the “search query” and scroll down “results order by” and select “relevance” as your option.
You are also able to customize results order settings either by ascending or descending order.
Customize default notification texts
If you’d love a customized notification other than the default notifications, you’re able to do this by the notification settings.
On your ajax widget on Elementor, navigate to the notifications setting. You’ll see the default settings for “negative search results” & “technical error“. Change the notification messages according to your liking.
You can explore style settings for notifications to improve on appearance.
Excluding certain terms and posts
Sometimes you want to exclude certain terms and posts from the search bar for various reasons.
Go back to your ajax widget on Elementor, and on the content tab, identify the search query option. You’ll see a source option, where you can choose whether it’s a post, page or a product that you want to exclude.
To exclude a post, select it under source, and specify it by typing it under the post option.
Conclusion
We have covered the basic settings needed to have JetSearch up and running on your website. You can explore more settings for more advanced performance. Apart from JetSearch, Crocoblock is home to a family of dynamic content plugins that are quite effective.
Let’s face it. The competition in the web dev space is growing every day, and you want to deliver nothing but quality to your clients. If you’re looking to elevate your web design services, Crocoblock will do you justice. Get started with Crocoblock today.