Divi Divi Divi. It seems that all we hear about nowadays is how great the Divi Theme and Divi Page Builder are!
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
, then add to the before field and
to the after field.
This will wrap your ACF content with an
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!