If you disagree, maybe this guide isn’t for you?

Or, maybe you are just Divi curious and heard that you can build dynamic layouts with ACF data and think that is rad.

Either way, the dynamic content feature in Divi, and now the Divi Theme Builder is a game-changer as you can create custom layouts that will pull in dynamic content from any of the standard Divi post fields.

You can also now dynamically insert ACF data into Divi layouts. Fantastic.

Building Divi layouts that make use of dynamic text content is very straight forward. Load up your text module, click on the “Use Dynamic Content” icon, and select the field you’d like to dynamically insert into the text module.

It couldn’t be easier.

However, much less easy is figuring out how how to use a Divi image module to display an image set by an ACF field.

By default, you can dynamically insert the post/page Featured Image, Author Profile Picture, or Site Logo.

If you only need to dynamically insert one image into your Divi Layout, then you could use the post/page’s Featured Image.

However, if you need more than one featured image to dynamically load into your Divi Layout, then you are up a creek without one of those paddle things.

But, what if I told you there is a solution?

Hey you. There is a solution!

We’ve all been trying out different combinations of ACF fields, settings, Divi modules, using the “Before” and “After” fields in the text module after selecting your ACF field.

However, they all end in failure! Either the rendered output shows the raw <img rel=”lightbox” src=https://thisimageurl.com/img/le-image” /> html, or it simply doesn’t show anything but a big fat blank area where your image should be loading.

I’ll show you how to dynamically insert images from an ACF field into your Divi layout in 5 simple steps!

Let’s go gang!

Step 1 – Create Your ACF Field

Add a new ACF field and give it whatever name makes sense to you.

You may be tempted to set the Field Type as a URL or even an image.

Resist this temptation!

You’re going to set the Field Type to “Text”. Yes. That’s right. A simple text field.

Step 2 Insert A Divi Image Module Into Your Layout

Head on over to the Divi layout that uses the ACF field group.

Create a new image module.

Step 3 Set Your Image Module To Dynamically Show Your ACF Field

The new image module will show a placeholder image. Hover on the placeholder image and click the garbage can icon that appears.

Next, click on the “Add Dynamic Content” icon. Scroll down and select the ACF field you created for your image.

Save the module. If you’ve already created a page/post that has a value in the image ACF field, that image it will probably load in your layout visual builder. No worries, completely normal.

Save the layout.

Step 4 Create A Post That Includes The Image ACF Field

Create a page/post that uses the ACF field group as well as the Divi layout.

When you get to your image ACF text field, simply add the image URL from your media library. You can even make this a relative URL by dropping the https://domain.com from the image URL and leaving the rest.

Save the page/post.

Step 5 Observe Your Victory By Viewing The Image Dynamically Loaded From An ACF Field Through Your Divi Layout

Go ahead. Visit that page/post. Be sure to clear your cache. It’ll work. I promise. If it doesn’t, then you screwed something up because these instructions are rock solid!

That isn’t what you are hearing?

Interesting.

I must live in an echo chamber then because that is what I hear quite a bit.

Anywho. We’re here to talk about using Advanced Custom Fields in Divi Layouts, including the Divi Theme Builder.

Divi Dynamic Content Quick Overview

The Divi Theme and Divi Page Builder have the power to pull in WordPress Page/Post fields dynamically.

The Elegant Themes blog has an excellent post that covers the basics of using dynamic content in your Divi Layouts. Check it out.

Basically, you can add the standard post type (Page, Post, Project) fields to your Divi Layouts and pull in their values dynamically.

You can even use WooCommerce product post type data in your Divi Layouts.

This gives you full design control over the appearance of your blog posts, blog category pages, WooCommerce product pages, WooCommerce category pages, WooCommerce Cart and Checkout Pages, and virtually any standard WordPress page template.

Awesome!

Divi And Advanced Custom Fields (ACF) Extends Dynamic Content

Oooooh boy. Now, we have the power to use ACF fields in our Divi Layouts including the Divi Theme Builder!

The best part is that this feature is supported natively in the Divi Theme!

This means that we are no longer limited to the standard WordPress post type fields in our Divi Layouts. We can create unlimited custom fields and use them in our Divi layouts. Fantastic!

For example, say you wanted to give your blog post a sub-header below the Post Title. There is no “sub-header” standard field when creating a new blog post.

