How to Add a PDF Viewer in Elementor – Complete Guide

Elementor can place text, images, videos, forms, and many other content types inside a WordPress page, but it does not provide a complete native PDF reading experience by default. A PDF may appear as a download link, open in another browser tab, or require an iframe or shortcode workaround.

A dedicated Elementor PDF viewer lets visitors read the document directly inside the page while keeping the layout, navigation, and available viewer controls under your control.

Can Elementor Display a PDF Directly?

Elementor can link to a PDF or place external embed code inside an HTML widget, but those methods do not always create a consistent on-page reader.

A normal PDF button usually sends the visitor to the file. The browser may open the document in a separate tab, show its own toolbar, launch another application, or start a download. The result depends on the visitor’s browser, operating system, and local settings.

An embedded PDF viewer takes a different approach. It renders the document inside the Elementor layout and provides a controlled reading interface.

This distinction matters when the PDF is part of the content rather than a separate attachment. Product catalogs, technical manuals, property brochures, restaurant menus, reports, workbooks, and price lists often need to remain visible beside the surrounding page content.

For a broader comparison of the available WordPress methods, see how to embed a PDF in WordPress.

Four Ways to Add a PDF in Elementor

Elementor users usually rely on one of four methods:

1. Add a button or text link to the PDF.
2. Embed the file through an HTML iframe.
3. Insert a shortcode from a PDF plugin.
4. Use a native Elementor PDF Viewer widget.

Each method can provide access to the document, but the user experience and available controls differ significantly.

Method 1: Add a PDF Download Link

The simplest method is to upload the PDF to the WordPress Media Library and link to it through an Elementor Button, Text Editor, Icon, or Image widget.

How to Add a PDF Link in Elementor

1. Upload the PDF to the WordPress Media Library.
2. Copy the file URL.
3. Open the page with Elementor.
4. Add a Button, Text Editor, Icon, or Image widget.
5. Paste the PDF URL into the Link field.
6. Choose whether the link should open in a new tab.
7. Publish or update the page.

When a PDF Link Is Enough

A basic link works well when the visitor is expected to download the document. This may be appropriate for application forms, printable checklists, invoices, press materials, or files intended for offline use.

Limitations

• The PDF does not remain inside the Elementor page.
• The visitor may be sent to another tab or application.
• The browser controls navigation, printing, and downloading.
• The page has no control over the appearance of the PDF reader.
• The experience can vary across desktop and mobile devices.

A file link delivers the document, but it does not create an Elementor PDF viewer.

Method 2: Embed a PDF With the Elementor HTML Widget

The Elementor HTML widget can display a PDF through an iframe. This method points the iframe directly to the Media Library file URL.

A basic iframe may look like this:

<iframe
    src="https://example.com/wp-content/uploads/document.pdf"
    width="100%"
    height="700"
    title="Embedded PDF document">
</iframe>

How to Add the Iframe

1. Upload the PDF to the WordPress Media Library.
2. Copy the direct file URL.
3. Open the page with Elementor.
4. Drag the HTML widget into the layout.
5. Paste the iframe code.
6. Replace the example URL with your PDF URL.
7. Adjust the height.
8. Preview the page on desktop, tablet, and mobile.

Advantages of an Iframe

• No dedicated PDF viewer plugin is required.
• The document may appear inside the Elementor page.
• The iframe can use the full width of its container.
• The setup is relatively quick.

Why Iframes Often Create Problems

An iframe does not provide a custom PDF reader. It usually places the browser’s built-in PDF interface inside the Elementor section.

This can create several issues:

• The toolbar may differ between browsers.
• The iframe may show a Download button you cannot remove.
• A fixed height may leave empty space or hide part of the document.
• Mobile visitors may need to scroll inside both the iframe and the page.
• The browser may refuse to display the PDF as expected.
• Image watermarks and individual viewer settings are unavailable.
• Multiple iframes may create a heavy page.

An iframe may be sufficient for a quick internal page or temporary project. Commercial websites usually need more consistent behavior.

Method 3: Add a PDF Viewer With a Shortcode

Many WordPress PDF plugins generate a shortcode that can be inserted through Elementor’s Shortcode widget.

Typical Shortcode Workflow

1. Install and activate the PDF viewer plugin.
2. Create or configure the PDF viewer in WordPress.
3. Copy the generated shortcode.
4. Open the Elementor page.
5. Add the Shortcode widget.
6. Paste the shortcode.
7. Preview and publish the page.

Advantages of a Shortcode

• It works with Elementor Free.
• The PDF plugin can provide more features than an iframe.
• The same shortcode may work in other WordPress areas.
• No manual HTML is required.

Limitations of a Shortcode Workflow

