How to Embed PDF using Elementor Page Builder? ( With Video Tutorial )

by | Last updated Feb 1, 2024 | Tutorial / How to | 0 comments

Elementor is a widely used page builder because of its simplicity. If you want to know how to embed pdf using Elmentor, your favorite page builder, this article will guide you perfectly. 

The process of embedding pdf with Elementor is not hard at all. All you need is just two plugins. The first is elementor, and the second is TNC FlipBook – PDF viewer for WordPress (Premium) or TNC PDF viewer (Free).

Why is Embedding PDF Important?

PDF files are important in many ways. Generally, ebooks, restaurant menus, documents, manuals, product catalogs, resumes or portfolios, and things like this are shared as PDF files.

Rather than just writing, it is easier to upload essential documents as PDFs. Visitors tend to read the PDF more than reading the content on the website. It helps your website performance in terms of SEO also.

PDF files can share a lot of information and anyone can create them easily. But to share that information as a webpage you might need a developer that will be costly.

One more benefit is that PDFs can be shown as flipbooks, allowing visitors to read that PDF just like an original or actual book.

Which Plugin to Use? Free or Premium?

In terms of spending money, everyone thinks that free options are best for them. But with the free plugin, there are some limitations. You can embed PDF with Elementor using both the free or premium plugins though.

TNC PDF viewer is a free PDF viewer plugin that allows you to create a viewer or reader from your PDF files. On the other hand, TNC FlipBook – PDF viewer for WordPress plugin provides you with both the PDF viewer and FlipBook options. So you can convert your PDF files to a FlipBook just by using the plugin. Here are some key points why you should choose the TNC FlipBook – PDF viewer for WordPress over the TNC PDF viewer.

Why TNC FlipBook – PDF viewer for WordPress?

The main reason for using TNC FlipBook – PDF viewer for WordPress is that this is the best PDF Viewer plugin with Flipbook. The flip animation and the sound while changing the pages give the reader the experience of reading an original book. This plugin is also very lightweight.

The second big reason for choosing this plugin is this plugin gives you various customizable options. You can use different colored themes or use your own custom color to create the viewer. Or, you can place the toolbar in 4 different positions and the icons have got 3 different sizes. Toolbar elements can be hidden too if you want. For example, you can hide the download option so that visitors can only read but can’t download the PDF file.

With this plugin, you can embed all your previously uploaded PDF files with just a click. You can create PDF viewers from them at once also. There are many more features that will make the blog longer.

Visit the plugin page on CodeCanyon and you can check them out by yourself.
https://codecanyon.net/item/pdf-viewer-for-wordpress/8182815

We are now clear about what to use. The main question is now how to embed. So, let’s dive into it and learn the process of embedding PDF using Elementor, step by step.

How to Embed PDF Using Elementor? (Step-by-Step Guide with Video)

Step 1: Install Elementor On Your WordPress Website

Go to plugins on your WordPress dashboard. Click ‘Add New’ and then search ‘Elementor Website Builder. Then click ‘Install Now’. Elementor will be installed on your website. If you have Elementor already installed on your WordPress website

install-elementor-on-wordpress

Step 2: Get and Install TNC FlipBook – PDF viewer for WordPress

Visit CodeCanyon to get this WordPress plugin. Click ‘Add to Cart’ and then “Go to Checkout”. After buying the plugin, upload the plugin to your WordPress. Click Install. Or, you can use the TNC PDF viewer from wordpress.org also.

pdf-viewer-for-wordpress

Here is the link to the plugin. Click here.

Step 3: Get Elementor PDF viewer for WordPress Addon

This process is the same as the previous one. Go to CodeCanyon and click Add to Cart and then Go to Checkout.

pdf-viewer-for-wordpress-elementor-addon

Click here to get this plugin. Upload the addon to your WordPress and click Install. You are all set now.

After installing, You can see three more widgets in Elementor. 

  • PDF Viewer Link
  • PDF Viewer Embed/Iframe
  • PDF Viewer Image
  • PDF Viewer Navigative ( Addon )
  • Bookshelf – Display PDF viewer Addon
  • List/Grid – Display PDF viewer Addon

Step 4: Upload PDF on WordPress

Click on your WordPress dashboard’s PDF Viewer tab and then Add New. Upload the PDF you want and then click select. 

You will find a lot of toolbar and appearance customization options here. Select as you demand and click publish, and your PDF is ready.

Step 5: Upload PDF With Elementor

You can use three widgets here to show pdf using your Elementor.

#1. PDF Viewer Link :

If you take the PDF Viewer Link widget, you can see the option to select the PDF you want to show. After selecting, just press update. You can change the settings if you want also. And a link will be created, redirecting to the pdf page. 

#2. PDF Embed/Iframe widget:

Now, if you take the PDF Embed/Iframe widget, you can see that the PDF is embedded right into that page, and you can read the pdf. This option is useful if you want to show a PDF inside a page. Embedding pdf with elementor and PDF viewer for WordPress is very easy.

#3. PDF Viewer Image:

If you show an image that is linked to the PDF viewer or FlipBook use this module. You can select any image and PDF viewer you want. Set the width and height according to your need.

#4. Bookshelf – Display PDF viewer:

Showcase your PDF viewer or FlipBooks with a BookShelf. It can open the PDF files as a PopUp too. You need to have Display – TNC FlipBook – PDF viewer for WordPress Addon for this. Take a look at this.

#5. List/Grid – Display PDF viewer:

You can present your PDF viewer or FlipBooks as a Grid or list of items. You need to have Display – TNC FlipBook – PDF viewer for WordPress Addon for this. Take a look at this.

#6. PDF viewer Navigative:

 Generate PDF viewer or FlipBooks dynamically from the same page. You don’t need to create PDF viewers or flipbooks separately. If you want to use the navigative widget, you need another addon. Click here to get the addon. After that, you can use this widget too.

Conclusion: 

So, in a nutshell, The way to embed pdf on WordPress using Elementor is as follows:

  1. Get TNC FlipBook – PDF viewer for WordPress or TNC PDF viewer
  2. Upload PDF on WordPress from PDF Viewer Tab
  3. Click on the PDF Viewer or Embed/Iframe widget in Elementor
  4. Select the pdf you want to embed
  5. Click Update, and your PDF is ready.
Share:

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Check out our Plugins

TNC FlipBook - PDF viewer for WordPress is the best-selling premium PDF Reader plugin for WordPress on CodeCanyon (7500+ Sales) since 2014.

Shopify App that can transform images and PDF files to FlipBook on your Shopify store with just a few clicks.

Upload files for specific visitors and restrict them from others by controlling the access with this plugin.

Ready to use Webflow Templates by ThemeNcode with latest and trendy design. Check this out on Webflow Marketplace

Divi Modules, Child Themes, Layouts and many more. All built just for Divi. Make your website creation process easier with Divi.

Easily embed interactive FlipBooks by hosting your PDFs on our cloud platform. Enhance your website with engaging content today!.

Popular Post