Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add A Download Button Icon To The Divi Audio Module

Nelson Miller Profile Orange
In this tutorial I will show you how to add a dynamic download audio button icon to the Divi Audio module.

▶️ Please watch the video above to get all the exciting details! 👆

1. Add A Custom CSS Class To The Divi Audio Module

The first step is to add a custom CSS class to the specific Divi Audio module where you want the download button to appear. This class will be the link between the module and the jQuery and CSS code, which will be added in the next steps.

Open the Audio module settings and go to the Advanced tab to the CSS IDs & Classes toggle. Place the class “pa-audio-download” in the CSS Class input field.

add a custom class to the Divi Audio module to add a download icon

2. Add The jQuery Snippet

Since there is no built-in function for this, we need to create some code that adds a new element to the module, the download button icon. We also need to get the audio file which is added by the user in the module and attach it dynamically to this new download button icon. We are doing these things with the jQuery snippet below.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

<script>
jQuery(document).ready(function(){
var x = setInterval(function(){
jQuery(".pa-audio-download").each(function(){
var link = jQuery(this).find(".mejs-mediaelement audio").attr("src");
jQuery(this).find(".et_audio_container").append('<a href= "'+link+'" class= "pa-audio-download-button"></a>');
jQuery(this).find(".pa-audio-download-button").attr("download", "");
if(jQuery(this).find(".pa-audio-download-button").attr("href") != "undefined"){
clearInterval(x);
}
})
},200)
})
</script>

3. Add the CSS Snippet

After placing the jQuery Snippet, you will not see the download icon yet until you place the CSS. The CSS snippet will position the download icon to the right side of the player. It also defines the download icon, which you are free to change if you prefer a different icon. 

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*style the audio download button*/

.pa-audio-download .et_audio_container {
	position: relative;
}

.pa-audio-download-button {
	position: absolute;
	right: 15px;
	bottom: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pa-audio-download-button:before {
	content: "\e092";
	font-family: ETMODULES;
	color: #fff;
	font-size: 18px;
	position: relative;
	left: -50px;
	font-weight: bold;
}

4. Make Any Final Design Adjustments

Adjust Padding Right

Since we are adding the icon to the right side of the player, it visually makes all the player elements off centered. To solve this, simply add some padding to the right side. I used 110px to make it look correct with the -50px in the snippet above.

Optional Download Icon Styling

If you would like to add an optional background design to the download icon, you can also paste this snippet of CSS code along with the other snippet.

/*add background to download icon*/
.pa-audio-download-button:before {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #000000;
}

Fix Audio Time Position

I noticed (at least on my site) that the time is showing down too far. This seems to be a bug in Divi, but you can solve it with this snippet of CSS.

/*fix for audio time position*/
.et_audio_container .mejs-container .mejs-controls .mejs-time span {
    line-height: 18px!important;
    top: -4px;
    position: relative;
}

Final Result

Here is how your Divi Audio module should look once you complete this tutorial!

add download icon button to the Divi Audio module

FYI: This would go perfectly with our Divi Dynamic Helper plugin to use the Divi Audio module with a custom field. Take a look!

Divi Dynamic Helper Plugin by Pee Aye Creative

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

12 Comments

Comments By Others

  1. Hemant Gaba

    Hi Lauren!

    For opening in new tab, use the following code instead of above one:

    jQuery(document).ready(function(){
    var x = setInterval(function(){
    jQuery(“.pa-audio-download”).each(function(){
    var link = jQuery(this).find(“.mejs-mediaelement audio”).attr(“src”);
    jQuery(this).find(“.et_audio_container”).append(‘‘);
    jQuery(this).find(“.pa-audio-download-button”).attr(“target”, “_blank”);
    if(jQuery(this).find(“.pa-audio-download-button”).attr(“href”) != “undefined”){
    clearInterval(x);
    }
    })
    },200)
    })

    Also, share the URL of the page for the other issue.

    Reply
  2. Lauren

    Hi Nelson,
    Thanks for posting this code! Works great, but I’d like to make 2 adjustments.
    -Instead of downloading, it opens a file in a new window
    -I am having an issue seeing the icon when I view my page. It’s there in Divi but not when I open in a browser.
    Do you know how I might be able to fix these?
    Thanks!

    Reply
  3. Lauren

    Hi Nelson,
    Thank you for posting this tutorial – have used this for my voiceover site. I added a new page today and am seeing two issues. Can you try to help with these?
    One is the same as Katelyn’s above with a tab opening before downloading. The second is with the download icon. When I go to my new page, the icon isn’t showing up (but if I mouse around, I can find the link). I tried changing the background color, thinking it was just a contrast problem, but it wasn’t that.
    Thanks!

    Reply
    • Hemant Gaba

      Hi Lauren!

      Can you share the URL of the page so that I can check further?

      Reply
  4. Abe Buwalda

    This works great on my desktop, however on my mobile phone (Apple 12 Pro max) the download button is above the timeline and counter. Is there a fix for this please?

    Reply
  5. Rob Hurwich

    Nelson, you are a bad-a$$! Like always you made it really easy to drop in the code and it just worked right away perfectly. I tried to do something like this a couple years ago and never could get it working. Thanks so much for your help!

    Reply
  6. Katelyn

    Hi there, thank you for this tutorial! I’m having a downloading issue. I’ll be contacting elegant themes support but thought I’d try here as well. I swear this was working and now it isn’t. I have Divi and everything up to date. When I click the download button it now opens in the browser instead of downloading the file. Not sure why. Do I need to add anything to the jQuery? It is across all browsers, and in private/incognito windows so it’s not a cache issue.

    Reply
    • Hemant Gaba

      Hi Katelyn!

      The download button should work fine with the above jQuery code only. Could you please share the URL of the page so that I can check further?

      Reply
    • Hemant Gaba

      Hi Christopher!

      I have checked and the code content: “\e091”; is not working in your site which is working fine in our text site. To find the cause of the issue, please contact Elegant themes support.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart