Instant Download Button for Divi-5

How to Add an Instant Download to a Button in Divi

You can make a Divi button trigger an instant file download the moment a visitor clicks it. Divi does not do this on its own. A standard button links to a file and the browser decides whether to open it or download it, which often means the file opens in the same tab and the visitor loses the page.

This tutorial walks through a self-contained solution using a small script, the Divi 5 attributes panel, and the WPCode plugin to hold the code. It works on any Divi 5 site.

How This Method Works

You give your Divi button an ID of download-btn. A script finds that button, cancels the default link behavior, and forces the file to download. It also opens the file in a new tab as a fallback so the visitor still gets the file if their browser blocks the direct download. The visitor clicks one button and the file saves to their device.

What You Need

You need a Divi 5 site. You need the WPCode plugin installed, which is free. You need a button module linked to the file you want people to download, such as a PDF, image, or ZIP.

Step 1: Link Your Button to the File

Add a Button module to your page. Open the button settings and set the button link to the direct URL of your file. Upload the file to your Media Library first if you have not already, then copy its file URL and paste it into the button link field.

Step 2: Add the ID to Your Button in Divi 5

Divi 5 moved custom classes and IDs into the attributes panel. With your button selected, open the Advanced tab, then open Attributes. Click Add Attribute. Select ID as the attribute type, then set the value to download-btn. Save.

The script targets the download-btn ID, so the value has to match exactly. If you want more than one download button on the same page, use a class instead of an ID and adjust the selector in the script accordingly.

Step 3: Add the Script with WPCode

We use the WPCode plugin to hold the snippet so you are not editing theme files. In your WordPress dashboard go to Code Snippets, then Add Snippet, then Add Your Custom Code. Give it a name like Divi Instant Download. Set the code type to HTML Snippet. Paste this in:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var links = document.querySelectorAll('#download-btn a, a#download-btn, #download-btn.et_pb_button');
  links.forEach(function (link) {
    if (link.tagName !== 'A') return;
    var url = link.getAttribute('href');
    link.removeAttribute('download');
    link.addEventListener('click', function (e) {
      e.preventDefault();
      window.open(url, '_blank');
      var a = document.createElement('a');
      a.href = url;
      a.setAttribute('download', '');
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    });
  });
});
</script>

Set the insert location to Site Wide Footer so the script loads after the button on the page. Toggle the snippet to Active and save. If you only need it on one page, use WPCode’s location and conditional logic settings to limit where it runs.

Step 4: Test on the Live Page

Open the published page in a normal browser tab, not the Divi builder. Click the button. The file should download to your device, and a new tab should open with the file as a fallback. Test on both desktop and mobile since download behavior varies by browser.

Common Issues and Help

The button does nothing.

Confirm the ID value is exactly download-btn with no spaces, and confirm the WPCode snippet is Active.

The file opens instead of downloading.

Some browsers force certain file types to open. The new tab fallback covers this so the visitor still reaches the file. For files hosted on another domain, the browser may ignore the download attribute for security reasons.

It works in the builder but not live, or the reverse.

Always test on the published page in a logged-out or incognito window. The Divi builder does not run front-end scripts the same way.

Reach out to us if you need help integrating this on your site or for general web development and web design assistance.