How to Create a File Download Button in Elementor

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:

Don’t forget to subscribe to our channel!

Timestamps:
00:00 - Intro
00:29 - Prerequisites
01:10 - Add file to media library
01:36 - File types and best practices
02:34 - Button configuration
03:09 - Outro and more examples

[cpalma]

For those that are having trouble with it opening in a new tab instead of downloading, I found out that the URL was missing https which was causing it not to work for me. I switched it from HTTP to HTTPS and it fixed the functionality.

[OmenkaUlonka]

Thank you Aviva! Currently working on a page where people can download audio files.. and was scratching my head wondering how to do it, poised my finger to search on google and the notification came in.😀😀 What a great coincidence!

[getbit]

I've been using add ons for this, but this is so much simpler. Please do more tuts on custom attributes!

[ulrichbecker]

I've been googling for a while before you showed me how to download an image as file, not displaying it: "Custom Attributes". Thanks a lot for that.

[mhthmusicvideos]

Not very clear. Where are you gettng the name 'Syllabus' from? Do you just need a word from the PDF name?

[FahmedulIslamSuheen-ci]

Thanks for this super quick and easy solution.

[JanoToo]

Brilliant! It worked. lightweight, as no add on or plugins required.

[RamakrishnanRukmini]

Very good. I want to know, whether we can add macro enabled excel files?

[borisnieminen]

Excellent, thanks for this easy to follow tutorial. What is the purpose of adding the Attribute?

[CarlOttersen]

Nice. How do you add a capture for visitor's name and email address before download?

[danielhurst]

This is genius!! Thanks for this super quick and easy solution.

[presidentresident]

Can this be combined with a download manager so that things like number of downloads can be tracked?

[albane_designer]

Hi, thanks for the helpful tutorial! Is it possible to sell the download ? I mean to sell the file to download to customers? Thanks for your help!

[jestermestuff]

Works on Chrome but not Firefox or Edge. The latter 2 options opens the file (pdf) on top of my page. Does not allow a save option as a default
FIX - just open in a second window option with no follow and it works

[ccuny]

Very useful for a beginner like me. Thank you. But is it possible using Elementor to have a choice to display the file rather than download it?

[appski-skicoach]

For working you must change : http to https in the button link !

[Hashterix]

Yeah great but what about when you need to lift and shift the site off local or staging over to its live address? You've just pasted a localhost URL as the link to the file. I'm trying to setup every link through the site using internal URL dynamic tags so that when it comes to shift the site over to its live domain, everything updates automatically and keeps working. This method surely means you have to manually update every single download button through the site during deployment?? Surely there is a dynamic method?

[andrewdowniephd]

Thanks for this tutorial. I have tried setting it up but the pdf file opens in the browser rather than downloading. Any ideas where I am possible going wrong?

[ArhamIram-cg]

quick question, is Elementor Pro being used in the video or the normal basic Elementor.
I just started using elementor and I have the basic one, i have been watching YouTube videos online to learn how to use it, and I see everyone has a few extra things, such as inner section, and the ability to ass column, in the "Basic" section, whereas I only have Container.
I would appreciate it if anyone could tell me why :)

[A_LINE_Clothing]

It works on preview but when the page is live and public, it doesn't download the file, it just opens a new tab instead. I've tried on Chrome, Edge and Safari and doesn't work on all. Can somebody please help?