{"id":22545,"date":"2021-04-22T09:23:00","date_gmt":"2021-04-22T09:23:00","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=22545"},"modified":"2023-07-28T08:28:49","modified_gmt":"2023-07-28T08:28:49","slug":"jetengine-how-to-create-load-more-button-in-gutenberg","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-load-more-button-in-gutenberg\/","title":{"rendered":"How to Create Load More Button in Gutenberg"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Enable the Load More Functionality<\/h2>\n\n\n\n
\n

Go to the page with the Listing Grid<\/strong><\/a> block and open the settings of the Listing Grid<\/strong> block by clicking on it. At the bottom of the General <\/strong>settings section, you will find the Load More<\/strong> toggle. Turn it on. <\/p>\n\n\n\n\"enabling\n\n\n\n

Set the Status <\/strong>to \u201cOn Click.\u201d Otherwise, the Listing Grid<\/strong> will unfold as the user scrolls it down.<\/p>\n<\/div><\/div>\n\n\n\n

Add the Button Block<\/h2>\n\n\n\n
\n

Press on the \u201cAdd Block<\/strong>\u201d button and find the Buttons <\/strong>block. Click on it to add it under the Listing Grid<\/strong> block.<\/p>\n\n\n\n\"Buttons\n\n\n\n

Type \u201cLoad More\u201d as the button label and customize it according to your website design. In the Advanced <\/strong>settings section, set the HTML anchor<\/strong> and copy it.<\/p>\n<\/div><\/div>\n\n\n\n