{"id":106514,"date":"2023-05-04T15:43:46","date_gmt":"2023-05-04T10:13:46","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=106514"},"modified":"2023-05-04T15:43:46","modified_gmt":"2023-05-04T10:13:46","slug":"add-pagination-in-blog-posts-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-pagination-in-blog-posts-in-elementor\/","title":{"rendered":"How to Add Pagination in Blog Posts in Elementor?"},"content":{"rendered":"\n<p>Are you looking for a way to improve the user experience on your WordPress blog by adding pagination to your blog posts? Pagination can make it easier for your readers to navigate through your content and find the posts they are interested in.&nbsp;<\/p>\n\n\n\n<p>With the Blog Listing widget from The Plus Addons for Elementor, you can easily add pagination to your blog post listing.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Blog Listing widget, <a href=\"\/docs\/blog-listing-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pluslisting\/#blog-post-wgts?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To do this, add the Blog Listing widget on the page or template, select the appropriate listing type, style and layout.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Pagination is not available in the <\/em><strong><em>Carousel<\/em><\/strong><em> layout and <\/em><strong><em>Single Page Related Posts<\/em><\/strong><em> type listing.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Then go to the <strong>Extra Options<\/strong> tab and select <strong>Pagination<\/strong> from the <strong>More Post Loading Options <\/strong>dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"333\" height=\"941\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-pagination.png\" alt=\"blog listing pagination\" class=\"wp-image-106518\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-pagination.png 333w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-pagination-106x300.png 106w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p>From the <strong>Pagination Next<\/strong> and <strong>Pagination Previous<\/strong> fields, you can edit the pagination next and previous text, respectively.<\/p>\n\n\n\n<p>You can also manage the pagination typography, colour and hover colour from here.<\/p>\n\n\n\n<p>Now go to the <strong>Content Source<\/strong> tab and set a maximum number of posts to be displayed on a page in the <strong>Maximum Posts Display<\/strong> field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"333\" height=\"816\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-maximum-posts-display.png\" alt=\"blog listing maximum posts display\" class=\"wp-image-106519\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-maximum-posts-display.png 333w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-maximum-posts-display-122x300.png 122w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p>Depending on the number of posts you have and the number set in the <strong>Maximum Posts Display<\/strong> field, you\u2019ll see a pagination on your blog post listing.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: To show pagination, you must set a lower number in the <\/em><strong><em>Maximum Posts Display<\/em><\/strong><em> field than the total number of posts.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1161\" height=\"537\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-pagination-demo.png\" alt=\"blog listing pagination demo\" class=\"wp-image-106520\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-pagination-demo.png 1161w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-pagination-demo-300x139.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-pagination-demo-1024x474.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-pagination-demo-768x355.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-pagination-demo-600x278.png 600w\" sizes=\"(max-width: 1161px) 100vw, 1161px\" \/><\/figure>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-read-more-button-in-blog-posts-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add Load More Button in Blog Posts in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":106521,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[560,526],"class_list":["post-106514","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-blog-listing","docs-plus-listings"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=106514"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106514\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/106521"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=106514"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=106514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}