How does Elementor paginate a loop

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

Determine the paging style 

  1. Selecting the cyclic grid
  2. Go to the content tab
  3. Open the paging menu.
  4. 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

Select the Pagination menu to add pages to the list.

Paging styles

Pagination styles can be categorized into two types:

  1. 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).
  2. 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

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

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

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

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

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

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

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

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.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
? Reprint statement
This article was written by Harry
THE END
If you like it, support it.
kudos0 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments