Overview
If you have been wondering how to automatically add an audio player in Divi with dynamic content from a custom field, rejoice! We have the solution! The Divi Dynamic Content Helper plugin by Pee-Aye Creative automatically adds a dynamic content icon to the default Divi Audio module. This means you can add the standard Divi Audio module to any page, post, or Theme Builder template and paste an audio URL or upload a file into a custom field, and it will always play the correct audio! Save yourself a lot of hassle, or just use this method to keep clients out of the builder. Our plugin is the only solution on the market for this, so we hope you appreciate and enjoy this exciting advanced feature!
This video and full written guide below will show you step by step how to set up the custom fields and use the new Divi Audio module dynamic content setting.
NOTE: This feature is only available in Divi 4. Since Divi 5 includes this functionality by default, there’s no need for our plugin to add it there.
NOTE: This video is from the release post for version 1.2 update which includes the new Code Module dynamic content.
What Could You Do With Dynamic Code?
This plugin automatically adds a dynamic content icon to the default Divi 4 Code module. This allows you to connect the module to any custom field containing an embed code or iframe, and it will display dynamically on the frontend. You can also use it to run code, such as CSS and jQuery, directly on the page.
Embed Anything In Your Site With Iframes
You can display anything that has an iframe embed code!
- YouTube Videos
- Rumble Videos
- Wistia Videos
- Vimeo Videos
- Google Map
- Facebook Posts
- Twitter Tweets
- Pinterest Pins
- Audio players
- Signup forms
- Mailchimp Forms
- Spotify Songs
- Spotify Playlists
Run Code On Page From Custom Field!
This versatile Code module unlocks exciting possibilities. You can now add CSS or jQuery code to a custom field, link the Code module to it, and have the code execute on that page!
For example, if I want all Text modules to have a red background on pages with this custom field, I first add the code to the custom field. Then, I connect the Code module to this field. Once you exit the Visual Builder, the code runs and the Text modules display with a red background!
While this wasn’t the primary reason for including dynamic content in the Code module, it’s a fun bonus that it works. I’m sure some users will discover great use cases for this! I’ve tested it with HTML, CSS, and jQuery—all worked perfectly!
1. Set Up The Custom Fields
Before you can automatically pull code into the Divi Code module with dynamic content, you must first set up the custom field to provide a source for the code.
Check Our Custom Field Docs
Please refer to our Custom Fields documentation to learn more about how to set them up.
Supported/Tested Custom Fields
The Code module dynamic content feature will work great with most if not all custom field types because it simply pulls in the iframe or code from the field to the module.
Here is a list of tested and officially supported custom field options:
- WordPress Custom Fields
- Advanced Custom Fields
- Pods
- Meta Box
- Toolset
Each of these methods were tested in the following scenarios:
- Code Module Added To Page Or Post
- code Module Added To Divi Theme Builder Template Assigned To Page Or Post
Other plugins and custom field solutions and scenarios may work as well, but are not tested or guaranteed.
2. Add/Open The Code Module
The next step is to add the Divi Code module to your layout. Simply go to your Visual Builder and click the gray plus (+) icon to add a new module and select the Code module.
3. Click The Dynamic Icon Button
After adding a new Code module, you will see the new dynamic content icon in the top-right corner of the code input field. NOTE: This icon only appears when the Divi Dynamic Helper plugin is active.
4. Select The Custom Field
When you click the dynamic content icon, a new window will appear with a list of all the available custom fields on the site. Fields added via the standard WordPress editor or with plugins like Pods, Meta Box, and Toolset will appear under the gray “Custom Fields” heading, while fields added with the ACF plugin will appear under a separate section. You can now select the custom field that you have set up and designated for the code.
5. Save The Custom Field Selection
Once you select the code custom field, another window will appear. This window is not relevant in our case, so just ignore it and click the green checkmark to save/close the window.
6. Save The Module Settings
At this point, you are finished with the setup. Be sure to save the module settings, and when you exit the builder, you will see the Divi Code module contains the result of whatever iframe or embed code you added from the custom field.
