---
title: "PDF Embed Module"
url: "https://divipeople.com/docs/divi-pdf-embed.md"
canonical: "https://divipeople.com/docs/divi-pdf-embed/"
published: "2026-01-26"
modified: "2026-04-30"
author: "Fahim Reza"
tags:
  - "Divi PDF Embed"
---

# PDF Embed Module

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

## Quick Start

1. **Install & Activate** the plugin from your WordPress admin
2. **Open Divi Visual Builder** on any page
3. **Add the "PDF Embed" module** from the module library
4. **Upload or enter a PDF URL** in the module settings
5. **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

1. Open any page in **Divi Visual Builder**
2. Click the **"+"** button to add a new module
3. Search for **"PDF Embed"** or find it in the module list
4. Click to add it to your page

### Step 2: Upload Your PDF

You have two options:

#### Option A: Upload from Media Library (Recommended)

1. In the module settings, find **"PDF Source"**
2. Click the **upload button** (📁 icon)
3. Select an existing PDF or **upload a new one**
4. Click **"Use This File"**

#### Option B: Use a PDF URL

1. In **"PDF Source"**, click **"Enter URL"**
2. Paste your PDF URL (e.g., `https://example.com/document.pdf`)
3. 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:**

1. Upload PDF to Media Library
2. Choose **Modal Mode**
3. Enable **Download Button**
4. Add title: "Product Manual"
5. Customize button colors to match your brand

### Use Case 2: Terms & Conditions

**Goal**: Show terms document inline on the page

**Setup:**

1. Upload PDF to Media Library
2. Choose **Inline Mode**
3. Set height to `800px`
4. Add title: "Terms & Conditions"
5. Enable "Open in New Tab" button for easy sharing

### Use Case 3: Portfolio PDF

**Goal**: Professional portfolio presentation

**Setup:**

1. Upload PDF to Media Library
2. Choose **Modal Mode**
3. Enable **PDF Icon** on preview card
4. Customize preview card background
5. 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:**

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

### PDF Shows Blank

**Problem**: PDF loads but shows blank/white screen

**Solutions:**

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

### Modal Not Opening

**Problem**: Clicking "View PDF" doesn't open modal

**Solutions:**

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

### PDF Loads Slowly

**Problem**: PDF takes too long to load

**Solutions:**

1. ✅ Use "Lazy" or "On Click" lazy loading
2. ✅ Optimize PDF file size (compress if needed)
3. ✅ Use Inline mode for faster initial load
4. ✅ Host PDF on your own server (Media Library)

### Buttons Not Showing

**Problem**: Buttons don't appear

**Solutions:**

1. ✅ Check button toggles are enabled in settings
2. ✅ Verify you're in Modal mode (buttons only show in Modal)
3. ✅ Check Design tab for button visibility settings
4. ✅ Ensure PDF source is set

### CORS Errors

**Problem**: Console shows "CORS policy" errors

**Solutions:**

1. ✅ Upload PDF to Media Library (always works)
2. ✅ Contact PDF host to enable CORS headers
3. ✅ Use Inline mode (may work even with CORS issues)
4. ✅ 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:

1. **Check this guide** - Most questions are answered here
2. **Review settings** - Make sure all settings are configured correctly
3. **Test with a simple PDF** - Try with a basic PDF to isolate issues
4. **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! 📄**