How to Embed PDF in Elementor without Plugins

How to Embed PDF in Elementor without Plugins

Do you want to embed PDF in Elementor powered website? If you are looking for a simple method, keep reading this article. This post will show you how to embed PDF in Elementor correctly.

Each WordPress theme comes with unique design options. But if you need to stand out, invest in a WordPress page builder plugin. Elementor is one of the best and most popular WordPress page builder plugins. With it, you can create any page design without any hassle.

But do you want to embed PDF in Elementor-powered websites?

Here’s a step-by-step guide if you are looking for a beginner-friendly tutorial. You can complete the task without using a dedicated WordPress plugin.

Before going further into the tutorial, let’s see why embedding PDF in Elementor is excellent.

Why You Should Embed PDF in Elementor?

To explain something in detail, consider creating a PDF file. If you have a PDF file, you can define the content visually, making the topic easy to understand.

Usually, website owners will add a download link to the PDF file. Visitors can download it to their local storage and read it offline.

This could be improved.

Instead of giving them a download link, if we can embed the file, the visitors can quickly scroll through the file from the front end of the website and get all the information. This will help you improve the user experience. This is better for convenience.

Staying on the website for a long time will also help you improve the bounce rate.

Now you know why you should embed PDF in Elementor. Next, let’s see how to embed PDF in Elementor.

How to Embed PDF in Elementor

You do not need to use any Elementor addons for the task. You can even complete the task with the free version of Elementor. Here’s how you can embed PDF in an Elementor-powered website.

First, you need to open the page where you need to embed the PDF file. In this case, we are going to edit the About Us page. Once you have opened the page, click the Edit with Elementor button.

edit with elementor

Within a few seconds, the editor will be opened. If you take a close look at the editor, the left-hand side will show you all the elements you can use on the page. The right-hand side will show you the live preview of the page.

Elementor editor

We will use the HTML element to embed the PDF file.

HTML element - embed PDF in Elementor

Since Elementor supports drag-and-drop editing, you can pick up the element from there and drop it inside the live preview wizard, where you need to display the PDF file.

add html element to the editor

If you select the element, you can see the customization options on the left-hand side of the editor.

html code editor

The next thing you need to do is add the below code to the HTML element:

<object data="PDF URL" type="application/pdf" width="700px" height="1200px"> </object>
html code added - embed PDF in Elementor

If you look at the code, you can see that we have mentioned the embed width as 700px. The height would be 1200px. Based on your requirements, you can always tweak it later.

The next thing we need to do is enter the URL to the PDF page. Go to the Media Library section if you have uploaded the PDF file to your media library. Once you have found the file, use the Copy URL to the clipboard button.

copy URL of PDF file

Now paste the URL in the code where it says PDF URL.

PDF embedded

After entering the URL, you can see that the PDF file was embedded in the page! No additional coding is needed. This way, you can embed unlimited PDF files in your Elementor pages.

This is how you can embed PDF in Elementor powered website without any plugins.

Bonus: Best PDF Embedder Plugins for WordPress

If you need to rely on a dedicated WordPress plugin to embed PDF files on your website, use these options:

  • EmbedPress
  • PDF Embedder
  • PDF Poster

Below, we will explain what makes these plugins unique.

1. EmbedPress

embedpress - embed PDF in Elementor

If you are looking for a feature-rich plugin to embed content on your WordPress website, check out EmbedPress. With EmbedPress, you can embed PDF files, Google Maps, Google Doc files, videos, audio, etc. The plugin can help you embed content from more than 150 sources.

One of the best things about EmbedPress is the customization options you can have. You can take control of the iFrame embed and tweak its height, width, padding, margin, etc. Since the plugin is also optimized for page builders, you can directly use them through the page builder’s editor.

If you are running a multilingual blog and need to translate the plugin, you can use any WordPress translation plugin like WPML. Another notable feature of the plugin is the shortcode generator. Shortcodes will make the embedding process a cakewalk.

Features

  • 150+ sources supported
  • Shortcode generator
  • Optimized for page builders
  • Lazy loading
  • Audio and video player customization

Pricing

EmbedPress is a freemium WordPress plugin. The free plugin can be downloaded from the WordPress plugin repository. The premium version will cost you $36 a year.

2. PDF Embedder

PDF Embedder plugin - embed PDF in Elementor

If you prefer an easy-to-use PDF embedder plugin, check out PDF Embedder. You do not need to be tech-savvy to embed PDF files with this plugin. You can embed as many PDF files on the page with a few shortcodes. You can also include a download button in the toolbar besides embedding.

PDF Embedder is also optimized for speed. The plugin uses a lightweight JavaScript code that will not impact the website’s loading time. Since the plugin also doesn’t rely on third-party services, there won’t be any extra HTTP requests – better for speed optimization.

You can remove the plugin’s branding from the embeds using the premium version. The premium version plugin will also give you full-screen viewing mode, ideal for multiple situations.

Features

  • Optimized for mobile phones
  • Shortcodes
  • Multiple appearances
  • Full-screen mode
  • Removable branding

Pricing

The PDF Embedder is a freemium plugin. You can download the free version of the plugin from the repository. The premium version costs $20 a year.

3. PDF Poster

PDF Poster plugin - embed PDF in Elementor

The third option we have for you is PDF Poster. You can choose this option if you prefer a reliable plugin to handle the PDF embeds. The major advantage of PDF Poster is the customization options available. You can also protect your content with the plugin.

With the protection, you can prevent unauthorized downloads and people copying the PDF content. PDF Poster is also optimized for Gutenberg. You will get 2 Gutenberg blocks with the plugin you can use to embed PDF files.

Besides the features mentioned above, you will also get a print button with the embedder. This feature will come in handy if people need to print PDF files.

Features

  • Highly customizable
  • Content protection
  • File organization
  • Optimized for Gutenberg
  • Print button

Pricing

PDF Poster is a freemium plugin. You can get the lite version of the PDF Poster from the plugin repository. The premium version will cost you $30 a year.

Conclusion

Elementor is an excellent choice to create stunning websites without any hassle. Similarly, PDFs are good if you need to showcase so much data on a single page without ruining the user experience.

If you need to embed PDF files on your Elemtnro website, you do not need to use custom add-on plugins. If you check for Elkementor add-ons, you will stumble upon multiple options.

In this article, we have shown you a step-by-step guide to embed PDF files in Elementor powered website without using a single plugin. The process is straightforward, and it won’t take much time of yours.

So, if you need to embed PDF files on your website, try this method!

How else are you going to customize your Elementor-powered website?

Let us know in the comments!

Sreehari P Raju
Sreehari P Raju

Sreehari P Raju is a freelance WordPress content writer. He started using WordPress in 2015 and loves writing tutorials, product reviews, and listicles. While not working, he loves playing Minecraft or eating KFC.

Related Posts
2 Comments

neither the html nor the free 1st plug in work. show absolutely nothing in wp and mess up the WP simple embed I already had. Thanks.

Sreehari P Raju

Hello,

I have tested the method again and it is working for me.
There could be some compatibility issues on your website.

Leave a Reply

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