How to Display ACF Content Fields in Divi Query Builder Loops

Sep 13, 2025 | Tutorials | 0 comments

Images, Files, Rich Text, Embeds, and Galleries — Fully Dynamic with Divi Query Builder

ACF Content fields allow you to enrich your WordPress posts with media, formatted text, and interactive elements. Whether you’re showcasing product images, downloadable files, embedded videos, or rich content blocks, Divi Query Builder makes it easy to display these fields dynamically — no custom PHP required.

Let’s walk through how to use each supported field type and what kind of output Divi Query Builder can generate.

🧩 Supported ACF Field Types

Field TypeReturnsDisplay in Query Builder
imageImage array (URL, alt, sizes)<img> tag with alt text
fileFile array (URL, filename)Anchor tag with filename
wysiwygHTML contentRich text block
oembedEmbed HTML (YouTube, Vimeo)Responsive media embed
galleryArray of image arraysImage grid or slider

🔧 Step 1: Set Up ACF and Divi

  • Advanced Custom Fields (Pro recommended for Gallery)
  • Divi Theme + Divi Query Builder

✍️ Step 2: Create Your Field Group

Go to Custom Fields > Add New and add one or more of the following:

  • image: Upload a featured image or icon
  • file: Attach downloadable PDFs, docs, or assets
  • wysiwyg: Add formatted content blocks
  • oembed: Embed YouTube, Vimeo, or other media
  • gallery: Upload multiple images for a slider or grid

Assign the field group to the relevant post type (e.g., Products, Team Members, Resources).

🌀 Step 3: Populate Your Fields

Edit a few posts and fill in the content fields with real data. For example:

  • On a “Product” post, upload a product image, attach a spec sheet (file), and embed a demo video
  • On a “Team Member” post, add a WYSIWYG bio and a gallery of event photos
  • On a “Resource” post, include a downloadable PDF and an oEmbed tutorial

🧱 Step 4: Build Your Loop with Divi Query Builder

  • Add the Divi Query Builder module to your layout
  • Set the Post Type to the one containing the content fields
  • Enable Show Custom Fields and add the relevant field tags

Divi Query Builder automatically detects the field type and renders the appropriate output — whether it’s an image, file link, formatted text, or embedded media.

👀 Step 5: Save and Preview

Save your layout and preview the page. You’ll see each post dynamically displaying its media content — styled and responsive, without writing a single line of PHP.

 

🚀 Bonus Use Cases

  • Product Grid: Show product image (image), spec sheet (file), and demo video (oEmbed)
  • Team Directory: Display bio (WYSIWYG), gallery of team photos (gallery), and resume download (file)
  • Resource Library: Embed tutorial (oEmbed), attach PDF (file), and include rich description (WYSIWYG)

0 Comments

Submit a Comment