How To Add A Download Button To The Divi Audio Module Tutorial by Pee Aye Creative

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

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

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<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. 

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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
4

Last updated May 5, 2022 @ 12:08 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart