Looking for a quick and simple way to let users download files directly in Divi—without using any plugins? You’re in the right place! In this tutorial, we’ll walk you through how to create a file download button using Divi’s built-in Button Module. No need to mess with PHP, .htaccess, or complicated scripts.

With just a tiny bit of jQuery and a few easy steps, you’ll have a clean, one-click download button ready to go. No coding headaches—just copy, paste, and you’re done! Let’s get started and make file downloading easy for your visitors.

Step 1: Get the File URL from WordPress Media Library

In this step, we’ll grab the file link that we’ll later use for the download button. If you’re unsure where to find the file URL, just follow the instructions below. If you already have the link ready, feel free to skip ahead.

1. Go to your WordPress dashboard and click on Media.
2. Click on the Library to see all your uploaded items.
3. Find and Click on the file you want to use (for example, a PDF).
4. Once it opens, copy the URL shown in the details section (check the screenshot for reference).

Step 2: Open Page in Divi Builder to Add Download Button

To place the file download button, we first need to head into the WordPress dashboard and open the specific page where it should appear.

1. Click on Pages from the dashboard menu.
2. Then click on All Pages to see the list.
3. Find the page where you want to add the button and click the Edit option (refer to the screenshot).
4. Now click on the Edit with The Divi Builder button to open the page in Divi.

Step 3: Add a Button Module for file Download

Next, scroll to the section where you want to place the direct file download button. We’ll be adding Divi’s built-in Button Module in this spot and later turn it into a functional download button.

1. Click on the Plus (+) icon to add a new module.
2. The Insert Module popup will appear.
3. Type Button into the search bar.
4. Click on the Button Module to add it to the layout.

Step 4: Set Up the Button Module for File Download

Once you’ve added the Button Module, its settings panel should open automatically. If it doesn’t, simply click on the gear icon to open the settings manually. Now let’s adjust the necessary options to make this a working download button:

1. Click the Settings Gear Icon button of the Button Module.
2. In the Content tab, select the Text section.
3. Type in the button label—for example, “Download File Now”.
4. Next, go to the Link section.
5. Paste the URL of the file (PDF, image, or any document) into the Button Link URL field.
6. Change the Button Link Target to Open in a New Tab.

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

Step 5: Assign a Custom CSS Class to the Button

To make the download functionality work with our code, we need to add a custom CSS class to the button from the Advanced tab. Here’s how to do it:

1. Click on the Advanced tab in the Button Module settings.
2. Choose the CSS ID & Classes section.
3. Copy this class name: divi-cake-download and paste it into the CSS Class field.
4. Finally, click the Tick Mark (✔) to save your changes.

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

Want to tweak the look of your button? Since we’re using Divi’s built-in Button Module, you can easily change its color, size, spacing, and more to match your website’s style.
In this step, we’ll add some space between the heading and the button by adjusting the padding.

1. Click on the Heading Settings (gear icon).
2. Go to the Design tab.
3. Open the Spacing section.
4. Set the Bottom Padding to 30px (or whatever works best for your layout).
5. Click the Tick Mark (✔) to save your changes.

Learn More: Add Divi Button Modules Side by Side

Step 7: Insert JavaScript Code to Enable File Download

Now that everything is set up, the final step is to add a small JavaScript snippet to make the download button actually work. Follow the steps below:

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>

1. Go back to your WordPress dashboard.
2. Click on Divi in the left-hand menu.
3. Select Theme Options and Inside Theme Options, go to the Integration tab.
4. Scroll down and Paste the copied JavaScript code into the Add code to the <head> of your blog section.
5. Click the Save button to apply the changes.

Final Result

The GIF below shows the working example of a direct file download button added in the Divi Theme—achieved entirely with code and no plugins required. It’s clean, simple, and fully functional!

Conclusion

Congratulations! You’ve successfully added a direct file download button to your Divi website without relying on any plugins. By following just a few simple steps and using Divi’s built-in Button Module along with a small snippet of jQuery, you’ve created a clean, one-click download feature. This solution ensures your website remains lightweight and efficient, without the need for complex scripts or additional plugins.

Now, your visitors can easily download files with a seamless and functional experience. This method not only streamlines the process but also enhances your site’s user-friendliness. With minimal effort, you’ve equipped your site with a powerful feature that’s both practical and simple to implement. Enjoy the smooth, plugin-free download button, and continue to optimize your website for a better user experience! No plugins, just pure functionality—transform your website with this simple trick!

Don’t forget to subscribe for more updates, tips, and tutorials to take your Divi website to the next level!

Read More: How to Add a Download Image Button in Divi