Copy discount code:

crocoturns6
croco b-day main image left part croco b-day main image center part croco b-day main image right part
Expires In
croco b-day left image
croco b-day right image

Help Center

How to Create Load More Button in Gutenberg

How to Create Load More Button in Gutenberg

From this tutorial, you will learn how to link the JetEngine Button block with the Load More functionality to the Listing Grid block in the WordPress block 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 clicks on the button, additional content will appear. This way, you can increase the page load speed.

Enable the Load More Functionality

Go to the page with the Listing Grid block 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. 

enabling the load more functionality

Set the Status to “On Click.” Otherwise, the Listing Grid will unfold as the user scrolls it down.

Add the Button Block

Press on the “Add Block” button and find the Buttons block. Click on it to add it under the Listing Grid block.

Buttons 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.

Click on the Listing Grid again and return to the Load More functionality. Paste the button’s HTML anchor to the Load more element ID bar. 

button HTML anchor

Click the “Update” button and look at how it works on the front end.

Those are all the steps you have to perform to create a “Load More” button for the JetEngine Listing Grid block.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.