PDF Viewer Module

Divi PDF Embed adds three native Divi 5 modules to the Visual Builder: PDF Viewer for showing a single document inline, plus PDF List and PDF Item for building a gallery of downloadable documents. All of them live in the PDF Embed folder of the Divi 5 module inserter.

This page covers the PDF Viewer module. For document galleries, see PDF List & PDF Item.

Requirements

Divi 5.0+ — the modules register only when Divi 5 is active. Divi 4 is not supported.
WordPress 5.0+ (tested up to 6.9)
PHP 7.4+

Quick Start

Install and activate the plugin from your WordPress admin.
Open a page in the Divi 5 Visual Builder.
Add a module and search for PDF Viewer, or open the PDF Embed folder in the inserter.
In Content → PDF File, upload a PDF or paste a PDF URL.
Save and view the page.

That's the whole setup — the viewer works with no further configuration.

💡 Pick the PDF, not its cover image.
When you upload a PDF, WordPress also generates a JPEG preview beside it (for example brochure-pdf.jpg). Select the .pdf file. If a preview image is chosen by mistake, the module recovers the real PDF automatically instead of showing a broken embed.

Render Modes: Native vs Enhanced

The PDF Viewer can display a document in two ways. This is the one setting worth understanding before anything else, because most "my PDF won't load" problems come down to picking the wrong one.

	Native (default)	Enhanced (PDF.js)
Renders with	The browser's own built-in PDF viewer	A bundled PDF.js renderer
Extra JavaScript	None	PDF.js, loaded only on pages that use this mode
PDFs on another domain or CDN	Works — including behind Cloudflare	May be blocked by the browser (CORS)
Toolbar	The browser's own — zoom, page navigation, print, download	A custom toolbar you switch on and off per module
Color controls	Not available	Toolbar background, icon color, viewer background
Best for	Reliability everywhere — this is why it's the default	Same-origin PDFs that need branded, controlled chrome

The Controls group and Viewer Colors apply to Enhanced mode only. In Native mode the browser supplies its own toolbar, so those settings have no effect.

Settings Reference

Content → PDF File

Setting	Description	Default
PDF File	Upload a PDF from the Media Library or enter a URL. Supports dynamic content (URL).	—
Document Title	Optional. Shown in the Enhanced toolbar and used as the accessible title of the Native viewer. Supports dynamic content (text).	The file name

Content → Viewer

Setting	Description	Default
Render Mode	Native (browser) or Enhanced (PDF.js).	Native
Viewer Height	Height of the viewer, 200–1500px. Applies to both render modes.	600px
Default Zoom	How the first page fits when the viewer loads: Fit Width, Fit Page or Automatic.	Fit Width

In Native mode the zoom preference is passed to the browser's viewer: Fit Page fits the whole page, while Fit Width and Automatic both open the document fitted to the width.

Content → Controls (Enhanced mode)

Setting	Description	Default
Show Toolbar	Show the toolbar above the document. Turn it off for a bare, chrome-free viewer.	On
Page Navigation	Previous and next page controls in the toolbar.	On
Zoom Controls	Zoom in and zoom out controls.	On
Download Button	Toolbar button for downloading the PDF.	On
Print Button	Toolbar button that opens the browser print flow.	Off
Fullscreen Button	Toolbar button that expands the viewer to fullscreen.	On

Design → Viewer Colors

Toolbar Background — background color of the Enhanced viewer toolbar.
Toolbar Icon Color — color of the toolbar text and icons.
Viewer Background — the area behind the rendered PDF page.

Everything else in the Design tab is standard Divi 5: background, sizing, spacing, border, box shadow, filters, transform, animation, overflow, transition, position, z-index, scroll effects and sticky. Viewer Colors can be saved and reused through Divi 5 option group presets like any other style group.

Advanced

Alongside the usual link options, HTML attributes and visibility controls, the module exposes three Custom CSS targets:

