Add a PDF Download Button using Elementor

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Dont have Elementor yet, get it here!

How to add a pdf download button using Elementor

Table of Contents

Have you wanted to offer a pdf download on your website, for things like lead magnets, restaurant menus, application forms and more but don’t know how to link to a PDF, then this PDF Download Button using Elementor guide is for you.

We all know that opt-in freebies are the perfect way to grow your email list, but they are also great for conveying other information and also from a design standpoint having a pdf to contain important information to your site visitors can also be a good way to keep your pages clear of clutter.

PDf Content Ideas

Below is a list of ideas of what content you could offer on your website in a pdf format.

  • Restaurant menus
  • Price-lists
  • Time tables
  • Programs
  • Hand Books
  • Policies and procedures
  • Application Forms
  • Craft Templates
  • PDF Guides
  • Mini E-books
  • Checklists
  • Programs
  • Hand Books
  • Policies and procedures
  • Application Forms
  • Colouring in pages

By default, downloaded PDF files automatically open in the browser, usually in a new window or a new tab.

This how-to article contains the needed steps on how to add a pdf file to a button so the visitor can download it, as well as how to force the browser to download PDF files automatically on your computer, rather than open a preview in the same window or in a new tab.

This tutorial requires at least the free version of Elementor.

Test My Button

Free Printable Hotkeys Poster

Here’s a great printable poster you can print and stick on your wall to keep the hotkeys fresh in your mind.

Click the button to get your free poster, no subscription required to download.

How to Add a PDF Download Button Using Elementor

Step One – Upload PDF

Before you can link to a file you need to first upload the PDF to the WordPress media library.

  • In the sidebar go to Media > Add New
  • Drag your PDF file into the upload area to upload, or choose Select Files > double click on your file to upload
  • Once the upload is complete, on the file click on the edit link.
This image shows how to upload the pdf for the PDF Download Button using Elementor post

Step Two – Copy URL

To be able to link to the PDF in the button you need to copy the URL of the file.

  • On the edit media page for the PDF, select the URL and copy it for step 4.
This image shows how to get the pdf link for the PDF Download Button using Elementor post

Step Three – Insert Button

Its time to insert a button, you can also link the pdf in a text link also.
Example: Click here to download my pdf (Note; you can’t force download a pdf text link)

  • Drag the button widget into your design
This image shows how to drag a button onto the page for the PDF Download Button using Elementor post

Step Four – Insert URL

In short its fairly simple to link to a pdf once you have a URL to where the pdf is hosted, in this case, it’s on your host’s server managed by the WordPress media manager.

  • Add the URL that you copied earlier to the URL field, and style the button to match your site design.

How to Force Download the PDF

If you don’t want the pdf to open up in a preview window of the pdf and would prefer to force the PDF to download instead, follow the steps below. Note; the is not available for text links.

  • Click the settings button
  • Under custom attribute add – download=”true”

How to Open the PDF in a New Tab

By default, the PDF will open in the same tab, follow the steps below to have it open in a new window/tab

  • Click the settings button
  • select the “open in new window’ checkbox

Check out more Elementor Articles here

Was this article helpful?

These people love what I Do!

Do you need personalised Help?

Mick The WP Mentor

Mick The WP Mentor

Hi, I’m Mick, I’ve been building websites for almost 20 years, nowadays my primary focus is WordPress, as it’s highly flexible and contains fewer restrictions than page builders. I love helping others with WordPress!

Leave a Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Mick The WP Mentor

Learn how to create a new user for your WordPress developer, so you don’t have to give your web designer your personal username and password.

Read Article »
Mick The WP Mentor

It’s best to optimise images before uploading them onto your website, here is a great way to do it if you don’t use programs like photoshop.

Read Article »
Mick The WP Mentor

One of the common WordPress questions I get asked is “How do I log in to WordPress?” New users to WordPress have a hard time finding their login page URL. In this post, I will show you how to find your WordPress login URL.

Read Article »

Follow Us

I Recommend These

Sign up for my Newsletter

I promise not to spam you too much :)