TechEarl

Using ACF with Divi for Dynamic Content

Divi's Dynamic Content lets editors bind ACF field values to module properties without leaving the visual builder. The setup, the patterns that work for Text and Image fields, the limits for Repeater and Flexible Content, and the custom-shortcode escape hatch.

Ishan Karunaratne⏱️ 7 min readUpdated
Share thisCopied
Divi's Dynamic Content binds ACF fields to module properties. Setup, patterns for Text and Image, limits for Repeater and Flexible Content, escape hatches.

Divi's Dynamic Content feature lets editors bind ACF field values to module properties (text content, button URLs, image sources, etc.) without leaving the visual builder. For simple fields (Text, Image, URL, True/False, Number) the integration is clean and editor-friendly. For Repeater and Flexible Content fields, the integration is limited and usually requires a custom shortcode or a Divi module hand-coded to walk the Repeater. Here is what works out of the box and where the lines are.

Jump to:

How Divi Dynamic Content works with ACF

Divi's Dynamic Content feature exposes a database picker on most module properties. The editor clicks the database icon, selects a source (post field, ACF field, etc.), picks a specific field, and Divi reads that value at render time and substitutes it into the module property.

For ACF, Divi reads the field's Name (not Key) and queries via standard get_field. The integration handles the simple field types automatically: Text, Textarea, WYSIWYG, Number, Email, URL, True/False. Image fields work for module properties that expect an image (background, image module's src). Date fields are formatted using Divi's date-format setting.

The setup: have ACF Pro installed, register your field groups on the post types that will use Divi. The Dynamic Content picker shows ACF fields automatically.

Binding simple field types via Dynamic Content

In a Divi Text module, click the H2 text area, click the database icon that appears, pick "Custom Field" (the ACF group), select your field name (e.g., hero_heading), confirm. The module now renders the field's value, updating live as the editor edits the post in another tab.

The pattern works for:

  • Text module text: dynamic from any ACF Text/Textarea/WYSIWYG field.
  • Button module text and URL: dynamic from ACF Text/URL fields.
  • Image module src and alt: dynamic from ACF Image field (Image ID or URL return format).
  • Heading text: dynamic from any ACF Text field.
  • Section background image: dynamic from ACF Image field.

The Dynamic Content workflow is faster than the ACF + custom template approach for editors who already know Divi.

Image fields and Divi modules

Divi Image modules expect a URL or an attachment ID, and ACF Image fields with either return format (URL or ID) work. The Image Array return format works too because Divi extracts the URL from the array.

For best results:

  • Set ACF Image fields' Return Format to "Image ID" for Divi integration. Divi handles ID-based images more efficiently than parsing the array.
  • Use ACF Image fields' Preview Size to match the size you display in Divi.
  • For background images on Sections, use Image ID return format; Divi reads the source URL itself.

If the image does not appear in Divi after binding, check that the image actually exists in the media library (an attachment that was deleted from the library but still referenced in the ACF field returns nothing).

Where the Dynamic Content integration breaks down

Three places where Divi's Dynamic Content does not cover the use case:

Repeater fields. Divi has no native concept of "loop through this Repeater and render N copies of a module." The Dynamic Content picker shows the Repeater field but binding it produces unhelpful output (usually a serialized representation or empty string).

Flexible Content fields. Same as Repeater. Divi cannot iterate the layouts and render different module structures per layout.

Conditional logic based on ACF values. Divi has some basic "show/hide if logged in" logic but not "show this module only if ACF True/False field X is true." For that you need a Divi module's "Conditional Logic" feature (Divi 5+) or a custom shortcode.

Custom HTML output. If you need very specific HTML structure for the ACF data (semantic markup for schema.org, accessible patterns), Divi modules generate Divi's standard markup which may not match. The escape hatch is the custom shortcode pattern below.

The custom-shortcode escape hatch

The standard pattern for "I need to do something Divi cannot": write a custom shortcode that produces the HTML you want, then drop a Divi Code module on the page with the shortcode inside.

