Back to contents

JetEngine: How to Use Load More Functionality within Listing Grid

Due to the wide range of the JetEngine plugin functions, we have created a detailed tutorial on how to use the Load More functionality.

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

You can set the number of columns and posts to organize the listing in the most preferable way.

There are only a few simple steps to set up this function, let’s get to know them!

Load More — Learn Step by Step

1Step — Activation

In the Elementor, press Edit Listing Grid and in the Content > General Block find Load More and toggle it to Yes.

Load More

2Step — Add a Widget

For the Load More you can apply different widgets below the Listing Grid (e.g. Button, Icon, Image, etc.) for showing more publications.

Let’s look at the Image Widget Usage.


3Step — Create a connection with Listing Grid

You need to specify the widget’s CSS ID in the Advanced settings block of the widget.
For the Load More option to be working it is essential to copy and paste CSS ID into Listing Grid Load More Element ID.

Load More ID

4Step — Alternative way to add Load More

Button Widget settings are different, so in case the default Elementor Button widget is used, you need to fill in the Button ID field with a certain ID which you will paste in the Listing Grid widget.

Button ID

5Step — Press Update Button and look at the Result

Listing Grid in Action

We hope it was useful and interesting information as this function will help to create a structured and attractive page without losing the content. In our example, you made sure that it is very easy to realize.

Learn More about JetEngine Options in our tutorials.