Embed PDFs Directly in Elementor with the New PDF Embedder Widget

If you’ve built WordPress pages with Elementor and needed to embed a PDF, you know the routine. You reach for the Shortcode widget, look up the right format, hunt down the file URL in the media library, paste it in carefully — and then nothing looks right until you preview the published page. Sometimes the embed is silently broken because of a typo somewhere in the string. You fix it. Publish again. Check again.

It works, but it’s not great.

The Shortcode Workflow Has Real Friction

Working around the Shortcode widget means:

• No live preview. You configure blind and publish to check. Then you publish again when something looks off.
• URL hunting every time. Every embed means a trip to the media library, copying the file URL, and pasting it in exactly the right spot.
• Typo risk. One character out of place and the embed breaks without any obvious error message.
• No visual settings. Want to move the toolbar or set a starting page? You need the exact shortcode parameter names, the right syntax, and another publish to check if it worked.

For a one-off embed, that’s annoying. If you’re managing pages where PDFs change regularly, it adds up fast.

Introducing the PDF Embedder Widget for Elementor

Today we’re shipping the PDF Embedder widget for Elementor — a native widget that lives in your Elementor panel alongside everything else.

No shortcodes. No URL hunting. No publishing blind to check the output.

Live Preview in the Canvas

The moment you select a PDF in the widget panel, it renders in the Elementor canvas.

You see the actual viewer — at the width of the column it sits in, with your toolbar settings applied — before you publish anything. Change a setting on the left and the preview updates on the right.

The shortcode workflow is configure, publish, check, adjust, publish again. This is just: build the page.

What the Widget Can Do

The widget gives you a dedicated settings panel for each embed. Here’s what you get:

• Dimensions: Fixed pixel values, or leave both at max to fill the column automatically.
• Toolbar: Position it top, bottom, both, or hide it entirely. Fixed or hover-to-reveal.
• Page navigation: Set the starting page, let users type a page number to jump directly, or lock movement to Prev/Next buttons.
• Scrolling: Continuous scroll (mouse-wheel, swipe, click-drag) or button-only navigation. You can also force scrollbars or snap back to the top on each page change.
• Zoom: Opening zoom as auto, page-fit, page-width, or a custom percentage — with a separate level for full-screen mode.
• Mobile: Set the pixel width where the viewer drops to a thumbnail with a full-screen button. The button label is editable if “View in Full Screen” doesn’t fit your page.
• Watermarks: Overlay text on every page using smart tags — {email}, {username}, {fullname} — so each logged-in viewer sees their own details on the document. Position, opacity, rotation, size, color: all configurable.

Every setting applies to that embed only. Leave a field at its default and it inherits from your global PDF Embedder settings — so customizing one embed doesn’t touch anything else on the site.

What It Looks Like in Practice

Say you’re building a services page. There’s a product brochure that needs to go midway down the page, next to a feature list.

You drop the widget into the column, pick the file from the media library, and the brochure appears in the canvas — at the right width, sitting in the layout exactly where it’ll be when the page goes live. You move the toolbar to the top, set zoom to page-width, add a {email} watermark so every viewer sees their address on the document. Two minutes, maybe three.

Who This Is For

This is most useful if you’re:

• An agency or freelancer building client sites where PDFs show up on landing pages, service pages, or resource sections — especially when the client swaps files themselves and needs a setup that doesn’t break.
• A business owner who embeds contracts, menus, catalogs, or reports on Elementor pages and doesn’t want to deal with shortcode syntax every time.
• Using PDF Embedder’s security or watermarking features, since the widget lets you set per-embed controls — download, right-click protection, watermarks — without touching your global settings.

Getting Started

Step 1: Open Your Page in Elementor

Open the page you want to edit in the Elementor editor.

Step 2: Find the PDF Embedder Widget

In the widget panel on the left, search for “PDF” or “PDF Embedder.” The widget appears in the results.

Step 3: Drag the Widget into Your Layout

Drop it into the column or section where you want the embed. The Edit PDF Embedder panel opens on the left.

Step 4: Upload Your PDF

In the PDF File tab, click the upload icon to open the WordPress Media Library. Pick an existing file or upload a new one. As soon as you select a PDF, the live preview renders in the canvas.

Step 5: Adjust Your Settings and Publish

Work through the settings tabs — dimensions, toolbar, zoom, pages, scrolling, mobile, watermark — and watch the preview update as you go. When it looks right, save and publish.

Each tab is covered in full in the PDF Embedder Elementor widget guide.

Ready to Try It?

If you’re already on a Premium plan, update PDF Embedder to 5.4.0 and the widget is waiting in your Elementor panel.

Not on Premium yet? See plans and pricing →

Questions about the setup? The docs cover every setting, and you can always reach us directly.