How Do I Add a PDF to an Elementor Page? 2 Simple Ways To Do It.

Why should you embed a PDF in Elementor?

When you want to get into detailed explanations for certain topics, creating a PDF file for download can be highly beneficial. PDFs allow you to present content in a visually engaging format, making complex topics more accessible.

Typically, websites offer a downloadable link for PDFs, allowing visitors to save the file to their devices for offline reading. Embedding the PDF directly onto your website can significantly improve user experience. Instead of downloading, visitors can conveniently view the document directly on your site. This not only keeps users engaged but also helps reduce the bounce rate, as they spend more time on your website.

Now that you understand the benefits of embedding a PDF, let’s explore how you can do this in Elementor to enhance the convenience and functionality of your site.

How to embed PDF in Elementor

You don’t need any additional Elementor add-ons to embed a PDF. Even with the free version of Elementor, you can accomplish this task efficiently. Here’s a guide on how to embed a PDF into your Elementor-powered website.

Method 1: Using HTML code

Step 1: Open the page in Elementor

Go to the page where you want to add the PDF and click ‘Edit with Elementor’ to open the editor.

First, navigate to the page where you want to embed the PDF. Click the “Edit with Elementor” button to launch the Elementor editor.

Step 2: Access the Elementor editor

In Elementor, the left side shows all the tools, and the right side shows a live preview of your page.

In the Elementor editor, the left side displays all the elements you can use, while the right side provides a live preview of your page.

Step 3: Add an HTML element

Drag the HTML widget from Elementor’s left panel and drop it where you want to embed the PDF in the live preview section of the page.

To embed the PDF file, we’ll use the HTML widget. Simply drag and drop the HTML widget from Elementor’s left-hand panel into the desired area within the live preview section of the page where you want the PDF to appear. Simply drag and drop the widget.

Step 4: Insert the embed code

After selecting the HTML widget, the left panel appears. Insert the provided code into the HTML widget to embed the PDF

Once you’ve selected the HTML widget, the customization panel will appear on the left side of the editor. To embed the PDF, you need to insert the following code into the HTML widget:

<object data=”your-pdf-url.pdf” type=”application/pdf” width=”700px” height=”1200px”> </object>

In this snippet, 700px sets the width and 1200px sets the height of the PDF viewer. You can adjust these dimensions as needed to fit the design of your page.

Step 5: Link the PDF file

Find the file, click ‘Copy URL to clipboard,’ and replace ‘PDF URL’ in the HTML code with the copied link.

Next, you need to provide the URL of the PDF file. If you’ve already uploaded the PDF to your WordPress Media Library, navigate there. Locate the file and use the ‘Copy URL to clipboard’ button to copy the PDF’s URL then replace “PDF URL” in the HTML code with the URL you just copied:

<object data=”your-copied-pdf-url.pdf” type=”application/pdf” width=”700px” height=”1200px”> </object>

Once you paste the URL and embed the code into your Elementor page, the PDF will display directly on the page, eliminating the need for additional coding or plugins. This method allows you to embed as many PDF files as needed within your Elementor-powered site.

Method 2: Using Elementor Widgets

Step 1: Add a file to your media library

In the WordPress Media Library, use the dropdown to sort files by type. Click ‘Add New’ to upload any supported formats

Navigate to the WordPress Media Library. You can sort your files by type using the dropdown menu for easier management. Click the ‘Add New’ button to upload various file types including PDFs, ZIPs, MP3s, MP4s, images, and other supported formats.

After uploading your file, click on it to open a popup. Click ‘Copy URL to clipboard’ to get the link for sharing or embedding.

Once your file is uploaded, click on it. In the popup modal that appears, you’ll find the option to ‘Copy URL to clipboard’. Click this button to copy the permalink of your file, which you can then share or embed as needed.

Step 2: Add the download link to the button widget

Open your page in Elementor, drag the widget to the desired location, and paste the copied URL into the link field to create a download link.

Open your page in Elementor and drag the widget where you want the download link to appear. Paste the copied URL into any link field within the widget.

Click on the gear icon to access the link options panel. Here, you can configure the link to open in a new window by ticking the appropriate checkbox. Optionally, add a ‘nofollow’ attribute if desired.

