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.
