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.
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.
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.
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 onecap (a poem)the next oneTags.
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.
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:
commander-in-chief (military)"Shorten."The switch switches to"Yes."The
Only four numbers are displayed in the paged list: the current page, the next two pages, and the last page.
Align page numbers
Select Left, Center, or Right to display page breaks on the right, center, or left side of the loop.
Choose how the page loads
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
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.