{"id":17589,"date":"2022-11-04T21:15:55","date_gmt":"2022-11-04T21:15:55","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=17589"},"modified":"2023-07-28T08:21:44","modified_gmt":"2023-07-28T08:21:44","slug":"jetengine-how-to-create-load-more-button","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-load-more-button\/","title":{"rendered":"How to Create Load More Button in the Listing Grid Widget"},"content":{"rendered":"\n

Load more option can help you organize the listing and save space on your page. In general, with Load More, you can hide one part of the listing by adding a button or another widget that will showcase another one.<\/p>\n\n\n\n

You can set the number of columns and posts to organize the listing in the most preferable way.<\/p>\n\n\n\n

There are only a few simple steps to set up this function, let\u2019s get to know them.<\/p>\n\n\n\n

Enable Load More Option<\/h2>\n\n\n\n
\n

Open your WordPress dashboard and find the page or post where you would like to place a Listing Grid <\/strong>with the “Load More<\/strong>” button. Open the page in the Elementor page builder and click on the Listing Grid<\/strong> widget. In the Content left-side menu tab, open the General section and scroll to the bottom. Find the Load More<\/strong> toggle and enable it.<\/p>\n\n\n\n\"listing\n\n\n\n

After that, two additional features will appear. The Load more type <\/strong>drop-down menu allows you to choose when the additional sections of the Listing Grid are shown – when the user clicks the button or when they scroll the page down. In the Load more element ID field, you have to define what element will be used as a “Load More<\/strong>” button.<\/p>\n<\/div><\/div>\n\n\n\n

Add Appropriate Widget<\/h2>\n\n\n\n
\n

You can use any element as a “Load More<\/strong>” button – image, text, button, animation, etc. Let\u2019s see how different elements can be linked with the Listing Grid<\/strong>.<\/p>\n\n\n\n

If you are using the Button <\/strong>widget, your next steps are pretty simple. Drag the widget to the page and place it under the listing grid. Change the button’s title, add the icon, define the alignment, and fill in the Button ID<\/strong> field at the bottom of the Button <\/strong>menu section.<\/p>\n\n\n\n\"button\n\n\n\n

If you are using any other element (let’s assume it is an Image <\/strong>widget), you should also drag it to the page and place it under the listing grid. After that, open the Advanced <\/strong>tab of the left-side menu, unfold the Advanced <\/strong>section, and fill in the CSS ID<\/strong> field.<\/p>\n\n\n\n\"image\n\n\n\n

No matter what element you prefer to use – copy the ID you have chosen for it and proceed to the next step.<\/p>\n<\/div><\/div>\n\n\n\n