Using Divi Dynamic Content Options | Scoreapps

Using Divi Dynamic Content Options

Divi dynamic content options allow you to seamlessly extract content from your database and display it.

Using Dynamic Content Options in Divi

The function ofDynamic Content of Diviallows you to turn any Divi module into a dynamic element that extracts information directly from your website's database through:

  • Publications metadata (Post Meta)

  • Page titles

  • Featured images

Divi allows you to use dynamic content in any module where content (text, URLs, images, etc.).

What is dynamic content?

dynamic content

Thedynamic contentis information that is extracted from your website's database and displayed on the visible part of the site (frontend).

Types of data that can be used include:

  • Page titles and publications

  • Excerpts (excerpts)

  • Featured images

  • Date of publication

Any of these types of data can be displayed dynamically on a WordPress site. In addition, dynamic content can also come fromcustom fieldsortypes of custom content.

You can createcustom fieldswith the help of plugins such asAdvanced Custom Fields (ACF)and/orToolset, to display all kinds of content.

In Divi, dynamic content can be used in all builder modules. Onespecial dynamic content iconindicates which elements can be dynamic.

With theTheme Builder by Divi, you can create dynamic templates for posts, search results pages, category pages, and more, all while designing in real time with theVisual Builderof Divi.

Where to find and use dynamic content in Divi

There are several places where you can use dynamic content in Divi. Here are the most common:

1. Divi Default Dynamic Modules

Some Divi Builder modules are already dynamic by default. These modules automatically extract data from your site. Examples:

  • Blog: Displays a list of site publications in grid or full width format.

  • Title of publication: dynamically extracts the title of the publication.

  • Content of the publication(The Theme Builder only): Displays the content of the publication.

  • Navigation of publications: generates links to the next and previous publication.

  • Publications slider: creates slides with user-specified publications.

2. Fields of content in Divi modules

In addition to dynamic modules, you can add dynamic content to any content input area within a Divi module.

This means that any module with text, links or images can use dynamic content.

To access dynamic content:

  1. Hover your cursor over a content field in the module settings.

  2. If that field can use dynamic content, you will see thedynamic content icon.

  3. Clicking on the icon will appear the list of dynamic data available on your site.

dynamic content icon

3. Divi Theme Builder Templates

TheTheme Builder by Diviis where dynamic content really shows its potential. With it, you can design global templates (place-wide) templates that extract dynamic content, giving you full control over the design of your entire website using Divi's visual builder.

add a new template

You can create templates for:

  • Publications (Posts)

  • Category pages

  • Author pages

  • Tag pages (Tags)

  • Projects

  • Search results

  • Pages 404

Thetemplate adjustmentsof Divi allow you to assign specific conditions, such as applying a template to: All pages, specific pages, children on a specific page

This gives you the flexibility to customize the design precisely according to the structure of your site.

template settings

In addition, you can useTheme Builder packageswhich can be easily downloaded from Elegant Themes blog. With a few clicks, you can import these packages and apply dynamic content to the items included in the layouts.

4. Header and footer template content

Divi also allows you to addheader and footer templateswithin the Theme Builder.

You can:

  • Download a header/foot package from the official blog, or

  • Create your own from scratch.

When building headers, you can use the dynamic field ofsite logowhich allows you to automatically insert a dynamic image showing your brand logo.

Example:

1. Click onDynamic Content iconin a menu or image module.

2. Select the fieldSite logo.

In doing so will automatically insert the logo you have assigned into theDivi theme options.

Divi site logo

Similarly, you can use the field ofDynamic date of Divito show thecurrent date at the footerfrom your site.
This is useful foravoid having to manually update the date each year.

current date

4. Content of templates for blog posts in Divi

You can build apublication templateusingdynamic content fieldsto extract: The title of the publication, the content, the featured image, the metadata of the publication.

post dynamic fields

This is ideal for maintainingvisual coherencein all publications on the site.

If you don't have time to create your template from scratch,Diviions make your job easier. In the blog ofElegant Themesyou can findbeautiful dynamic publication templatesready to download.

5. File Templates (Archive Templates) in Divi

In addition to post templates, Divi lets you createvarious file templates, including:

  • Author archives

  • Category pages

  • Archival pages by date

  • List of projects

  • Tag archival pages

Creating file templates is a great way to display posts within a specific category.
It is a step that is often overlooked when building a website, although it iskey to visual and professional credibilityof your brand.
Thanks to Divi, you can createstunning category pagesin a few steps.

category page templates

If you need more time or experience, Elegant Themes blog offersFree templates for publications by categoryandproduct categories.

These templates already include everything you need: design, dynamic fields and functional structure, so you can have aprofessional and attractive category pagewith just a few clicks.

Types of websites you can build with dynamic content

Divi websites

