{"id":5313,"date":"2021-09-27T11:07:26","date_gmt":"2021-09-27T11:07:26","guid":{"rendered":"https:\/\/www.wpservices.com\/how-to-embed-pdf-in-elementor\/"},"modified":"2022-05-31T20:53:16","modified_gmt":"2022-05-31T20:53:16","slug":"how-to-embed-pdf-in-elementor","status":"publish","type":"post","link":"https:\/\/www.wpservices.com\/how-to-embed-pdf-in-elementor\/","title":{"rendered":"How to embed PDF in Elementor","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

This guide is all about how you can do embed PDF in Elementor<\/strong>. As you might have guessed, we will embed the PDF file in the website using Elementor<\/a>. 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.<\/p>\n

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.<\/p>\n

Let\u2019s start with the first and the most preferred method.<\/p>\n

 <\/p>\n

Method 1: Embed PDF in Elementor using PDF Viewer<\/h2>\n

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

Now, the first method is all about using one of these methods to add the PDF file to your page.<\/p>\n

We will use a plugin called PDF Viewer for Elementor. We will be using the plugin to add the PDF file to your page.<\/p>\n

Before we more about the steps, we will understand what this plugin does and how you can use it.<\/p>\n

 <\/p>\n

Overview of PDF Viewer for Elementor<\/h3>\n

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.<\/p>\n

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.<\/p>\n

Don\u2019t worry, you don\u2019t need to pay a penny for this plugin. It\u2019s 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.<\/p>\n

Once you install it, you can follow the given steps.<\/p>\n

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\u2019t even need to download the file on your local PC.<\/p>\n

Still, confused? We will see more about it as we see the steps.<\/p>\n

The first step is extremely easy. It\u2019s where you need to get things ready and have the plugin installed.<\/p>\n

 <\/p>\n

Install the Plugin<\/h3>\n

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.<\/p>\n

Just search for \u201cPDF Viewer for Elementor\u201d 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.<\/p>\n

 <\/p>\n

Open the Page with Elementor<\/h3>\n

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.<\/p>\n

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.<\/p>\n

So, you need to create the rest of the page first.<\/p>\n

Now, you can add the PDF viewer widget. In the left panel of Elementor, you will see the \u201cPDF viewer\u201d option. If not, you can simply search it.\u00a0 You need to drag and drop the widget on the page wherever you want to show it.<\/p>\n

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\u2019t see the PDF file correctly. Therefore, you can create a one-column section and add the widget there.<\/p>\n

Now, it\u2019s time to configure the widget.<\/p>\n

 <\/p>\n

Configure the Widget<\/h3>\n

It\u2019s time to configure the widget. For that, you can start the configuration with the left panel.<\/p>\n

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.<\/p>\n

Once you do these things, you need to set the width, height, and alignment of the PDF.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

 <\/p>\n

Save and Test<\/h3>\n

That\u2019s 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.<\/p>\n

Once everything is confirmed, you can simply publish the changes and that\u2019s pretty much it. Make sure you check the published page in an incognito window. This will ensure that the user can see it properly.<\/p>\n

 <\/p>\n

Method 2: Give an Option to Download<\/h2>\n

Now, not everyone wants to Elementor embed PDF in the webpage. Some people also want to show the downloaded option.<\/p>\n

We will see a new way using which you can allow the users to download the PDF.<\/p>\n

Don\u2019t 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.<\/p>\n

 <\/p>\n

Add a button for Download<\/h3>\n

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.<\/p>\n

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.<\/p>\n

\"embed<\/a><\/p>\n

Here are the steps for the same.<\/strong><\/p>\n