How to Create a Direct Download Button in Divi

by | May 15, 2019 | Divi Tutorial | 7 comments

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:

  1. Add the JQuery code below to Divi > Theme Options > Integration panel in the <head> section:

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