How to embed PDF in Elementor

This guide is all about how you can do embed PDF in Elementor. As you might have guessed, we will embed the PDF file in the website using Elementor. At some point, we all will need a PDF file in the blog, right? Now, it becomes very hard to display the entire PDF file directly on the website. Therefore, you will either have to add a link to download it or you will have to do some tweaks to display the PDF file.

Now, there are few ways to do this. We will two major ways using which you can show the PDF file to the audience with the help of Elementor. The guide will cover the entire tutorial for beginners. So, we will see a step-by-step guide on how you can do that. We will also see which is the preferred way to do it.

Let’s start with the first and the most preferred method.

Method 1: Embed PDF in Elementor using PDF Viewer

The first is the most preferred method that you can use. Here, we will do Elementor embed PDF using a third-party plugin. Many plugins allow you to add more features to your website using Elementor. People often call it Elementor addons as they help you increase the functionality of the Elementor plugin.

Now, the first method is all about using one of these methods to add the PDF file to your page.

We will use a plugin called PDF Viewer for Elementor. We will be using the plugin to add the PDF file to your page.

Before we more about the steps, we will understand what this plugin does and how you can use it.

Overview of PDF Viewer for Elementor

PDF viewer for Elementor is a plugin for Elementor embed PDF. You can easily display the PDF file here. When you add the PDF file using this addon, it will show the content of the PDF. So, the visitors who come to your website will be able to read the content.

If you are running an educational website, you might want to add this. This will prevent the users from downloading the PDF. Instead, it will only allow them to read it online.

Don’t worry, you don’t need to pay a penny for this plugin. It’s a free plugin and is available in the WordPress directory itself. So, you can simply head over to the WordPress directory and install the plugin from there.

Once you install it, you can follow the given steps.

This plugin allows you to add the file directly from the URL. Sometimes, we have the PDF file hosted somewhere else. For instance, if you have a file in your Google Drive, you can use this plugin to directly import the file from the URL. Yes, you don’t even need to download the file on your local PC.

Still, confused? We will see more about it as we see the steps.

The first step is extremely easy. It’s where you need to get things ready and have the plugin installed.

Install the Plugin

Your first step will be to install the plugin. You can simply head over to the WordPress directory and then install the plugin. Once you install the plugin, you can move further.

Just search for “PDF Viewer for Elementor” and you will find this plugin. All you have to do is install and activate the plugin. You also need to ensure that you already have the Elementor plugin installed and activated on your WordPress website. If these things are fine, you can head over to the next step.

Open the Page with Elementor

The second step will be to open the page with Elementor. If you want to add it as a standalone file, you will have to create a new page in Elemetnor and change the template to Full canvas. You can play around with the template to customize it as per your choice.

Depending on how you want to show the PDF file, you can use the templates. Most people want to Elementor embed PDF inside a page. This is where the page contains the content and then there is a PDF file embedded.

So, you need to create the rest of the page first.

Now, you can add the PDF viewer widget. In the left panel of Elementor, you will see the “PDF viewer” option. If not, you can simply search it.  You need to drag and drop the widget on the page wherever you want to show it.

Please note that you will have to create a one-column section for this. If there are multiple columns, it might mess up the view and the users won’t see the PDF file correctly. Therefore, you can create a one-column section and add the widget there.

Now, it’s time to configure the widget.

Configure the Widget

It’s time to configure the widget. For that, you can start the configuration with the left panel.

At first, you need to select whether you want to import the file using the URL or you want to upload it using your system. You can do it any way possible. If you already have the file on your server, you can also import it from there. If the file is in your server, you can find the URL by heading over to the media library and then paste it into the URL.

Once you do these things, you need to set the width, height, and alignment of the PDF.

This will tell you how users will see the PDF. As you are already in Elementor, you get a huge benefit here. You can set different options for mobile, tablet, and desktop versions of the website. For most people, you can set the default width and height.

