Back to contents

JetElements Posts widget. How to use custom fields

This step-by-step tutorial will show you the process of creating meta fields and displaying it using custom fields within the Posts widget.

Follow the steps below to get the knowledge of using custom fields within Posts widget from JetElements plugin. You will be able to manage the meta boxes and posts and build the layout suiting your needs the best way. Make sure you installed any plugin, allowing to add meta boxes and assigning them to Post types. In our tutorial, we used JetEngine plugin, which comes within Multi-tool and Lifetime subscription plans, or can be purchased separately.

Step 1 — First of all, create a new Meta Box to add the needed repeater meta fields to the posts. Feel free to check the following tutorial to check how it can be done.

JetEngine WordPress dashboard

Step 2 — Move to Posts > All Posts in order to see a list of publications you have. Open each of them to fill the repeater field with the corresponding information.

JetElements WordPress dashboard

Step 3 — Next, open the required page with Elementor. Find the Posts widget, drag and drop it in the working area.

Posts widget for Elementor

That’s what we see in the beginning:

Posts widget Elementor editor

Step 4 — Open the Content > Custom Fields accordion block and decide where you want the metadata to be displayed: before/after a title or content. Enable the respective option.

Posts widget Custom Fields

Step 5 — Define the Meta Fields Position in the dropdown.

Step 6 — In the Key field enter the ID of the meta field, which you made up while creating a repeater.

Posts widget Custom Fields option

Step 7 — Then, invent the Label and set the Value Format using the HTML markup.

Step 8 — Move to the last dropdown where you have to identify the meta value with a callback.

Posts widget Elementor

That’s all! If you need to know more about how to work with JetElements widget, feel free to check these tutorials.