How to Use Divi’s Dynamic Content Feature to Design a Dynamic Post Layout

Divi’s new Dynamic Content feature gives us the ability to build dynamic layouts for blog posts (and a lot more). And there are good reasons you may consider doing this. One reason is design. You can design some amazing post layouts with Divi using the visual builder, especially when you use the premade layouts available as a starting point. Another reason is convenience. Once the post layout is designed with all the dynamic content elements in place (like categories, featured images, post tags, custom fields, etc.), the process of creating and updating blog posts is greatly simplified. Other than the actual post content, all of the other post data can be updated without ever having to deploy the visual builder.

In this tutorial, I’m going to show you how to build a dynamic post layout in Divi. By starting with a premade layout, I’ll walk you through the process of adding dynamic content throughout the layout and then designing that content to match. I’ll even introduce a simple way to use custom fields as dynamic content.

Let’s get started.

Sneak Peek

What You Need to Get Started

For this tutorial, you will need the following:

Divi Theme

Personal Trainer Layout Pack. This layout pack is accessible from the Divi Builder. We will be using the Personal Trainer Service Page Layout to kickstart the design of our post layout.

I will also be showing you how to take advantage of custom fields to build a featured workout section using custom post type functionality. Custom fields are built in to WordPress and do not require additional plugins or anything. So you already have what you need.

Part 1: Adding the Premade Layout to the Post

To kick things off, go ahead and create a new post (not page), give your post a title, and then click the Use Divi Builder button. Don’t deploy the visual builder yet because we first need to customize our post settings from the default WordPress editor screen.

Since we do want to add the our premade layout in order to pull in our images from the layout (we need it for our featured image). Click the Load Layout button located in the Divi Builder menu.

From the Load From Library popup, select the Personal Trainer Service Page Layout and deploy it to your post by clicking the “Use This Layout” button.

Divi Page Settings

It’s important that we update the Divi page settings so that our new layout will fit the design. We also need to hide the default post title display since we will be using the post title module instead.

At the top right of the page, locate the Divi Page Settings box and update the following:

Page Layout: Fullwidth
Show Post Title: Hide

If you don’t see the Divi Page Settings, you probably don’t have the Divi Builder activated so make sure you do that first.

Add Categories

Under the categories box, add a new category called “Strength Training” and make sure it is the only category selected.

Add Tags

In the tags box, add the following three tags: Speed, Training, and Workouts.

Featured Image

Next, add a featured image that matches the background image used in the header of the the layout as shown in the screenshot below.

Part 3: Adding Custom Fields for the Dynamic Workout Content

Custom Fields are built in to WordPress. They allow post authors to add extra information (called meta-data) to a post in addition to the default meta-data like categories, post author, post date, etc. At a basic level, custom fields can be used to display the weather or the author’s mood when writing a post. But there are many different ways to use custom fields to create dynamic content for your website. Feel free to read more on how to add custom fields to your website. But for this use case, I think you will grasp the basic concept of custom fields by building a few for yourself.

For this example, I’m going to show you how to add a few custom fields that can be used to add dynamic content to your post. The dynamic content for this example is a featured workout. Once the custom fields are in place, all the post author would need to do is fill in the custom field values and the content will be updated (dynamically) to the post without ever having to load the Visual Builder.

To do this, scroll down to the bottom of the post and and find the Custom Fields box. If for some reason it isn’t displayed, make sure you select it from screen options at the top of the page.

Then click the Custom Fields box dropdown (if collapsed) to add a new custom field and enter the following:

Name: workout title
Value: Featured Workout

Then click the Add Custom Field Button.

The Name is how you identify the custom field in Divi. The Value is the content that will be dynamically added to the page using Divi’s dynamic content feature (more on this later).

Continue this process to add the following custom fields to your website.

Note: These custom fields will be added to the Divi Theme and will be available on any new post you create in the future. In other words, it is not limited to this single post.

Don’t forget to update your post!

Part 4: Adding Dynamic Content to the Post Layout Using the Visual Builder

Now that we have our post settings and meta data in place, it’s time to start adding dynamic content to our post. To do this, deploy the Visual Builder.

To make things a bit easier to locate and edit for this advanced layout design, open the settings menu and set the Builder Default Interaction Mode to Click Mode.

