Custom Field Widget

The Custom Field widget is part of Neve PRO's Elementor Booster module

Follow the short tutorial on how to use the widget to bring in post meta or ACF fields in Elementor.

Step 1

Select the Custom Field widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.

Step 2

Chose the Data Source for the widget: Post Meta or ACF

Post Meta will use post metadata, as suggested by its name, while ACF will use custom fields that can be set up using the ACF plugin. For that, make sure you first install the ACF plugin.

After the plugin is installed and activated, you need to create a new field group, with all the fields you want to use. Based on the location rules attached to the field group, the fields will appear on pages or posts. 

Note: These are the only custom fields compatible with the Custom Fields widget: text, textarea, number, range, email, url, wysiwyg, select, and radio. Any other types of custom fields will not appear in the Custom Fields widget.

On the page of your choice, make sure to fill in the custom fields and save the page.

Step 3

Using the Custom Field widget, you can select the custom field in the Field Name option and dynamically display its value on the Elementor page.

There is also an option for Field Type which can be either Text or Link. Based on that, the value of the custom field will be displayed as a text or as a link.

Step 4

There are also options for a label to appear before the custom field and an icon which can be further customized. You can also move the content to the left, right or center using the alignment option.

Step 5

After building the widget content, you can go ahead and customize it. Click on the Style tab to explore the options. There you will find options for Field, Label, and Icon.

For each element of the widget, you can customize the color, font family and size, padding, margin and so on.

Step 6

Now, that the widget is almost ready, you can go on to the Advanced tab, if you want to add motion effects, advanced effects, content protection, background or make the page responsive.

Step 7

After finishing all the editing, click on Publish to see your work live.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.