I have an Elementor landing page designed specifically for authors. If you want to use it to promote your e-book, that's great. But first, you may want to add a new section to give your prospective readers a preview of the book you want to sell.
To do so, you can create a new PDF file containing the opening chapters of your book then embed the file to your landing page.
No. You don't need to install a plugin to embed a PDF file in Elementor. It takes only a simple HTML code to embed a PDF file in an Elementor page.
Shortcuts ⤵️
- Reasons to embed a PDF file
- Embedding a PDF file in Elementor
- Disabling download button
- Embedding a PDF file from Google Drive
- Summary
Want to add a premium vibe to your Elementor design? Use our button hover effects collection.
Some Reasons to Embed a PDF File
Everyone has a reason to do something. If you are a writer with a book you want to promote via your landing page (which you built with Elementor), your reason could be to provide a preview for your prospective buyers.
It makes total sense because no one will buy your book if they have no idea what your book is about.
In some real cases, some writers even give several chapters of their book for free to allow readers to swim deeper into the story they write.
Another reasonable reason to embed a PDF file to an Elementor page is when you want to display a long PDF document (e.g., a legal document) without the ability to download it.
Embedding a PDF File in Elementor
It takes only two following core steps to embed a PDF file in Elementor:
Step 1: Upload Your PDF File
Of course, you need to upload your PDF file before you can embed it to an Elementor page. You can upload the PDF file to your own hosting or somewhere else, as long as you can access the complete URL of the file.
If you want to upload the file to your own hosting, first, go to Media -> Add Media File on your WordPress dashboard.
Click the Select Files button and select the PDF file you want to upload.
Once the file is uploaded, click the Copy URL to clipboard to copy the URL.
Step 2: Add the HTML Widget and Paste the PDF URL
Your PDF has been uploaded and you also have copied the URL. Next, you can start to embed it to your Elementor page.
Start by editing your page with Elementor and add the HTML widget. Place it in a container where you want your PDF file to be displayed.
Next, add the following code to the content editor of the HTML widget. You can replace the "PDF URL GOES HERE" text with the actual URL of your PDF file.
<object data="PDF URL GOES HERE" type="application/pdf" height="1080px"> </object>Here is an example of the final code:
You should now see your PDF file get embedded on your page after adding the URL.
If you want to set the height of the PDF viewer, you can replace the value of the height in the code (the 1080px value).
To set the width of the PDF viewer, you can set the width of the HTML widget, which plays a role as the PDF container in this case. To do so, go to the Advanced tab and select the width you want on the Width dropdown.
A little note. The above method works well on Chromium-based web browsers like Google Chrome, Microsoft Edge, Vivaldi, and so on.
Other web browsers (such as Safari and Firefox) may ignore the HTML code. You can test it first before you publish your page.
Disabling the Download Button on PDF Viewer
Each web browser has a PDF engine that handles a PDF document embedded on a web page. By default, most of them display the toolbar to allow users to control the PDF display and behavior.
From the toolbar, users can download the PDF file by clicking the download button. If you want, you can disable this feature. Here is how.
Well, there is no specific method to disable only the download button. Instead, you need to hide the toolbar. Which means, other icons will disappear too. If you are okay with this, then you can use the URL parameter of #toolbar=0.
You can append the parameter to the end of the URL of your PDF. Here an example:
https://elementor.pagebuildertemplates.com/wp-content/uploads/2026/04/start-a-wp-blog.pdf#toolbar=0Another default adjustment you may want to add is the zoom level. To set the zoom level, you can use the URL parameter of #zoom=100. Change the number of 100 according to the zoom level you want.
There are several other parameters you can use on your code. Here is the list:
| Hide toolbar | #toolbar=0 |
| Set zoom level | #zoom=100 |
| Hide side navigation/thumbnails | #navpanes=0 |
| Disable scrolling | #scrollbar=0 |
| Make PDF document fits the horizontal width of the container | #view=FitH |
| Make PDF document fits the vertical height of the container | #view=FitV |
| Make PDF document fits the entire page into the container | #view=Fit |
| Start from a specific page | #page=3 |
If you want, you can use multiple parameters at once. The syntax for this is #1st_paramater&2nd_parameter&3rd_paramater
For example, if you append these parameters to the end of your PDF URL,
https://elementor.pagebuildertemplates.com/wp-content/uploads/2026/04/start-a-wp-blog.pdf#toolbar=0&zoom=100&page=3The PDF document will be displayed without the toolbar at the zoom level of 100 and starts from page 3.
Embedding a PDF File from Google Drive (and Other Cloud Storage Platforms)
What if you want to embed a PDF file already uploaded to Google Drive? Sure, you can also do it with the HTML widget of Elementor.
Not just Google Drive. You can embed your PDF file stored from other cloud storage platforms like Dropbox and OneDrive as long as they allow you to embed your document via <iframe>.
To embed a PDF file from Google Drive to Elementor, you can first add the HTML widget to your page just like the first method above.
Then, go to Google Drive and select the PDF file you want to embed. Click the three-dot icon and select Share -> Copy link.
Paste the link you have just copied to a new tab to open the PDF file. Next, click the File menu and select Share -> Get embed link and copy the embed code.
Go back to your Elementor page and paste the embed code to the content editor of the HTML widget.
You can replace the width and height value on the embed code to set the width and the height of the PDF viewer.
Summary
No need to install a new plugin to embed a PDF file to your Elementor page as it takes only a simple HTML code. You can use the HTML widget to embed your PDF file.
Depending on where the PDF file is hosted. If it's hosted on your own hosting server, you can use the <object> tag. This option offers more control to present the document. If you want to embed a small PDF file, this method is more recommended.
If your PDF file is hosted on Google Drive or other cloud storage platforms, you can use get the embed code and paste it to the HTML widget.