Copy discount code:

croco b-day main image left part croco b-day main image center part croco b-day main image right part
Expires In
croco b-day left image
croco b-day right image

Help Center

How to Add Pagination to Listing Grid Block

How to Add Pagination to Listing Grid Block

From this tutorial, you will learn how to combine the Listing Grid and Pagination blocks of the JetEngine plugin on the page created via the WordPress block Editor.

Pagination is functionality that divides the content of the block into several parts and afterward shows how many “pages” of content there are and on what “page” the user currently is. If you have lots of items in the Listing Grid and want to give the user an opportunity to see them all, the Pagination block will be a perfect tool. 

Add the Pagination block to the Page

Go to the page with the Listing Grid block and click on the “Add Block” button. Find the Pagination block and click on it to add it under the Listing Grid block.

pagination block

Deal with the Pagination General Settings Section

Take a look at the right-side settings menu. In the This filter for drop-down menu, choose the “Listing Grid” option. Make sure there are no other Listing Grids on the page. There is also an option to add pagination to the WooCommerce products.

Apply type drop-down allows you to choose how the changes will be applied:

  • AJAX – when the user clicks on the next page, it opens without reloading the page;
  • Page reload – the part of the Listing Grid appears after page reload;
  • Mixed – it won’t reload the page but transforms the URL, so you can copy the address of the specific page of pagination.
pagination general settings

Deal with the Controls Settings Section

This settings section defines how the pagination controls will look like. 

pagination controls settings
  • Prev/Next Text. The text you will type into those two bars will be visible on the “Prev Page” and “Next Page” buttons;
  • Items center offset. If you have more than 10 pages in the pagination, you would probably like to hide the part of the number range to make it smaller. In this bar, you can type in the number of pages that will be shown on both sides of the current page;
  • Items edge offset. This feature works with the Items center offset. It allows you to define how many pages will be visible on each edge of the range;
  • Provider top offset. After using pagination, there will be a top offset on N pixels.

Do the Styling

If you have installed and activated the free JetStyleManager plugin, you will see the “Block Style” button on the top toolbar. There you will find all the style settings for the Pagination block. If you have trouble understanding what those features do, check out this Block Style overview.

pagination block style settings

After customizing the design, you can go to the front end and look at how the pagination works.

That’s all. Now you know how to link the Pagination and Listing Grid blocks on the page created with the help of the Gutenberg editor.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.