Back to contents

How to establish pagination and navigation for the search results in JetSearch

This step-by-step tutorial will take you through the process of establishing pagination and navigation for the search results in JetSearch plugin.

Pagination and navigation are the essential elements of any search widget and JetSearch in particular. These components showcase the number of pages according to your search request in the results area. They are highly important as these components give guidance to your customers and make it easy to find the required element: the post, the product, etc.

Pagination and navigation: should I make my choice?

It’s impossible to use pagination and navigation at the same time. They are two separate components and the contrariety between them is insignificant. Their otherness lies in the depiction only. Pagination is presented with bullets in the position you have chosen and navigation is shown in the form of arrows.

As any other widget component navigation and pagination have some regular settings, that have much in common with others. Let’s give up guessing about them and see clearly on these components and their regular settings.

Which options should I set for either pagination or navigation?

After getting things straight let’s look into the pagination settings the same as navigation ones.

Step 1 – Open Elementor Editor and search for the Ajax Search Widget. Drag and drop it to your page canvas.

Ajax Search Widget

Step 2 – It matters much to set the desired amount of search results in the same area. You can perform it following the way Content > Search Settings tab. Here you can also arrange your results by relevance, date or the other condition.

Search Settings in Ajax Search Widget

Step 3 – Handle to the Content > Results Area > Results Navigations tab. Here you are able to set where the pagination or navigation will be shown.

    There are three possible positions:

  • header;
  • footer;
  • both header and footer;
  • also it’s possible to hide navigation.
Results Area settings  in Ajax Search Widget

Step 4 – To provide the pagination design you should go to Content > Results Area > Results Navigations > Bullet Pagination tab. Here you can enable the positions listed above. That’s how your pagination will look like.

Ajax Search Widget

Step 5 – If you want to adjust the navigation design you need to navigate to Content > Results Area > Results Navigations > Number Pagination tab and select the needed position of the element. That’s how your navigation will look like.

Ajax Search Widget

Step 6 – Don’t forget to establish the preferable style to the Search Form in general and particularly to each component. Follow Style tab and you will be able to realize your best templates performing it. Style options include color, background style and typography variating.

Search Form style settings in Ajax Search Widget

Here you are also able to adjust the required Arrows Type. It’s up to you which one to choose and inline to Ajax Search Widget. Anyway, your choice will be shown to the customers when they search for necessary information.

To check all your delivered setting you simply have to click the Update button and view your customized page.

That’s it! Choose the most efficient element for your purposes and individual view. Remember to include some stylish varieties to make your search result element alive and unlike built-in design. Hope this helps you to embellish the search results!