With JetEngine plugin you have an opportunity to pull the content from back-end dynamically to Elementor page builder in order to display it on front-end.
In this tutorial, we’ll uncover the way you can create a listing in order to display the content in listing grid with dynamic content. If you want to learn more about JetEngine functionality, take a look at these tutorials.
Now let’s dive deeper into JetEngine science!
What is a Listing?
A Listing is a template for a post type or a term where you customize the layout and styles of the content which is dynamically pulled from the meta fields available for these posts or terms.
Using the listing, you can make sure the content will be displayed within the grid according to your vision. It provides an opportunity to pull out the content with the help of any widgets that support dynamic content.
Later on, after the listing is done you will be able to create a single or archive template (or just add the listing to the existing page) and display the posts or terms in a grid layout using the listing you’ve created.
Creating a new listing
Step 1 — First, proceed to the JetEngine > Listings. Here you’ll see Listing Items screen and you need to click Add New button.
Step 2 — Once Setup Listing Item window has opened you should fill in the following information:
- For which type of content you want to create a listing – Posts or Terms.
- Next, you have to select the post type from which the content will be pulled. In my case, it is Portfolio. Take into consideration, that you can create a listing template for the default posts as well.
- At last, set the Listing Item Name and click Create Listing Item button.
Filling the listing with content
Now, let’s make sure we have all the necessary content added to the listing. May we remind you again that listing is a material of construction for our future template. So it’s important to envision how the Listing Grid will be displaying the listing in the layout to make sure you use the proper content and layout when working on a Listing item template.
You should choose dynamic widgets depending on what you need to display. In my case, I want to display the title of the post, content, image gallery and categories of the post. So I use Dynamic Field widget – to display the title.
When everything is done, click Publish button. Now we are ready to proceed to the template creation.
Creating the listing template
Step 1 — Now we’re ready to return to the Crocoblock > My Library. Here we should click the Archive tab and click Add New button.
Step 2 — In the Select Template type window set the template’s name and click Create Template button.
Step 3 — Before we start, let’s set the Conditions for the archive. Proceed to the Settings > Conditions. Choose the corresponding type of conditions (in my case it is Archive), select the custom post type to which you want to apply this archive and click Publish.
Step 4 — In the Preview section choose the custom post type you need to display, then update and reload the page. This should be done in order to apply the preview to the Elementor live screen.
Displaying the listing template
Step 1 – Open the page, where you want to show a listing, in Elementor editor. Drag and drop the Listing Grid widget and select the listing that you have just created from the dropdown. Also, you can customize the content and style options of the widget right here.
As you might have noticed, the appearance of the posts is exactly as the listing template we have created previously.
In case there are a lot of publications in the listing, you can enable the Load More option in the Listing Grid widget and add a loading element to it. You can use any widget for showing more publications. You need to specify the widget’s CSS ID in the Advanced settings block of the widget, and then, copy and insert it in the Listing Grid.
On the frontend it looks like this:
Step 2 — Customize the query and layout settings according to your needs. Then update the changes and feel free to preview the results (note, that you should set the proper conditions in order to display the listing grid on the post’s archive page).
That is pretty much it! Now you are ready to create your listings templates, pulling dynamic content using JetEngine plugin. Feel free to enrich your site with the power of dynamic elements!