Build Beautiful WordPress Websites Using Divi and Divi Builder

How To use The PDF Viewer For Elementor

Blair2004 Free Resources May 26, 2021

If you're looking for how to embed a PDF document on Elementor, then you're are at the right place. While we have already shared how you can do this by adding a link, here we'll see how you can embed a PDF document on your WordPress blog using Elementor.

In today's tutorial, we'll focus on a plugin that does the job and that is named "PDF Viewer For Elementor".

Let's get started.

Download And Install The Plugin PDF Viewer For Elementor

The first step is to download and install the plugin from your dashboard. You can directly perform this task from your dashboard by heading to the plugins and using the name "PDF Viewer For Elementor".

Download Divi The Best WordPress Theme

The Most Popular WordPress Theme In The World And The Ultimate WordPress Page Builder

Download Divi

This is a very simple plugin that doesn't need configuration. There is no need to remind you that you should have Elementor activated on your WordPress installation.

Edit/Create a Page With Elementor To Embed A PDF

Now we'll create or edit an existing page with Elementor. Once PDF Viewer For Elementor is enabled, you'll see two new components added to the Basic Elements of Elementor.

As you can see the plugin add 2 new elements to Elementor, but when should you use one of them. That's what we'll figure out below.

When To Use PDF Viewer Element

The element "PDF Viewer" allow you to add an iframe that uses Google Docs previewer to use link to your PDF document.

You'll just have to provide either a URL or to upload your file on your medias. You can also configure the size of the previewer and the alignment.

While this solutions works pretty well it has some downsides :

  • It doesn't works if your WordPress blog is hosted locally
  • It rely on external website which might stop working
  • It might be slow to load PDF

If you're okay with using an external service for displaying your PDF, then this solution is for you.

When to use PDFjs Viewer

The second element added by this plugins is PDFjs Viewer. As the name suggest, this solution rely on using Javascript to embed your PDF document. The solutions has the sames settings as the previous element but has this advantage of working locally.

Here you can only choose the files from your media to embed that as a PDF. This solution has also some downsides :

  • If won't work if the browser doesn't execute Javascript (most modern browser runs Javascript)
  • Include more files to be downloaded and potentially more requests to the server.

PDF Previews Examples

Here are how your previews will look like for both elements added by PDF Viewer for Elementor.

Preview with Element PDF Viewer

this preview is acceptable and offers at the bottom navigation buttons that will be useful to navigate through pages.

Preview with PDFjs Viewer

The "PDFjs Viewer" also offers navigation buttons but includes a search button missing from the previous preview.

Other Plugins To Embed PDFs on WordPress

If this plugin is not exactly what you're looking for, then probably the following plugins might be the solution you're seeking.

PDF viewer for WordPress

PDF Viewer for WordPress is a premium PDF Reader plugin for WordPress on CodeCanyon available since 2014. With this plugin, You can display and embed PDF Files of your WordPress Website with a modern PDF Reader & FlipBook.

Key Features

  • Enable/Disable social sharing
  • Enable/Disable Print Option
  • Enable/Disable Download Option
  • Enable/Disable Presentation mode
  • Enable/Disable Find Option
  • Enable/Disable Logo Adjustable

  • Shortcode to add a text link to your pdf file on any post/page
  • Fully Responsive PDF viewer
  • Style & Customize all the Items.
  • Compatible With most browsers
  • Fast & smooth User Experience

PDF Embed - WordPress PDF Viewer plugin

Elfsight PDF Embed adds a simple method to display a PDF file on the page of your website. With just a few clicks, your docs will be published on the site, where users can see and download them

Key Features

  • Native Widget
  • Compatible With Premium Themes
  • Shortcode Available
  • WordPress Guttenberg Editor
  • Visual composer supported

PDF Embedder

With PDF Embedded, you can upload PDFs and embed them straight into your site, it's easy as adding images! PDFs will be automatically sized to their natural size and shape or fill the width available if they are too big. Optionally, you can set a width and a height will be calculated automatically. The shape will be recalculated whenever the page is resized by the user.

This plugin comes with a premium version that has more features.

Summary

What of the following solution will you use? Do you have any recommendations? Let us know in the comments. Don't forget to follow us on our social media accounts: Facebook and Twitter.