• The settings may not appear inside the Elementor panel.
• Editors may need to leave Elementor to change the viewer.
• The shortcode parameters can become difficult to manage.
• The Elementor preview may not fully reflect the front-end result.
• The workflow feels less native than a dedicated widget.

A shortcode remains useful for custom templates and plugin compatibility, but a native Elementor widget usually provides a clearer editing experience.

Method 4: Use a Native Elementor PDF Viewer Widget

A native widget places the PDF controls directly inside the Elementor interface. The editor can select the document and configure the viewer without writing HTML or managing shortcode parameters.

A compatible widget may provide:

• WordPress Media Library selection
• Responsive sizing
• Page navigation
• Single Page and Continuous Scroll modes
• Zoom controls
• Fullscreen reading
• Working PDF hyperlinks
• Configurable Print and Download controls
• Image watermarks
• Per-viewer settings

This method provides the most direct Elementor workflow because the document and its main settings remain connected to the page builder.

How to Add HexCoda PDF Viewer Pro in Elementor

HexCoda PDF Viewer Pro includes a native Elementor PDF Viewer widget that works with Elementor Free.

The widget uses documents stored in the WordPress Media Library and renders them through a locally bundled PDF.js engine. Google Docs Viewer or another external document service is not required.

HexCoda PDF Viewer Pro includes a native widget that works with Elementor Free. Elementor Pro is not required for the PDF viewer integration.

This makes the workflow useful for websites that rely on the free Elementor builder but still need a complete on-page PDF reader.

Can You Add Multiple PDF Viewers to One Elementor Page?

Yes. A compatible plugin can display several independent PDF viewers on the same Elementor page.

This can be useful for:

• A document library
• Several product manuals
• Different course modules
• Multiple property brochures
• Reports from different years
• Menus for separate locations

Each viewer should maintain its own document state, navigation, and controls.

Large PDFs can increase page weight, so avoid loading more viewers than the page genuinely needs. Organizing documents across tabs, accordions, archive pages, or separate landing pages may provide a better experience.

Where an Elementor PDF Viewer Works Best

Product Catalogs

WooCommerce and business websites can display catalogs, brochures, price lists, and technical sheets directly inside Elementor landing pages.

Technical Manuals

Manufacturers, equipment suppliers, and software companies can present installation guides, user manuals, and reference documents with working internal navigation.

Courses and Education

Course creators can add workbooks, lesson materials, assignments, and preview documents inside educational layouts.

Real Estate

Property websites can embed brochures, floor plans, investment presentations, and development information inside listings and landing pages.

Reports and Public Documents

Companies, associations, nonprofits, and public institutions can publish annual reports, policies, forms, notices, and project publications.

Menus and Hospitality Content

Restaurants, hotels, and event venues can display menus, wine lists, visitor guides, and event packages without sending visitors to a separate PDF tab.

Common Elementor PDF Viewer Problems

The PDF Opens in a New Tab

The Elementor page probably contains a normal file link rather than an embedded viewer. Replace the link with a native widget, shortcode-based viewer, or iframe.

The PDF Downloads Immediately

The browser or server may treat the direct file URL as a download. Use a PDF viewer that renders the document inside the Elementor page.

The Viewer Is Empty

Confirm that the selected Media Library file is a valid PDF. Check for caching conflicts, blocked JavaScript files, security plugin restrictions, and browser console errors.

The Viewer Is Too Short

Increase the viewer height or use Continuous Scroll for long documents. Check whether an Elementor container, tab, or accordion is limiting the available space.

The PDF Is Difficult to Read on Mobile

Use responsive sizing and fullscreen mode. Test the orientation of the source PDF and inspect the page on a real phone.

The Download Button Remains Visible

Check both the global plugin settings and the individual Elementor widget settings. A per-viewer value may override the default configuration.

Internal PDF Links Do Not Work

Confirm that the links function in the original PDF. The viewer must also support internal destinations and PDF annotations.

The Viewer Does Not Load Inside a Hidden Tab

Some interactive elements calculate their dimensions before a hidden tab or accordion becomes visible. Reopen or refresh the element after it appears, or use a viewer that correctly handles container resizing.

Final Recommendation

The best way to add a PDF viewer in Elementor is to use a native widget that works with the WordPress Media Library and provides responsive on-page reading.

This approach avoids manual iframe code, keeps visitors inside the page, and provides greater control over reading modes, navigation, fullscreen viewing, links, watermarks, printing, and downloading.

HexCoda PDF Viewer Pro includes a native Elementor widget that works with Elementor Free, along with Gutenberg, Classic Editor, Flatsome UX Builder, and shortcode integrations.

Explore HexCoda PDF Viewer Pro and view the complete product details.

For more background about the first release and its development priorities, read the HexCoda PDF Viewer Pro launch announcement.

Frequently Asked Questions