From this tutorial, you will learn how to link the simple Button block with the Load More functionality of the Listing Grid block. What’s great is that you can easily do it in the Gutenberg Editor.
Load More functionality allows you to show the user only a part of the content and unfold more only if the visitor needs it. For that purpose, you can link a button to the Listing Grid. When the user will click on the button, additional content will appear. This way you can increase the page load speed.
1 Step— Enable Load More functionality
Let’s assume that you already have a page with the Listing Grid block on it. Go to that page and open the settings of the Listing Grid block by clicking on it. At the bottom of the General settings section, you will find the Load More toggle. Turn it on.
Set the Status to “On Click”. Otherwise, the Listing Grid will unfold as the user scrolls it down.
2 Step— Add a Button block
Press on the “Add Block” button and find the Buttons block. Click on it to add it under the Listing Grid block.
Type “Load More” as the button label and customize it according to your website design. In the Advanced settings section, set the HTML anchor and copy it.
3 Step— Link the button to the Listing Grid
Click on the Listing Grid again and go back to the Load More functionality. Paste the button HTML anchor to the Load more element ID bar.
Click the “Update” button and take a look at how it works on the frontend.
Those are all the steps you have to perform to create a “Load More” button for JetEngine’s Listing Grid block.