With this widget, you can display PDF files directly on your website in a smooth and user-friendly viewer. Whether it’s a brochure, manual, report, or eBook, visitors can scroll through pages, zoom in, and navigate the document without leaving your site.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- This is a pro widget, so make sure you have either WDesignKit pro license or have activated The Plus Addons for Elementor pro key in your WDesignKit account.
- Make sure you’ve downloaded the PDF Viewer widget.
How to Activate the PDF Viewer Widget?
Go to
- WDesignKit → Widgets.
- Search the widget name and select Elementor as the Page Builder.
- Click on the Download icon.
How to Use the PDF Viewer Widget in Elementor?
Add the PDF Viewer widget to the page.
Content
From the Style dropdown, you have to select the PDF content style.
From the PDF Source dropdown, you have to select the PDF source option. Based on the selected option, the corresponding PDF content will be displayed. Here you’ll find two options –
- URL – Use this option to display a PDF from an external link.
- Upload – Use this option to upload a PDF file directly from your device.
Based on your selection, you’ll find different options to add the PDF content.
In the PDF URL field, you have to add the PDF URL to display the file from an external source.
Note: When you choose the Upload option from the PDF Source dropdown, you need to upload the PDF file from the front end.
In the Upload Text section, you can add text as a hint or instruction for uploading the file.
You can add an icon or SVG of the uploaded file from the Icons section.
In the Button Text section, you can add the text to the upload file button.
Navigation
By enabling the Show Previous/Next toggle, you will see navigation icons for Previous and Next pages on the PDF Viewer.
Extra Option
By enabling the Show Download toggle, you’ll see a Download icon on the PDF Viewer.
In the Download section, you can add text to the Download button, which lets users save the PDF file to their device.
You can add an icon or SVG to the download button from the Icon section.
By enabling the Show Print toggle, a Print icon will appear on the PDF Viewer, allowing users to print the PDF directly.
In the Print section, you can add the text to the Print button.
You can add an icon or SVG to the print button from the Icon section.
By enabling the Show Zoom toggle, Zoom In and Zoom Out icons will appear on the PDF Viewer, letting users enlarge or reduce the view of the PDF.
Then, from the Style tab, you can further customize the style of the PDF Viewer.