Back to contents

How to customize the content shown in the search results using JetSearch

As you might know, each element of JetSearch plugin is customizable. This tutorial uncovers the way you can manage the appearance of the search results.

Search results are fully customizable thanks to JetSearch plugin. You can pull out or hide each element of the results in just a few clicks.

If you are interested, keep reading to learn more about how to do it.

Adjusting search results content

Step 1 — Navigate to the page where you need to add a search form and click Edit with Elementor button.

Step 2 — Then, drop Ajax Search widget to the preferable section.

Ajax Search widget

Step 3 — Find Results Area section in the Content block and look through the available options. Now we are going to explore each option in more details.

Options for customization

Step 1 — If your posts or items have thumbnails, you can toggle to “yes” Show post thumbnail option.

Step 2 — Next, from the dropdown list select the suitable size of the thumbnail.

Results area settings in Ajax Search widget

Step 3 — In case the posts have an excerpt, you can set its preferable length of the excerpt or hide it as well. To speed up the customizations, you should think over the appearance of the results content before starting to style it.

Step 4 — Choose whether you need to show results counter or not. Moreover, you can enable the Show Full Results Button and set the text for it.

Results area settings in Ajax Search widget

Setting the navigation

In the Results Navigation subblock, you have an opportunity to choose the essential navigation type. As you can select the needed location for the navigation, you can choose 2 types of navigation located differently. Also note that if you select Navigation Arrows, you can choose the type of navigation arrows from the dropdown.

Results navigation settings in Ajax Search widget

Styling results area

Elementor and Crocoblock lovers get used to styling each element of the content. Ajax Search widget is no exception. You can set the background color, enable scrolling for the results list and adjust paddings for header and footer of the search results area.

Ajax Search widget

After you complete all customizations, click the Update button and preview your search results!