Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetSearch: How to Set Pagination and Navigation for the Search Results

 

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

Tutorial requirements:

  • JetSearch — apply the fastest AJAX search and manage the way the results are displayed, using advanced stylization settings;
  • WordPress Gutenberg editor and free JetStyleManager — style any Gutenberg block & adjust its visual rendition;
  • Elementor free — add the necessary widget into the editor, style it up, and publish it right away.

Pagination and Navigation: What Would You Choose

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 giving guidance to the customers.

However, it’s impossible to use pagination and navigation simultaneously. These are two separate components, and their difference lies in the depiction only. Pagination is presented with bullets, and navigation is shown in the form of arrows.

How to Set Pagination and Navigation in Elementor

Step 1 – Open the page where you added the AJAX search widget with the Elementor editor.

page with ajax search

Step 2 – Select the AJAX Search widget and proceed to the Content tab. It’s important to set the desired amount of search results in the same area.

You can perform it by unfolding the Search Query section.

ajax search query

Here you can also sort the results by relevance, date, or other conditions.

posts number and order

Step 3 – Proceed to the Results Area section and scroll down to Results Navigation. Here you can set where the pagination or navigation will be shown.

results navigation

There are three possible positions:

  • header;
  • footer;
  • both header and footer.

Also, it’s possible to hide navigation.

position of the pagination

Step 4 – Choose if you want to display navigation or pagination and also enable the positions listed above for the selected options.

results navigation

Try different positions and combinations, and find the one that suits your website the most.

results navigation second variant

Please note that if you select Navigation Arrows, you can choose the type of navigation arrows from the drop-down list.

navigation arrows type

Don’t forget to update the changes.

Step 5 – The AJAX Search widget has many styling options to customize each content element.

Proceed to the Style tab and unfold the Bullet Pagination and Navigation Arrows sections.

styling the navigation of the ajax search

There will be options to customize the bullets and arrows’ size. Select the needed colors for hover and active states, adjust padding, and also change the border width and radius.

styling the ajax search arrows

Setting the Results Navigation in Gutenberg

JetSearch works not only with the Elementor page builder. This plugin allows applying a Search block using Gutenberg as well.

Open the page in the default WordPress editor. Click on the “Add block” button and find the AJAX Search block.

ajax search block

Unfold the Results Area section and customize the results navigation by selecting the position of the needed elements.

notifications of the Gutenberg ajax search block

You can style the AJAX Search block with the help of the JetStyleManager plugin.

Click on the “Block Style” button in the upper right corner of the editing window.

jetstylemanager plugin in gutenberg

Unfold the Navigation Arrows section and style the navigation according to your needs.

styling the navigation

After completing all customizations, click the “Update” button and preview the customized block.

Now you know how to choose the most efficient navigation and pagination for your purposes with the help of the JetSearch plugin.