Elementor PDF Download Button Tutorial

PDF Download File Button in Elementor Tutorial JPG

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.

Table of Contents

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.

Go To Media in WordPress dashboard

Over here you can see the Add new and you need to click on it.

Add new media in WordPress library Go To Media in WordPress dashboard

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.

Draf PDF file to WordPress media library Add new media in WordPress library Go To Media in WordPress dashboard

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.

Copy PDF URL to clipboard Draf PDF file to WordPress media library Add new media in WordPress library Go To Media in WordPress dashboard

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.

Paste Elementor PDF Download Button URL Copy PDF URL to clipboard Draf PDF file to WordPress media library Add new media in WordPress library Go To Media in WordPress dashboard

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.

Elementor PDF download button custom attribute Paste Elementor PDF Download Button URL Copy PDF URL to clipboard Draf PDF file to WordPress media library Add new media in WordPress library Go To Media in WordPress dashboard

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.

Download PDF file with Elementor Button Elementor PDF download button custom attribute Paste Elementor PDF Download Button URL Copy PDF URL to clipboard Draf PDF file to WordPress media library Add new media in WordPress library Go To Media in WordPress dashboard

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:

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!