The Divi Audio module lets you embed audio files directly into your page with a simple, built-in player. It supports popular formats and includes controls for play, pause, and volume, making it ideal for podcasts, music tracks, or audio messages.
Add The Divi Audio Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus
icon to insert a Row.Click the Gray Plus
icon inside the Row, which will show the list of all available Divi modules.Find the Audio module and click on it to load it. Alternatively, you can use the Search option to find it.
{Gif here}
The Divi Audio Module Use Cases
Music Portfolios for Artists: Musicians can use the Audio module to display tracks, albums, or samples.
Educational Audio Content: Teachers, trainers, or course creators can embed lecture recordings, language learning exercises, or tutorials.
Sound Effects or Audio Samples: For businesses selling sound effects, stock audio, or voice-over services, the Audio module can display sample tracks.
Audio Module Settings Breakdown
Once you've added the Audio module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
In the Content tab, you can upload your audio file, add a title, artist’s name, and album’s name, choose a cover, and customize the background options.
Text - Choose the title of the Audio file to be displayed by the Audio module.
Audio - Upload the Audio file that is going to be played by the Audio module.
Image - Choose the Cover image related to your audio file. This can be an album cover.
Link - Make the entire Audio module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Audio module's background styles.
Admin Label - Choose the Audio module's label text to assist in keeping things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Audio module are in this tab.
Image - Choose the Audio module's Icon design options.
Text - Choose the overall Audio module's text styles for this module.
Title Text - Choose the Audio module's title styles.
Caption Text - Choose the Audio module's caption text styles.
Sizing - Choose the Audio module's sizing.
Spacing - Choose the Audio module's spacing.
Border - Choose the Audio module's border styles.
Box Shadow - Choose the Audio module's Box Shadow styles.
Filters - Choose the Audio module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Audio module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Audio module's animation styles, adding personality and interactivity while keeping a polished, professional feel.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Audio module, enabling advanced styling that perfectly aligns with your vision.
Visibility - Choose the Audio's module visibility based on different devices.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Transitions - Choose how long Audio's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Audio's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Audio module behaves and transforms during scrolling.
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
