If your website offers downloaded files such as software, eBooks, PDFs, etc., then you are in the right article. One effective way to accomplish this within the Divi is by incorporating direct download buttons.
This article will guide you through the process of creating a direct download button within Divi. This user-friendly option allows visitors to download your files with a single click, enhancing their experience and streamlining the process.
Steps to Create a Direct Download Button in Divi
Step 1: Add the Button Module
First, you need to add the Button module to your Divi Builder editor.
Go to your Divi Builder editor by creating a new post type (page/post) or selecting the existing one. Once you enter the Divi editor, add a Button module to the canvas area. Afterward, you can edit and style your module as you prefer.
Add the Button URL
Next, we’re going to add the file URL to the button. The URL should be the full URL for the file to download. In this example, we get the URL from our PDF file in the media library. Simply copy the file URL and paste it into the Button Link URL input field.
Just one more thing, kindly target the button link to In The New Tab. It ensures continuity of services and a smooth user experience (fallback).
Add the CSS Class
Please assign this CSS class wpp-direct-download-button to the Button module settings (Advanced tab -> CSS ID & Classes -> CSS Class field).
Step 2: Add the JavaScript Code
Go to the Divi Theme Options page (Divi -> Theme Options) and navigate to the Integration tab. Next, paste the JavaScript snippet below into the Add code to the < head > of your blog field.
<script>
jQuery(document).ready(function() {
var downloadButton = jQuery('.wpp-direct-download-button');
downloadButton.each(function(index) {
jQuery(this).attr('download', '');
});
});
</script>
Once the JavaScript snippet is added, apply the changes by clicking the Save Changes button.
It is done. After making changes in the Divi editor, please save the page, and leave the Visual Builder. You may view the final result by clicking the “Direct Download” button you’ve just created.
Note: (Download Popups) A “What do you want to do with this file?”- style popup window may appear when you click on a direct download link in some browsers. The link is still functional. For purposes of security, the notice is required. An example of a popup window that appears when you click on a direct button link to download a PDF file looks like this:
The Bottom Line
With just a CSS class and a little JavaScript, you can make a direct download button in Divi, as demonstrated in this post.
Website owners, content providers, and users alike can reap the benefits of direct download buttons’ enhanced usability, higher conversion rates, and simplified material access.
