Two simple ways to embed PDFs in Elementor without writing code
Looking for an Elementor PDF viewer plugin? Discover hassle-free ways to embed PDFs on your Elementor pages, including how to create a searchable, professional PDF library.
The Elementor page builder plugin is a hugely popular way to create WordPress sites. However, it lacks a native method for embedding PDFs or creating a searchable PDF library.
There are many reasons why you may want to add PDFs to your WordPress website. They allow you to:
- Preserve and share documents in a consistent format across devices and operating systems.
- Add a layer of security to documents by password protecting them.
- Improve SEO since search engines can index PDF content.
While they may seem basic, PDFs can be valuable in enhancing your site with monetizable content or in creating an engaging and complete media library.
This tutorial will explain everything you need to know to easily add PDFs to your Elementor-themed site. I'll show you how to manually add PDFs and share some of the best Elementor-compatible plugins for creating a professional PDF library for your website.
How to add PDFs to an Elementor-powered WordPress site
PDFs can add an extra dimension to your website, yet neither Elementor nor Elementor Pro provide a built-in way to embed them. It simply allows you to upload a PDF to the Media Library and display it on a page as a text link.
However, with a little extra work, it is of course possible to embed PDFs on your site. The section below will explain various ways to do so, including the use of plugins for an easy, code-free experience.
Manually adding PDFs to your site
The most basic way to add PDFs to Elementor is to manually upload each file to your WordPress media library and then link them to the relevant page or post.
Here's how to do it:
- In your WordPress dashboard, go to Media → Add New Media File and upload the PDF file you want to add to an Elementor page.
- Once uploaded, click the Copy URL to clipboard button.
- Open the Elementor page or post to which you want to add the PDF and insert the Text Editor widget. Add some relevant text to the widget and then link it to the PDF URL.
Visitors can click on the text link to open the PDF in their browser and save it locally. While this method is quick, it does have some downsides such as:
- It lacks organization, filtering, and search functionality, so you'll have to scroll through your entire media library to find your PDFs
- Linking to PDFs manually on individual pages is time-consuming and difficult to maintain.
- Visitors don't get a preview of what's inside the PDF without clicking on the link. It's not really a true Elementor PDF viewer.
There are better options available to neatly embed PDFs directly in the Elementor editor. Let's take a look at some Elementor PDF viewer plugins that can help.
Adding a searchable PDF library with Document Library Pro
Document Library Pro is an excellent solution if you want to quickly build a professional and searchable PDF library on your Elementor site. It is fully compatible with sites using Elementor and solves the hassle of manually adding and displaying PDFs.
It allows website owners to list and view multiple PDF documents on a page, and includes features such as:
- PDF preview in a lightbox popup to allow visitors to view file content before downloading.
- Multiple layout options (table, grid, collapsible folders).
- One-click download button to allow visitors to save PDFs to their local device for later viewing.
- Robust search, sort, and filter options to make it easy for visitors to find PDFs.
- Drag and drop option for adding PDFs to the document library.
- Embedding from third-party sites like Google Drive, Dropbox, or any other cloud drive.
- Bulk upload via CSV to easily add multiple PDFs at once.
- Intuitive category and tag system to organize PDF files.
- Download count tracking and more…
Document Library Pro works with all WordPress themes and the page layouts that you build using Elementor. It's easy to use and you don't need any HTML, CSS or PHP knowledge.
Each PDF that you upload to Document Library Pro has its own dedicated page. You can use this page to display the PDF directly on the page by using free plugins like Document Embedder or EmbedPress.
Alternatively, use the preview option to allow users to preview and/or download each PDF file that they view.
Whether you have a handful of PDFs or hundreds, Document Library Pro has everything you need to neatly display PDFs on your Elementor site. It's easy to use and fully compatible with Elementor, allowing you to add PDFs without writing any code.
Free vs paid plugin solutions
When it comes to Elementor PDF viewer for WordPress plugins, both free and paid solutions are available. If you only need basic PDF embed features then the free plugins work well.
For example, PDFjs viewer for Elementor & Gutenberg is a free Elementor compatible plugin that offers a straightforward way of embedding PDFs using a widget. While the plugin is free and easy to use, it is limited to only allowing you to embed individual PDFs using a widget.
Other free plugins might initially seem cost-effective but can have hidden costs. For example, TNC PDF Viewer is a free plugin but requires a paid addon to be compatible with Elementor.
Depending on your needs, opting for the free plugin may help you save costs. However, they tend to have limited support and features compared to paid solutions.
If you want to embed multiple PDFs or enable search within your PDF library, it's worth considering a premium solution such as Document Library Pro. Next, let's take a look at how to use it to embed a PDF library in Elementor.
Getting started with Document Library Pro
Follow the step-by-step instructions below to install and set up Document Library Pro as a PDF viewer plugin for Elementor.
1. Install the plugin and add PDFs
- Buy the Document Library Pro plugin and install it on your site.
- When you activate the plugin, a wizard will start to guide you through each step of the setup process.
- Start by activating the license key, and then configure the various options presented by the wizard. Don't worry, you can override these options later when you embed the PDF library using a shortcode.
- After the plugin has been configured, you're ready to start adding PDFs to Document Library Pro. There are several ways to do this:
- Add documents manually Go to Documents → Add New and start filling in the PDF details such as the title, description, slug, categories, tags, authors, and featured image. Look for the Document link box on the top right and either upload or add the PDF URL from an external source.
- Use drag and drop to upload multiple files Go to Documents → Import and either drag and drop multiple files into the media library or upload a CSV file containing all of the data. This will automatically create a list of PDFs in the Document Library Pro.
- Select PDF files already in your Media Library Go to the Media page in your WordPress admin and switch to the list view. Next, tick the boxes next to all of the PDF files you want to add, and then select Add to document library from the bulk actions dropdown.
- Add documents manually Go to Documents → Add New and start filling in the PDF details such as the title, description, slug, categories, tags, authors, and featured image. Look for the Document link box on the top right and either upload or add the PDF URL from an external source.
Recommended settings
There are dozens of options for configuring the Elementor PDF viewer in Document Library Pro. Here are some of the most important ones that you should pay attention to:
Layout options
Document Library Pro lets you display PDFs in either a table or a grid layout. Choose whichever layout you prefer.
Content options
The PDF viewer plugin also gives you full control over the fields you want to display. Depending on your layout, you can display the PDF title, description, file size, and other information in the library.
Link options
There are lots of options for configuring the links to the PDF in Elementor. For example, you can:
- Add download and/or preview buttons for the PDF viewer.
- Choose from a wide range of styles for your download and preview buttons.
- Open links in a new tab.
- Disable links to the individual web page for each PDF in order to keep users on the table/grid page.
Filtering options
To make it easier for people to find specific PDF's, you can add filter dropdowns above the PDF library. For example, you might add filters for categories or tags.
List specific PDFs
If you have a collection of PDFs and want to selectively display them based on specific categories, tags, or other criteria, Document Library Pro makes it easy to do so. However, you nred to do this in a shortcode rather than when you first set up the plugin.
2. Embed the PDF library in Elementor
After adding the PDF files to the Document Library Pro, the next step is to embed the PDF library in Elementor. You can easily do this by adding a simple shortcode wherever you want the PDFs to appear.
When you installed Document Library Pro, it created a new page called 'Document Library'. This will display all the PDFs in your library based on the settings you configured in the setup wizard. You can change these settings by navigating to Documents → Settings.
If you're designing pages using Elementor, then you can also use the [doc_library] shortcode to insert the PDF library into your Elementor-built page. Simply add this to a Shortcode or Code block in Elementor. There are more than 50 shortcode options to allow you to specify which PDFs to include and how they should appear.
It may look slightly strange in the editor. Don't worry - this just means that no back end preview is available in Elementor. Click the Update button and visit the page on the frontend to see your PDF library neatly displayed:
Get the ultimate Elementor PDF viewer plugin today 🚀
Elementor lacks a straightforward method to add and build an effective PDF library on your site. While it is possible to display PDFs as links, it requires a lot of manual work and does not provide the best user experience.
Luckily, there are solutions like Document Library Pro that integrate seamlessly with Elementor website builder to help you effortlessly create a professional, searchable PDF library without any coding. It lets you:
- Bulk upload PDFs using a CSV file or a drag-and-drop interface.
- Embed a PDF library with robust sorting, searching, and filtering options.
- Organize PDFs in a list, grid, or folder view for easy viewing.
- Allow people to preview PDFs before downloading.
- Embed PDFs from third-party sites like Google Drive and Dropbox.
It stands out for its flexibility and user-friendly interface. So, if you're looking for an easy, code-free way to add PDFs to your Elementor website, download Document Library Pro today. It's the best Elementor PDF viewer plugin to build a slick and functional PDF library on your site.