To make sure the file is downloaded rather than displayed in the new window, you need to add a custom attribute. Format it as download | filename.pdf, replacing “filename.pdf” with the actual name you want the downloaded file to have.

Step 3: Save and Preview

Click the save button to save your changes, then click the preview button to see how it looks.

Once you’re done, click the save button. Click the preview button on the lower right of the editor. This will lead you to the page you edited and you can check out your new embedded file.

Best PDF embedder plugins for WordPress

1. EmbedPress

Consider using EmbedPress for a versatile solution to embed various types of content on your WordPress site

If you need a versatile plugin for embedding content on your WordPress site, consider EmbedPress. This plugin supports embedding from over 150 sources, including PDFs, Google Maps, Docs, videos, and audio files.

Key Features of EmbedPress:

• Extensive Source Support: Embed content seamlessly from over 150 different sources (Google Maps, Youtube, VIMEO, etc.).
• Customization Options: Adjust iFrame settings like height, width, padding, and margin to fit your site’s design.
• Page Builder Compatibility: Use it directly within popular page builders, to make workflow easier.
• Shortcode Generator: Simplify embedding processes with easy-to-use shortcodes that can save you time and effort. This WordPress feature makes it easier to display different functions or content.
• Lazy Loading: Improve page load times and performance with lazy loading for embedded content.
• Multilingual Support: Compatible with WordPress translation plugins like WPML, making it ideal for multilingual sites.
• Media Player Customization: Tailor the look and functionality of audio and video players to meet your needs.

EmbedPress is not only powerful but also user-friendly, offering extensive customization options to ensure your embedded content looks great and functions perfectly on your site.

2. PDF Embedder

Use the PDF Embedder plugin for an easy way to embed PDF files on your WordPress site.

If you’re looking for a straightforward way to embed PDF files on your WordPress site, consider using the PDF Embedder plugin. This user-friendly tool allows you to embed PDFs using simple shortcodes, and it even supports adding a download button alongside the embedded files. Shortcodes are small pieces of code that you can insert into posts, pages, widgets, or theme files to display specific functions or content.

Key Features of PDF Embedder:

• Mobile Optimization: Ensures that PDFs are easily viewable on mobile devices.
• Use of Shortcodes: Embed PDF files quickly and easily anywhere on your site with shortcodes.
• Multiple Viewing Options: Includes options for different toolbar appearances and navigation features.
• Speed Optimized: Uses lightweight JavaScript to avoid slowing down your site, with no reliance on third-party services which minimizes HTTP requests.
• Full-Screen Mode: Available in the premium version, offering a better viewing experience for detailed PDFs.
• Removable Branding: The premium version allows you to remove the plugin’s branding for a cleaner look.

PDF Embedder is an excellent choice if you need a performance-oriented and easy-to-use solution for embedding PDF documents directly within your WordPress pages or posts.

3. PDF Poster

Use the PDF Poster plugin for an efficient way to embed PDF files on your WordPress site.

If you’re looking for an efficient PDF embedding solution, consider the PDF Poster plugin. It’s an excellent choice for those who need enhanced security and customization options for their embedded PDF files.

Key Features of PDF Poster:

• High Customizability: Tailor the appearance and functionality of your PDF embeds to meet your specific needs.
• Content Protection: Prevent unauthorized downloading and copying of your PDF content, ensuring your documents remain secure.
• Gutenberg Optimized: Seamlessly integrate with WordPress’s Gutenberg editor with two dedicated blocks for easy embedding.
• Print Button: Includes a convenient print button allowing users to easily print the PDF documents directly from your website.

PDF Poster is particularly well-suited for users who prioritize content security and are looking for deep integration with the Gutenberg editor. This plugin not only simplifies the process of embedding PDFs but also enhances the interactivity of your digital content with user-friendly features like printing capabilities.

Share important content to your audience without hassle

And that concludes our straightforward guide on adding PDFs to your Elementor page. With the two methods we’ve outlined, both approaches offer distinct advantages and can be selected based on how you wish to share content with your audience.

You’ve learned a great way to add PDFs to your Elementor page, but managing this process each time you need to add a PDF can take time away from your business. Let us take care of the tedious parts of managing and updating your website. Our professional team at 1dea can handle all your website management needs so you can save your valuable time and energy on managing your business. Contact us today.