In the header section, delete the button module (we don’t need it).

Replacing the Background Image with the Featured Image Dynamic Content

For our first piece of dynamic content, we are going to replace the background image used in the column 1 of our top header section row with the featured image used for the post. To do this, open the row settings and find the background settings for column 1 and click the background image tab. Then delete the image that is currently there and then hover over the background image preview box. You will see the dynamic content icon in the top right of the box. Click on it to open the dynamic content options. Then select the Featured Image dynamic content option from the list.

Your layout will look exactly the same since we are using the same image. The only difference is now that background image is being pulled from whatever image is set as your featured image of the post. This is the beauty of dynamic content!

Let’s continue.

Adding the Post Title with a Post Title Module

Under the text module that currently holds the title of the page, add a Post Title module. There is also an option to use add the post title to a module using dynamic content, but since the Post Title Module works like dynamic content already and preserves the h1 heading tag for SEO, it makes perfect since to use it for your custom post layout.

Then update the post title module settings as follows:

Show Meta: NO
Show Featured Image: NO

Now go to the text module above and copy the h2 heading styles by right clicking on the h2 tab and selecting the option from this list.

Then paste the h2 heading styles to the post title module by right clicking on the module and selecting the option from the list.

After that, go back again to the text module above and copy the spacing styles and paste them to the post title module. Then change the post title text color to light to get the white color.

Now your post title should match the design of the original layout title.

Now you can delete the text module containing the original heading.

Using Dynamic Content to Create a Row of Meta-Data

Move on to the second section of the layout. Then take out the top padding of the section by dragging it away in the visual builder or setting it to 0px in the section settings.

In the first row of the second section of the layout, you will notice a text module (it has the content “About Personal Training”) with a divider under it. This is where we are going to build our custom row of meta-data using dynamic content.

We want the size of this row to match the size of the row in the top section. To do this, open the row settings of the row in the top section and copy the sizing styles. Then paste them to the first row of the second section. Then update the row gutter with to 2. The new sizing should look like the following screenshot.

You will also need to add custom spacing as follows:

Custom Padding: 1% left, 1% Right

Then save the row settings.

Now update the row column structure to a four column layout.

Now we are ready to add our dynamic content. To do this, open the settings of the text module now in the far left column and hover over the content box. You will see the dynamic content icon in the top right of the box. Click on it to open the dynamic content options.

Then select the option: Post Publish Date.

Then change the date format accordingly.

This will add the publish date of the post as dynamic content.

To style the text module with the dynamic date content, copy the module styles of the text module in the left column of the row directly below.

Then paste the module styles to the text module with the dynamic date content and change the text text color to white.

Next, copy the text module and the divider below it and paste it into column 2. Then change the dynamic content to Post Categories.

You will need to update the link text color to white to match the design of the layout.

Now copy the post categories text module with the divider over to column 3. Then change the dynamic content to Post Comment Count. In the Post Comment Count popup, enter the the following in the Before input box:

Before: Comments:

The before and after input boxes available in the dynamic content popups are a convenient option for add text before and/or after the dynamic content. This is helpful for adding labels, price symbols, and other elements when needed.

Now let’s continue adding our dynamic content. Copy the text module and divider in column 3 and paste in over to column 4. This last column is going to hold our post author thumbnail and author name. So, change the dynamic content of the text module to Post Author. In the Post Author popup, update the following:

Before: by:
Name Format: First & Last Name

Above the text module with the post author content, add a new image module. Open the image module settings and delete the default image. Just like we have been doing, click the dynamic content icon in the image preview box and add the Post Author Profile Picture as the dynamic content.

Then adjust the design settings to pull the image up and give it a custom width as follows:

Note: The post author name is going to show the author that has been assigned to the current post. And the post author profile picture is whatever has been set for the user profile in the WordPress Dashboard under Users > Your Profile.

Part 5: Adding the Custom Fields as Dynamic Content to Add a Featured Workout to the Post

Remember how we added those custom fields earlier in the tutorial? Now we are going to use those custom fields as content for a featured workout on our post.

To add our featured workout dynamic content, first duplicate the two-column row directly below the four-column row with all of our dynamic meta-data. Then delete the modules in both columns and add a blurb module to the left column.

