How to Link to a PDF in Elementor

How to Link to a PDF in Elementor - A Guide

How to Link to a PDF in Elementor

In this post, you’ll learn how to link to a PDF in Elementor easily with our step-by-step guide. Elementor is a powerful page builder for WordPress that allows you to create stunning websites with ease. One common task you might need to perform is linking to a PDF file. Whether you’re sharing a downloadable resource, an eBook, or any other document, linking to a PDF in Elementor is straightforward when you know the steps to take.

In this guide, we’ll walk you through the steps to seamlessly add a PDF link to your Elementor pages.

Step-by-Step Guide to Linking a PDF in Elementor

Step 1: Upload Your PDF to the WordPress Media Library

Before you can link to a PDF in Elementor, you need to upload the PDF file to your WordPress site. Here’s how:

1. Navigate to the Media Library:

In your WordPress dashboard, go to Media > Add New.

2. Upload the PDF:

  • Click the Select Files button or drag and drop your PDF file into the upload area.
  • Once the upload is complete, click on the PDF to view its details. Copy the URL provided on the right-hand side. This URL is what you will link to in Elementor. Please find an example of the link to copy from your media library highlighted in the image below.

Link to a PDF in Elementor

Step 2: Open Your Page in Elementor

1. Navigate to the Page:

In your WordPress dashboard, go to Pages and find the page where you want to add the PDF link. Click Edit with Elementor.

Step 3: Add a Text or Button Widget

You can link to the PDF using either a text link or a button. Here’s how to do both:

Adding a Text Link

1. Drag and Drop a Text Editor Widget:

From the Elementor panel, drag the Text Editor widget to your desired location on the page.

2. Insert the Link:

  • Highlight the text you want to turn into a link.
  • Click the Insert/Edit Link icon (it looks like a chain link) in the text editor toolbar.
  • Paste the URL of your PDF into the link field and click the Apply button.

Now we’ll explain how to add a link to a button widget in Elementor, this is demonstrated in the screenshot below.

How to Link to a PDF in Elementor Screenshot

Adding a Button Link

1. Drag and Drop a Button Widget:

From the Elementor panel, drag the Button widget to your desired location on the page.

2. Configure the Button:

  • In the button’s settings on the left panel, enter the text you want to display on the button (e.g., “Download PDF”).
  • In the Link field, paste the URL of your PDF. Please see the screenshot shared above for an example of this in action.
  • Adjust other settings like alignment, size, and colour as desired.

Step 4: Set the Link to Open in a New Tab (Optional)

If you want the PDF to open in a new tab, follow these steps:

1. For Text Links:

  • Highlight the linked text, click the Insert/Edit Link icon, then click the gear icon for link options.
  • Check the box that says Open link in a new tab and click Update.

2. For Buttons:

  • In the button’s settings, click the Link Options icon (gear icon) next to the URL field.
  • Check the box that says Open link in a new window.

Step 5: Save and Preview

Once you’ve added the link, make sure to save your changes. Click the Update button at the bottom of the Elementor panel.

To ensure everything is working correctly, preview your page by clicking the Preview Changes button (eye icon) in the bottom panel of Elementor. Test the link to verify that it directs to your PDF file.

How to Link to a PDF in Elementor Conclusion

Linking to a PDF in Elementor is a simple process that enhances the functionality and user experience of your website. By following these steps, you can easily provide downloadable content to your visitors. Whether you use a text link or a button, Elementor makes it easy to add and customise PDF links to fit the style and needs of your site.

If you’re looking for additional Elementor resources check out our blog which has some helpful articles and support guides. You can also check out this Elementor user guide we created which covers many of the commonly used functions of Elementor.

Feel free to contact us if you have any questions or need further assistance. We offer WordPress website maintenance to assist you with ongoing website updates.

Additional Resources