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.

How does Elementor paginate a loop

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.
How does Elementor paginate a loop

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.
How does Elementor paginate a loop

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.
How does Elementor paginate a loop

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.
How does Elementor paginate a loop

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:

How does Elementor paginate a loop

commander-in-chief (military)"Shorten."The switch switches to"Yes."The  

How does Elementor paginate a loop

Only four numbers are displayed in the paged list: the current page, the next two pages, and the last page. 

Align page numbers

How does Elementor paginate a loop

Select Left, Center, or Right to display page breaks on the right, center, or left side of the loop.

Choose how the page loads

How does Elementor paginate a loop

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

How does Elementor paginate a loop

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 article? Contact us for a free answer! Free help for personal, small business sites!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
Posted by photon fluctuations, retweeted with attribution:https://www.361sale.com/en/9793/

Like (0)
Previous May 14, 2024 10:49 am
Next May 14, 2024 11:56 am

Recommended

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

020-2206-9892

QQ咨询:1025174874

E-mail: info@361sale.com

Working hours: Monday to Friday, 9:30-18:30, holidays off

Customer Service
In order to facilitate global user registration and login, we have canceled the telephone login function. If you encounter login problems, please contact our customer service for assistance in binding your email address.