Divi's Dynamic Content feature allows you to turn any Divi module into a dynamic element that pulls information from your website's database via:
Post Meta
Page Titles
Featured Images
Divi enables you to use dynamic content in modules wherever content data can be entered (text, URLs, images, etc).
Additionally, using Divi's theme builder, you can create dynamic content templates to display your site's posts, data directories, and more.
What is Dynamic Content?
Dynamic Content is data pulled from your website's database that is then displayed on the front end of your website.
The data type that can be used includes:
Page and Post titles
Excerpts
Featured Images
Publish Date
Any of these data types can be displayed dynamically on a WordPress website. Dynamic Content also comes in the form of custom fields or post types.
You can create Custom Fields with the help of plugins like Advanced Custom Fields and/or Toolset to display all kinds of content.
In Divi, Dynamic Content can be used in all Divi's modules. It uses a special Dynamic Content icon to indicate what elements can be dynamic.
Using the Divi Theme Builder, you can create dynamic templates for posts, Search Results pages, Category Pages, and more - all while designing in real-time with Divi's Visual Builder.
Where to Find and Use Dynamic Content in Divi
There are several places you can use Divi Dynamic Content. Here is a list of Divi's most common places to use or add dynamic content.
1. Divi's Default Dynamic Modules
Some of the Divi Modules available in the Divi Builder are already dynamic. These modules can be considered dynamic modules because they exist to pull data dynamically from your site by default. These modules include:
Blog - pulls a list of your site's posts to display inside a grid or fullwidth format
Post title - dynamically pulls in the post's title
Post Content (used only in Theme Builder) - pulls in the content of the post
Post Navigation - generates next and previous links for posts
Post Slider - Creates slides for a number of user-specified posts
2. Divi Module Content Fields
In addition to Divi's dynamic modules, you can add custom dynamic content to any Divi module's content input areas.
This allows you to equip any module with dynamic content. Any module that has text, links or images can utilize dynamic content.
You can find and access Divi's dynamic content by hovering over a content field option in module settings.
If dynamic content is available, you will see the dynamic content icon. Clicking the icon will show the list of dynamic content data available on your site.
3. Divi Theme Builder Templates
The Divi Theme Builder is where the power of dynamic content shines. You can use the Divi Theme Builder to design global (site-wide) templates that pull in dynamic content. This gives you full control of the design of your entire site using the Divi Builder.
Templates can be created for:
Posts
Category pages
Author pages
Tags pages
Projects
Search results
404 pages
Divi's template settings allow you to assign conditions for your templates based on all pages, specific pages, or even children of specific pages.
Additionally, you can implement Dynamic Content using Divi theme builder packs that can easily be downloaded from our blog.
With a couple of clicks, you can import theme builder packs and apply dynamic content to the elements contained within the layouts.
4. Header and Footer Template Content
Divi can also add Header and Footer templates in the Theme Builder.
You can download a header/footer pack from our blog or create your own. When building headers using the site logo dynamic field, you can use a dynamic image to showcase your brand's logo.
Example:
Click the Dynamic Content icon in a menu or image module,
Select the site logo field.
Doing so will pull in the logo assigned in Divi's theme options.
Similarly, you can use Divi's dynamic date field to assign the Date in your site's footer. This is a useful way to avoid changing the Date on your website every year.
4. Divi Blog Post Templates Content
You can build a post template using dynamic content fields to pull in the post's title, content, featured image, or post meta. This is useful for keeping your site's post uniform and looking great.
If you need more time to create your blog post template, Divi has you covered. Check out some gorgeous dynamic post templates available for download in the Elegant Themes blog.
5. Divi Archive Templates
In addition to creating beautiful post templates, Divi allows you to create several archive templates, including:
Author archive pages
Category pages
Date archive pages
Projects listing pages
Tag archive pages
Creating archive templates is a great way to showcase posts in a specific category. This is an often-overlooked step when building a new website, even though it's quite important. An unsettled post category page can be unsightly, damaging your business's credibility. Thanks to Divi, you can create stunning post-category pages in a few steps.
If you need more time or expertise, Divi offers category post templates and product category templates freebies in the Elegant Themes blog.
These templates have everything you need - from design to dynamic fields - to give you a beautiful, functional category page template in just a few clicks.
Types of Websites You Can Build with Dynamic Content
The great thing about using dynamic content is that it opens up many new website creation possibilities.
Example: If you want to create a website with real estate listings, you may need to use an IDX plugin to make that happen. You can build that site using dynamic content options without needing an expensive IDX service.
Additionally, you can create websites that feature travel destinations, recipes, automobile dealerships, directories, membership sites and more. Divi's dynamic content can assist in creating websites that wouldn't normally be possible without a plugin.
Overview of Divi's Available Dynamic Content Fields
Divi includes several dynamic content fields at the Module level that vary with each module and location. These dynamic content fields can load content from your database directly onto your Divi site.
The best part is that once you load dynamic content in a Divi Module, you can style it using built-in Divi Builder design settings. But before discussing design, here is a list of each dynamic content field available in Divi and how they are used.
Divi Dynamic Content - Text Fields
Page/Archive Title - This field dynamically pulls your page or post's title. You can use this in any module that contains text. Additionally, it can be used to create a theme builder layout for your posts.
Page Excerpt - This field will display the excerpt entered into the post or page. Like the page/archive title field, it is useful when building a post-page template for your website.
Page Publish Date - Displays your page or post's publication date.
Page Comment Count - Displays the number of comments a post has.
Page Link - Dynamically pull a link to a specific page. This is useful when your site is in development, and you don't want to manually relink pages upon launching your website.
Page Author - Displays the post author dynamically.
Auto Bio - Displays the bio information in an author's profile (if specified).
Site Title - Displays your website's title.
Site Tagline - Displays your website's tagline.
Current Date - Displays the current Date. You can use this to display the Date in your footer to eliminate the need to change it yearly.
Manual Custom Field Name - Display a manual text field. You can specify before and after text and the field name. We'll get more into this later.
Divi Dynamic Content - Image Fields
Featured Image: You can dynamically link the featured image of your page or post to display it in any module containing an image field.
Author Profile Picture: Displays a post author's profile image.
Site Logo: Displays your website's logo defined in Divi → Theme Options.
Creating a Dynamic Content Layout
There are several ways to create a dynamic content layout within Divi. The first is using Divi's Theme Builder. You can create posts, pages, and other types of templates.
Another way is to incorporate dynamic content using Divi's Page Builder. This enables you to have static and dynamic content on the same page.
Divi Theme Builder
Getting started with the Theme Builder is easy.
Navigate to Divi → Theme Builder.
Click the
+
Add New Template button to create your new template.
Once you start the process of building your template, you'll be able to assign dynamic content to your layout.
Example: When building a post template, you'll see some additional dynamic content fields available to build your template, including post content and post title.
As previously mentioned, the Post Title will dynamically pull your post's title into the template. Post Content allows you to pull in the content of your post. You can style the body text, heading text, and the text and link colors.
To learn more about the Divi Theme Builder, please read its documentation.
Divi Page Builder
In addition to creating templates in the Theme Builder, you can use the Divi Page Builder to utilize dynamic content.
Example: You can dynamically link pages using the page title dynamic content option in the Divi button module.
Click the Dynamic icon in the button's link field to pull up the dynamic content options.
You can also use Dynamic Content in image modules and background images to feature the page or post's featured image.
Click on the dynamic content icon in the image preview's top right corner.
Select the Featured Image option.
Divi will dynamically pull your page's Featured Image into the selected image module.
Additionally, you can assign an author's profile picture to an image module. Dynamic Content can also be used in any module that has text options.
This is true for text modules, Blurbs, Accordions, Tabs, Calls to Action, and more. The possibilities are endless.
For instance, the blurb module has several options to add dynamic content, including the title text, body text, image, link, and background image sections.
Custom Fields
There are additional ways to use Dynamic Content in Divi. For example, plugins such as Toolset and Advanced Custom Fields are a good way to create custom websites for real estate agencies, auto dealerships, and more. You can also create your custom fields in Divi, which will expand on Divi's already amazing dynamic content fields.
First, let's look at some plugins that can help you build a custom Divi website to suit your needs.
Dynamic Content with Plugins
Both Toolset and Advanced Custom Fields integrate well with Divi.
You can create custom post types, taxonomies, field groups, and custom fields with both plugins.
An advantage of Toolset is that it allows you to create views to display looped content - similar to a blog roll page.
This allows for custom data queries defined by custom fields. You can pull them into your Divi pages with the Toolset View module.
This allows you to combine your static page content with dynamic content on the same page, using custom fields you create with Toolset.
Advanced Custom Fields works similarly to Toolset, except for creating custom templates.
With ACF, you create field groups with custom fields, but instead of using ACF to create a template, you use custom fields directly through the Divi Builder.
Example: You want to build a furniture staging website to feature different living room groups. You'd start with creating a field group for living rooms.
Then, you'd create fields within the field group to highlight features of your living room. Once your fields are created, you create posts to feature living room groups you'd like to offer for staging.
Finally, you'd use the Divi Theme Builder to create a post template to display your posts.
Adding Custom Fields Manually
Another way to add custom fields is to enter them manually. By default, WordPress gives you the ability to add custom fields. That being said, it is hidden in post preferences.
Create a new post and navigate to your post preferences to activate the feature.
Using the Gutenberg editor, click on the ellipsis menu in the top right corner.
Click on preferences.
Click on panels,
Enable custom fields in the options area. WordPress will prompt you to reload your page.
Click the Enable & Reload button.
Input your data by giving your new field a name and a value.
In this instance, we'd start with Sofa Type. Add as many values as you'd like on separate lines.
The process for displaying your custom fields dynamically is the same as other methods.
Divi Dynamic Content Tips & Best Practices
Don't Forget to Give Your Dynamic Content A Home
When using dynamic content to build a template, include the information you wish to display. As rudimentary as this sounds, it is possible to forget a field, especially if you have created several custom fields.
Give Your Custom Fields a Unique Name
Avoid using similar custom field names that might interfere with Divi's built-in features. For example, if you create a custom image for a field, avoid naming it something similar to a featured image, site logo or author image. Divi might need to help display your content correctly if you name them similarly.
Give Your Dynamic Content Some Space to Breath
How to Add Appropriate Spacing in Dynamic Content for Theme Builder Templates and Page Builder
Dynamic content can add great interest and variety to your website. With the additional use of Theme Builder Templates, you can customize the look and feel of these dynamic elements for a cohesive design. However, when working with dynamic content in the before field, it's important to add an extra space to ensure proper spacing.
Why Adding Spacing Matters
When adding dynamic content to your website, it's important to make sure it blends seamlessly with the rest of your design. This includes adding appropriate spacing to prevent cramped or cluttered appearances. Not adding a space after your dynamic content can cause it to appear too close to surrounding elements and make your design look unbalanced.
How to Add Spacing in Theme Builder Templates
To add a space in your Theme Builder Template, add a space after any information you enter into the before field. This can include text, images, or other dynamic elements. The space will ensure enough room for your dynamic content to breathe and create a more visually appealing design.
For example, using the Page Builder, you have a dynamic gallery of images you want to display on your website. In the before field, you would enter the shortcode for your gallery, followed by a space. This will create a natural separation between your gallery and any surrounding elements on your website.
Adding Spacing in the Page Builder
The same concept applies when adding dynamic content in the Page Builder. Adding a space after your dynamic content will ensure the proper spacing on your website. Without it, the dynamic content may appear too close to other elements on your page.
In the Page Builder, you can add spacing like in the Theme Builder Templates. Add a space after your dynamic content in the before field, automatically creating enough room to display your content properly.
Conclusion
Adding dynamic content to your website can greatly enhance its appearance and functionality. By following these simple steps and adding a space after your dynamic elements in the Theme Builder Templates and Page Builder, you can ensure that your website has proper spacing and a well-designed layout.
Style Your Dynamic Content
When working with dynamic content modules, be sure to add styling like you would with any other module. This way, your dynamic content perfectly matches your site's design.
Continue Learning
If you'd like to learn more about using Divi's dynamic content feature, check out the tutorials from our blog.