How to Create a PDF File Download Button in Elementor

Updated: January 7, 2022

When creating a page using Elementor (be it a homepage, landing page, etc.) you might want to add a download button whereby when a visitor clicks the button, the file is directly downloaded instead of being directed to a new tab on web browser to view the file.

Elementor has a native Button widget which you can use to create a file download button. When adding the Button widget, you can simply add the link of your file on the settings panel. However, the default setting will direct your visitor to a new tab to view the file for certain file formats, including PDF and image formats like JPG and PNG. If you want the file to be directly downloaded, you need to add a custom attribute to the download link.

Creating a PDF File Download Button in Elementor

First off, upload the PDF file to the media library of WordPress. To do so, login to your WordPress dashboard and go to Media -> Add New. Click the Select Files button to select your file.

Once the file is uploaded, you will see a Copy URL to clipboard button to copy the URL of the file and an Edit link to edit the file. Click the Copy URL to clipboard button.

You can also find the URL of the file from the WordPress media library (Media -> Library). Simply select (click) the file you want to use and click the Copy URL to clipboard on the appearing window.

Once the URL is copied, go to the Elementor editor and add the Button widget. Paste the URL you have just copied to the Link field on the settings panel.

To add the custom attribute, click the gear icon on the Link field. Type download|[file name]. You can type any name on the file name section.

That’s it. You can go to the Style tab to style up the button. Once done editing the entire page, you can update/publish your page.

The Bottom Line

Elementor has a native Button widget which you can use to add a file download button on your page. You can add any file that is supported by the WordPress system, including PDF, ZIP, JPG, PNG, and so on. However, for file formats like PDF, JPG, and PNG, you need to add a custom link attribute in order for the file to be directly downloaded.

If you use Elementor Pro, you can also use the Button widget to create an actionable button such as WhatsApp chat button, call button, Google Calendar button, and so on.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.