Enhancing UX and accessibility on your website is not just about making it more user-friendly, but it’s more than that. For example, you are embedding PDFs directly into your website. Visitors can view and interact with your content without leaving the site. This seamless experience keeps users engaged and reduces friction in accessing information, which can lead to increased time spent on your site and improved user satisfaction.
However, if you want to embed a PDF to your website pages, you must use Elementor add-ons, or so you thought. But, in this article, we will show you how to embed a PDF in Elementor without the help of any add-ons. All you’ll need is some HTML code, and you’re ready!
Steps to Embed PDF in Elementor (Without Plugin)
Step 1: Add the HTML widget
To embed PDF in Elementor without the help of any Elementor add-ons, you first need to add the HTML widget to your page and put some code inside it.
Go to the Elementor editor; create new content (page/post) or edit the existing one.
Once you enter the Elementor editor, select the HTML widget from the widget panel, then drag & drop it into the canvas area. You can place the widget anywhere you want to a PDF embed displayed.
Next, please copy the code snippet below and paste it into the HTML Code input field.
<object data="Your PDF URL" type="application/pdf" width="720px" height="1080px"> </object>
The above HTML snippet will display your PDF content with the dimension of 720×1080 pixels. You can change the values of the width
attribute as well as the height
attribute if you wish another dimension.
Step 2: Insert the PDF URL into the Code Snippet
It’s time to replace the “Your PDF URL
” with the PDF URL you want to embed on your page.
Copy the PDF URL
Go to the WordPress Media Library (WordPress dashboard -> Media -> Library). Afterwards, copy the URL of the PDF file that you want to embed to your page by clicking the Copy URL button, or if you don’t have any PDFs in your media library, you can upload them first by clicking the Add New Media File button.
A little tip. If you have multiple PDF files on your WordPress websites, using a file manager like CatFolders can help you better organize them. You can place your PDFs into folders to effortless find them you need one.
Insert the PDF URL
We will insert the PDF URL to the code snippet by replacing the “Your PDF URL“.
Please return to the Elementor editor, then replace the “Your PDF URL” with the URL you’ve just copied.
That’s it. As stated above, you can edit the attribute values in the HTML code snippet to customize the PDF appearance’s width and height. Lastly, don’t forget to save or publish your page.
The Bottom Line
This article shows how easily you can embed PDF in Elementor without the help of any Elementor add-ons. Incorporating embedded PDFs into your website can provide many benefits, from enhancing user experience and boosting SEO to establishing credibility and streamlining document management. This practice is great if you have PDF files to offer to your visitors and want to allow them to read the preview first before they download the PDF file to access the entire content.