Divi PDF Embed – User Guide

A simple guide to help you embed PDF documents on your Divi website.

Quick Start

Install & Activate the plugin from your WordPress admin
Open Divi Visual Builder on any page
Add the “PDF Embed” module from the module library
Upload or enter a PDF URL in the module settings
Save and view your page

That’s it! Your PDF is now embedded on your page.

Step-by-Step Instructions

Step 1: Add the Module

Open any page in Divi Visual Builder
Click the “+” button to add a new module
Search for “PDF Embed” or find it in the module list
Click to add it to your page

Step 2: Upload Your PDF

You have two options:

Option A: Upload from Media Library (Recommended)

In the module settings, find “PDF Source”
Click the upload button (📁 icon)
Select an existing PDF or upload a new one
Click “Use This File”

Option B: Use a PDF URL

In “PDF Source”, click “Enter URL”
Paste your PDF URL (e.g., https://example.com/document.pdf)
The module will automatically detect it’s a PDF

💡 Tip: Media Library uploads always work. External URLs may fail due to security restrictions.

Step 3: Choose Display Mode

The module offers two ways to display your PDF:

Inline Mode (Default – Simple & Fast)

PDF displays directly on the page in an iframe
Best for: Simple viewing, fast page loads
No extra features needed

Settings:

Height: Set the iframe height (e.g., 600px or 80vh)
Max Width: Control maximum width (e.g., 100% or 800px)

Modal Mode (Advanced Viewer)

Shows a preview card with a “View PDF” button
Opens PDF in a full-screen modal with toolbar
Best for: Professional presentation, multiple pages

Features:

Page navigation (Previous/Next)
Zoom controls (Zoom In/Out, Fit to Width/Page)
Download button (optional)
Print button (optional)
Keyboard shortcuts

Settings:

Start Page: Which page to show first (default: 1)
Show PDF Icon: Display icon on preview card
View PDF Button: Customize button text
Open in New Tab: Add external link button

Step 4: Customize Appearance

Title Section

Show Title: Toggle title on/off
Title Text: Enter your custom title
Title Design: Font, size, color (in Design tab)

Buttons

View PDF Button: Show/hide and customize label
Open in New Tab: Show/hide and customize label
Download Button: Show/hide (Modal mode only)
Print Button: Show/hide (Modal mode only)
Button Design: Colors, fonts, borders (in Design tab)

Container Design

Background: Set background color
Border: Add borders and border radius
Box Shadow: Add shadow effects
Spacing: Padding and margins
Typography: Font styles for all text

Step 5: Advanced Settings

Lazy Loading

Control when the PDF loads:

Lazy (Inline): Loads when user scrolls near it
On Click (Modal): Loads PDF.js when button is clicked
On Scroll (Modal): Loads PDF.js when module enters viewport
Eager (Both): Loads immediately

💡 Tip: Use “Lazy” or “On Click” for better page speed.

Common Use Cases

Use Case 1: Product Manual

Goal: Display a product manual that users can view and download

Setup:

Upload PDF to Media Library
Choose Modal Mode
Enable Download Button
Add title: “Product Manual”
Customize button colors to match your brand

Use Case 2: Terms & Conditions

Goal: Show terms document inline on the page

Setup:

Upload PDF to Media Library
Choose Inline Mode
Set height to 800px
Add title: “Terms & Conditions”
Enable “Open in New Tab” button for easy sharing

Use Case 3: Portfolio PDF

Goal: Professional portfolio presentation

Setup:

Upload PDF to Media Library
Choose Modal Mode
Enable PDF Icon on preview card
Customize preview card background
Enable Print Button for easy printing

Settings Reference

Content Tab

Setting	Description	Default
PDF Source	Upload PDF or enter URL	–
Display Mode	Inline or Modal	Inline
Height	Iframe height (Inline only)	600px
Max Width	Maximum container width	100%
Start Page	Initial page (Modal only)	1
Lazy Load	When to load PDF	Lazy
Show Title	Display title above PDF	Off
Title Text	Custom title text	–
View PDF Button	Show/hide button (Modal)	On
Open in New Tab	Show external link button	Off
Download Button	Show download button (Modal)	Off
Print Button	Show print button (Modal)	Off

Design Tab

Setting	Description
Title Typography	Font, size, color, spacing
Button Typography	Font, size, color for buttons
Button Background	Background color for buttons
Button Border	Border radius and style
Preview Background	Background for modal preview card
Container Background	Module container background
Container Border	Border radius and style
Container Spacing	Padding and margins
Box Shadow	Shadow effects

Keyboard Shortcuts (Modal Mode)

When viewing PDF in modal:

← → Arrow Keys: Navigate pages
+ / –: Zoom in/out
0: Fit to page
W: Fit to width
Esc: Close modal
Tab: Navigate toolbar buttons

Troubleshooting

PDF Not Showing

Problem: PDF doesn’t appear on the page

Solutions:

✅ Check that PDF is uploaded or URL is correct
✅ Verify PDF file is not corrupted
✅ Try uploading to Media Library instead of using URL
✅ Check browser console for errors (F12)

PDF Shows Blank

Problem: PDF loads but shows blank/white screen

Solutions:

✅ Check if PDF is password-protected (not supported)
✅ Try a different PDF file
✅ Clear browser cache
✅ Check if PDF URL has CORS restrictions

Modal Not Opening

Problem: Clicking “View PDF” doesn’t open modal

Solutions:

✅ Check browser console for JavaScript errors
✅ Ensure PDF.js files are loaded (check Network tab)
✅ Try disabling other plugins temporarily
✅ Clear browser cache

PDF Loads Slowly

Problem: PDF takes too long to load

Solutions:

✅ Use “Lazy” or “On Click” lazy loading
✅ Optimize PDF file size (compress if needed)
✅ Use Inline mode for faster initial load
✅ Host PDF on your own server (Media Library)

Buttons Not Showing

Problem: Buttons don’t appear

Solutions:

✅ Check button toggles are enabled in settings
✅ Verify you’re in Modal mode (buttons only show in Modal)
✅ Check Design tab for button visibility settings
✅ Ensure PDF source is set

CORS Errors

Problem: Console shows “CORS policy” errors

Solutions:

✅ Upload PDF to Media Library (always works)
✅ Contact PDF host to enable CORS headers
✅ Use Inline mode (may work even with CORS issues)
✅ Provide “Open in New Tab” button as fallback

Best Practices

✅ Do’s

Upload PDFs to Media Library for best compatibility
Use lazy loading to improve page speed
Optimize PDF file size before uploading
Add descriptive titles for accessibility
Test on mobile devices to ensure good experience
Use Modal mode for multi-page documents
Enable download button for important documents

❌ Don’ts

Don’t use very large PDFs (100+ pages may be slow)
Don’t rely on external URLs (may have CORS issues)
Don’t disable lazy loading unless necessary
Don’t forget to test on different browsers
Don’t use password-protected PDFs (not supported)

FAQ

Q: Can I use PDFs from other websites?
A: Sometimes. External PDFs may fail due to CORS restrictions. Media Library uploads always work.

Q: Does this work on mobile?
A: Yes! The module is fully responsive and works on all devices.

Q: Can users download the PDF?
A: Yes, if you enable the “Download Button” in Modal mode, or use “Open in New Tab” button.

Q: Will this slow down my website?
A: No. PDF.js (1.6MB) only loads when users click to view in Modal mode. Inline mode uses zero extra JavaScript.

Q: Can I style the PDF viewer?
A: You can style the container, buttons, and title using Divi’s design controls. The PDF content itself uses the browser’s native viewer.

Q: Does this work with Divi 4?
A: No, this plugin requires Divi 5 only.

Q: Can I use multiple PDF modules on one page?
A: Yes! Add as many PDF Embed modules as you need.

Q: What file size is recommended?
A: PDFs under 10MB work best. Larger files may load slowly, especially on mobile.

Support

Need help? Here are your options:

Check this guide – Most questions are answered here
Review settings – Make sure all settings are configured correctly
Test with a simple PDF – Try with a basic PDF to isolate issues
Contact support – Reach out through the plugin’s support channel

Technical Details

WordPress: 6.0+
Divi: 5.0+ (required)
PHP: 7.4+
Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge)

Happy PDF Embedding! 📄

Did this answer your question?