All Collections
FAQ's and Troubleshooting
Adding a Download Button Icon to the Divi Audio Module: A Step-by-Step Guide
Adding a Download Button Icon to the Divi Audio Module: A Step-by-Step Guide

Learn the easy steps to enhance your Divi Audio Module by incorporating a Download Button Icon with our comprehensive guide.

Fozla Rabbi avatar
Written by Fozla Rabbi
Updated over a week ago

The download icon will allow the visitors to download audio from the Audio Module. As there is no default option to have a download button in the Audio module, some customization is needed to make it work.

Step 1: Add a Custom CSS Class Name to the Audio Module

  • Navigate to Audio Module Settings > Advanced > CSS ID & Classes > CSS Class.

  • Give the Audio Module with a unique CSS class name; for this example, we'll use "et-audio-download-button." This ensures that the CSS class doesn't interfere with other button modules on your site.

  • If you're unsure about adding a CSS class name, refer to our guide for detailed instructions.

Step 2: Add some JavaScript code to create the functionality

In this step, you'll incorporate a script to enable the download functionality for the icon you will show:

  • From your WordPress Dashboard, navigate to Divi > Theme Options > Integration > "Add code to the < head > of your blog" field, paste the following script:

    var link = $(this).find('.mejs-mediaelement audio').attr('src');
    var downloadLink = $('<a href="'+link+'" class="et-audio-download-link" download="" >Download</a>');
    }, 1000);


Step 3: Add the Custom CSS code to create the icon

We need custom CSS to add an icon and adjust its position. Please go to WordPress Dashboard > Divi > Theme Options > Custom CSS field to make it work. {
position: absolute;
right: -30px;
font-size: 0;
} {
content: "\E092";
font-family: ETModules;
color: #fff;
font-size: 18px !important;
position: relative;
font-weight: bold;

The final result can be seen in the screenshot below:

Did this answer your question?