Adding a read more button to your blog post listing gives visitors a clear way to browse more posts without reloading the page. It increases engagement and helps users navigate more content without facing a long, unbroken list.
If you are using Elementor, you can add a load more button to your blog post listing using the Blog Listing widget in The Plus Addons for Elementor. The widget provides a range of options to customize the design and functionality of your blog post listing, including a load more button.
To check the complete feature overview documentation of The Plus Addons for Elementor Blog Listing widget, click here.
Best Used For:
- News and media websites that publish frequently and want visitors to load more articles without navigating away.
- E-commerce blogs using load more to keep product content discoverable without hard pagination breaks.
- Agency and portfolio sites running long content feeds where progressive loading improves the reading experience.
Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
To do this, add the Blog Listing widget on the page or template, select the appropriate listing type, style, and layout.
Note: Load More option is not available in the Carousel layout and Single Page Related Posts type listing.
Then go to the More Post Options tab and select Load More from the Post Loading Options section.
In the Button Text field, set the label shown on the load more button. In the Loading Text field, set the text that appears while new posts are loading. Use the All Posts Loaded Text field to set the message shown when there are no more posts to display. This helps set clear expectations for visitors who have reached the end of the list.
Then, from the More posts on click/scroll field, set how many posts load with each button click. Use a lower number (3 to 6) when posts have large featured images, so the page stays responsive. To let visitors share a URL that remembers their scroll position in the list, see How to Create a Shareable URL with Load More For Blog Posts in Elementor.
You can also manage the button typography, color, background, border, and other styling options from here.
Now, go to the Content Source tab and set a maximum number of posts to display when the page loads in the Maximum Posts Display field. If you also want visitors to filter posts before loading more, see How to Display Posts Using an AJAX Filter in Blog Listing.
Depending on the number of posts you have and the number set in the Maximum Posts Display field, you will see a load more button on your blog post listing.
Note: In order to show load more button, you must set a lower number in the Maximum Posts Display field than the total number of posts.
Also, check How to Add Pagination in Blog Posts in Elementor.
