Make pdf downloadable button in elementor

Step-1: Upload the PDF to the WordPress media library

To add a downloadable PDF button in Elementor, upload the PDF file itself to the WordPress media library. Take a copy of the URL of the PDF file.

Copy pdf url from wordpress media library

Step-2: Insert the PDF URL to the Elementor button

Now go to the page where you want to add the PDF download button. Open the page with Elementor page builder. Insert a “Button Widget,” right-click on the button and insert the PDF URL/link that you have copied in the above step.

Insert pdf url to elementor button

Step-3: Add a custom “download” attribute to the link

Now click on the gear icon (link options). See the screenshot below for more clarifications.

Elementor link options

Type “download” on the “Custom Attribute” field.

Elementor button link download attribute

That’s it! Now if you click the button, you’ll see that you have a PDF downloadable button and it’s automatically downloading the PDF to your computer. You can also do the same for downloading word documents, zip files, images, etc.

If you want to rename the file on your visitors’ computer, you can add both the key & value to the “Custom Attribute.” Here the text “download” is the key. So if you also add a value to the custom attribute, it will rename the file on before downloading.

So you can type “download|file_name” on the “Custom Attribute.” So whatever the name of your file in the media library, it will be saved as “file_name.pdf” on the user’s computer. Here the text “file_name” is the value. And you can change the value (file_name) to anything acceptable & meaningful.

The “|” (pipe) is the separator between the key & value that you will find under the “Backspace” key & above the “Enter” on your keyboard. Just hold down the “Shift” key & press the “Pipe key.” See the picture below to better understand.

Pipe key on windows computer

But I prefer to include the file extensions such as the “.pdf” because sometimes the browser fails to recognize the file extensions. So if you want to add both the key & value, I advise you to include the extensions such as “download|file_name.pdf

This is how you can add a button to download PDF files in Elementor. This way you can also make a downloadable button for other types of files such as word files, excel files, zip files, etc. If need to add the download button to a static HTML site or WordPress website that is not built with Elementor, see this post on how to create a download HTML link.