How to Create a Direct Download Button in Divi
In this tutorial I show you How to Create a Direct Download Button in Divi. It’s a great way to allow website users to click a button, link or any other element in Divi to immediately download a file. I often use this on client sites for customers downloading pdf’s or docs but in this tutorial, I’ll show you that you can actually use it to quickly download ANY file whether it’s an image, video or other file type.
There are only 2 steps to this:
- Add the JQuery code below to Divi > Theme Options > Integration panel in the <head> section:
- Then add the class to the button (or any Divi module with a link) via Advanced > CSS ID & Classes > CSS Class
And that’s it! You now have a slick direct download button. Also as shown in the video, you can do this as a text link by adding the class to a link in the text using inline CSS. Get the code below.
Like this tutorial? You’ll love my CSS Course.
Use coupon code “CSS30” for $30 OFF at checkout!
Here’s the JQuery Code:
<script>
jQuery(document).ready(function() {
var downloadButton = jQuery('.download-button');
downloadButton.each(function(index) {
jQuery(this).attr('download', '');
});
});
</script>
Here’s the text used in the video to add the download button to a text link:
To download this document - <a href="FILE-URL-HERE" class="download-button">CLICK HERE</a>
Links mentioned in the video:
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Perfect! Thank you! ?
Hey Josh
Great tutorial! Can you make one using Bloom’s locked content module so the file automatically downloads when you submit your email (as opposed to going to a separate download now button)?
Would love to be able to do that 🙂
To be honest, I’ve never used Bloom 🙂 So I’m actually not sure but I imagine that can be done.
Just what I was after! Thanks so much!
Thanks a million sir. I was actually trying to add a download button to divi audio module and I found it so difficult.
But after this tutorial, it was a piece of cake,
Thanks A milliion Sir, I really appreciate.
It does its work! Thanks
THANK YOU. This was impossible to find elsewhere!!