More in this series.

In this Divi tutorial, we walk you through how to use the Divi Theme Builder to create Layout Templates for your Custom Post Types and Custom Fields. Now, this is a continuation of a series of tutorials on using and adding Custom Post Types and Custom fields using various methods, but you can pick any installment to learn what is most important to you.

For this installment, we’ll drop some knowledge on you regarding what the Divi Theme Builder is in case you’re still using Divi 3.0, we then look and how you can create a Custom Post Type template using the Divi Theme Builder, and lastly we’ll show you how to index all your Custom Post Types using the Divi Blog Module.

As always, we recommend you watch the video as we often get into some deeper details, but we won’t leave you hanging and outline the main concepts below.

Let’s do this!

Video Tutorial

What is the Divi Theme Builder?

It can be easy to struggle with distinguishing between the Divi Theme vs the Divi Builder vs the Divi Theme Builder vs the Divi Library. Now you say that 3 times fast! They all have pretty much the same name, we get it, so maybe we’ll do a post soon on the intricate differences between these 3 terms.

For today, however, we want to learn how to create a Custom Post Type template using the Divi Theme Builder, so we will focus on that.

Here is the Elegant Themes definition on the Divi Theme Builder:

“The Divi Theme Builder is an interface within Divi that allows you to use the Divi Builder to construct theme templates and assign those custom templates to pages or posts across your theme (including custom post types like Divi Projects and WooCommerce Products and Pages). With the Theme Builder, you have complete control over every single element of your website. And because you have the power to use or exclude templates on any page or post throughout your site, there is really no longer any need to manually edit a theme template file ever again.”

So let’s dissect what that means.

It is basically an interface that blends the Divi Builder and Divi Library which combined, enables you to build out (almost) any part of your Divi site. Common uses of the Divi Theme Builder are to create either a global navigation header or a footer for all of the pages on your site. Previously this would have taken either an additional plugin or some extra code. The fun thing here is that it goes further than that, it lets you make other changes like creating set layouts for your blog pages, custom posts type, WooCommerce products, 404 pages, search results pages, you, get, the, idea, right?

In short, with the Divi Theme Builder, you can create a layout for (almost) every single part of your Divi site that would have previously required either custom code, or an additional plugin.

Build a CPT Layout using the Divi Theme Builder

I kinda feel like a genius already, but just to be safe, let’s run through how we will create this custom post type template in the Divi Theme Builder step-by-step. We’re not going for any awwwards here in regards to design, but rather want to focus on the “how”. You guys can then use your superior design skills to doll up the look of your layout templates.

We’ll do this in a few phases:

Divi > Divi Theme Builder

Divi Theme Builder

Add New Template > Scroll down to Recipes (or your CPT) > Check All Recipes > Create Template

Now you’ll see that All Recipes has been added and we can tell Divi that we want to replace the default template for this Custom Post Type.

All Recipes

All Recipes > Add Custom Body > Build Custom Body

And this will load the Visual Builder you already know, so it should feel pretty intuitive. I prefer to work in Divi “module view”, but you do you, the process won’t really change here.

Displaying the Post Title and Featured Image

Add a Single Column Row and Post Title Module

Add a New Single Column Row > Add a Post Title Module

You’ll see that by just doing this you have a bunch of dynamic data being pulled automatically like the Recipe Title, Recipe Image, and some Meta Data.

We’ll leave the Row Settings as is, but you can play with some of the Post Title settings. The main functional feature to highlight here are the Elements that you can toggle on and off in this module to control what is displayed.

Displaying the Content of the Recipe CPT

Add a Single Column Row and Post Content Module

Add a New Single Column Row > Add a Post Content Module

Again, instantly you’ll see that by just doing this a bunch of placeholder dynamic data is being shown automatically. This will give you an idea of what your post content will look like when it is displayed, but to see it in action, you’ll have to save your template, and then because you added a new template in the Divi Theme Builder, you’ll need to save that also.

Click on Save in the bottom-right corner > Close the Template > Then click Save Changes in the top-left corner.

Now you can go preview any of your Recipe Custom Posts and you will see everything we’ve done so far. You’ll notice something is missing…your ACF fields, in this case, our Time to Cook and Ingredients.

Showing your ACF Fields in the Template

Add a Two Column Row

Add a New Two Column Row > Add a Text Module

Presto! You get the basic placeholder text you always see, but let’s fix that!

Text Module Settings

Text

Body > Delete the Placeholder Content > Click on the Dynamic Content Icon (see image below)

Displaying our Time to Cook ACF Field

Scroll to ACF: Recipe Fields > Select Time to Cook

This will present you with some new options as it relates to the field. We will add a label as well as a unit. All these two things really are, is the text that will be displayed before and after the contents of your ACF field. Be sure to use spaces here appropriately and don’t copy the quotation marks.

Time to Cook

Before > “Time to Cook: “
After > ” Minutes“

Displaying our Time to Cook ACF Field

To display the ingredients we will do the same as above, but we will add a text module to the second column in the row.

Scroll to ACF: Recipe Fields > Select Ingredients

Again, same as before we want to create some context.

Ingredients

Before > “Ingredients: “

All done with learning how to style your Custom Post Type templates using the Divi Theme Builder! But ad you know, we are all about the bonus content here at Divi Engine. The video shows you some extra Divi Conditional Logic Settings that will further enhance more complex layouts.

And before we sign off, what use is it having these custom post type templates created, but we don’t index all our Recipes somewhere?

Let us show you one way to do that real quick.

Build a CPT Archive Page with the Divi Blog Module

Setting up those Custom Post Type templates using the Divi Theme Builder wasn’t too bad, was it? Well, you are in for a ride my friend! Just kidding, this part is even easier 😁

One of the ways to show an index of all the recipes (or any other custom post type) you have added to your site you just need to create a page with a single module. We’ll use the Blog Module for this no matter how counterintuitive that may sound to you.

Let’s take a look!

Display All your Custom Post Types using the Divi Blog Module

Let’s start on a new page by going to Pages > Add New

Add Section, Row, and Blog Module

Add a New Section > Add a New Single Column Row > Add a Blog Module

Blog Module Settings

Content Tab

Post Type > Recipes

Yeah, that is it! You should instantly see your recipes appear on the page.

Told you it was quick! Now, I know this is not the only way to do this. And yep, I know it is not that pretty, but it works, and that was the goal of today’s tutorial on showing you how to create a custom post type template using the Divi Theme Builder. Winner, you are one!

Your CPT looking at you working in the Theme Builder…

Conclusion

So here we are, what sounded like a rather intimidating topic turned out to be as easy as some Divi Theme Builder pie. Today we armed you with the knowledge on how to create layout templates for your Custom Post Types and Fields using the Divi Theme Builder, no extra plugins required. We know the result ain’t pretty, but the beauty here comes from within, so how you doll it up is between you and the Design Tab.

Now, if you found yourself lost somewhere Beef Cake and Custom Post Type, do yourself a huge solid and check out the other posts we did on using Custom Post Types and Fields in Divi. You’ll build some pretty amazing sites with this knowledge.

Definitely drop a comment below to let us know what you think, and for sure share any suggestions.