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.
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.
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.
Displaying the listing in the Listing Grid with Elementor
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.
3 Step — Check on frontend
When everything is set, click the Update button and view the listing on the frontend.
Displaying the listing in the Listing Grid with Blocks Editor
There is one more good option, you can display your Listing Grid in Blocks Editor, no matter in what way it was created. For those who prefer the Gutenberg, which is already integrated with WordPress, it is an interesting and easier way to work with the dynamic content. Just open the Editor in WordPress.
There are only a few steps:
- Open WP Dashboard;
- Add a new page;
- Display Listing Grid.
Listing Grid widget can be found in the Gutenberg set that is placed in the Layout Elements. It’s setting are similar to the widget in Elementor but without the Style block. Use the CSS to customize it.
Let’s have a look at the process:
Well done! Now you know how to use JetEngine Blocks for Gutenberg. Form listings easy and quickly using blocks editor in the WP Dashboard.