Elementor PDF Image Viewer

Elementor PDF Image Viewer is a WordPress plugin for displaying PDFs and images together in a responsive Elementor layout. Its native PDF & Image Viewer widget renders PDF pages in the browser with the bundled PDF.js library and displays image files directly.

Visitors can open a complete PDF or full image in a scrollable popup, open the original file in a new tab, download it, or leave previews non-clickable.

Features

• Native Elementor widget named PDF & Image Viewer.
• Select or upload multiple PDFs and images at once from the WordPress Media Library.
• Mix PDF and image files in the same responsive grid.
• Paste one PDF or image URL per line for external files.
• Display every selected file as an individual preview.
• Choose which PDF page is used in a multiple-file gallery.
• Display all pages, one page, or a selected page range when using one PDF.
• Display WordPress-supported image formats directly without conversion.
• Set responsive grid columns and spacing for multiple files.
• Standard, clear, and high PDF rendering-quality options.
• Lazy loading for PDF and image previews.
• Responsive preview width controls for desktop, tablet, and mobile.
• Optional custom preview height using pixels or viewport height.
• Contain and cover fitting options.
• Optional PDF page numbers.
• Scrollable popup for the complete PDF or full image.
• Download button inside the popup header.
• Close the popup with its close button, a background click, or the Escape key.
• Separate options to open or download the original file.
• Controls for preview spacing, alignment, background, padding, border, radius, shadow, and status colors.
• PDF.js files are included locally; no third-party PDF.js CDN is used.
• No shortcode or separate settings page is required.

Click Actions

Choose what happens when a visitor clicks a preview:

Requirements

Installation

1. Download the latest versioned plugin ZIP file.
2. In WordPress, go to Plugins > Add New Plugin > Upload Plugin.
3. Select the ZIP file and click Install Now.
4. Activate Elementor PDF Image Viewer.
5. Make sure Elementor is installed and active.

How to Use

1. Open a page or template with Elementor.
2. Search for the PDF & Image Viewer widget.
3. Drag the widget into your layout.
4. Choose one or more PDFs and images from the Media Library, or paste one file URL per line.
5. For multiple files, choose the PDF preview page, responsive columns, and spacing. For one PDF, choose all pages, one page, or a page range.
6. Choose the PDF render quality and click action.
7. Adjust preview width, height, fit, spacing, alignment, and styles.
8. Update or publish the Elementor page.

Elementor Controls

PDF & Images

• Multiple PDF and image selector or one-URL-per-line field
• Pages to show for a single PDF
• Single PDF page number
• PDF page-range start and end
• PDF preview page for multiple-file galleries
• PDF render quality
• Lazy loading
• Preview click action
• Popup title
• PDF page numbers

Layout Style

• Responsive preview width
• Responsive preview height
• Contain or cover fit
• Responsive space between PDF pages
• Left, center, or right alignment
• Responsive multiple-file columns
• Responsive space between file previews
• Viewer background
• Responsive viewer padding

File Preview Style

• Preview background color
• Border
• Responsive border radius
• Box shadow
• PDF page-number text color
• PDF page-number background color
• PDF page-number typography

Loading and Error Style

• Status text color
• Spinner color
• Error text color
• Status typography

Mixed PDF and Image Galleries

Select PDFs and images in one Media Library selection. Each image is displayed directly, while each PDF is represented by the page selected in PDF Preview Page. Responsive columns default to three on desktop, two on tablet, and one on mobile.

The click action is applied independently to each file, so every preview opens, downloads, or displays the correct original item.

Popup Viewer

When Open Scrollable Popup is selected, clicking a PDF preview opens every page of that PDF in a vertically scrollable viewer. Clicking an image opens the full image in the same popup design. Both versions include a download button and remain on the current browser page.

On smaller screens, the popup adapts to the available browser space for easier viewing.

External Files

Files uploaded to the same WordPress website normally work without extra configuration. An external PDF server must allow cross-origin browser requests through its CORS headers. External image availability depends on the source server's access rules.

Privacy

PDF rendering happens in the visitor's browser. Images load from their saved URLs. The plugin does not send files to an external processing service.

Frequently Asked Questions

Does the plugin use an iframe?

No. PDF.js renders PDF pages onto canvases, and image files use normal responsive image elements.

Which image formats are supported?

You can select formats supported by WordPress and the visitor's browser, including JPEG, PNG, GIF, WebP, and AVIF when available. SVG also works when your WordPress installation permits SVG uploads.

Can I mix PDFs and images in one widget?

Yes. Use Select Files to choose both types at once. You can also paste one PDF or image URL per line.

Can I display only the first PDF page?

Yes. For a single PDF, set Pages to Show to One Page and enter 1. For a multi-file gallery, set PDF Preview Page to 1.

Can I display a selected group of PDF pages?

Yes. When one PDF is selected, choose Page Range, then enter the first and last page numbers.

Can I control the multiple-file layout?

Yes. The widget includes responsive column and spacing controls. The default layout is three columns on desktop, two on tablet, and one on mobile.

Can visitors view a full file without opening another tab?

Yes. Select Open Scrollable Popup. PDFs open as a scrollable all-page document, and images open at full responsive size.

Can I keep the new-tab option?

Yes. Select Open Original File in New Tab as the preview click action.

Why does an external PDF fail to load?

The external server may be blocking cross-origin requests. Check its CORS configuration or upload the PDF to your WordPress Media Library.

Are password-protected PDFs supported?

The plugin detects a password-protected PDF and displays an error message, but it does not currently provide a password entry field.

Changelog

1.0.9

• Added image selection and display alongside PDFs.
• Added mixed PDF and image galleries in one widget.
• Added full-image popup, new-tab, and download support.
• Kept existing PDF settings and saved Elementor widgets compatible.

1.0.8

• Added multiple PDF selection and upload in one Elementor widget.
• Added one preview image per PDF with a configurable preview page.
• Added responsive column and spacing controls for multiple PDFs.
• Preserved existing single-PDF page modes and click actions.

1.0.7

• Removed the loading percentage message from the page and popup.
• Removed the Show Loading Message Elementor control.
• Kept page-rendering spinners and PDF error messages.

1.0.6

• Made the author website link open in a new browser tab.

1.0.5

• Added the author website link.

1.0.4

• Restored the separate option to open the original PDF in a new tab.
• Kept the scrollable popup as an additional click action.

1.0.3

• Added an in-page, vertically scrollable PDF popup.
• Added popup Download and Close buttons.
• Added keyboard and background-click closing support.

1.0.2

• Set the plugin author to Abed Hossain.
• Added responsive image width and height controls.
• Added contain and cover fitting options.

1.0.1

• Fixed widget loading before Elementor base classes were available.
• Added checks around Elementor control and widget registration.

1.0.0

• Initial release.

Author

Abed Hossain