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 guide.

Requirements

Custom iFrame plugin installed and active
Elementor installed
A PDF file or PDF URL to embed

Video Tutorial

Step 1: Install and Activate Custom iFrame

Go to Plugins in your WordPress dashboard

Go to Plugins > Add New.

Install Custom iFrame

Search for Custom iFrame by Coderz Studio. Click Install Now, then Activate.

WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button

Open your page in Elementor

Go to the page where you want the PDF. Click Edit with Elementor.

Drag the widget onto your page

Search for Custom iFrame in the Elementor widget panel. Drag the widget into your layout.

Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor

Step 3: Embed PDF in Elementor

Set Source Type to PDF

In the Content tab, set Source Type to PDF.

Choose your source

Choose File to upload a PDF from your media library (recommended for toolbar customization), or choose URL to paste a direct PDF link.

Set the height

Set Height to fit your layout. Values between 600px and 900px work well for most documents.

Step 4: Enable Smart Load

Turn on Lazy Load

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.

Custom iFrame widget Content tab in Elementor showing Smart Load section with Lazy Load toggle set to Yes for PDF embed

Step 5: Customize Display Options

Set theme and zoom

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%.

Custom iFrame PDF Display Options panel in Elementor showing theme, zoom, default selection tool, scrolling, and spreads settings

Set scroll and page layout

Choose Default Scrolling: Vertical, Horizontal, Wrapped, or Page-by-page. Set Default Spreads for booklets: No Spreads, Odd, or Even.

Choose a selection tool

Set Default Selection Tool to Text Tool for highlighting and copying, or Hand Tool for click-and-drag scrolling.

Set toolbar position and tools

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.

Custom iFrame PDF Toolbar Settings panel in Elementor showing toggle controls for print, download, presentation mode, copy text, draw, and rotate options

Toolbar customization is only available when Source Type is set to File. URL embeds do not support toolbar controls.

Step 7: Add a Custom ID (Optional)

Set a Custom ID for CSS or JavaScript

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.

Custom iFrame Advanced tab in Elementor showing Custom ID input field for CSS and JavaScript targeting of the embedded PDF

Step 8: Style the iFrame

Adjust visual styling

Go to the Style tab to adjust padding, alignment, background color, borders, and box shadow.

Custom iFrame Style tab in Elementor showing sections for Style, Background Style, Border Style, and Box Shadow Style for PDF embed

For a full reference, see the Style Custom iFrame guide.

Step 9: Save and Publish

Click Update or Publish. Your PDF is now live on your WordPress site.

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 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

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.

Toolbar customization only works when Source Type is set to File. Switch from URL to File if you need toolbar control.

Enable Lazy Load in the Smart Load section. The PDF loads only when a visitor scrolls to it, reducing initial page load time.

Confirm the PDF file is publicly accessible. PDFs behind authentication or on servers with restrictive CORS headers may not load. See iFrame Not Showing for more help.

Also Available For

Embed PDF in Gutenberg

Guide for the WordPress block editor.

3D Flipbook PDF in Elementor

Display PDFs as interactive 3D flipbooks. (Pro)

Was this page helpful?

Last updated today

Built with Documentation.AI