Source: https://divicake.com/blog/add-file-download-button-in-divi/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # How to Add a File Download Button in Divi By Divi Cake·15 April 2025·Updated 19 August 2026·5 min read How to Add a File Download Button in Divi We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: Get the File URL from WordPress Media Library](https://divicake.com#step-1-get-the-file-url-from-wordpress-media-library) - [Step 2: Open Page in Divi Builder to Add Download Button](https://divicake.com#step-2-open-page-in-divi-builder-to-add-download-button) - [Step 3: Add a Button Module for file Download](https://divicake.com#step-3-add-a-button-module-for-file-download) - [Step 4: Set Up the Button Module for File Download](https://divicake.com#step-4-set-up-the-button-module-for-file-download) - [Step 5: Assign a Custom CSS Class to the Button](https://divicake.com#step-5-assign-a-custom-css-class-to-the-button) - [Step 6: Customize the Button’s Design (Optional)](https://divicake.com#step-6-customize-the-buttons-design-optional) - [Step 7: Insert JavaScript Code to Enable File Download](https://divicake.com#step-7-insert-javascript-code-to-enable-file-download) - [Conclusion](https://divicake.com#conclusion) Looking for a quick and simple way to let users download files directly in [Divi](https://divicake.com/go/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](https://divicake.com/blog/how-to-add-php-code-to-the-divi/), .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. - Go to your WordPress dashboard and click on Media. - Click on the Library to see all your uploaded items. - Find and Click on the file you want to use (for example, a PDF). - Once it opens, copy the URL shown in the details section (check the screenshot for reference). Accessing WordPress Media Library to copy the file URL from the details section for creating a direct file download button in Divi. ## 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](https://divicake.com/blog/wordpress-tutorial/) and open the specific page where it should appear. - Click on Pages from the dashboard menu. - Then click on All Pages to see the list. - Find the page where you want to add the button and click the Edit option (refer to the screenshot). - Now click on the Edit with The Divi Builder button to open the page in Divi. Navigating through WordPress dashboard to select and edit a specific page using the Divi Builder for adding a direct file download button. ## 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](https://divicake.com/go/divi-button-module/) in this spot and later turn it into a functional download button. - Click on the Plus (+) icon to add a new module. - The Insert Module popup will appear. - Type Button into the search bar. - Click on the Button Module to add it to the layout. Adding Divi Button Module by clicking the Plus icon and selecting it from the Insert Module popup to create a file download feature. ## 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: - Click the Settings Gear Icon button of the Button Module. - In the Content tab, select the Text section. - Type in the button label for example, “Download File Now”. - Next, go to the Link section. - Paste the URL of the file (PDF, image, or any document) into the Button Link URL field. - Change the Button Link Target to Open in a New Tab. Editing Divi Button Module settings to add file URL, set button label, and enable new tab opening for a direct file download experience. Learn More: [Creating Effective Call-To-Actions Buttons with Divi](https://divicake.com/blog/divi-cta-button-design/) ## 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](https://divicake.com/blog/how-to-add-custom-css-to-divi/) class to the button from the [Advanced tab](https://divicake.com/blog/getting-started-with-divi-advanced-settings/). Here’s how to do it: - Click on the Advanced tab in the Button Module settings. - Choose the CSS ID & Classes section. - Copy this class name: divi-cake-download and paste it into the CSS Class field. - Finally, click the Tick Mark (✔) to save your changes. Navigating to the Advanced tab in Divi Button Module settings to assign the CSS class “divi-cake-download” for enabling file download functionality. ## 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. - Click on the Heading Settings (gear icon). - Go to the Design tab. - Open the Spacing section. - Set the Bottom Padding to 30px (or whatever works best for your layout). - Click the Tick Mark (✔) to save your changes. Adjusting the padding settings in Divi to create space between the heading and download button for a cleaner design. Learn More: [Add Divi Button Modules Side by Side](https://divicake.com/blog/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 - Go back to your WordPress dashboard. - Click on Divi in the left-hand menu. - Select Theme Options and Inside Theme Options, go to the Integration tab. - Scroll down and Paste the copied JavaScript code into the Add code to the of your blog section. - Click the Save button to apply the changes. Inserting custom JavaScript code in Divi Theme Options to activate the file download functionality for the button. ## Conclusion Congratulations! You’ve successfully added a direct file download button to your [Divi](https://divicake.com/go/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](https://divicake.com/blog/how-to-determine-if-a-website-is-built-with-divi/) to the next level! Read More: [How to Add a Download Image Button in Divi](https://divicake.com/blog/add-image-download-button-wordpress-divi/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Blogging [ How to make money with Divi Blogging10 min read ### How to Make Money with Divi Nine ways to earn an income with Divi — affiliate marketing, services, digital products, courses, memberships, sponsored posts and ads — and what your site needs before any of them work. 15 October 2026](https://divicake.com/blog/make-money-with-divi/) [ Customizing Divi for advanced WordPress development projects Blogging4 min read ### Customizing Divi for Advanced WordPress Development Projects Seven ways to take Divi past its stock settings on an advanced build: custom CSS and JavaScript, child themes, integrations, hooks and filters, and performance work. 11 October 2026](https://divicake.com/blog/customizing-divi/) [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/)