View Categories

How to Embed PDF in Elementor?

3 min read

Table of Contents

With Custom iFrame, you can embed PDF in Elementor easily. Share brochures, reports, manuals, or any documents directly on your website without forcing users to download them.

Step 1: Install & Activate Custom iFrame Plugin🔌

Let’s start at square one — the classic WordPress plugin hustle:

  1. Jump into your WordPress dashboard.
  2. Head to Plugins > Add New.
  3. Search for “Custom iFrame by Coderz Studio” — we promise we’re cooler than the name sounds 😎.
  4. Click that ‘Install Now‘ button, then hit ‘Activate‘ like you’re launching a spaceship.

Boom. Plugin is live.

Step 2: Add Custom iFrame widget on Elementor Page➕

Now that the Custom iFrame plugin is ready, let’s get that PDF a comfy spot on your page:

  1. Navigate to the page or post where you want to add the PDF
  2. Click Edit with Elementor to launch the Elementor editor.
  3. In the Elementor editor bar, search for “Custom iFrame”. Found it? Great!
  4. Drag and drop that widget right into the section where the PDF should shine.
Screenshot of the Elementor editing page showing how to Set Up Custom iFrame in Elementor, by showing the process on how you can drag and drop the Custom iFrame widget.

Step 3: Embed PDF in Elementor – Right Where It Belongs📄

Alright, time to make your PDF feel right at home — scrollable, and looking sharp right on your page!

  1. In the Content settings, choose Source Type as PDF — obviously.
  2. Choose your source:
    • File (recommended – gives you more control)
    • URL (quick but comes with no toolbar tweaks)
  3. Set the height to fit your layout — tall, short, or somewhere in between.

Tip: Use File if you want to customize the PDF toolbar — URL doesn’t allow that.

Step 4: Smart Load — Load Only When Needed ⏳

Want faster page loads? Flip the Lazy Load switch to Yes.

This tells your PDF to chill in the background and load only when users scroll to it — saving resources and speeding up the page for your visitors.

It’s perfect for performance — less stress on your site, more speed for your visitors.

Set it to No if you want the PDF to load right away.

One toggle. Big difference.

The image displays the Elementor editor interface used for the Custom iFrame plugin. The editor includes three main tabs: Content, Style, and Advanced. The selected tab, Content, shows a section labeled "Smart Load," featuring a "Lazy Load" option set to "Yes." The interface is tailored to Embed PDF in Elementor.

Step 5: Customize Display Options (PDFs Deserve Style Too)🎨

Let’s make your embedded PDF look and feel just right for your site.

  1. Theme: Choose the vibe:
    • System Default, Light, Dark, or go wild with Custom colors.
    • Pick Custom, and you’ll get color pickers to match your brand or mood.
  2. Zoom: Set the starting zoom level when the PDF loads:
    • Go with presets like Actual Size, Page Fit, or Automatic Zoom
    • Or set it anywhere from 50% to 400%, if you’re the precision type.
  3. Default Selection Tool:
    • Text Tool (for highlighting & copying), or
    • Hand Tool (for grab-and-drag scrolling)
  4. Default Scrolling: Pick your scroll style:
    • Vertical, Horizontal, Wrapped, or Page-by-page.
  5. Default Spreads: Control how PDF pages are grouped
    • No Spreads, Odd, or Even spreads — perfect for booklets or presentations.
The image shows the "Display Options" section of the Elementor interface, tailored for embedding PDFs seamlessly into web pages. The settings visible include theme selection set to "Custom," a custom purple color choice, automatic zoom for initial file display, default tools like the Text Tool for selection, vertical scrolling configuration, and a no-spreads option for layout. These intuitive display options streamline the process of embedding PDFs in Elementor designs.

One simple panel, and your PDF viewer looks like it belongs on your site — styled, smooth, and totally on brand. ✨

Step 6: Toolbar Settings — Your PDF, Your Rules 🧰

Give your users just the right tools — no more, no less. You’re basically the PDF bouncer now: “Print? You’re in. Rotate? Maybe. Draw tool? Not today.” Just toggle and take charge!

  1. Toolbar Position: Top or Bottom — pick where the magic bar shows up.
  2. Print: Let users print the PDF (yes, some still do that).
  3. Download: Save a copy for later – old-school style.
  4. Presentation Mode: Fullscreen view = serious presentation vibes.
  5. Copy Text: Enable text selection and copying (Ctrl+C fans rejoice).
  6. Add Text: Let users type over the PDF like it’s a fillable form.
  7. Draw: Freehand scribbling for the creative (or chaotic).
  8. Add Image: Drop images right onto the PDF.
  9. Rotate: Spin those pages like a fidget spinner.
  10. Properties: Show file info like name, size, and page count.

In short — you hold the switches, your PDF follows the rules. Total power, zero drama.

The image presents the "Toolbar Settings" section of a software interface, designed for embedding PDFs in Elementor. It includes various customization options with toggle switches and dropdowns to refine the toolbar's functionality and visibility. Features include toolbar display, position adjustment, print/download options, presentation mode, text copying, text addition, image insertion, rotation controls, and property views. These settings enhance the flexibility and control of embedding PDFs seamlessly into Elementor designs.

Step 7: Advanced – Add a Custom ID 🛠️

Want to style your iFrame with CSS or sprinkle in some JavaScript magic?
Just pop in a Custom ID (like my-awesome-iframe) and you’re all set!

Leave it blank if you’re feeling chill — we’ll generate one for you automatically. But if you’re planning custom tweaks, naming it gives you the power.

Short, sharp, and dev-friendly.

The image displays the "Advanced" settings section of an interface of Custom iFrame widget in Elementor. It includes a field labeled "Custom ID" with the placeholder text "my-custom-iframe." This field allows users to assign unique IDs for CSS or JavaScript customization. A button labeled "Write with AI" accompanies the field. Below the field, a description explains, "Enter an ID for custom CSS or JavaScript. Leave empty for an auto-generated ID." These advanced options provide flexibility for embedding PDFs effectively in Elementor designs.

Step 8: Style the Custom iFrame (Make It Look Sharp)✨

Time to give your iFrame some style! Want to adjust padding, alignment, background, borders, or maybe throw in a dramatic box shadow? We’ve got you.

Check out our full styling guide here:
How to Style Custom iFrame Widget in Elementor?

You’ll be able to control how your iFrame blends into your site — tweak margins, play with colors, and give it that pixel-perfect finish.

Even small style changes can make a big visual impact. Go ahead, give your iFrame the glow-up it deserves!

The image showcases the "Style" tab within the "Custom iFrame" settings in Elementor. This section offers comprehensive styling options, such as "Style," "Background Style," "Border Style," and "Box Shadow Style," presented as expandable panels. These features allow users to refine the visual presentation of Embed PDF in Elementor with ease and flexibility.

Step 9: One Click Away from a Glorious PDF Embed in Elementor✅

All set? Hit Update or Publish to bring your beautifully embedded PDF to life on your site.

That’s it — you’ve just learned how to embed PDF in Elementor like a pro (with style, speed, and a sprinkle of fun).

Now go impress your visitors — or at least make your PDFs look way cooler than they used to! 🤝

How’s your vibe after reading this? —Tap an emoji

Get Free Resources in your Inbox

© 2025 CoderzStudio | All Rights Reserved.