How to Add Custom Fields in Elementor (The Comprehensive Guide)

One of the features offered by WordPress is the ability to add custom fields. This feature is very useful if you want to create a complex, dynamic website that involves lots of additional meta fields that are not offered by WordPress by default. Elementor (the pro version) supports dynamic content that allows you to process WordPress custom fields. You can add WordPress custom fields to your Elementor designs (pages or templates). But how to add custom fields themselves? Read on to learn more.

What are WordPress Custom Fields?

Before we jump to the how-to section, let’s cover this first. Custom fields are a set of metadata that store additional information about blog posts, pages, custom post types, or taxonomies. The information can be vary depending on your purpose. For instance, if you want to create a bike rental website, you might want to add information like hourly rate, pick up location, drop location, pick up date, drop date, and so on.

Or, if you want to create a movie review website, you might want to add information like score, genre, and review summary.

In the example above, score, genre and review summary are called custom fields.

You might be asking, why don’t just add the score, genre, and review summary on the WordPress editor?

Of course, you can do so. But, imagine if you wan to create a “greatest movies of all-time” list and you want your users to be able to sort the movie by score, title, or genre. How could you accomplish it? This is how custom fields come into play. Custom fields offer more flexibility to sort and manage and content on your WordPress site.

Custom fields are especially crucial for complex sites like real estate listing sites or trip agency websites as you will be able to offer better experiences for users such as the ability to sort the item by price, rating, facility, and so on.

In order to get the most out of custom fields, you can also create a custom post type. A custom post type allows you to create a new content type on your WordPress site other than the default content types offered by WordPress such as blog posts and pages. If you use WooCommerce, it is a perfect example of the implementation of custom fields and a custom post type.

How to Add Custom Fields in Elementor

There are two WordPress plugins we recommend to add custom fields in Elementor or WordPress in general:

• Advanced Custom Fields a.k.a ACF (freemium).
• JetEngine (premium. $43/year).

ACF is a great solution if you are looking for a free plugin to add custom fields in Elementor, but Elementor Pro is required. ACF has native integration support with Elementor Pro.

Being a paid plugin, JetEngine offers more features than ACF. In addition to creating custom fields, you can also use it to create custom post types, custom taxonomies, custom forms, and listing items.

Adding Custom Fields in Elementor Using ACF

Before being able to add custom fields using ACF, make sure you have installed and activated the ACF plugin on your WordPress site. The free version of this plugin is available on the WordPress plugin directory. Make sure that you have upgraded your Elementor to the pro version as well in case you haven’t done so.

Once everything is ready, go to Custom Fields -> Add New to add a new custom field group.

Give your field group a name and click the Add Field button to add a custom field.

The custom field form will open once you clicked the Add Field above. Add the required parameters like field label, field name, field type, place holder, and so on.

You can click the Add Field button to add more custom fields. You can set the order of the custom fields by dragging them up and down.

Once done adding the custom fields, switch to the Location section beneath the custom field form. Set post type where you want to show the custom field group on. Whether on the blog posts, pages, custom post types, or taxonomies.

Next, go to the Settings section to set the location of the custom field group, style, label placement, and instruction placement. Once done, click the Publish button to apply the custom fields to the selected content type.

If there are some fields you missed or there some parameters you want to edit, you can edit your custom field group by going to Custom Fields -> Field Groups. Hover your mouse over the custom field group you want to edit and click the Edit link.

Adding the Custom Field Types Created with ACF to an Elementor Design

You can use the custom fields you have created with ACF above on your Elementor designs. Be it pages or theme builder templates. To do so, edit a page/template you want to add your custom fields to with Elementor. Add a new widget (i.e. the Heading widget). Once the widget is added, go to the left panel to set the content and click the database icon and select ACF Field.

Click the wrench icon and select the field you want to add from the dropdown menu on the Key option.

Adding Custom Fields in Elementor Using JetEngine

To add custom fields using JetEngine, make sure you have installed and activated the JetEngine plugin on your WordPress site. You can get it from the Crocoblock website. Crocoblock is the developer of JetEngine.

Unlike ACF, JetEngine works on both Elementor Free and Elementor Pro.

To start adding custom fields with JetEngine, go to JetEngine -> Meta Boxes.

Click the Add New button to start adding the custom meta field group.

On the General Settings section, give your custom meta field group a name and set a content type where they to be displayed. Just like ACF, you can also display the custom field group whether on blog posts, pages, custom post types, or taxonomies.

To add the custom meta fields, switch to the Meta fields section and click the New Meta Field button to add a new custom field.

Add the required parameters like field label, field name, field type, and so on. On the Object type section — since you want to create custom fields — set it to Field.

You can simply click the New Meta Field button to add more custom fields. You can set the order of the custom field types by dragging them up and down.

Once done adding the custom fields, you can click the the custom fields button to apply the custom meta fields to the selected content type.

Adding the Custom Field Types Created with JetEngine to an Elementor Design

To use the custom fields you have just added with JetEngine to an Elementor design, simply edit the page/page you want to add the custom fields to with Elementor. Add a new widget (i.e. the Heading widget). Once the widget is added, go to the left panel to set the content. Click the database icon and select Custom Field on the JetEngine section.

Click the wrench icon and select a custom field you want to use from the dropdown menu on the Field option.

The Bottom Line

Custom fields are crucial to unlocking the power of WordPress. Thanks to them, you can create a dynamic, complex website like e-commerce, real estate listing, and so on. The ability to handle custom fields is one of the things that makes Elementor so special as a page builder plugin. You can add tailored dynamic content to your designs by taking advantage of custom fields.