Best Elementor PDF Viewer Plugin & How to Embed PDF in Elementor?
#1 Black Friday Deal – Hostinger WordPress Hosting now at just $1.95/mo + FREE Domain
Use Coupon code: BLACKFRIDAY & Get Extra 10% OFF
You know what, Embedding a PDF viewer on your Elementor website can transform how you present content to your visitors.
Whether you're a business
- showcasing product catalogs,
- an educator sharing course materials,
- or a blogger offering downloadable guides
A PDF viewer provides a seamless and interactive way to display documents directly on your website.
This eliminates the need for users to download files, enhancing their experience and keeping them engaged on your site.
In this guide, I'll help you pick the Best Elementor PDF Viewer plugins & show you different methods for adding a PDF viewer to your Elementor website, helping you understand this powerful feature's full functionality.
What are the Methods to Add PDF Viewer in Elementor?
There are three methods to include a PDF viewer in your Elementor-built pages:
- Using Code
- Using WordPress Plugins
- Using Elementor Addons
Let me break it down for you…
- Using an HTML Code: This method involves embedding the PDF using a simple code snippet. It's pretty simple but limited in terms of design & customization.
- Using Plugins: Several WordPress plugins offer dedicated PDF viewer functionalities. These plugins simplify the process but may require additional installation and configuration.
- Using Addons: Some elementor addons offer a PDF widget that allows you to embed the PDF & show it directly on the website. This is often the easiest & most user-friendly option.
Now that you know the 3 methods, let's get into each method…
🔖 Most Read Elementor Tutorials…
Method 1: Using Code (HTML Widget)
If you're okay with this simple method then simply,
- Add an “HTML widget” to the Elementor panel
- Add this small code snippet…
<object data="PDF URL" type="application/pdf" width="700px" height="800px"> </object>
ℹ Note: Make sure to upload your pdf in the media so that you get the URL of the pdf & then in the above code, place it in the “PDF URL”.
Also, you can set custom width & height, just change the px.
Now if you want full control, go for method 2 & 3…
Method 2: Using WordPress Plugins
For every functionality you need, there's a WordPress plugin to fulfill your needs. There are a ton of PDF viewer plugins & out of all, here are the best ones…
Best PDF Viewer WordPress Plugins in 2024
- EmbedPress
- PDF Poster
- Elementor TNC Flipbook
Here's a breakdown of features & the use cases of each pdf-viewer plugin…
1] EmbedPress
Features
- Upload PDFs directly to your WordPress site.
- Embed PDFs from your existing media library.
- Paste a URL to embed PDFs from external sources.
- Responsive design ensures PDFs look good on any device.
- Control width and height for optimal placement within your website.
Use Cases
- Share reports, brochures, or white papers on your website.
- Embed product manuals or assembly instructions.
- Include client testimonials or case studies in PDF format.
Downloads: 90,000+
Ratings: 5/5
Author: WPDeveloper
2] PDF Poster
Features
- Creates a static image preview of your PDF with customizable title and text.
- Visitors can click the poster to open the full PDF.
- Reduces initial load time by displaying a lighter image first.
Use Cases
- Showcase important documents on your homepage or landing pages.
- Create visually appealing calls to action for downloadable PDFs.
- Provide a clear preview of the PDF content before users open it.
Downloads: 30,000+
Ratings: 4.5/5
Author: bPlugins
3] Elementor TNC Flipbook – PDF Viewer for WordPress
Features
- Creates a realistic flipbook effect for your PDFs within Elementor.
- Simulates a turning page animation for a more engaging user experience.
- Can be customized with branding elements like logos and colors.
Use Cases
- Ideal for showcasing magazines, brochures, or reports in an interactive format.
- Enhances user engagement with a more dynamic presentation of PDFs.
- Adds a touch of professionalism to your website's document presentation.
Downloads: 3,000+
Ratings: 5/5
Author: Kazbek Kadalashvili
→ Download Elementor TNC Flipbook Plugin
Method 3: Using Elementor Addons
Now coming to my preferred method i.e. using Elementor addons for elementor stuff. Sadly, there aren't many addons providing this feature. so, here are the best ones…
Best Elementor PDF Viewer Addons in 2024
- Happy Addons
- Dynamic Content for Elementor
If you're like me, you'd prefer adding an addon for any elementor task as you get additional widgets & extensions inside the elementor.
Above, I've listed the pdf viewer widgets for elementor & now let's explore them individually…
1] Happy Addons – PDF Viewer
Features
- Focused on PDF document display.
- Offers customization options for the PDF viewer itself:
- Title bar with text color, typography, and background settings.
- Icon placement and styling for the title bar.
- Responsive design ensures the viewer looks good on all devices.
Use Cases
- Ideal for situations where you prioritize a clean and customizable PDF viewing experience.
- Well-suited for showcasing reports, brochures, or white papers where you want a clear and uncluttered presentation.
- Useful when you want to add a title or icon to provide context to the embedded PDF.
Downloads: 400,000+
Ratings: 5/5
Author: Leevio
→ Download/Live Preview HappyAddons PDF Viewer
2] Dynamic.ooo – PDF Viewer
Features
- More versatile document viewer.
- Supports displaying various file types beyond PDFs: MS Office documents (Word, Excel, PowerPoint), Google Docs, Sheets, Slides, Forms, and Drawings
- Leverages Google Drive preview for document rendering.
Use Cases
- A good choice if you need to embed a wider range of documents besides PDFs.
- Useful when you want to showcase documents that are already stored in your Google Drive.
- Well-suited for scenarios where a simpler, Google Drive-powered preview is sufficient.
Downloads: 50,000+
Ratings: 4.5/5
Author: Dynamic.ooo
→ Download Dynamic Content for Elementor Plugin
What is the Best Method to Add PDF Viewer in Elementor?
While all three methods have their merits, here are my personal recommended methods:
- Happy Addons: I would highly recommend this addon due to its seamless integration, ease of use, and comprehensive customization options.
It provides a dedicated PDF viewer widget that enhances the user experience & moreover, you get a lot of other useful elementor widgets & that too for FREE!
- Using HTML Code or EmbedPress: If you prefer not to use addons, then embedding HTML code is a reliable alternative. EmbedPress is also a strong contender for its versatility and support for various content types.
The best part is that both methods won't cost you anything, they are FREE!
Now, let's see how to add a pdf viewer in elementor using the Happy Addons pdf widget…
Step-by-Step Guide on How to Add PDF Viewer in Elementor
Whether you wanna offer a menu, portfolio, or financial report in PDF format, here's how you can set it up using the “PDF View” widget by Happy addons…
- Install and activate Happy Addons:
- Go to your WordPress dashboard.
- Navigate to Plugins > Add New.
- Search for “Happy Addons” and click “Install Now.”
- Next up, Activate the plugin.
- Enable the PDF View Widget
- Navigate to Happy Addons from your WordPress dashboard
- Next up, navigate to the Widgets tab & ensure that the “PDF view” widget is enabled
- Add the PDF Viewer Widget:
- Open the page where you wanna add a pdf file/viewer & Edit with Elementor
- Search for the Happy Addons “PDF Viewer” widget in the Elementor panel.
- Drag and drop the widget onto your page.
- Upload Your PDF
- In the widget settings, either you can drop your PDF file URL or click on the “Choose File” button to display your desired PDF file.
- Upload your PDF file or select one from the media library.
- Customize your PDF Viewer:
- Feel free to adjust the viewer settings, such as pdf title, width, height, and download options, according to your preference.
- Customize the appearance to match your website's design.
- Publish Your Page
- Once you are done with the configuration,
Click “Publish” or “Update” to make your changes live.
Congratulations!🎊🎉
You've just added a PDF viewer to your website with Elementor.
Now your PDF will be accessible to visitors right on your Elementor page.
But wait there is more to this, it’s time for Koffee with Kuldeep session (obviously virtually) 😅
So, grab your coffee and get your queries solved by me!
🚀 Useful Elementor Tutorials to Level up your Elementor Game…
FAQ's
How do I display a PDF in Elementor?
To display a PDF in Elementor, follow these steps:
– Install and activate a plugin that allows you to embed PDFs. Some popular choices are “Happy Addon” or “PDF Embedder.”
– After installing the plugin, go to the Elementor editor of your page.
– Drag the PDF widget and drop it where you want to add it on your page.
– Upload or Link Your PDF file directly or provide the URL in the widget settings
– Customize the display settings of the PDF viewer according to your preferences.
– Save and publish your page to see the PDF embedded within your Elementor layout.
How do I add a PDF viewer to my Elementor?
Adding a PDF viewer to your Elementor setup involves these steps:
– Choose and install a plugin such as “PDF Viewer for Elementor” from the WordPress plugin repository.
– Activate the plugin through the ‘Plugins' menu in WordPress.
– Edit the page or post where you want to add the PDF viewer using Elementor.
– Drag the PDF Viewer widget from the Elementor panel onto your page.
– Configure the widget by uploading your PDF file or entering the URL of an existing PDF.
– Adjust any settings, like width, height, and display options to fit your needs.
– Save or update the page to make the PDF viewer live.
How do I embed a PDF viewer in WordPress?
To embed a PDF viewer in WordPress:
– Choose a PDF Viewer Plugin: Plugins like “PDF Embedder,” “PDF Viewer for WordPress,” or “PDF.js Viewer” are popular choices.
– Install and Activate the Plugin: Go to the ‘Plugins' section in your WordPress dashboard, search for your chosen plugin, install, and activate it.
– Create or Edit a Post/Page: Navigate to the post or page where you want to embed the PDF.
– Insert the PDF: Depending on the plugin, you might use a shortcode, Gutenberg block, or a widget in Elementor to embed the PDF.
– Upload Your PDF: Use the plugin interface to upload your PDF file or provide the URL of the PDF.
– Configure Viewer Settings: Adjust settings like dimensions and toolbar options.
– Publish or Update Your Post/Page: Save your changes and view the embedded PDF on your site.
What is the plugin for WordPress PDF Reader?
There are several popular plugins for reading PDFs in WordPress:
– PDF Embedder: Simple and easy to use, allowing you to embed PDFs using shortcodes.
– PDF.js Viewer: Utilizes the PDF.js library to display PDFs and offers a variety of customization options.
– PDF Viewer for WordPress: A comprehensive solution with advanced features like text search, zoom, and pagination.
– PDF Viewer for Elementor: Specifically designed for Elementor users, it integrates seamlessly with the Elementor interface.
– Flowpaper: Provides a flipbook-style viewer for PDFs.
What is PDFjs Viewer for Elementor and Gutenberg?
PDFjs Viewer for Elementor and Gutenberg is a plugin that allows you to embed and display PDF files on your WordPress site using the PDF.js library.
It is compatible with both Elementor and Gutenberg, providing flexible options for embedding PDFs. Features include:
– Seamless Integration: Works with both Elementor widgets and Gutenberg blocks.
– Customization Options: Allows you to customize the appearance and functionality of the PDF viewer.
– Responsive Design: Ensures that the PDF viewer is mobile-friendly and adjusts to different screen sizes.
– User-Friendly Interface: Provides an intuitive interface for uploading and embedding PDFs without needing any coding knowledge.-
– Advanced Features: Supports features like text search, zoom, page navigation, and more, enhancing the user experience.
Wrapping Up
Remember, a well-placed PDF viewer can significantly improve your website's functionality by providing visitors with easy access to important documents.
So go forth, explore the options, and empower your website with the versatility of PDF integration!
I hope this guide helps you choose the best elementor pdf viewer plugins/addons & enables you to embed a PDF file in elementor (with or without using a plugin).
That's it for this one. Happy Embedding!
Cheers,
Kuldeep
🔌 Elementor Widgets to Enhance your Elementor Website…