Viewer — the viewer wrapper.
Toolbar — the Enhanced toolbar.
Page Canvas — the rendered page surface.

Performance

Native mode ships zero JavaScript, and the embed is lazy-loaded by the browser.
PDF.js is bundled locally — no external CDN — and is enqueued only on pages that actually contain an Enhanced viewer.
PDF List and PDF Item load no JavaScript at all.
Compress large documents before uploading. PDFs under roughly 10 MB stay comfortable on mobile connections.

Common Setups

Brochure, menu or price list on the page

Keep Render Mode: Native, set Viewer Height to around 800px and leave Default Zoom on Fit Width. Nothing else to configure — visitors get the browser's own zoom, print and download controls.

Branded report or whitepaper viewer

Upload the PDF to the Media Library, switch to Enhanced, keep the toolbar with page navigation and zoom, turn on Print Button, then match Toolbar Background and Toolbar Icon Color to your brand. Because Enhanced needs same-origin files, host the PDF on your own site.

Terms, policies or a document you only want read

Use Enhanced with Download Button and Print Button off, and Default Zoom on Fit Width. Note this is presentation, not protection — anyone determined can still reach the file URL.

A library of downloadable documents

Use PDF List with one PDF Item per document rather than stacking several viewers on one page.

Troubleshooting

The module shows "Upload a PDF in the Content tab"

No file is set, or the value didn't resolve to a URL. Reopen Content → PDF File and choose the file again.

The PDF doesn't display

Confirm the field points at an actual .pdf file, not the JPEG cover WordPress created next to it.
Open the PDF URL directly in a browser tab — if it fails there, the problem is the file or its host.
Switch Render Mode to Native. It's the most forgiving option.
Re-upload the PDF to the Media Library and select it from there.

It works in Native mode but not in Enhanced

That's a cross-origin (CORS) block. Enhanced mode fetches the file with JavaScript, so the browser refuses PDFs served from another domain unless that host sends CORS headers. Either stay on Native mode or move the PDF to your own Media Library.

The module is in Native mode, where the browser draws its own toolbar. Switch to Enhanced to control the toolbar and its colors.

The page is blank or asks for a password

Password-protected PDFs aren't supported. Save an unprotected copy and use that.

The modules aren't in the builder

They register only under Divi 5. Check that Divi 5 is the active theme or builder, that the plugin is activated, then look in the PDF Embed folder of the inserter.

FAQ

Q: Does this work with Divi 4?
A: No. Divi PDF Embed is Divi 5 only.

Q: Can I use a PDF hosted on another website?
A: Yes, in Native mode — including files behind a CDN such as Cloudflare. Enhanced mode needs the PDF on the same domain.

Q: Will it slow my site down?
A: Native mode adds no JavaScript. PDF.js loads only on pages that use an Enhanced viewer.

Q: Can visitors download the file?
A: Yes. Native mode includes the browser's download control; Enhanced mode has a Download Button toggle that's on by default.

Q: Can I style the PDF pages themselves?
A: No — the document is rendered as-is. You can style everything around it: the container, toolbar, viewer background and page canvas.

Q: Can the PDF come from a custom field?
A: Yes. PDF File accepts dynamic content as a URL and Document Title accepts dynamic text, so the module works inside Theme Builder templates and loops.

Q: Can I put several viewers on one page?
A: Yes, as many as you need. For a collection of documents, PDF List is the better fit.

Q: Does it work on mobile?
A: Yes, both modes are responsive.

Q: Where are the plugin's own settings?
A: Under DiviPeople → PDF Embed in the WordPress admin. Self-hosted installs also get a License screen there.

Q: What powers Enhanced mode?
A: PDF.js by the Mozilla Foundation (Apache License 2.0), bundled with the plugin — never loaded from an external CDN.

Need Help?

Still stuck? Contact support with the page URL, the render mode you're using and the PDF URL — that's usually enough to spot the cause straight away.