How to Use ACF (Advanced Custom Fields) with Elementor Pro (Complete Dynamic Content Guide)

Why Combine ACF (Advanced Custom Fields) with Elementor Pro?

Building dynamic websites with Advanced Custom Fields (ACF) and Elementor Pro allows you to separate website design from content management. Instead of redesigning pages for every new portfolio item, real estate property, team member, or service page, you create custom fields once in ACF and dynamically map them to an Elementor Single Post template.

In this technical walkthrough by CV World, you will learn how to register custom field groups, dynamically populate text, images, and repeaters in Elementor, and render custom post types effortlessly.

Step 1: Install and Configure Advanced Custom Fields

1. In WordPress Admin, go to Plugins → Add New and install Advanced Custom Fields (ACF).
2. Navigate to ACF → Field Groups → Add New.
3. Name your field group (e.g. Project Showcase Details).

Step 2: Add Custom Fields for Your Content Type

Add the following field keys to your field group:

• client_name — Field Type: Text
• project_budget — Field Type: Number / Text
• project_live_url — Field Type: Url
• project_gallery — Field Type: Gallery (ACF Pro) or Image

Step 3: Connect ACF Fields Dynamically in Elementor

Open your Elementor Single Post Template and connect the ACF fields:

1. Select any Elementor Heading or Text widget.
2. Click the Dynamic Tags database icon (top right of the Content box).
3. Under the ACF section, choose ACF Field.
4. Click the wrench icon and select your key: client_name.
5. In the Advanced sub-panel, add a prefix (e.g. Client: ) or fallback text.

Step 4: Render Custom Dynamic Button Links in PHP

To dynamically pass URLs into action buttons with zero broken links, use this clean PHP snippet in your child theme or code snippets plugin:

<?php
// CV World Dynamic ACF Button Shortcode
add_shortcode('cvw_project_link', function() {
  $url = get_field('project_live_url');
  if (!$url) return '';
  return '<a href="' . esc_url($url) . '" target="_blank" rel="noopener" class="btn btn-primary">View Live Project &rarr;</a>';
});
?>

Step 5: Preview Dynamic Content Across Multiple Posts

In the bottom-left Elementor settings gear icon, click Preview Settings and select different post entries from your Custom Post Type to verify that all ACF fields populate accurately.

Frequently Asked Questions about ACF + Elementor Pro