In this tutorial we’ll learn how to turn a button into a file download button to prompt visitors to download various types of files, such as zip files or ebook samples. The files can be downloaded easily by your website visitors, with one click, onto a computer or any other device.
The tutorial will cover:
✔︎ Adding files to the Media Library
✔︎ File types allowed
✔︎ Button configuration
✔︎ And much more!
Related Links:
Button Widget Tutorial
Icon Library
Kit Library
Digital School Kit
Supported File Types
Hey there, it’s Aviva from Elementor. Today we’ll learn how to set up a Download button in Elementor, without using any code or external plugins.
We can use buttons in a variety of settings, to prompt visitors to download various types of files, such as a zip file to download multiple files at once, or an ebook sample. The files can be downloaded to a computer or any other device.
The download settings are located within the button widget, so if you’re not yet familiar with this widget, we recommend you first watch our dedicated button widget tutorial, linked below in the description.
For this tutorial we’ll use the Mobile App Design course page from the Digital School Kit, which you can find in the Elementor library. I’ve gone ahead, and made a few changes to the content and style, to reflect my website’s needs.
As you can see, we already have a button widget placed here on the page, which we’ll configure to allow our users to download a PDF file of the course Syllabus.
So all we need to do is upload our file, and edit the button settings to download it, upon click.
We’ll start by uploading the Course syllabus file to the WordPress Media Library. Hold down Command or Control E to launch the Finder, and type in “Dashboard.” Then hold down Command or Control, while selecting Dashboard, to open it in a new tab. Now we’ll go to Media > Library, and click Add new.
Note that there is a default maximum upload file size, which depends on the hosting provider’s settings. The file should not exceed this size, or we will receive an error message.
We have many different file types to choose from, including various Image, Document, Audio, and Video file types. See the link in the description for the full list of file types supported.
We’ll be using a PDF Document file for our example. We can click Select File to choose the Syllabus file, or drag and drop it straight into the Media Library. Cool.
Next we’ll need to copy the file’s location, so we can tell the button where to find it. We’ll click the file to enter its settings.
And now we’ll click the File URL field, select it, and copy it to our clipboard. Great. That’s all we need from the Media Library, so let’s head back to the Editor tab. Next we’ll click the button to enter its settings, and in the link field, paste the URL that we just copied.
We’ll set it so that our visitors can download it directly to their computer or mobile device with a relevant file name. To do this, we’ll click the gear icon, and in Custom Attributes, type Download, the pipe symbol, or vertical bar, and the file name.
Great, we’re all set. Now Update, Preview, and let’s test it out. The file downloads straight away, and opens in one click. Perfect!
And that’s it. Now you know how to create a Download Button in Elementor. So go ahead and share your download files with your website visitors.
How will you use the download button? Let us know in the comments below.
For more tutorials, subscribe to our Youtube channel and check out the Elementor Academy. Thanks for watching.
