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:

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 WordPress 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.

Available PDF embedding methods for Elementor

There are three main ways to embed PDFs in Elementor, each with different levels of flexibility and ease of use:

• PDF viewer widget plugins: These plugins add custom widgets to the Elementor panel, letting you drag and drop PDF viewers directly onto your pages without writing code.
• Shortcode implementations: Some PDF plugins generate shortcodes that you can paste into Elementor’s shortcode widget to embed documents on the page.
• Manual HTML embedding: You can use the HTML widget in Elementor to embed PDFs using iframe or object tags with direct links to your PDF files.

Each method offers a different balance of control, styling, and ease of use. For example, manual HTML embedding gives you full control over layout but lacks interactive features, while widget-based plugins offer a more visual experience with minimal effort.

Let’s start with the manual approach, which is ideal if you only need to embed a few PDFs and don’t want to install extra plugins.

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:

1. In your WordPress dashboard, go to Media → Add New Media File and upload the PDF file you want to add to an Elementor page.
2. Once uploaded,  click the Copy URL to clipboard button.
   

   

3. 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 PDF viewer plugins that can help.

Available PDF viewer plugins for Elementor

If you want more advanced functionality than manual embedding, there are several plugins that make it easier to display PDFs in Elementor.

Document Library Pro is a comprehensive solution for creating searchable, professional PDF libraries. It lets you embed PDFs in a table or grid layout with features like instant search, category filters, and document previews. You can bulk upload files, control access by user role, and fully customize the layout to match your Elementor design.

With that in mind, here are several other plugins provide basic PDF embedding:

• Unlimited Elements for Elementor Offers a free PDF Viewer Widget that you can drag directly into any Elementor section.
• PDFjs Viewer for Elementor & Gutenberg Uses the PDF.js library to render PDFs directly in the browser without extra software.
• PDF Embedder A lightweight plugin that uses shortcodes to embed PDFs with minimal styling options.

For creating professional PDF libraries, we’ll demonstrate Document Library Pro, as it provides the most comprehensive feature set and integrates seamlessly with Elementor.

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:

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

PDF embedding in Elementor requires external plugins. These solutions use three main implementation methods. Widget-based solutions add PDF viewers through Elementor's widget panel. Shortcode implementations embed PDFs using plugin-generated shortcodes. Manual linking connects text or buttons directly to uploaded PDF URLs.

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 - I find that they're perfect for simple single-document displays.

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

1. Buy the Document Library Pro plugin and install it on your site.
2. When you activate the plugin, a wizard will start to guide you through each step of the setup process.
3. 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.
4. 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.
     

     

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. The [doc_library] shortcode is the primary method for displaying PDFs in Elementor pages. Use [doc_library] shortcode in Elementor's Shortcode widget. This creates a searchable, sortable PDF display.

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. Navigate to Documents → Settings for configuration options. I find that checking these settings before embedding helps ensure everything displays correctly.

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. Add shortcode parameters for specific PDF filtering. For example, [doc_library category="reports"] displays only PDFs in the reports category. 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. The library automatically includes search functionality, allowing visitors to find specific documents quickly.

Alternative PDF Embedding Methods

Beyond plugins, Elementor offers native methods for PDF display. The HTML Widget method uses iframe tags with PDF URLs for direct embedding. Add an HTML widget to your page and insert: <iframe src="your-pdf-url.pdf"></iframe>

This displays PDFs directly on the page without requiring additional plugins.

Direct linking creates download links using Text or Button widgets. Select any text or button element, link it to your uploaded PDF URL, and visitors can download the file when clicked. I find this works well for single documents like forms or guides.

Third-party embedding connects files from Google Drive or Dropbox. These services provide embed codes that work in Elementor's HTML widget. Copy the embed code from your cloud storage provider and paste it into an HTML widget.

While these manual methods work, they lack features like search functionality, categorization, and professional layouts. For businesses managing multiple PDFs, Document Library Pro provides a more scalable solution. It automatically generates searchable libraries with filtering options - features that manual methods can't match without extensive custom coding.

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:

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.