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 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 video is from the release post for version 1.2 update which includes the new Code Module dynamic content.
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. Please refer to our Custom Fields documentation for more information about what custom fields are and 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.
Well done, you have completed the steps! Now go enjoy the result of this helpful plugin! Be sure to leave us a great 5-star review, it would be very helpful in spreading the word about our plugin. If you need any assistance, you can contact our support any time!