The layout of the loop will determine how many items appear on any single page of the loop. If there are more items in the loop than can fit on a single page, you need to define the paging style. By default, the loop is not paged, which means that the loop displays only one page of items.
![Image[1]-Elementor how to paginate the loop - Photon Flux | Professional WordPress Repair Service, Worldwide, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024051305502053.jpg)
Determine the paging style
- Selecting the cyclic grid
- Go to the content tab
- Open the paging menu.
- Select your pagination style from the drop-down list.
![Picture [2] - Elementor how to page the loop - Photon Fluctuation | Professional WordPress repair service, worldwide, fast response](http://gqxi.cn/wp-content/uploads/2024/05/2024051403152357.png)
Select the Pagination menu to add pages to the list.
Paging styles
Pagination styles can be categorized into two types:
- Horizontal scrolling, where items are displayed on the screen one page at a time as the visitor flips from one page to another (or clicks to access a specific page).
- Vertical scrolling allows users to scroll up and down to view items one page at a time or infinitely.
The following paging styles are available.
Booklet style pagination
- None: By default, only one page of items is displayed
- Numbers: will display the numbers of all the pages in the loop, allowing the user to select which pages to visit.
- It is possible to usePage Limit to limit the number of pages a visitor can access and reduce the use of theShortenThe number of pages listed.
![Picture [3] - Elementor how to page the loop - Photon Flux | Professional WordPress repair service, worldwide, fast response](http://gqxi.cn/wp-content/uploads/2024/05/2024051403162980.png)
This is an option for numbering pages
- Previous/Next: If you want to encourage users to flip through your entries, you can use the Previous and Next buttons so that they can browse the entries one page at a time.
- Customizableprevious onerespond in singingthe next oneTags.
![Picture [4] - Elementor how to page the loop - Photon Flux | Professional WordPress repair service, worldwide, fast response](http://gqxi.cn/wp-content/uploads/2024/05/2024051403173469.png)
Previous and next pages are a great way to help visitors flip through your listings.
- Number + Previous/Next- Allows visitors to jump to a specific page or to the previous or next page.
scrolling pagination
- Load on click:If you want the user to view one page at a time, but use vertical scrolling, you can use theLoad on click. This will show the user a page of content with a customizable button at the bottom of the page to load more content. Clicking this button will insert the next page while keeping the previous page visible.
- You can change the text and alignment of the buttons. It is also possible to add icons to the buttons and customize the spacing of the icons.Button IDwill allow you to save this button for reuse.
- You can use the "no more posting message"Set a custom message for visitors when they reach the end of the list.
![Picture [5] - Elementor how to page the loop - Photon Volatility | Professional WordPress repair service, worldwide, fast response](http://gqxi.cn/wp-content/uploads/2024/05/2024051403190589.png)
The "Load More" button will load the next page of items.
- Infinite scrolling: For a more seamless experience, infinite scrolling allows visitors to continuously scroll down to see new items in the list. However, the user's scrolling is often interrupted as new items take time to load. A customizable icon is displayed when a new item is loaded.
- You can adjust the trimmer icon and use the "No More Messages" option.Set a custom message for visitors when they reach the end of the list.
Select page limit
- (Optional) Enter the maximum number of pages required in the loop.
Shorten the number of pages displayed
Attention:Only makes sense if you select "Number" or "Number + Previous/Next" as the paging style.
If the loop grid contains more than four pages, you can limit the number of pages displayed:
![Picture [6] - Elementor how to page a loop - Photon Flux | Professional WordPress repair service, worldwide, fast response](http://gqxi.cn/wp-content/uploads/2024/05/2024051403215523.png)
commander-in-chief (military)"Shorten."The switch switches to"Yes."The
![Picture [7] - Elementor how to page the loop - Photon Volatility | Professional WordPress repair service, worldwide, fast response](http://gqxi.cn/wp-content/uploads/2024/05/2024051403221470.png)
Only four numbers are displayed in the paged list: the current page, the next two pages, and the last page.
Aligning page numbers
![Picture [8] - Elementor how to page the loop - Photon Flux | Professional WordPress repair service, worldwide, fast response](http://gqxi.cn/wp-content/uploads/2024/05/2024051403224341.png)
Select Left, Center, or Right to display page breaks on the right, center, or left side of the loop.
Choose how the page loads
![Picture [9] - Elementor how to page a loop - Photon Flux | Professional WordPress repair service, worldwide, fast response](http://gqxi.cn/wp-content/uploads/2024/05/2024051403232651.png)
When a site visitor reaches a new page in the loop, the loop needs to reload. There are two ways to do this:
- Page Reload - Reloads the entire page on a cyclic reload.
- AJAX - Reloads only the looping grid widget.
Reload the loop grid individually
![Picture [10] - Elementor how to page the loop - Photon Flux | Professional WordPress repair service, worldwide, fast response](http://gqxi.cn/wp-content/uploads/2024/05/2024051403235485.png)
By default, if there are multiple loop grids on a page, all loops will refresh to the same page. For example, if one loop contains news stories and another contains sports stories, the sports loop will automatically refresh to the second page of the politics loop when the visitor moves to the second page of the politics loop.
- "Separate pagination"switch to"Open."to refresh all circular grids on the page individually.
Attention:All loop grids on the page must have the same "separate paging "Settings.
Link to this article:http://gqxi.cn/en/9793The article is copyrighted and must be reproduced with attribution.
No comments