Source: https://divicake.com/blog/add-image-download-button-wordpress-divi/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # How to Add a Download Image Button in Divi By Divi Cake·28 March 2025·Updated 19 August 2026·4 min read How to Add a Download Image 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: Accessing the Page for Global Module](https://divicake.com#step-1-accessing-the-page-for-global-module) - [Step 2: Insert a Button Module for the Download Button](https://divicake.com#step-2-insert-a-button-module-for-the-download-button) - [Step 3: Configure the Button Module for Image Download](https://divicake.com#step-3-configure-the-button-module-for-image-download) - [Step 4: How to Find an Image URL in WordPress](https://divicake.com#step-4-how-to-find-an-image-url-in-wordpress) - [Step 5: Add a Custom CSS Class to the Button](https://divicake.com#step-5-add-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: Add JavaScript Code to Enable File Download](https://divicake.com#step-7-add-javascript-code-to-enable-file-download) - [Conclusion](https://divicake.com#conclusion) Want to add a one-click image download button in [Divi](https://divicake.com/go/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](https://divicake.com/blog/divi-purchase-installation-and-setup/). 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](https://divicake.com/blog/what-is-divi-wordpress/) (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](https://divicake.com/go/divi-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](https://divicake.com/blog/wordpress-tutorial/) 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](https://divicake.com/blog/how-to-add-custom-css-to-divi/) 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](https://divicake.com/blog/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 - 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 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. ## Conclusion And that’s it! You’ve successfully added a direct image download button in [Divi](https://divicake.com/go/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](https://divicake.com/blog/divi-cta-button-design/) ## 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/)