Learning how to use ACF Pro in Elementor allows you to build dynamic WordPress websites where content updates automatically instead of being added manually to every page. This is especially useful for websites with team profiles, real estate listings, portfolios, directories, events, or WooCommerce products that share the same layout but display different information.
By combining ACF Pro (Advanced Custom Fields Pro) with Elementor’s Dynamic Tags, you can store information such as prices, job titles, images, dates, or contact details in custom fields and display them anywhere in your templates. Updating a post only requires changing the field values, while Elementor handles the rest automatically.
The initial setup can be confusing if you’ve never worked with dynamic content before. Missing custom fields, empty widgets, or Dynamic Tags that don’t appear are all common issues for first-time users.
This guide explains the entire process step by step, from creating your first ACF fields to displaying them in Elementor and fixing the most common problems along the way.
1. Overview
If you’re short on time, here’s the complete workflow:
- Install and activate both ACF Pro and Elementor Pro.
- Create a new Field Group in ACF.
- Add the custom fields you need.
- Assign the Field Group to the correct post type.
- Enter custom field values when editing your content.
- Open your Elementor template or page.
- Connect widgets using Elementor’s Dynamic Tags → ACF Field.
- Preview the page and verify the dynamic data displays correctly.
The sections below explain each step in detail and show you how to avoid the mistakes that commonly prevent ACF fields from appearing inside Elementor.
2. What Is ACF Pro and Why Use It with Elementor?
Elementor makes it easy to design beautiful pages, but by itself it isn’t designed to manage structured data. Every page or post includes the standard WordPress fields such as the title, featured image, and content editor which are enough for basic websites but quickly become limiting as your content grows. Understanding how to use ACF Pro in Elementor starts with knowing how custom fields and Dynamic Tags work together.
This is where ACF Pro (Advanced Custom Fields) becomes useful. It lets you create custom fields for information that WordPress doesn’t provide by default, such as a team member’s job title, a property’s price, an event date, or a product specification. Instead of placing this information inside the content editor, each value is stored in its own dedicated field, making your content easier to organize and update.
Elementor connects to those fields through Dynamic Tags. Rather than typing the same information into every page, you create a template once and let Elementor pull the correct values automatically for each post or page.
For example, imagine you’re building a team directory. You can create custom fields for a person’s position, email address, profile photo, and LinkedIn profile. After designing a single template in Elementor, every new team member automatically uses the same layout while displaying their own information. The result is a website that’s easier to maintain, more consistent, and much faster to update as new content is added.
3. Requirements Before Using ACF Pro with Elementor
Before creating custom fields or building dynamic templates, make sure your website is properly set up. Most issues such as missing Dynamic Tags or fields that don’t appear in Elementor are caused by an incomplete setup rather than a problem with either plugin.
3.1 Install Elementor Pro
Displaying ACF fields in Elementor requires Elementor Pro. While the free version includes the page builder, Dynamic Tags are only available after upgrading to Pro.
Before continuing, check that:
- Elementor is installed.
- Elementor Pro is activated.
- Both plugins are running the latest compatible version.
If you don’t see the Dynamic Tags icon when editing a widget, Elementor Pro is usually the first thing to check.
3.2 Install ACF Pro
Next, install and activate ACF Pro.
The free version of ACF supports many common field types, but ACF Pro adds advanced options such as Repeater, Flexible Content, Gallery, Clone, and Options Pages. Even if you don’t need these features today, starting with ACF Pro makes it easier to expand your website later without redesigning your field structure.
3.3 Plan Your Custom Fields
Before creating any fields, decide what information each content type should store.
For example, a team member page might include a job title, email address, and profile photo, while a property listing could have a price, number of bedrooms, and location. Planning this structure in advance keeps your content consistent and makes your Elementor templates much easier to build.
3.4 Understand How ACF and Elementor Work Together
ACF and Elementor serve different purposes. ACF stores structured content, while Elementor controls how that content is displayed on the front end.
For example, you might save an employee’s job title in an ACF field called Position. Elementor then retrieves that value through a Dynamic Tag and displays it wherever you’ve placed the corresponding widget. Once the connection is set up, updating the content only requires editing the custom field the page layout stays exactly the same.
4. How to Use ACF Pro in Elementor to Display Dynamic Data
The following steps show exactly how to use ACF Pro in Elementor to display dynamic content using custom fields and Elementor’s Dynamic Tags.
4.1 Create a Field Group
In your WordPress dashboard, go to Custom Fields → Field Groups and click Add New.
A Field Group is a collection of related custom fields that will be assigned to a specific content type. For example, if you’re building a team directory, you might name the group Team Member Information.
Give the group a clear, descriptive name, then save your changes before adding individual fields.
4.2 Add Your Custom Fields
Click Add Field to create your first custom field.
Each field requires three basic settings. Each field needs a label, a field name, and a field type. For example, you could create a Position field using the Text field type, then repeat the process for other information such as an email address, phone number, or profile photo.
For example, you could create a field called Position using the Text field type. Repeat the process for any additional information you want to display, such as an email address, profile photo, phone number, or biography.
Choose the field type that matches the content you’ll store. This helps keep your data consistent and ensures Elementor displays it correctly.
4.3 Set the Location Rules
Scroll to the Location Rules section and choose where this Field Group should appear.
For example, you can display it only on:
- Posts
- Pages
- WooCommerce Products
- Custom Post Types
If the Location Rules don’t match your content, the fields won’t appear in the WordPress editor, so double-check this setting before continuing.
4.4 Add Content to the Custom Fields
Open a post or page that matches your Location Rules.
Below the content editor, you’ll find the new custom fields. Enter the information you want Elementor to display, then save or update the page.
Keep in mind that Dynamic Tags only display saved field values. Empty fields won’t show anything on the front end.
4.5 Edit Your Page or Template with Elementor
Open the page or template in Elementor.
For dynamic websites, it’s usually best to edit a Single Template instead of an individual page. This allows every post using that template to display its own ACF data automatically.
4.6 Connect a Widget to an ACF Field
Add the widget that matches your content—for example, a Heading for a job title or an Image widget for a profile photo.
Instead of entering text manually, click the Dynamic Tags icon next to the widget’s content field and select ACF Field.
Elementor will then ask which custom field to display. Choose the appropriate field from the list, and the widget will automatically pull data from that field whenever the template is used.
4.7 Preview the Dynamic Content
Click Update and open the page on the front end.
If everything has been configured correctly, Elementor will replace the placeholder with the value stored in your ACF field. For example, a Heading widget connected to the Position field will automatically display each employee’s job title on their profile page.
When designing a Single Template, use Preview Settings to load an existing post that already contains ACF data. Otherwise, the template may appear empty while you’re editing it.
Take a moment to preview a few different posts or pages. This helps you confirm that every field displays correctly and that your layout works well with different amounts of content.
4.8 Working with Different ACF Field Types
Most standard ACF fields work with Elementor’s Dynamic Tags. The table below shows the widget that’s typically used for each field type.
The following table shows the Elementor widget that’s typically used for each ACF field type.
| ACF Field Type | Recommended Elementor Widget |
| Text | Heading or Text Editor |
| Textarea | Text Editor |
| Image | Image |
| URL | Button |
| Button or Text Editor | |
| Date Picker | Heading or Text |
| WYSIWYG | Text Editor |
More advanced fields, such as Repeater, Gallery, and Flexible Content, aren’t fully supported by Elementor out of the box. If your project relies on these field types, you may need Elementor Loop Grid, custom code, or a third-party add-on to display them.
4.9 Reuse the Same Template Across Your Website
One of the biggest advantages of using ACF with Elementor is that you only need to build a template once. After that, every new post or custom post automatically follows the same layout while displaying its own field values.
This workflow works particularly well for team directories, portfolios, real estate listings, events, and other content-heavy websites where consistency is important.
5. Common Mistakes When Using ACF Pro with Elementor
Most issues are caused by incorrect configuration rather than a problem with ACF or Elementor themselves. Before changing templates or reinstalling anything, check the following issues first.
5.1 Using Elementor Free
Elementor Free does not include Dynamic Tags, so the ACF Field option will not appear in the widget settings. Make sure both Elementor and Elementor Pro are installed and active before trying to connect a custom field.
5.2 Assigning the Field Group to the Wrong Content Type
ACF only displays a Field Group when its Location Rules match the current post, page, product, or custom post type. If the fields are missing from the editor, open the Field Group and check that it is assigned to the correct content type.
5.3 Previewing a Post with Empty Fields
A connected widget may appear blank when the selected preview post has no saved ACF values. Add sample content to the custom fields, update the post, and then reload the Elementor preview.
5.4 Applying the Wrong Elementor Template
A Single Template can be designed correctly but still fail to appear if its Display Conditions are incorrect. Open the template settings and confirm that it is assigned to the relevant post type or content group.
5.5 Connecting the Wrong Field
Similar field names can make it easy to select the wrong value in Elementor. Use clear names such as team_position, team_email, and team_photo so each field is easy to identify when working with Dynamic Tags.
6. Troubleshooting Common Problems
Even after completing the setup, you may run into a few issues while working with dynamic content. Here are the most common ones and how to resolve them.
6.1 The ACF Field Doesn’t Appear in Elementor
If you can’t find ACF Field in Elementor’s Dynamic Tags list, first make sure both Elementor Pro and ACF Pro are active. Newly created fields may also require refreshing the editor before they become available. If the field still doesn’t appear, verify that it has been saved successfully in ACF.
6.2 The Widget Is Empty
An empty widget usually means Elementor can’t find any data to display. Open the post you’re previewing and check that the corresponding custom field contains a value. It’s also worth confirming that you’ve connected the widget to the correct ACF field.
6.3 Images or Other Media Don’t Load
When working with Image fields, the return format matters. In the ACF field settings, use a return type that Elementor supports, such as Image ID or Image Array. After saving the changes, refresh the page and test the template again.
6.4 Your Changes Don’t Appear
If you’ve updated a field but still see the old content, the problem is often related to caching. Clear your browser cache, any WordPress caching plugin, and your CDN or hosting cache if you’re using one. You can also go to Elementor → Tools and regenerate CSS and data to force Elementor to rebuild the page.
6.5 The Layout Looks Different Between Posts
Dynamic content rarely has the same length across every post. A short job title and a long biography can affect spacing, alignment, or image proportions. Before publishing your template, preview it with several posts that contain different amounts of content to make sure the design remains consistent.
7. FAQ
1. Can I use ACF Pro with Elementor Free?
You can create custom fields with ACF Pro regardless of which version of Elementor you’re using. However, displaying those fields with Dynamic Tags requires Elementor Pro. This is one of the first requirements when learning how to use ACF Pro in Elementor.
2. Do I need coding knowledge to learn how to use ACF Pro in Elementor?
No. Most websites can be built entirely through the WordPress dashboard using ACF Pro and Elementor Pro. Coding is only necessary if you want highly customized layouts or advanced functionality.
3. Can I use ACF Pro with custom post types?
Yes. ACF Pro works seamlessly with custom post types, making it a popular choice for websites such as directories, portfolios, real estate listings, events, and team pages. Simply assign your Field Group to the appropriate post type and connect the fields in your Elementor template.
4. Does ACF Pro work with WooCommerce?
Yes. You can add custom product information, specifications, FAQs, downloadable files, or other structured data using ACF Pro and display it dynamically on your WooCommerce product pages with Elementor.
5. Where can I download ACF Pro, and is a membership available?
If you’re looking for the latest GPL version of ACF Pro, PluginPro offers regularly updated downloads through its membership plans. A membership also provides access to a large collection of premium WordPress plugins and themes, making it a cost-effective option if you use multiple tools across different projects.
8. Conclusion
Knowing how to use ACF Pro in Elementor opens the door to building far more flexible WordPress websites. Instead of creating separate pages for every piece of content, you can store information in custom fields and let Elementor populate your layouts dynamically. This approach keeps your site organized, reduces repetitive work, and makes future updates much easier.
Once you’re comfortable with the basics, you can expand your projects by combining Advanced Custom Fields with custom post types, WooCommerce, or Elementor Theme Builder to create dynamic websites for directories, portfolios, real estate listings, events, team pages, and much more. Once you understand how to use ACF Pro in Elementor, creating reusable templates and managing dynamic content becomes much more efficient.
If you’re looking for the latest GPL version of ACF Pro, PluginPro provides regularly updated downloads along with practical WordPress tutorials and installation guides to help you build dynamic websites more efficiently.