In the same way, alignment can be as per your choice. However, the preferred way to Elementor embed PDF will be to show the PDF file in the center. Therefore, the right setting here will be the center. However, you can select the one you want.

If you want to make other changes, you can surely open the advanced panel and it will allow you to do the changes just like you do in the Elementor. So, this is where you can make the rest of the changes.

Save and Test

That’s pretty much it. Once you do all these changes, you will have to save all the changes and update the page. Before you directly update the page, you can also hit the preview changes option and see if the Elementor embed PDF has been done properly or something is missing here.

Once everything is confirmed, you can simply publish the changes and that’s pretty much it. Make sure you check the published page in an incognito window. This will ensure that the user can see it properly.

Method 2: Give an Option to Download

Now, not everyone wants to Elementor embed PDF in the webpage. Some people also want to show the downloaded option.

We will see a new way using which you can allow the users to download the PDF.

Don’t worry, we will also show a quick sneak peek of the content. This is how you can do things with ease. We will only use the Elementor plugin here. There are no other plugins needed.

Add a button for Download

The task is simple. What we will do here is that we will allow the users to download the PDF file directly from the website.

For that, we will first have to upload the PDF file to the media library. You can easily add the PDF file to the media.

Here are the steps for the same.

• Head over to Media or directly click on “Add Media”.
• You can then add the PDF file to the website.
• Once you add the file, you can copy the URL of the media file.

Now, we are back to the Elementor.

You can open the page where you want to add the PDF. Open and edit it with Elementor.

From there, you can add the section, and then you will have to add the button. You will see the button option in the left panel. From that, you need to add the button.

Now, you can shape the button as per your wish. As it’s Elementor, you can change the color, text, position, shape, etc. You can change all these things directly from the settings.

The buttons allow you to have the link and then you can link it with any of the files.

Here, we will link it with the PDF file. So, in the URL button, you can add the PDF File link and then save it.

Thereafter, you can also change the text of the download button. It plays a very important role when it comes to downloading. So, you can always ensure that the text says the exact instructions. You can name it “Download PDF”.

Adding the embed PDF in Elementor

Now, we talk about Elementor embed PDF, right? So, you might want to display a few lines of content to give a better idea to the audience.

Here, you will have to do it manually. You can simply copy a few lines or paragraphs from the PDF and add them in the sections above the Elementor embed PDF file. So, the users will first read the content and then they can think about whether they want to download the file or not. This is the best way to ensure that the user is getting what they want.

Alternatively, you can also post an image where the index page is shown in the photo. It will give the users an idea on what is the content on the PDF. This works great if you have the book.

Also, make sure that you have the proper rights to copy and paste the content in the blog post. If you have the rights, only then you should post it. Therefore, that’s the first step you need to take.

Now that you have a proper page ready, you can check out the page. Make sure you download the file before you publish it. It’s always great to test the website before you publish any changes.

Which is the Best Method for Elementor embed PDF?

Now, you might be wondering which is the best method and which one you should use.

Well, for most people, you can use the first method. The first method is for the people who want to show the content directly. If the content is for one-time use, you can do an Elementor embed PDF instead of giving the download link.

For instance, if you want to show the pricing chart, you can do an Elementor embed PDF instead of allowing users to download it.

On the other hand, if you have something that users might require in the future, you can give the downloaded file. A great example here can be a book. If you have a book that you want to show to the world, you can allow them to download the book.

Also, some people create two links in the landing page where one of the links says “View PDF” which opens the Elementor embed PDF whereas the other link is for downloading. Here, the download page will open or the PDF will simply begin to download.

So, you can use any of these as per your wish.

 Final Words

To conclude, this was all about Elementor embed PDF. We saw two methods where one of them was to use PDF viewer for Elementor and do a complete Elementor embed PDF. The second one was a bit old-fashioned where we added a small button through which the users can download the PDF. You can use any of these as per your requirement. The best way would be to use both of them together. It might require some work as you need to create two links but it will give more flexibility to the users on choosing one PDF.