We are going to use blurb modules to add the dynamic content for the workout section. To start, add a new blurb module to the left column.

For the Title, add the custom field named “Workout Title” as dynamic content. Then for the blurb content, add the custom field named “Duration” as the dynamic content.

To keep things rolling, I’m not going to go over the styling for these modules in detail. But, you will need to add a blurb icon placed to the left of the title and update the design to match the layout.

Next, add a second blurb module below. Enter the text “Warmup” as the title. And then add the custom field named “Warmup” as the dynamic content.

Add a third blurb module below that one, with “Weight Lifting” as the title and the custom field “Weight Lifting” as the dynamic content. Since we are using html for this custom field value, you will need to enable raw html in the weight lifting popup.

Add a final blurb module with “Cool Down” as the title and the custom field “Cool Down” as the dynamic content.

Now you have a dynamic section for adding workouts to your post!

All you need to do is update the custom field values from the default page editor in WordPress and that content will be added to your post layout automatically without having to go into the Divi builder.

Part 7: Adding an Author Bio and a Comment Section

At this point you be well equipped to add dynamic content and adjust the design of your post layout with a fair amount of ease so I won’t go into much detail on these last two elements.

Adding a Author Bio Section Using Dynamic Content

To add a author bio section at the bottom of your post content, you can use the Post Author, Post Author Profile Picture and Author Bio dynamic content. As you can see in the screenshot below, I created a 1/4 3/4 column row. Then I added the post author profile picture to the left column. In the right column, I added the post author with the author bio underneath. I also added the featured image dynamic content as the background image for the section (and a gradient overlay). Here is an example of what that would look like.

Adding a Comment Section Using the Comments Module

Since we are using a custom post layout, it makes since to use a comments module so that we can match the design of the comment section with the layout. Simply add the comments module to a new section row match the button styles and fonts with the current layout. Here is an example of what that would look like.

The Final Design

Here is the final design of the entire post once all of the design has been adjusted.

Updating Post Content and Saving the Layout for Future Posts

Since we are using the Divi Builder to create the post layout, you will still need to update the actual post content for your post using Divi modules. But with everything else now dynamic, this makes the process a whole lot easier going forward. You will need to save the post layout to your library so that when creating a new post, all you will need to do is add the saved layout to your post and update the post content.

Final Thoughts

Divi’s Dynamic Content is a powerful feature that makes adding and updating post data a whole lot easier. So if you are looking to design a custom layout for your blog posts (or other custom post types like Projects) using the Divi Builder, dynamic content is the way to go. Of course, dynamic content is not limited to posts. You can take advantage of dynamic content and custom fields throughout your entire website. I hope this post helps you understand some of the possibilities and inspires you to use dynamic content in awesome new ways.

I look forward to hearing from you in the comments.

Cheers!

By Jason Champagne

Jason started a career in education before co-founding Launch Tower, a Houston based web development company specializing in conversion optimization through Divi. He enjoys freelance writing, all things WordPress, and the occasional ping pong match.

53 Comments

Gary R
October 16, 2018

Of course this will really be useful when, some day, Divi finally gets post type single and archive theme builder capability.

Hi I have a question
If I use dynamic content with use advanced custom field plugin and I logout from backend I have
javascript notation and nothing happend it’s like only generate code but when I login to admin backend wordpress and click view page It’s everything ok
Can You show me congifuration Advanced custom field plugin
I created group but on the bottom is must choice simplepage layout draft?
THank You very much

Just imagine, that you have saved this layout to divi library and when create new post, use it from there. All you need is to fill custom fields and all info will be inside layout filled for you. I guess, it will be very good for some custom info, like recipes, pricing, tech specs etc.

Good question. I think it will save time for your customers/clients when they will load layout to use with their posts without touching the design part with no need to look inside modules where to change some content.
And for someone who wants to transfer websites to WordPress or WP sites to Divi.

The major benefit is that you design once. There is the time saver. It took me some time to figure it out too.
One thing to recall is that the Divi builder is also available not only for WordPress pages and Divi projects but also for WordPress posts, and any custom post type.

Let say that you are designing for a Cook Lessons Website, and that they publish a recipe course post each day. But… they don’t want the classic WordPress post appearance.
Let’s say that the post will be made of:

