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".
Create Amazing Websites
With the best free page builder ElementorStart Now
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
Here you can only choose the files from your media to embed that as a PDF. This solution has also some downsides :
- 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.
- 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
- Native Widget
- Compatible With Premium Themes
- Shortcode Available
- WordPress Guttenberg Editor
- Visual composer supported
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.
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.