{"id":6789,"date":"2024-04-14T16:07:41","date_gmt":"2024-04-14T08:07:41","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6789"},"modified":"2024-04-14T16:07:41","modified_gmt":"2024-04-14T08:07:41","slug":"paginate-list-collections","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/paginate-list-collections\/","title":{"rendered":"Paginate List Collections"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>You have the option to paginate a list of collections and specify the desired number of items to display on each page of the collection list. This offers numerous advantages in terms of both collection design and page performance. Pagination allows you to:<\/p>\n<ul>\n<li>Show more than 100 collection Items from your collection in a single list<\/li>\n<li>Show fewer collection items per page to improve page performance and loading speed<\/li>\n<li>Establish custom dynamic sliders for showcasing latest arrivals, recent blog posts, products on sale, and more<\/li>\n<\/ul>\n<h5>What You Will Learn in this Tutorial<\/h5>\n<ol>\n<li>Paginating a list of collections<\/li>\n<li>Understanding the structure of the pagination wrapper<\/li>\n<li>Configuring pagination settings<\/li>\n<li>Sharing the URL of a collection list page<\/li>\n<li>Adding a second pagination wrapper within the same collection list<\/li>\n<li>Exploring pagination and SEO<\/li>\n<li>Troubleshooting common issues and FAQs<\/li>\n<li>Creating a personalized pagination feature with numbered pages<\/li>\n<\/ol>\n<h2>Paginate a list of collections<\/h2>\n<p>To activate pagination for a specific collection list, navigate to the <strong>Element settings panel<\/strong> and select the <strong>Paginate items<\/strong> checkbox. Optionally, you can adjust the number of items to display per page.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b815714d7c88b838bbf_61044d080a88c23f254d165b_paginate-collection-lists_1.png\" loading=\"lazy\" width=\"auto\" height=\"auto\" alt=\"The check box for paginate items is checked for 1 page with 24 items per page. These settings are highlighted on the Collection list settings panel.\" title=\"64b94b815714d7c88b838bbf_61044d080a88c23f254d165b_paginate-collection-lists_1\"><\/div>\n<\/figure>\n<h5><strong>Pagination Items (checkbox)<\/strong><\/h5>\n<p>This checkbox provides the option to enable or disable pagination for the selected collection list. Disabling and re-enabling pagination will restore previous settings and component styles.<\/p>\n<h5><strong>Page Count Indicator<\/strong><\/h5>\n<p>This read-only text string displays the number of collection list pages to be generated based on the specified Items\/page value.<\/p>\n<h5><strong>Items\/page (slider\/number input)<\/strong><\/h5>\n<p>This feature enables you to define the quantity of items to showcase per page in the collection list. The minimum value is 1, while the maximum is 100. Any changes made here will immediately reflect on the collection list in the workspace and update the page count indicator in the settings.<\/p>\n<h2><strong>Understanding the structure of the pagination wrapper<\/strong><\/h2>\n<p>Upon enabling pagination for a collection list, a new <strong>pagination<\/strong> component will be appended to the collection list wrapper. This can be viewed at any time in the Navigator. The component consists of two link blocks: the previous and next buttons.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b825714d7c88b838bdc_61044d713ae357722b27ebc5_paginate-collection-lists_2.png\" loading=\"lazy\" width=\"auto\" height=\"auto\" alt=\"A section of the navigator includes an expanded Collection list wrapper with a collection list, empty state, pagination (expanded). The Pagination wrapper includes a page button and a paginate button with an icon and text block element each.\" title=\"64b94b825714d7c88b838bdc_61044d713ae357722b27ebc5_paginate-collection-lists_2\"><\/div><figcaption>The Pagination wrapper and its child elements are added to the collection list wrapper.<\/figcaption><\/figure>\n<p>When working on the canvas, the <strong>next<\/strong> button will appear if the collection list contains more items than the specified <strong>items\/page<\/strong> value in the collection list settings. To view both the <strong>previous<\/strong> and <strong>next<\/strong> buttons, either switch to a different page using the <strong>pagination settings<\/strong> or click <strong>next<\/strong> in preview mode.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b815714d7c88b838bb8_61044f227e365a6bad9e2dfd_paginate-collection-lists_3.png\" loading=\"lazy\" width=\"auto\" height=\"auto\" alt=\"Two stylized rectangular buttons with a white fill, black outline, a blue directional arrow and text Previous (left) Next (right).\" title=\"64b94b815714d7c88b838bb8_61044f227e365a6bad9e2dfd_paginate-collection-lists_3\"><\/div><figcaption>Be aware that the buttons shown here are styled. The Designer will display default button styles until customized.<\/figcaption><\/figure>\n<h2>Configuring pagination settings<\/h2>\n<p>When the pagination wrapper is selected on the canvas, you can access the <strong>pagination settings<\/strong> within the <strong>Elements settings panel<\/strong>. Alternatively, you can directly interact with the settings on the canvas by pressing enter or double-clicking on the pagination wrapper.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b815714d7c88b838bc2_61044e09034abe6652b40040_paginate-collection-lists_4.png\" loading=\"lazy\" width=\"auto\" height=\"auto\" alt='The Pagination Settings panel includes a switch button to turn on \"Show page count\"' title=\"64b94b815714d7c88b838bc2_61044e09034abe6652b40040_paginate-collection-lists_4\"><\/div>\n<\/figure>\n<h5><strong>Page Navigation<\/strong><\/h5>\n<p>This pagination feature enables you to navigate to a specific page within the collection list using the dropdown menu, or move to the previous or next pages using the <strong>arrows<\/strong>. This functionality is beneficial for styling and customizing the previous and next buttons. It also facilitates previewing collection list pages directly on the canvas.<\/p>\n<h6>You can also preview and test the collection list pages along with the pagination buttons in preview mode.<\/h6>\n<h5><strong>Show Page Count<\/strong><\/h5>\n<p>This setting allows you to display the current and total number of pages in your collection list. It introduces a new text block within your pagination wrapper that can be repositioned within the wrapper and styled like any other text block.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b815714d7c88b838bb5_61044f8c82eb9d938436525b_paginate-collection-lists_5.png\" loading=\"lazy\" width=\"auto\" height=\"auto\" alt=\"A pagination wrapper containing a previous and next button with directional arrows. In between these two buttons is a page count 2 out of 31. All black characters on top of a white background.\" title=\"64b94b815714d7c88b838bb5_61044f8c82eb9d938436525b_paginate-collection-lists_5\"><\/div>\n<\/figure>\n<h2>Sharing the URL of a collection list page<\/h2>\n<p>Each collection list page possesses a unique URL, enabling your website visitors to share a direct link to that specific page. For instance, if you encounter a friend&#8217;s image and information on an author&#8217;s page on a blog, and their details are located on page 3 of the authors&#8217; list, you can easily share that precise page by copying the URL from the browser&#8217;s address bar.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div>\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b825714d7c88b838be3_6104620fa809b7cf4cde7823_paginate-collection-lists_6.png\" loading=\"lazy\" alt=\"The _page=2 text of the URL is highlighted on a chrome window of the homepage of a architectural website called Unletro\" width=\"auto\" height=\"auto\" title=\"64b94b825714d7c88b838be3_6104620fa809b7cf4cde7823_paginate-collection-lists_6\"><\/div>\n<\/figure>\n<h2>Personalize and design the pagination buttons<\/h2>\n<p>You have the option to customize the pagination buttons just like you personalize any other button. Modify the icon&#8217;s color by setting a font color to either the icon itself or the button link block. Swap the icon with an alternative image from your asset panel. To maintain the default size and position of the icon, adjust your image&#8217;s width or height to 20px and include a right or left margin of 4px for spacing between the icon and text.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b825714d7c88b838bd9_610450024fd037d553eb000b_paginate-collection-lists_7.png\" loading=\"lazy\" width=\"auto\" height=\"auto\" alt=\"Different versions of stylized pagination buttons are laid out to show the types of customizations a user can produce. Blue buttons with directional arrows, buttons with the words previous and next and a slider with preview images of El Salvador are all included.\" title=\"64b94b825714d7c88b838bd9_610450024fd037d553eb000b_paginate-collection-lists_7\"><\/div><figcaption>Sample custom pagination buttons<\/figcaption><\/figure>\n<h2>Include an additional pagination wrapper within the same collection list<\/h2>\n<p>You can replicate the pagination wrapper and position it anywhere within the collection list wrapper as long as it remains a direct offspring of the collection list wrapper.<\/p>\n<p>For collection lists containing numerous items per page, adding a second pagination at the top of the collection list proves beneficial. You can drag the duplicated pagination list in the Navigator for precise placement.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b825714d7c88b838be7_61045020b6480204caa77922_paginate-collection-lists_8.png\" loading=\"lazy\" width=\"auto\" height=\"auto\" alt=\"Two pagination wrappers are highlighted on a Latest Posts page of a website. The first one is at the top of the page and the second is under three post thumbnails. The top buttons are only directional arrows, the bottoms buttons include the words Prev and Next.\" title=\"64b94b825714d7c88b838be7_61045020b6480204caa77922_paginate-collection-lists_8\"><\/div>\n<\/figure>\n<h2><strong>Gain insights into pagination and SEO<\/strong><\/h2>\n<p>Given the prevalence of paginated content online, search engines such as Google index paginated pages to deliver relevant results to users.<\/p>\n<h5>Optimized SEO configuration<\/h5>\n<p>You don&#8217;t need to manually index your paginated pages. Search engines handle this task automatically. Yet, if desired, you can <em>assist<\/em> search engines by specifying your paginated content.<\/p>\n<h5>References<\/h5>\n<ul>\n<li><a href=\"https:\/\/webmasters.googleblog.com\/2011\/09\/pagination-with-relnext-and-relprev.html\">Signifying paginated pages with rel=\u201cnext\u201d and rel=\u201cprev\u201d<\/a><\/li>\n<\/ul>\n<h2>Resolve known problems and FAQs<br \/><\/h2>\n<h5><strong>I&#8217;m unable to include more than 100 items per collection list page<\/strong><\/h5>\n<p>By default, a collection list can exhibit a maximum of 100 items at once. This constraint serves performance purposes and aids in maintaining minimal page load times. To display over 100 items in a collection list, activate pagination. This enables showcasing all collection items across numerous pages. Nevertheless, for performance reasons, each collection list page can exhibit a maximum of 100 items.<\/p>\n<h5><strong>The pagination buttons are not visible to me<\/strong><\/h5>\n<p>The pagination buttons do not appear in two scenarios:<\/p>\n<ol>\n<li>When a collection list comprises only a single item<\/li>\n<li>When the count of <strong>items\/page<\/strong> surpasses the total quantity of items in a collection list.<\/li>\n<\/ol>\n<p><strong>Solution for 1<\/strong> \u2014 Ensure your collection list contains at least two items.<br \/><strong>Solution for 2<\/strong> \u2014 Decrease the value in the <strong>items\/page<\/strong> field<\/p>\n<h5><strong>Content from collection list pages is absent in Webflow site search findings<\/strong><\/h5>\n<p>Merely the initial pagination page will be cataloged since it&#8217;s displayed without any query strings.<\/p>\n<h5><strong>Cannot paginate Search results<\/strong><\/h5>\n<p>Sustenance for the <strong>Search results<\/strong> list will be forthcoming shortly.<\/p>\n<h5><strong>Can I prevent the page from reloading and jumping to the top when navigating through a paginated Collection List?<\/strong><\/h5>\n<p>You can achieve this with tailored code. <a href=\"https:\/\/forum.webflow.com\/t\/seamless-pagination-with-pjax\/75284\">Refer to this guide for crafting a seamless pagination experience<\/a>.<\/p>\n<h2>Craft a customized pagination with labeled pages<\/h2>\n<p>The current iteration of pagination introduces solely two buttons: \u201cprevious\u201d and \u201cnext\u201d. The capability to insert personalized page numbers and links is slated for future release. As a temporary solution, here&#8217;s a workaround utilizing <a href=\"https:\/\/help.webflow.com\/article\/sliders\">Sliders<\/a> and multiple collection lists:<\/p>\n<ol>\n<li>Include a <strong>slider<\/strong> element<\/li>\n<li>Opt for the Arrows and assign their display to none<\/li>\n<li>Render the <strong>background color<\/strong> as transparent in the Styles panel (S)<\/li>\n<li>Configure the <strong>slide nav<\/strong> to <strong>number labels<\/strong> in Element settings (D)<\/li>\n<li>Insert a <strong>collection list<\/strong> into <strong>slide 1<\/strong> and synchronize it with a collection<\/li>\n<li>Construct and design your collection list<\/li>\n<li>Optional: Establish a sorting order<\/li>\n<li>Restrict the collection to exhibit only 3 items<\/li>\n<li>Replicate the collection List<\/li>\n<li>Pick slide 2 and paste the list<\/li>\n<li>Set <strong>start at<\/strong> to 4<\/li>\n<\/ol>\n<p>Slide 1 showcases items 1, 2, and 3. Slide 2 displays items 4, 5, and 6. If additional pages are necessary, replicate the slides and set the <strong>start at<\/strong> value for each collection list.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b825714d7c88b838beb_61045054e4cf3b7f0058a8fd_paginate-collection-lists_9.png\" loading=\"lazy\" width=\"auto\" height=\"auto\" alt=\"Two examples showing Slide 1 will displaying items 1, 2, and 3. Slide 2 will display items 4 and 5. The limit items checkbox is checked for both examples.\" title=\"64b94b825714d7c88b838beb_61045054e4cf3b7f0058a8fd_paginate-collection-lists_9\"><\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Paginate Collection lists and manage their appearance across pages.","protected":false},"author":2,"featured_media":6790,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[300],"tags":[],"class_list":{"0":"post-6789","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-cms-dynamic-content","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6789"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6789\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6790"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}