In this Elementor PDF button tutorial I want to give an example on how to create a button to download a PDF file with Elementor.
You can easily create textlink or button which allows vistors of your website to download a PDF file. Instead of an PDF file it can also be an different file type such as images, documents, audio or video formats.
Show support and hit the like button if you like this content! Also subscribe to the channel, I would appreciate that.
Watch tutorial on YouTube
Upload File to Elementor Media Library
To start off we’re going to upload a file in the media library in the WordPress dashboard and as you can see, I have already been logged in into the workplace dashboard.
The first thing you need to do is you need to go to the Media option and click on Library.
Over here you can see the Add new and you need to click on it.
Over here you can see Drop files to upload, so you can just drag your file into this window. Here you can see the maximum upload file size is set to 256 MB.
Now drag the PDF file into the window to upload it.
Copy the URL of the file uploaded to Elementor Media Library
Now you see it has been added over here. If I click on it you can see that over here at file URL link is displayed. And we need to copy this URL and the reason that I have copied this URL is because this URL points to the location of the file. This makes it able to being downloaded when the link is clicked on by a visitor of your website.
Add PDF link to Elementor Download button
Now I open the Elementor editor for the homepage of the website.
So for this example I will duplicate a button and change the title so something like download PDF.
In this field now another URL displayed so we can remove that and now we add the URL of the file that we have just uploaded. So now you see that the link has been added.
It’s also possible to use a relevant file name for the file, and for that you can click on this gear icon over here which says link options and click on it.
Now go to the Custom attributes field and over here you can fill in something like: Download followed by the pipe symbol And then just enter a name for the file that you want to use.
The next thing to do is click on the Update button or all the changes won’t be saved. So never forget to click on the green update button.
Example of Elementor PDF Download button in action
So now we’re all done, and to show you how it works, I will open a new window in a Incognito tab.
If I now Scroll down you can see that the download button has been added and if I click on it now see that the file will be downloaded over here with the file name that we’ve just entered in the custom attributes field.
You can see everything works fine and the file can be downloaded on all types of devices, so on desktop but also on tablet and mobile.
Like I mentioned before, you can upload various files in this way, such as images, documents, audio or video formats.
In the video tutorial I will explain everything in more detail, and you can watch it on YouTube over here.
In other tutorials I have explained how to create cool effects such as:
- Sticky header scroll effect with Elementor
- Scroll effect (paralax for sections) with Elementor
- Motion effects with Elementor
- Z-Index with Elementor
- Pop ups with Elementor
- Open Pop up on button click with Elementor
I hope this tutorial is helpful. It that’s the case make sure to subscribe to the channel and drop a like and comment. Thanks, and I hope to see you back in the next tutorial!