The great advantage of dynamic content is thatgreatly expands the possibilitiesweb creation with Divi.

Example:If you want to create a website withreal estate listings, you would normally need aIDX pluginto achieve this.
However, withDivi Dynamic Content Options, you can build that kind of sitewithout costly IDX service.

In addition, you can create websites focused on:Tourist destinations, rechoes, ccar oncessionaires, ddirectories, sMembership sites, andmuch more.

Divi dynamic content allows you to create sites that would otherwise require additional plugins.
This gives youmore freedom and flexibilityreducing costs and simplifying site development.


Summary of dynamic content fields available in Divi

Divi includes several fields of dynamic content at module level that vary by module and location. These dynamic content fields can upload content from your database directly to your Divi site.

The best part is that once you upload dynamic content into a Divi module, you can style it using the design configurations built into Divi Builder. But before we talk about design, here is a list of each dynamic content field available in Divi and how they are used.

Divi Dynamic Content - Text Fields

  1. Page title/file- This field dynamically extracts the title of your page or publication. You can use this in any module containing text. In addition, it is useful for creating a template with the Theme Builder for your posts.

  2. Excerpt from page- This field will display the excerpt entered in the publication or page. Like the page title/file field, it is useful for building a page template for your site.

  3. Date of publication- Displays the date of publication of the page or publication.

  4. Number of page comments- Displays the number of comments a post has.

  5. Page link- Dynamically extract a link to a specific page. This is useful when your site is in development and you do not want to re-link pages manually when launching the site.

  6. Author of the page- Dynamically shows the author of the publication.

  7. Automatic biography- Displays the biographical information in an author's profile (if specified).

  8. Title of the site- Displays the title of your website.

  9. Site motto- Displays the motto of your website.

  10. Current date- Displays the current date. You can use this to show the date in your footer to eliminate the need to change it each year.

  11. Manual custom field name- Displays a manual text field. You can specify text before and after and the name of the field. We will go deeper into this later.

Divi Dynamic Content - Image Fields

  1. Featured image- You can dynamically link the featured image on your page or post to display it in any module containing an image field.

  2. Author's profile photo- Displays the profile picture of the author of a publication.

  3. Site logo- Displays the logo of your website defined in Divi → Topic Options.

Creating a dynamic content design

There are several ways to create a design with dynamic content within Divi. The first is using Divi Theme Builder. You can create posts, pages, and other types of templates.

Another way is to incorporate dynamic content using Divi Page Builder. This allows you to have static and dynamic content on the same page.

Divi Theme Builder

Getting started with the Theme Builder is easy.

1. Sail toDivi → Theme Builder.

2. Click on the + buttonAdd new templateto create your new template.

add new template

Once you start building your template, you can assign dynamic content to your design.

Example:When you create a post template, you will see some additional fields of dynamic content available to build your template, including publication content and post title.

As mentioned above, the Title of the publication will dynamically extract the title of the publication for the template. The Content of the publication allows you to extract the content of your post. You can stylize the body text, header text, and text and link colors.

To learn more about Divi's Theme Builder, please read your documentation.

Divi Page Builder

In addition to creating templates in the Theme Builder, you can use Divi Page Builder to use dynamic content.

Example:You can dynamically link pages using the page title dynamic content option in the button module.

Click ondynamic iconin the link field to display the dynamic content options.

dynamic button

You can also usedynamic contentin image modules and in background images to display the featured image of the page or publication.

1. Click ondynamic content iconin the upper-right corner of the image preview.

2. Select the Featured Image option.

Divi will dynamically extract the Featured Image from your page and insert it into the selected image module.

In addition, 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.
section background image

In addition, 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, Accords, Tabs, Calls to Action and more. The possibilities are endless.

For example, the Blurb module has several options for adding dynamic content, including title text, body text, image, link, and background image sections.

Blurb Dynamic Options

blurb dynamic options

Custom fields

There are additional ways to useDynamic Contentin Divi. For example, plugins such as Toolset and Advanced Custom Fields are a good way to create custom websites for real estate agencies, car dealers and more. You can also create your own custom fields in Divi, which will expand Divi's already incredible dynamic content fields.

First, let's look at some plugins that can help you build a custom Divi site for your needs.

Dynamic Content with Plugins

BothToolsetasAdvanced Custom Fieldsintegrate well with Divi.

You can create custom post types, taxonomies, field groups, and custom fields with both plugins.

One advantage of Toolset is that it allows you to create views to display loop content, similar to a blog roll page.This allows custom data queries defined by custom fields. You can extract them on your Divi pages using the Toolset View module.

Toolset view

This allows you to combine the static content of the page with dynamic content on the same page, using custom fields you create with Toolset.

Advanced Custom Fieldsworks similarly to Toolset, except for creating custom templates.

With ACF, you create groups of fields 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 show different groups of living rooms. You would start by creating a group of living room fields.