php
// In a mu-plugin or theme functions.php
add_shortcode( 'team_grid', function () {
    if ( ! have_rows( 'team_members' ) ) return '';

    ob_start();
    echo '<div class="team-grid">';
    while ( have_rows( 'team_members' ) ) {
        the_row();
        $name = get_sub_field( 'name' );
        $role = get_sub_field( 'role' );
        $photo_id = get_sub_field( 'photo' );
        ?>
        <div class="team-card">
            <?php echo wp_get_attachment_image( $photo_id, 'medium' ); ?>
            <h3><?php echo esc_html( $name ); ?></h3>
            <p><?php echo esc_html( $role ); ?></p>
        </div>
        <?php
    }
    echo '</div>';
    return ob_get_clean();
} );

In the Divi page, add a Code module and paste [team_grid] inside it. Divi renders the shortcode output verbatim. The CSS for the .team-grid and .team-card classes goes in the Divi theme customizer's custom CSS or in the child theme stylesheet.

This is the single most common bridge between Divi and ACF Repeater/Flexible Content data on the sites I have worked alongside.

Custom Divi modules that walk a Repeater

For agencies that ship many Divi sites with the same Repeater patterns, building custom Divi modules is the next step up from shortcodes. A custom Divi module is a PHP class that registers with Divi's module system and renders inside the visual builder like a native module.

The trade-off:

  • Shortcode in a Code module: Quick to write, no Divi knowledge needed, the editor sees raw shortcode text in the builder.
  • Custom Divi module: More setup, requires understanding Divi's module API, the editor sees the rendered preview in the visual builder.

For one-off use cases, shortcodes are fine. For patterns the agency uses on every Divi project (a custom "team grid" module, a custom "stats row" module), the custom module pays for itself.

Building custom Divi modules is out of scope for this article but Elegant Themes documents the API at the link in the Sources section. Most agencies I have seen either skip custom Divi modules entirely and live with shortcodes, or invest in a small in-house library of 3-5 reusable custom modules.

When to use this pattern vs custom templates

Divi + ACF Dynamic Content is the right choice when:

  • The agency standardizes on Divi.
  • The editor uses Divi for layout and just needs to inject content from ACF.
  • The dynamic data is simple (Text, Image, URL fields).
  • The page structure is editor-driven, not developer-driven.

Custom templates (page.php + ACF Flexible Content + template parts) are the right choice when:

  • The site is custom-development-first.
  • The data structure is complex (Repeater or Flexible Content with many layouts).
  • The HTML output needs to be precise.
  • The agency does not standardize on a page builder.

Mixed approach (Divi for some sections, ACF + custom for others) works fine on individual projects. For the broader Divi-vs-custom-template trade-offs, see Why Agencies Still Use Divi and Custom WordPress Themes vs Page Builders.

For the equivalent integration with Elementor, see Using ACF with Elementor Dynamic Fields.

Sources

Authoritative references this article was fact-checked against.

TagsWordPressACFDiviPage Builders

Found this useful? Pass it on.

Copied

Ishan Karunaratne

Tech Architect · Software Engineer · AI/DevOps

Tech architect and software engineer with 20+ years building software, Linux systems, and DevOps infrastructure, and lately working AI into the stack. Currently Chief Technology Officer at a healthcare tech startup, which is where most of these field notes come from.

Keep reading

Related posts

Using ACF with Elementor Dynamic Fields

Elementor Pro's Dynamic Tags integration with ACF is the mature reference for binding custom field values to widget properties. Coverage for every field type, including Repeater via the Loop widget, and the Theme Builder integration for archive templates.

Using AI to Update ACF Fields and WordPress Content

AI plus WP-CLI plus ACF is the canonical pattern for bulk content updates that used to take a careful afternoon. Schema-aware update_field calls, content rewrites at scale, image alt backfills, and the safety patterns that prevent disasters.