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.
You are a legend! Been really scratching my head at this one for a few weeks, i was only having this issue on Mobile which was throwing me off but this fixed it! :)
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!
Yes, your file name is not 'syllabus' it is much longer. I have tried the same and cannot get it to download. I just opens to review. If the file name is test.pdf, what do i enter? I've tried everything, nothing works. So frustrating.
Hi mhthmusicvideos and Flat Spaces, the download file is being pulled from the link field , so you can use any name you'd like in the custom attribute. In this case we named it "Syllabus" to make it easy for our visitors to find and keep track of it after downloading.
@@Elementor I see, thank you, however I still cannot get it to work. I realize this is a simple task but all it does is open the file (in this case pdf) to view. Is there a setting someplace that needs to be addressed? I opened a ticket with elementor about this but have not heard back yet. I appreciate your help. I tried adding the # sign in the link and I thought it worked, but turns out that was not the fix either. Interesting update: I tried it on 5 different sites and it only works on the one site that does not have the most updated version if Elementor Pro (still at 4.3.3). The other 4 sites do have the most updated versions, but the download does not work. What do you think could be wrong?
Hi @@flatspaces3876, make sure you are using "download: in the custom attribute field. If it's still not working, please feel free to post your question on the Elementor forum: forum.elementor.com/getting-started-7/how-to-create-a-file-download-button-tutorial-10152, where you can you can share a screen recording and/or screenshots to help pinpoint the issue.
@borisnieminen677, great! Typing "download" is to get your browser to save it as a file, rather than opening it directly in the browser. Typing the name after is to make sure it's saved with a recognizable file name.
You could use a form -- either in a pop up or new page. Then in the form settings create a "thank you page" that displays after successful submission of the form (that isn't anywhere in your nav). Put the download on the thank you page. If you really want to ensure the email address is real, you could tell your visitors you'll email them the download link. But that can be a bit abrasive (and still circumvented) depending on your relationship so far and the value they've received in exchange. So you'd want to research and test your options.
@@deanontheinterwebs Thanks Dean! Ive tried some plugins that, at a primitive level, do this, but they never feel/look good and are not maintained. This sounds like a good workaround
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
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?
To do that you just skip the last step. Ie, don't add the custom attributes. In that case clicking the button will display the linked file. You should probably change the button text too, as it prompts to "download" the file.
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?
@Hashterix, if it's an internal link, you can click the Dynamic tags icon, select Internal URL, click the wrench icon, select Media, and find and select your downloadable file.
@@Elementor That doesn't work. If you have no value set it'll take you to the Wordpress attachment page (awful/yuck/don't want), and if you set the download value, it doesn't download the file, it downloads the .htm of the attachment page instead!
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?
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 RUclips 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 :)
@user-zz7yg2pv2y we used Elementor Pro, but you can use this method for both the free and Pro versions of Elementor. The Sections and Inner sections that you've seen are the older way of building in Elementor. Containers are a newer way to work in Elementor. While you can switch back to Sections, you might lose any work you've already done in Containers, so I recommend staying with Containers. They give you more flexibility, better control over responsive settings, are better optimized, and newer features are often built to work with Containers. Please watch this video for more information about Containers: ruclips.net/video/RkAXKKb6iXE/видео.html. Hope this helps 😊
Hi Flat, which part exactly isn't working for you? If you'd like to share a screen recording and/or screenshots to help pinpoint the issue, please feel free to post your question on the Elementor forum: forum.elementor.com/getting-started-7/how-to-create-a-file-download-button-tutorial-10152
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.
How did you switched image's url http to https?
thanks man love your from pakistan
awesome.. that saved me a ton of swearing.
you are a herom thanks
You are a legend! Been really scratching my head at this one for a few weeks, i was only having this issue on Mobile which was throwing me off but this fixed it! :)
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!
I've been using add ons for this, but this is so much simpler. Please do more tuts on custom attributes!
Yo! Devin good to see you here. I recognize your profile from LinkedIn
@@brianwoodlief Hey Brian! Small world.
For working you must change : http to https in the button link !
This comment saved me
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.
Video starts at 2:34 Saved your time
Well it didn't work for me sadly. I was trying an audio file.
Not very clear. Where are you gettng the name 'Syllabus' from? Do you just need a word from the PDF name?
just input in custom attributes
Yes, your file name is not 'syllabus' it is much longer. I have tried the same and cannot get it to download. I just opens to review. If the file name is test.pdf, what do i enter? I've tried everything, nothing works. So frustrating.
Hi mhthmusicvideos and Flat Spaces, the download file is being pulled from the link field , so you can use any name you'd like in the custom attribute. In this case we named it "Syllabus" to make it easy for our visitors to find and keep track of it after downloading.
@@Elementor I see, thank you, however I still cannot get it to work. I realize this is a simple task but all it does is open the file (in this case pdf) to view. Is there a setting someplace that needs to be addressed? I opened a ticket with elementor about this but have not heard back yet. I appreciate your help. I tried adding the # sign in the link and I thought it worked, but turns out that was not the fix either. Interesting update: I tried it on 5 different sites and it only works on the one site that does not have the most updated version if Elementor Pro (still at 4.3.3). The other 4 sites do have the most updated versions, but the download does not work. What do you think could be wrong?
Hi @@flatspaces3876, make sure you are using "download: in the custom attribute field. If it's still not working, please feel free to post your question on the Elementor forum: forum.elementor.com/getting-started-7/how-to-create-a-file-download-button-tutorial-10152, where you can you can share a screen recording and/or screenshots to help pinpoint the issue.
Thanks for this super quick and easy solution.
Brilliant! It worked. lightweight, as no add on or plugins required.
This is genius!! Thanks for this super quick and easy solution.
Thanks for the super simple video!
Excellent, thanks for this easy to follow tutorial. What is the purpose of adding the Attribute?
@borisnieminen677, great! Typing "download" is to get your browser to save it as a file, rather than opening it directly in the browser. Typing the name after is to make sure it's saved with a recognizable file name.
Nice... 😍😍😍
Thanks - simple and easy to follow
Very helpful, I used with OPEN tag
Nice. How do you add a capture for visitor's name and email address before download?
You could use a form -- either in a pop up or new page. Then in the form settings create a "thank you page" that displays after successful submission of the form (that isn't anywhere in your nav). Put the download on the thank you page.
If you really want to ensure the email address is real, you could tell your visitors you'll email them the download link. But that can be a bit abrasive (and still circumvented) depending on your relationship so far and the value they've received in exchange. So you'd want to research and test your options.
@@deanontheinterwebs Thanks Dean! Ive tried some plugins that, at a primitive level, do this, but they never feel/look good and are not maintained. This sounds like a good workaround
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
Didn't work for me.
Very good. I want to know, whether we can add macro enabled excel files?
Thx! Helped a lot!
Can this be combined with a download manager so that things like number of downloads can be tracked?
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!
nice vid, helped me a lot
This also won't work if you have any image compression plugin's activated like Smush. Have to deactivate them
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?
Having the same issue, did you find a solution?
This template is no longer available on elementor, can anyone recommend any to me? Thank you in advance
Thank you.
Thank you!
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?
To do that you just skip the last step. Ie, don't add the custom attributes. In that case clicking the button will display the linked file. You should probably change the button text too, as it prompts to "download" the file.
@@deanontheinterwebs So simple. Tank you very much Dean. Sorry about the naive question: total newb here.
@@ccuny1 You're welcome! Happy to be able to help :)
Dean, thanks so much for helping out our fellow web creators! 🤩
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?
@Hashterix, if it's an internal link, you can click the Dynamic tags icon, select Internal URL, click the wrench icon, select Media, and find and select your downloadable file.
@@Elementor That doesn't work. If you have no value set it'll take you to the Wordpress attachment page (awful/yuck/don't want), and if you set the download value, it doesn't download the file, it downloads the .htm of the attachment page instead!
Not Downloading the Files. Instead just Opening them in the Window. And not functioning on Mobile
Please do more tutorias on Hard Works on Elementor!
Thank you so much
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?
Hey. Don't forget the attribution "download|filename"
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 RUclips 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 :)
@user-zz7yg2pv2y we used Elementor Pro, but you can use this method for both the free and Pro versions of Elementor. The Sections and Inner sections that you've seen are the older way of building in Elementor. Containers are a newer way to work in Elementor. While you can switch back to Sections, you might lose any work you've already done in Containers, so I recommend staying with Containers. They give you more flexibility, better control over responsive settings, are better optimized, and newer features are often built to work with Containers. Please watch this video for more information about Containers: ruclips.net/video/RkAXKKb6iXE/видео.html. Hope this helps 😊
this works with zip files too?
Hi jough, it sure does!
it will be amazin if elementor has theme builder app
This works on chrome but not on firefox.
Looks simple but I have tried it at least 20 times , doesn't work.
Hi Flat, which part exactly isn't working for you? If you'd like to share a screen recording and/or screenshots to help pinpoint the issue, please feel free to post your question on the Elementor forum: forum.elementor.com/getting-started-7/how-to-create-a-file-download-button-tutorial-10152
well that was easy.
YOU ARE SOOOOOOOOOOO SWEET
elementor - who named this?
Give us a MegaMenu