Then, you would create fields within the group to highlight features of your living room. Once the fields were created, you would create publications to showcase the groups of rooms you want to offer for staging.

Finally, you would use the Divi Theme Builder to create a publishing template to display your posts.

Adding Custom Fields Manually

Another way to add custom fields is by entering them manually. By default, WordPress gives you the ability to add custom fields. Having said that, this option is hidden in the publication preferences.

Create a new post and navigate to post preferences to activate the feature.

1. Using the Gutenberg editor, click the three-point menu in the upper-right corner.

2. ClickPreferences.

Divi dynamic content post preferences

Dynamic content preferences in Divi publications

3. ClickPanels.

4. Activate custom fields in the options area. WordPress will ask you to reload the page.

5. Click the buttonEnable and recharge.

enable custom fields

Enter your data by giving a name and value to your new field.

In this case, we would start withType of sofa. Add as many values as you like, each in a separate line.

name your custom field
Name your custom fieldThe process of displaying your custom fields dynamically is the same as with other methods.

Tips and Best Practices for Divi Dynamic Content

Don't forget to give your dynamic content a place

When using dynamic content to build a template, it includes the information you want to display. However rudimentary as it may seem, 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 may interfere with Divi integrated functions. For example, if you create a custom image for a field, avoid naming it with something similar to prominent image, site logo, or author's image. Divi may have difficulty displaying your content correctly if you name them similarly.

Give your dynamic content room to breathe

How to add an appropriate spacing in the dynamic content for Theme Builder 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 appearance and feel of these dynamic elements for a coherent design. However, when working with dynamic content in the fieldbefore before, it is important to add extra space to ensure proper spacing.

Why it's important to add space

When adding dynamic content to your site, it's important to make sure it integrates seamlessly with the rest of the design. This includes adding an appropriate spacing to avoid tight or saturated appearances. Failure to add a space after your dynamic content can make it appear too close to other elements and make your design unbalanced.

How to add space in Theme Builder templates

To add a space in your Theme Builder template, add a space after any information you enter the fieldbefore before. This may include text, images, or other dynamic elements. Space will ensure enough space 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 fieldbefore beforeyou would enter your gallery shortcode followed by a space. This will create a natural separation between your gallery and any surrounding elements on your site.

Adding space 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 proper spacing on your site. Without it, dynamic content can appear too close to other elements on your page.

In the Page Builder, you can add spacing as well as in Theme Builder templates. Add a space after your dynamic content in the fieldbefore beforeautomatically creating enough space to display your content correctly.

Conclusion

Adding dynamic content to your website can greatly improve its appearance and functionality. By following these simple steps and adding a space after your dynamic elements in the templates of the Theme Builder and Page Builder, you can ensure that your site has a correct spacing and well-structured design.

Stylize your dynamic content

When working with dynamic content modules, be sure to add style as you would with any other module. In this way, your dynamic content will perfectly match your site design.

Continue learning

If you want to learn more about using Divi's dynamic content feature, check out the tutorials on our blog:
  • How to design a dynamic author box for your blog template with Divi
  • Convert the Divi Store module into mobile dynamic product cards
  • How to use Divi Dynamic Content Function to design a dynamic publication design

  • How to customize a Divi product page with online dynamic content

  • How to use dynamic content to create a WooCommerce product information accordion in Divi


    • Popular Articles

    • How to Create an App for Restaurants (with or without Delivery)

      Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...
    • APPS: Radio

      The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...
    • APPS: Webhooks

      The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...
    • APPS: Audio & Music

      How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...
    • QR Promotions

      This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...
    • Related Articles

    • Using Border Options in Divi

      Divi border options allow you to easily add and stylize edges on any item on the page. With Divi Edge Options, it is possible to create truly unique designs for your website. You can apply custom edges to Divi elements, including sections, rows, and ...
    • Using Sizing Options in Divi

      Divi Size Options make it easy to adjust the size of sections, rows, columns and modules in Divi. Divi Size Options make adjusting the size of sections, rows, columns and modules simple. Size is an essential part of creating attractive websites. ...
    • Using Spacing Options in Divi

      It is easy to customize spacing into sections, rows and modules with Divi Spacing Options. Spacing is an important element in web design. It helps organize your content and keep things clear and balanced. With Divi, it is easy to customize spacing in ...
    • Using Divi Transform Options

      Divi transformation options are a set of powerful tools that allow you to manipulate web design in surprising ways, creating depth and attractive visual effects. Divi transformation options allow you to move elements, scale them, rotate them into ...
    • Divi Rows and Row Options

      Therowsare thesecond largest construction blockwithin the Divi builder and can be used in various ways. &;amp;;;;; Rows of Divi and how to use them Therowsare thesecond largest construction blockwithin the Divi builder and can be used ...