Do you want to embed PDF in Elementor powered website? If you are looking for a simple method, keep reading this article. This post will show you how to embed PDF in Elementor correctly.
Each WordPress theme comes with unique design options. But if you need to stand out, invest in a WordPress page builder plugin. Elementor is one of the best and most popular WordPress page builder plugins. With it, you can create any page design without any hassle.
But do you want to embed PDF in Elementor-powered websites?
Here’s a step-by-step guide if you are looking for a beginner-friendly tutorial. You can complete the task without using a dedicated WordPress plugin.
Before going further into the tutorial, let’s see why embedding PDF in Elementor is excellent.
Why You Should Embed PDF in Elementor?
To explain something in detail, consider creating a PDF file. If you have a PDF file, you can define the content visually, making the topic easy to understand.
Usually, website owners will add a download link to the PDF file. Visitors can download it to their local storage and read it offline.
This could be improved.
Instead of giving them a download link, if we can embed the file, the visitors can quickly scroll through the file from the front end of the website and get all the information. This will help you improve the user experience. This is better for convenience.
Staying on the website for a long time will also help you improve the bounce rate.
Now you know why you should embed PDF in Elementor. Next, let’s see how to embed PDF in Elementor.
How to Embed PDF in Elementor
You do not need to use any Elementor addons for the task. You can even complete the task with the free version of Elementor. Here’s how you can embed PDF in an Elementor-powered website.
First, you need to open the page where you need to embed the PDF file. In this case, we are going to edit the About Us page. Once you have opened the page, click the Edit with Elementor button.
Within a few seconds, the editor will be opened. If you take a close look at the editor, the left-hand side will show you all the elements you can use on the page. The right-hand side will show you the live preview of the page.
We will use the HTML element to embed the PDF file.
Since Elementor supports drag-and-drop editing, you can pick up the element from there and drop it inside the live preview wizard, where you need to display the PDF file.
If you select the element, you can see the customization options on the left-hand side of the editor.
The next thing you need to do is add the below code to the HTML element:
<object data="PDF URL" type="application/pdf" width="700px" height="1200px"> </object>
If you look at the code, you can see that we have mentioned the embed width as 700px. The height would be 1200px. Based on your requirements, you can always tweak it later.
The next thing we need to do is enter the URL to the PDF page. Go to the Media Library section if you have uploaded the PDF file to your media library. Once you have found the file, use the Copy URL to the clipboard button.
Now paste the URL in the code where it says PDF URL.
After entering the URL, you can see that the PDF file was embedded in the page! No additional coding is needed. This way, you can embed unlimited PDF files in your Elementor pages.
This is how you can embed PDF in Elementor powered website without any plugins.
Bonus: Best PDF Embedder Plugins for WordPress
If you need to rely on a dedicated WordPress plugin to embed PDF files on your website, use these options:
- EmbedPress
- PDF Embedder
- PDF Poster
Below, we will explain what makes these plugins unique.
1. EmbedPress
If you are looking for a feature-rich plugin to embed content on your WordPress website, check out EmbedPress. With EmbedPress, you can embed PDF files, Google Maps, Google Doc files, videos, audio, etc. The plugin can help you embed content from more than 150 sources.
One of the best things about EmbedPress is the customization options you can have. You can take control of the iFrame embed and tweak its height, width, padding, margin, etc. Since the plugin is also optimized for page builders, you can directly use them through the page builder’s editor.
If you are running a multilingual blog and need to translate the plugin, you can use any WordPress translation plugin like WPML. Another notable feature of the plugin is the shortcode generator. Shortcodes will make the embedding process a cakewalk.
Features
- 150+ sources supported
- Shortcode generator
- Optimized for page builders
- Lazy loading
- Audio and video player customization
Pricing
EmbedPress is a freemium WordPress plugin. The free plugin can be downloaded from the WordPress plugin repository. The premium version will cost you $36 a year.
2. PDF Embedder
If you prefer an easy-to-use PDF embedder plugin, check out PDF Embedder. You do not need to be tech-savvy to embed PDF files with this plugin. You can embed as many PDF files on the page with a few shortcodes. You can also include a download button in the toolbar besides embedding.
PDF Embedder is also optimized for speed. The plugin uses a lightweight JavaScript code that will not impact the website’s loading time. Since the plugin also doesn’t rely on third-party services, there won’t be any extra HTTP requests – better for speed optimization.
You can remove the plugin’s branding from the embeds using the premium version. The premium version plugin will also give you full-screen viewing mode, ideal for multiple situations.
Features
- Optimized for mobile phones
- Shortcodes
- Multiple appearances
- Full-screen mode
- Removable branding
Pricing
The PDF Embedder is a freemium plugin. You can download the free version of the plugin from the repository. The premium version costs $20 a year.
3. PDF Poster
The third option we have for you is PDF Poster. You can choose this option if you prefer a reliable plugin to handle the PDF embeds. The major advantage of PDF Poster is the customization options available. You can also protect your content with the plugin.
With the protection, you can prevent unauthorized downloads and people copying the PDF content. PDF Poster is also optimized for Gutenberg. You will get 2 Gutenberg blocks with the plugin you can use to embed PDF files.
Besides the features mentioned above, you will also get a print button with the embedder. This feature will come in handy if people need to print PDF files.
Features
- Highly customizable
- Content protection
- File organization
- Optimized for Gutenberg
- Print button
Pricing
PDF Poster is a freemium plugin. You can get the lite version of the PDF Poster from the plugin repository. The premium version will cost you $30 a year.
Conclusion
Elementor is an excellent choice to create stunning websites without any hassle. Similarly, PDFs are good if you need to showcase so much data on a single page without ruining the user experience.
If you need to embed PDF files on your Elemtnro website, you do not need to use custom add-on plugins. If you check for Elkementor add-ons, you will stumble upon multiple options.
In this article, we have shown you a step-by-step guide to embed PDF files in Elementor powered website without using a single plugin. The process is straightforward, and it won’t take much time of yours.
So, if you need to embed PDF files on your website, try this method!
How else are you going to customize your Elementor-powered website?
Let us know in the comments!
