How to Add a Download Image Button in Divi

Create a one-click image download button in Divi using a simple jQuery snippet, without plugins or complex coding.

Overview

Want to add a one-click image download button in Divi without installing any plugins? Normally, enabling direct downloads requires complex coding, but we’ve got a simple solution for you!

In this step-by-step guide, you’ll learn how to turn Divi’s Button Module into a direct download button using a small snippet of jQuery—no need to edit PHP files or modify .htaccess. Just copy and paste the provided code, and your download button will be ready in minutes!

Follow along, and by the end of this tutorial, you’ll have a fully functional image download button that works seamlessly with Divi Theme. Let’s get started!

Step 1: Accessing the Page for Global Module

To add a direct download button, we need to navigate to the page where we want to add the download button.

Click on Pages.
Click on All Pages.
Select the page (as we selected our homepage) and click on the Edit button, as shown in the screenshot below.
Click on the Edit with The Divi Builder button.

Navigate to the desired page in WordPress, select it from All Pages, and open it in Divi Builder to add a direct download button.

Step 2: Insert a Button Module for the Download Button

Once the page opens in the Divi Visual Builder (as shown in the screenshot), select the section where you want to add the direct download button. Then, insert the Button Module, which we will change into an image download button.

Click on the Plus (+) Icon.
The Insert Module window will appear.
Search for Button in the search bar.
Click on the Button Module to insert it.

Add a Button Module in Divi Visual Builder by clicking the Plus icon, searching for "Button," and inserting it into the desired section.

Step 3: Configure the Button Module for Image Download

Once you insert the Button Module, its settings will automatically open. Now, follow these steps to customize it:

Go to the Content tab. Click on the Text option.
Enter the button name, like “Download Now”.
Click on the Link option.
Paste the URL of the image you want to offer for download into the Button Link URL box.
Set the Button Link Target to Open in a New Tab.

Customize the Divi Button Module by setting the button text, adding the image URL in the Button Link field, and enabling "Open in a New Tab" under the Link settings.

Step 4: How to Find an Image URL in WordPress

If you don’t know how to find an image URL, come to your WordPress Dashboard and follow these steps. If you already have the URL, you can skip this part.

Open your WordPress dashboard in a new tab and click on Media.
Click on Library to view all uploaded files.
Select the image you need and open its settings.
Copy the URL from the provided field (as shown in the screenshot).

Copying an image URL from the WordPress Media Library by selecting an image and viewing its settings in the dashboard.

Step 5: Add a Custom CSS Class to the Button

Now, we’ll continue configuring the button by adding a custom CSS class in the Advanced tab. Follow these steps:

Click on the Advanced tab.
Select the CSS ID & Classes option.
Copy the CSS class “divi-cake-download” and paste it into the CSS Class box.
Click on the Tick Mark (✔) to save the button settings.
Save the entire page by clicking the Save button, as shown in the screenshots.

Adding the custom CSS class "divi-cake-download" to a button in Divi by navigating to the Advanced tab and updating the CSS Class settings.

Step 6: Customize the Button’s Design (Optional)

If you want to customize the button—like changing its color, size, or style—you can do so without any issues. Since this is Divi’s own Button Module, you have full control over its design. Feel free to adjust it according to your website’s design preferences.

Learn More: Add Divi Button Modules Side by Side

Step 7: Add JavaScript Code to Enable File Download

After making all the changes, return to the WordPress dashboard to add a small JavaScript snippet that enables the download functionality.

Copy the following JavaScript code

<script>
jQuery(document).ready(function(){
  var downloadButton = jQuery('.divi-cake-download');
    
  downloadButton.each(function(index) {
    jQuery(this).attr('download', '');
  });
});
</script>

In the WordPress dashboard, click on Divi.
Select Theme Options.
In Divi Theme Options, go to the Integration tab.
Scroll down and Paste the copied JavaScript code into the Add code to the <head> of your blog section.
Click the Save button, as shown in the screenshot.

Inserting JavaScript code in the Divi Theme Options Integration tab to enable file download functionality for a custom button.

Final Result

The GIF below demonstrates the successful implementation of a direct download button in the Divi Theme using code—without the need for any plugins.

Conclusion

And that’s it! You’ve successfully added a direct image download button in Divi—without using any extra plugins or complicated coding. By following this guide, you’ve learned how to insert a button module, customize its settings, and add a simple JavaScript snippet to enable the download functionality.

Now, your visitors can download images instantly with just one click, improving their user experience and making your site even more interactive. Want to customize the button further? Feel free to tweak the design to match your website’s style!

If you found this tutorial helpful, stay tuned for more Divi tips and tricks.

Learn More: Creating Effective Call-To-Actions Buttons with Divi

0 Comments