Skip to main content

Dynamic Content in Divi 5

Learn how to use Dynamic Content in Divi 5 to populate your page layouts with dynamic content and design choice with global variables.

Updated yesterday

Divi 5 introduces a more structured and scalable approach to working with dynamic content, enabling you to build templates that automatically adapt to your content and design needs.

Dynamic Content in the Element's Content Tab

In the Content tab, dynamic content allows you to integrate real-time data from WordPress, ensuring your layouts remain flexible and content-aware, such as:

  • Page/Archive Title

  • Post or Page Excerpt

  • Post or Page Publish Date

  • Post or Page Comment Count

  • Post or Page Link

  • Post or Page Author

  • Author Bio

  • Site Title

  • Site Tagline

  • Current Date

The Dynamic Content also allows you to display the values of native custom fields, ACF Fields, or Toolset Fields.

Access Dynamic Content in the Element's Content Tab

Note: This applies primarily to text-based modules, such as Text, Blurb, Call to Action, and Button modules, among others.

  1. Open the module's settings by clicking on the Gear Icon or by clicking on the module itself.

  2. In the Content tab, hover over any text-based option, such as Body, Title, or Module Link URL.

  3. Click on the Dynamic Content icon.

    Divi 5 - Access the Dynamic Content

  4. Choose any of the available options.

    Divi 5 - Choose available options for the Dynamic Content

Note: Clicking on the Manage Global Strings option (at the top) will open the Global Variable Manager, where you can define Global Strings that can be used in the Dynamic Content.

Use Case: Author Bio in a Blog Post Template

Let’s say you’re building a blog post template in Divi 5, and you want every post to automatically show the author’s name, publish date, and a short bio pulled from a custom field.

  1. Open the Divi Theme Builder

    • Create or edit the template assigned to All Posts.

    • Add a custom Body layout using the Divi Builder.

  2. Insert Dynamic Content into Modules

    • Add the Post Title Module: Automatically pulls the title of the current post.

    • Add a Text Module for each meta information:

      • Use the dynamic content icon to insert:

        • Author

        • Publish Date

    • Add another Text Module for the author bio:

      • Click the dynamic icon and choose Author Bio.

  3. Style It

    • Add spacing, fonts, icons, or a divider to separate the bio section visually.

In this example, every blog post now dynamically displays its title, author name, publication date, and author bio, eliminating the need for manual updates or duplicate content.

Dynamic Content in the Element's Design Tab

In the Design tab, Divi 5 introduces a new layer of dynamic control: Design Variables. These act as global tokens for values such as colors, fonts, spacing, and text strings.

Instead of manually adding different values for padding, margin, or colors, you reference a variable, allowing you to update the design across your site from a single location.

Whether you're building a post template that pulls in live metadata or using variables to unify styles across modules, Divi 5's dynamic content system helps you build smarter, faster, and more consistently.

Access Dynamic Content in the Element's Design Tab

Note: To use Dynamic Content in any of the design option groups, please make sure that you have created at least one Global Variable. For example, you can create numeric global variables for spacing, font family, colors, and much more.

  1. Open the module's settings by clicking on the Gear Icon or by clicking on the module itself.

  2. In the Design tab, open the Option Group for which you want to use a Global Variable (for example, Spacing option group).

  3. Hover over the option for which you want to set a Global Variable (for example, Padding Top)

  4. Click on the Dynamic Content icon.

    Divi 5 - Access the Dynamic Content in Design Option Groups

  5. Choose the Global Variable you want to use

    Divi 5 - Choose the available Dynamic Content Options in Design Option Groups

Notes:

  • Depending on the option to which Global Variables are applied, only the supported types will be shown. For example, only the Number Global Variable will be displayed if Dynamic Content is used on options such as Spacing or Border.

  • Depending on the supported Global Variable, the Manage Global button will dynamically show:

    • Numbers if the option accepts Numbers

    • Fonts, if the option accepts Fonts

    • Color, if the option accepts Colors

  • Clicking the Manage Global Numbers button opens the Global Variable Manager with the selected type.

Use Case: Branded Button Styles Across a Website

Suppose you're designing a corporate website in Divi 5. You want all buttons to share the same branded look - same color, rounded corners, font, and hover effect - so that if the brand styling ever changes, you only have to update it once.

  1. Define Global Variables

    • Open the Variable Manager from the Visual Builder.

    • Create the following variables:

      • A Color variable named Primary Brand Color and the value #1A73E8.

      • A Number variable named Button Radius and the value 6px.

      • A Font variable named Main Font, and choose the Montserrat font.

      • A Text variable named Button Label, and the value Learn More.

  2. Apply to a Button Module

    • Add a Button Module to any location in your layout.

    • In the Design tab Button

      • Enable the Use Custom Styles for Button option.

      • For the Button Background color, click on the Global option and choose the Primary Brand Color variable.

      • For the Button Text → Button Font, click the Dynamic Content icon and choose the Main Font variable.

      • For the Button Border → Border Radius, hover over any of the four corners, click the Dynamic Content icon, and select the Button Radius variable.

  3. Save as Preset (Optional)

    • After styling the button with global variables, save it as a Preset by clicking on the Default Preset dropdown (top right corner) and choosing New Preset From Current Styles. For more details, please refer to our presets guide.

    • Now, every time you add a button, you can select this preset, and it will inherit all global styles.

  4. Make a Global Change

    • Assuming that your brand color changes to #FF5722.

      • Open the Variable Manager, and update the Color variable called Primary Brand Color.

      • Instantly, all buttons using that variable update across the entire site - no manual edits are needed.

Using this approach, you can create awesome Design Systems that can be updated from a single place. This is especially useful for clients who may rebrand or for maintaining consistency across large-scale designs.

Did this answer your question?