This is problematic if you are using a Divi Theme Builder template for your blog posts. We need to use the power of dynamic content to speed up our builds and content deployment!

Also, it really isn’t the best idea to use regular ol Divi to build blog posts. Why? Why, you ask??!?! Oh, I’ll tell you why.

Once you use a drag and drop builder on your posts they become loaded with short-codes. If you then try to migrate those posts into another theme you are going to have a very bad time.

You could, of course, create your first blog post, save the layout as a template, and then re-use that template on every blog post thereafter.

But, we all know the pitfall of that method. If you need to make one design change in the blog post layout, you’ll need to make it on each and every blog post you’ve posted that used the copied layout

Lame.

There must be as better way! There is.

Back to the example. To achieve the blog post title sub-header, we can create and insert an ACF field in our Divi Theme Builder Layout to dynamically pull in the blog post sub-header value.

Giddyup. Let’s get it done cowpeople.

Install Advanced Custom Feilds – ACF

First things first. We need to install the Advanced Custom Fields plugin. You know the drill. Or, perhaps you don’t know the drill.

Click on your “Plugins” link in the WordPress admin menu.

Click “Add New” to access the searchable plugin page. Do a search for “Advanced Custom Fields”.

The first result should be the correct plugin. The plugin author is Elliot Condon. If that is what you see, then click on “Install Now”.

The plugin will install. Success! Be sure to click on the blue “Activate” button as well.

Congratulations, you’ve successfully installed the Advanced Custom Fields plugin!

Create An ACF Field Group

The next thing you are going to want to do is to create an Advanced Custom Fields field group.

What is a field group you ask yourself sheepishly? Think of a field group as a group of fields that you’ll use on the same post type or category.

For example, you can create a field group for a category of blogs called “Homes” on your website that lists homes for sale.

Or, perhaps you want to create a field group for the Insurance Agents that work for the insurance agency that you are building the website for.

It’s that simple!

Within a field group, you’ll have the opportunity to create fields that you’ll use to populate content on the posts/pages that use the page template that you assign the field group to.

So, the flow is the following. A post type has a field group assigned to it. Within a field group, you create fields.

Using one of the examples above, we could create the following filed under our “Insurance Agent” field group.

• Name – Text Field Type
• Phone – Number Field Type
• Headshot – Image Field Type
• Bio – Textbox Field Type

Then, you can assign this Insurance Agent filed group to show on posts within your post category “Insurance Agent”.

Use Your ACF Fields In Your Divi Layout

The next step is to call your ACF fields into your Divi modules using the Dynamic Content feature.

To do so, add a Divi module that corresponds with the ACF field you will be using in that section. For example, if you want to use the “Name” ACF field, you will add a text module to your Divi Layout.

With the module settings open, click on the “triple pancake” icon in the top right of the text box. This will open the Dynamic Content option. You will be presented with a list of dynamic content options.

The ACF fields will be at the bottom of this list. Scroll down to see them.

Select the ACF field that you will be using in this template.

What are the Before and After fields used for you ask? I will tell you. YOu can insert HTML into those fields to modify the tag.

For example. If you’d like the “Name” ACF field to be an h tag such as a <h3>, then add <h3> to the before field and </h3> to the after field.

This will wrap your ACF content with an <h3> open and close tag.

Advanced ACF Field Insertion Using Shortcodes

The above method works well are placing a fixed piece of content in an area on your template that doesn’t interact with other content.

HOwever, what do you do if you need to play dynamic content within your text?! WHAT THEN!?

Thankfully, you can use ACF Field shortcodes within your Divi content to dynamically insert ACF fields throughout your Divi content!

Awesome stuff!

Do do so, all you do is add the ACF shortcode into your content in the following way:

[acf field=”field_name”]

Replace the “field_name” with the actual name of your ACF field.

Using the example above, say you wanted to add the Insurance reps name into a standard template that appears on every insurance reps page.

To do this, you will simply add the shortcode into the content where you would like the Insurance Reps name to appear.

For example. “All of our insurance reps are certified. [acf field=”name”] has shown proficiency in client management, vehicle damage assessment, and blah blah blah.

It’s that simple!

Conclusion

Now that you know how to use ACF fields into Divi layouts, the world is your oyster! No, but for reals guys, it opens up the door to many many possibilities and customizations.

Go forth and conquer le ThriftyWP army!