– A top featured image
– A big title
– Some meta
– The recipe course (post content)
– But also the ingredients list (as a custom field(s)) at the bottom of the post.

So what you would have to normally do would be first, to design the post template and save it. Then each day, you would have to write that new post by loading the saved template first, then populate :
– the module for the top featured image
– the module for the for the big title
– the module for the meta
– the module for the course itself
– the module for the ingredients list
by opening each of them.

But now, with that feature, when designing your post template with the Divi Builder, instead of populating with temporary data (lorem and random image) that you will have to replace when writing a new post, you will tell your template to retrieve those data directly from the post you will be writing.
So you may tell the template to retrieve :
– The featured image from the WordPress featured image field
– The Big title from the WordPress post title field
– The meta from the WordPress post meta fields
– The ingredients list from your custom field(s)

from the WordPress post you are actually writing.

So each day, you will have to load your template for a new post and the only module you would have to open would be the one for the actual recipe course text. The other modules will be populated by the fields from the WordPress post you are writing automatically since you have already assigned the source.

I hope I made it clearer, unless I did not get it myself ^_^
Cheers
(Sorry for bad English, French inside)

I have to say that my understanding of the Dynamic Content principles that you just released and your meaning of it are two totally different things. I have coded custom modules since the beginning of my use of Divi that can do this so much quicker and easier than your process. The sudden realization of what you built versus my understanding has left me a little disenchanted with it. I thought this update was going to be something a bit more along the lines of the power that Toolset provides. I was vastly mistaken to have thought that. I’ll stick to using my modules because this would be a total P.I.T.A. to try and teach and convey to clients. :/

My thoughts exactly. I mean don’t get me wrong I love the concept, but it doesn’t seem to be complete just yet. It lacks the ability to create a custom post-type so you don’t have to remake these custom fields every time you want a new post and not just update an old one. The way it is right now you would still have to use ACF or toolset to create these. Although it does make the frontend part a little bit easier to implement.

Please guys stop trying to make this update look more than it is. I used to build complete PHP sites populated by dynamic data. This update is simply a window/link on some dynamic fields. Yes its useful, and a start (thanks), but as said above – this update urgently needs tools (select, filter, group, repeat, relate) to make it worthwhile. At a push, even a simple select and repeat region for goodness sake.

From this side of the fence it feels like Dynamic Content been turned into some sort of feature release while the templating system is being developed to keep the user base quiet. Yes, it is going to be the thing to use once a templating system is in place, but on its own its pretty poor – there is really no point in duplicating your page content in custom field box on the same page (back end).

Conversely there is a huge point in selecting data from multiple posts and being able to display that (with DIVI) – so please ET just add a couple of vital tools to DIVI to make this update shine. If it is just going to be for templates and no further tools are in the offing – then, for sure, DIVI users will be missing out on a whole bunch of hugely useful and valuable site building options.

Hey Paul – not sure if you offer services, or could provide direction, but I’m looking to do some more complex stuff with dynamic data within WordPress, as you mentioned. If interested, my email is joe at greenflagdigital dot com.

Thanks for your clear tutorial I have a question:
do you think that is there a possibility to put into the divi’s gallery module images that comes from dynamic content? in example I have created with advanced custom fields a custom gallery field were I can put some images( woocommerce have a similar custom field)but there is no way to load this set of images into any divi module. do you think if there is a workaround to this? many thanks

Sorry for the delayed response. Can you clarify what you mean by “entry’s text”? If you are referring to the actual content of the post, then, with the setup built in this tutorial, you would update that in a text module. Everything else is dynamic.

more details: I’m French and French is the language of my website (WP Dashboard > Setting).
In the Virtual Builder, all the dynamic fields are displayed.
When I leave the Virtual Builder only the dynamic field of the title of the Blurb module is displayed. all the others show a error: {« dynamic »:true, »content »: »post_date », »settings »:{« before »: » », »after »: » », »date_format »: »m.d.Y », »custom_date_format »: » »}}
If I choose “english” for the language of the site, everything are ok! all the dynamic fields are displayed.
is there a problem with the quote in the scripts of PHP?
why is the title field displayed and not the others?
thanks you!