Control How Your Grid Content is Split Into Pages
In this guide, learn how to use Essential Grid's pagination options
Table of Contents
Pagination in Essential Grid
Pagination in Essential Grid is a way of splitting a grid into pages, each composed of a specific number of grid items, that a visitor can click through at their own pace.
The Pagination panel is third from the bottom under the Grid Settings tab:
Let’s take a look at each of the options available in the panel.
Pagination
Set the Pagination option to Enable in order to use and configure pagination:
Only if this option is set to Enable will the other options in the pagination panel be shown.
Additionally, only if this option is set to Disable will it be possible to later use the Load More option for inline and/or infinite loading and scrolling. (We’ll learn how to use the Load More option on the next page of the manual.)
Max Visible Rows
The Max Visible Rows option allows you to determine how many rows there should be before needing to click through to the next grid page:
Set the number of rows either by dragging the slider or directly entering a number into the field on the right end.
Max Rows Mobile
On smaller screens you might need to use a different number of grid rows than you do on larger screens. If this is the case you can set Max Rows Mobile to Enable, then set the Max Visible Rows on Mobile option to a different number:
Autoplay
Setting the Autoplay option to Enable will make your grid automatically proceed through its pages, in a similar way to a slider:
If Autoplay is enabled you will also see an option named Timing appear. This option controls how much time (in milliseconds) should pass before the grid proceeds to its next page.
Touch Swipe
If the Touch Swipe option is set to Enable, a visitor will be able to swipe from side to side in order to move between grid pages, rather than having to click the pagination buttons.
Once the option is enabled another two options will become visible: Allow Vertical Dragging and Swipe Threshold.
If Allow Vertical Dragging is set to Enable, a visitor will also be able to swipe down to move forward a page or up to move backwards a page.
The Swipe Threshold option determines the distance, in pixels, that the visitor must move their finger in order to activate a swipe action.
Next: Smart Loading
On the next page we’ll round out our Grid Settings section by seeing how you can use the Smart Loading panel to configure both inline loading and lazy loading.
