How to Use Elementor and ACF Together – Step-by-Step WordPress Guide
Want to learn how to use Elementor and ACF together to build powerful WordPress websites? This guide shows you exactly how to combine both tools to create dynamic, custom layouts without writing any code.
Using Elementor, a visual page builder, along with Advanced Custom Fields (ACF) allows you to create flexible, personalized designs that automatically pull in custom data for each post or page.
What Is ACF?
Advanced Custom Fields (ACF) is a popular WordPress plugin that enables you to create and manage custom fields for posts, pages, users, or any custom post type. These fields can store text, images, links, or even complex data structures like repeaters or flexible content layouts.
Why Combine Elementor and ACF?
While Elementor gives you visual control over layout and design, ACF enables you to store structured content. Together, they help you:
-
Build fully customized templates
-
Display dynamic, post-specific content
-
Speed up site management by separating content from layout
-
Improve SEO through better content structure and consistency
Step 1: Install Elementor and ACF
-
Go to Plugins > Add New in your WordPress dashboard.
-
Install and activate:
-
(Recommended) Get Elementor Pro, which is required to access dynamic content features.
Step 2: Create Custom Fields with ACF
-
Navigate to Custom Fields > Add New.
-
Name your field group, such as “Team Member Info”.
-
Add fields like:
-
Job Title (Text)
-
Profile Image (Image)
-
LinkedIn URL (URL)
-
-
Set the location rule (e.g., “Post Type is equal to Team Member”).
-
Click Publish.
Step 3: Add Content to Custom Fields
-
Go to the edit screen of a post that matches the field group.
-
Scroll down to find your ACF fields.
-
Fill in the data (e.g., name, title, photo).
-
Click Update.
Step 4: Display ACF Data in Elementor
-
Open the page/post in Elementor Editor.
-
Drag in a widget like a Heading, Image, or Button.
-
Click the Dynamic Tags icon next to the content input.
-
Choose ACF Field.
-
Click the wrench icon ⚙️ to select the correct custom field.
-
Style it as needed using Elementor controls.
✅ Example: Set an Image widget to show the “Profile Image” field. Now each team member will display their unique image automatically.
Bonus: Use Elementor Theme Builder
With Elementor Pro, you can create dynamic templates using Theme Builder for:
-
Single Posts
-
Archive Pages
-
Custom Post Types
This means you design once, and ACF handles the content for each entry. Great for building directories, portfolios, or team listings.
Final Thoughts
Combining Elementor and ACF gives you the power to build beautiful, data-driven websites that are easy to update and scale. Whether you’re creating listings, portfolios, or landing pages, this dynamic duo can streamline your design process and enhance your SEO efforts.
Start using Elementor and ACF together today to build smarter, faster, and more flexible WordPress websites!