> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed PDF in Elementor

Step-by-step guide to embed PDF in Elementor using the Custom iFrame WordPress plugin. Display documents without forcing downloads. No coding required.


## Overview

Custom iFrame lets you embed PDF in Elementor by uploading a file or pasting a PDF URL into the widget. Display brochures, reports, and manuals directly on your WordPress page without forcing users to download them.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Gutenberg instead? Follow the [Embed PDF in Gutenberg](/gutenberg/documents/embed-pdf) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A PDF file or PDF URL to embed

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/rv9rTb1SI9w"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## Step 1: Install and Activate Custom iFrame

<Steps>
  <Step title="Go to Plugins in your WordPress dashboard" icon="download" title-type="p">
    Go to **Plugins > Add New**.
  </Step>
  <Step title="Install Custom iFrame" icon="search" title-type="p">
    Search for **Custom iFrame by Coderz Studio**. Click **Install Now**, then **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 2: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the PDF. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed PDF in Elementor

<Steps>
  <Step title="Set Source Type to PDF" icon="file-text" title-type="p">
    In the Content tab, set **Source Type** to **PDF**.
  </Step>
  <Step title="Choose your source" icon="upload" title-type="p">
    Choose **File** to upload a PDF from your media library (recommended for toolbar customization), or choose **URL** to paste a direct PDF link.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to fit your layout. Values between 600px and 900px work well for most documents.
  </Step>
</Steps>

## Step 4: Enable Smart Load

<Steps>
  <Step title="Turn on Lazy Load" icon="zap" title-type="p">
    In the Content tab, find **Smart Load** and set **Lazy Load** to **Yes**. The PDF loads only when a visitor scrolls to it, improving page speed.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912426/elementor/documents/pdf/lazy-load-in-pdf.webp"
      alt="Custom iFrame widget Content tab in Elementor showing Smart Load section with Lazy Load toggle set to Yes for PDF embed"
      width="374"
      height="353"
    />
  </Step>
</Steps>

## Step 5: Customize Display Options

<Steps>
  <Step title="Set theme and zoom" icon="palette" title-type="p">
    Choose a **Theme**: System Default, Light, Dark, or Custom (with a color picker). Set **Zoom** to a preset or a value between 50% and 400%.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912428/elementor/documents/pdf/pdf-display-options.webp"
      alt="Custom iFrame PDF Display Options panel in Elementor showing theme, zoom, default selection tool, scrolling, and spreads settings"
      width="372"
      height="445"
    />
  </Step>
  <Step title="Set scroll and page layout" icon="settings" title-type="p">
    Choose **Default Scrolling**: Vertical, Horizontal, Wrapped, or Page-by-page. Set **Default Spreads** for booklets: No Spreads, Odd, or Even.
  </Step>
  <Step title="Choose a selection tool" icon="mouse-pointer" title-type="p">
    Set **Default Selection Tool** to **Text Tool** for highlighting and copying, or **Hand Tool** for click-and-drag scrolling.
  </Step>
</Steps>

## Step 6: Configure Toolbar Settings

<Steps>
  <Step title="Set toolbar position and tools" icon="settings" title-type="p">
    Toggle individual toolbar tools on or off. Set **Toolbar Position** to Top or Bottom. Enable or disable Print, Download, Presentation Mode, Copy Text, Add Text, Draw, Add Image, Rotate, and Properties.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912430/elementor/documents/pdf/pdf-toolbar-settings.webp"
      alt="Custom iFrame PDF Toolbar Settings panel in Elementor showing toggle controls for print, download, presentation mode, copy text, draw, and rotate options"
      width="362"
      height="521"
    />
  </Step>
</Steps>

<Callout kind="info">
  Toolbar customization is only available when Source Type is set to **File**. URL embeds do not support toolbar controls.
</Callout>

## Step 7: Add a Custom ID (Optional)

<Steps>
  <Step title="Set a Custom ID for CSS or JavaScript" icon="code" title-type="p">
    In the **Advanced** tab, type a custom ID (for example `my-pdf-viewer`) to target the iFrame with CSS or JavaScript. Leave it blank to auto-generate an ID.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912432/elementor/documents/pdf/pdf-advance-options.webp"
      alt="Custom iFrame Advanced tab in Elementor showing Custom ID input field for CSS and JavaScript targeting of the embedded PDF"
      width="373"
      height="248"
    />
  </Step>
</Steps>

## Step 8: Style the iFrame

<Steps>
  <Step title="Adjust visual styling" icon="palette" title-type="p">
    Go to the **Style** tab to adjust padding, alignment, background color, borders, and box shadow.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912434/elementor/documents/pdf/custom-iframe-style.webp"
      alt="Custom iFrame Style tab in Elementor showing sections for Style, Background Style, Border Style, and Box Shadow Style for PDF embed"
      width="372"
      height="403"
    />

    For a full reference, see the [Style Custom iFrame](/getting-started/styling) guide.
  </Step>
</Steps>

## Step 9: Save and Publish

<Callout kind="success">
  Click **Update** or **Publish**. Your PDF is now live on your WordPress site.
</Callout>

Want to add a custom watermark (Pro), device frame (Pro), enable 3D Flipbook mode, or fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed PDF in Elementor using the Custom iFrame plugin. From uploading the PDF to configuring display options, toolbar controls, and publishing, the whole setup runs through the Elementor editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="What is the difference between File and URL source types?" default-open="false">
    **File** loads the PDF from your WordPress media library and unlocks toolbar customization (theme, zoom, tools). **URL** embeds a PDF from an external link but does not support toolbar controls.
  </Expandable>
  <Expandable title="Why can't I customize the toolbar?" default-open="false">
    Toolbar customization only works when Source Type is set to **File**. Switch from URL to File if you need toolbar control.
  </Expandable>
  <Expandable title="How do I make the PDF load faster?" default-open="false">
    Enable **Lazy Load** in the Smart Load section. The PDF loads only when a visitor scrolls to it, reducing initial page load time.
  </Expandable>
  <Expandable title="The PDF shows blank. What should I check?" default-open="false">
    Confirm the PDF file is publicly accessible. PDFs behind authentication or on servers with restrictive CORS headers may not load. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed PDF in Gutenberg" href="/gutenberg/documents/embed-pdf" icon="layout" horizontal={false}>
    Guide for the WordPress block editor.
  </Card>
  <Card title="3D Flipbook PDF in Elementor" href="/elementor/documents/embed-3d-flipbook-pdf" icon="book-open" horizontal={false}>
    Display PDFs as interactive 3D flipbooks. (Pro)
  </Card>
</Columns>

## Related Guides

- [Embed Documents in Elementor - Overview](/elementor/embed-documents)
- [3D Flipbook PDF in Elementor](/elementor/documents/embed-3d-flipbook-pdf)
- [Embed Google Docs in Elementor](/elementor/documents/embed-google-docs)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)