Advanced Custom Fields (ACF) and Divi are a powerful duo for building dynamic, user-centric WordPress sites. If you’re using the Divi Query Builder to loop through posts or custom post types, integrating ACF fields into those loops can elevate your layouts with rich, structured data.

Whether you’re showcasing course modules, team profiles, or product specs, here’s how to display ACF basic fields inside Divi Query Builder loops.

🔧 Step 1: Set Up ACF and Divi

Make sure both plugins are active:

• Advanced Custom Fields: For creating custom fields.
• Divi Theme + Divi Query Builder: For designing dynamic layouts.

🧩 Step 2: Create Your ACF Field Group

1. Go to Custom Fields > Add New.
2. Add basic fields like:
   • Text
   • Textarea
   • Number
   • Range
   • Password
   • URL
   • Email
3. Assign the field group to the relevant post type (e.g., Posts, Courses, Products).

✍️ Step 3: Populate Your Fields

Edit a few posts and fill in the ACF fields with real data. This ensures your loop has something to display.

🌀 Step 4: Build Your Loop with Divi Query Builder

1. Add the Divi Query Builder module on the page or template where you want the loop.
2. On the Custom Field Elements, enable Show Custom Fields and add the fields you want to show. You can reorder the field by dragging and dropping the field’s tags.
3. You can also use the Fields Prefix/Suffix text area to modify each field output.

💡 Example Field Prefix/Suffix Snippet:

<h4>Title: |acf_text|</h4>||
<p>Description: |acf_textarea|</p> ||
<div>
<b>Number</b>: |acf_number| ||
<b>Range</b>: |acf_range| ||
</div>
<button class="et_pb_button" data-password="|acf_password|" onclick="alert('Password: ' + this.getAttribute('data-password'))">
  See Access Info
</button> ||
<a href="|acf_url|">Visit Website</a>||
<a href="mailto:|acf_email|">Email Us</a>

👀 Step 6: Save and Preview

Save your layout and preview the page. You should see each post displaying its custom fields dynamically.