How to Create a File Download Button with Elementor
This tutorial shows you how to turn a button into a file download button that invites visitors to get different sorts of files, such as eBooks. Your website’s visitors can simply save the files to their computer or any other device with just one click.
Learn how to install a “Download Button” in Elementor without utilising any code or third-party plugins.
The download options are found in the button widget, so if you’re unfamiliar with it, we recommend that you watch a separate button widget tutorial.
As you can see, we already have a button widget on the page that we’ll use to enable our users to get a PDF copy of the course syllabus. All we have to do now is upload our file, and modify the button’s properties to download it when clicked.
We’ll start by uploading the course syllabus file to WordPress’ Media Library. Open the Finder and search for “Dashboard” by holding down Command or Control E. Then, to open it in a new tab, hold down Command or Control, then select Dashboard. Now we’ll go to Media > Library and choose “Add New.”
Note: there is a default maximum upload file size, this will depend on the hosting provider’s settings. This file should not be larger than this, or we’ll get an error message.
We support a wide range of file types, including JPEG, GIF, and MP3. We also have various image, document, audio, and video file types for you to choose from.
The document file for our example will be a PDF Document. We may either click Select File to select the Syllabus file, or drag and drop it straight into the Media Library.
We’ll need to copy the file’s location next so that the button knows where to find it. We’ll click the file to bring up its settings window.
Finally, we’ll click the File URL field and select it before copying it to our clipboard. That’s all there is to it. Let’s go back to the Editor tab now that we’ve finished everything in the Media Library. We’ll then click the button to open its settings and paste the URL we just copied into the link field.
Visitors can download the file directly to their computer or mobile device. Select the gear symbol and then “Custom Attributes” to add a relevant file name. Select “Download,” a pipe symbol, or a vertical bar, and then the file name.
Great, we’ve finished. Now it’s time to update and test everything out. The file downloads immediately and opens with a single click. Everything is working great!
