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 Type | Returns | Display in Query Builder |
|---|---|---|
| image | Image array (URL, alt, sizes) | <img> tag with alt text |
| file | File array (URL, filename) | Anchor tag with filename |
| wysiwyg | HTML content | Rich text block |
| oembed | Embed HTML (YouTube, Vimeo) | Responsive media embed |
| gallery | Array of image arrays | Image 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