Back to contents

How to Manage JetEngine Blocks for Gutenberg: Dynamic Widgets in Listing Template

This tutorial presents a detailed guide on building a listing using JetEngine Blocks for Gutenberg.

Let us introduce you JetEngine Blocks for Gutenberg functionality. With the help of this editor, you will be able to create and enrich a listing with the content via dynamic widgets in the WP Dashboard. Then, you will be able to display the listing using the Listing Grid widget in Elementor. We are going to view how to work with JetEngine Blocks for Gutenberg.

Creating the listing in JetEngine Blocks for Gutenberg

1 Step — Working in JetEngine dashboard

Open the JetEngine > Listings block in the WP Dashboard and click the Add New button. In the listing settings set the required fields and select the Blocks option in the Listing view line.

listing item

2 Step — Managing JetEngine Blocks for Gutenberg

We proceed to build the listing directly in the blocks editor. Click the plus icon and scroll to the Layout Elements tab in the dropdown list. Open the tab and there are all JetEngine dynamic widgets, which can be used for showing the content from the custom meta fields.

listing in blocks editor

Select the needed widget and click it. On the right side, we can see the content settings of the widget, where we should choose a corresponding source, customize the layout and add CSS Class if necessary in the Advanced block.

dynamic widget in block
You can showcase certain information, tags, repeater fields and images using varied JetEngine dynamic widgets. Furthermore, set them by the analogy with the Dynamic Field displayed on the screenshot above.
It is possible to style the widget’s appearance in Customizer > Additional CSS by adding a needed CSS code or in the style files of your theme.
When the listing is ready, click the Update button.
blocks listing

Displaying the listing in Listing Grid

1 Step — Proceed to Elementor Editor

Open the page, where we want to display the created listing, in Elementor.

2 Step – Drop Listing Grid widget

Find the Listing Grid widget in the elements panel and drop it into a particular place on the page. In the widget’s General block select the created listing and adjust needed options according to your requirements right here. 

elementor listing grid

3 Step — Check on frontend

When everything is set, click the Update button and view the listing on the frontend.

listing grid on frontend

Well done! Now you know how to use JetEngine Blocks for Gutenberg. Form listings easy and quickly using blocks editor in the WP Dashboard.