Back to contents

JetEngine: How to add pagination to the Listing Grid widget

From this tutorial, you will find out how to join the Pagination and the Listing Grid widgets properly in order to make your page look neat. It will also increase users’ experience.

If you have a large number of posts in your listing, but you want only several of them to be seen at a time on your page, you can easily attach the Pagination widget to the listing you have. Thus the visitors of your website will be able to switch between the posts using the pagination instead of scrolling down non-stop. It will take only a few steps, so let’s not wait any longer!

1 Step — Creating an archive template

Open your WP Dashboard and go to Crocoblock > My Library.

jet theme core

Switch to an Archive tab and click the Add New button to create an archive. Don’t forget to give it a name in the respective field.

create archive template

2 Step — Linking two widgets

Find the Listing Grid widget, drag and drop it on the page. Choose the needed listing in the Listing drop-down.

listing grid jet engine

Next, find the Pagination widget and drop it next to the Listing Grid widget.

In the Content accordion block, navigate to the Pagination for: drop-down list and select the JetEngine option.

jetsmartfilters pagination

Move on to the Apply type drop-down list and choose AJAX.

3 Step — Conditions setup

The final step is to click the gear icon in the bottom-left corner of the Elementor panel to open the Archive Settings.

archive settings

Open the Conditions accordion block and in the General drop-down list select the Archive option.

Proceed to the Archive drop-down and select the Post Type Archives option.

Select the post type in the respective field. Click the Publish button.

dynamic field widget

Now you can click the digits below the listing in order to switch the posts in a click. Enjoy!