2025| How to Add Downloadable PDF in Elementor Easily?

Looking to add downloadable PDF in Elementor WordPress without confusing plugins or complicated code?
You’re in the right place.

Today, I’ll show you the easiest way to make your PDF not just visible — but downloadable — right from your Elementor page.

And guess what?
All you need is the Custom iFrame for Elementor plugin by Coderz Studio.

Let’s jump straight in!

Why You Might Need a Downloadable PDF in Elementor

Sometimes you want visitors to grab a document directly from your site.
It could be a price list, a restaurant menu, a product brochure, or even a free eBook.

Making it easy to download right from your Elementor page keeps users happy — and keeps your website looking clean and professional.

Nobody likes digging around for hidden download buttons. Let’s fix that!

Add Downloadable PDF in Elementor – Use Custom iFrame

The simplest way to do this is with the Custom iFrame for Elementor plugin.

Here’s what you need to do:

Step 1: Install the Custom iFrame Plugin

In WordPress, go to Plugins > Add New
Search for Custom iFrame by Coderz Studio
Click Install and then Activate

The image showcases the WordPress plugin listing for "Custom iFrame for Elementor," designed to embed PDFs, maps, videos, and websites within Elementor pages. The listing highlights features such as lazy loading, auto-height adjustment, dynamic URL support, and SEO-friendly functionality. Additional details include over 200 active installations, a 5-star rating from user reviews, and a prominent "Install Now" button. These features underscore the plugin's utility in enhancing web designs with seamless integration options.

Step 2: Add the Custom iFrame Widget in Elementor

Open your page in Elementor
Search for Custom iFrame in the widget panel
Drag it into the section where you want the PDF

Step 3: Set Up Your Downloadable PDF

In the Custom iFrame widget settings:

Set Source Type to PDF.
Upload your PDF file.
Adjust the height if needed.
Navigate to ‘Toolbar Settings’ > Enable ‘Print/Download’ toggle.
You can also customize where the toolbar appears — top or bottom.

The image displays the "Edit Custom iFrame" settings in Elementor, configured to add downloadable PDF in Elementor. The Content tab is selected, showing options for the Source Type set to "PDF" and the PDF Source set to "File." A file named "sample-1.pdf" has been uploaded, with a description below stating, "Upload a file or pick one from your media library for embed. Supported File Type: PDF." These settings streamline the integration and display of downloadable PDFs within Elementor designs.

Here’s the magic:
Now, when visitors see the embedded PDF, they’ll also have the option to download it directly — right from the toolbar!

You’re not just showing the PDF. You’re giving users an easy way to download it with one click.

The image displays the settings panel in Elementor for customizing a PDF viewer. It includes options for "Toolbar Settings," where the "Print/Download" toggle is highlighted and set to "Show." Other toolbar features, such as "Presentation Mode," "Copy Text," "Add Text," "Draw," "Add Image," and "Rotation," are set to "Hide." On the right, the PDF viewer displays a sample PDF titled "Sample PDF," containing placeholder text. These settings streamline the process to add downloadable PDF in Elementor and customize its toolbar features.

Smart Loading with Lazy Load

Want your page to stay fast even with PDFs?

Turn on the Lazy Load option.

It waits to load the PDF until the user scrolls to it. Result? Faster pages, better performance, happier visitors.

Easy win.

Make the PDF Look Good

You can style the iFrame to fit your page and match your site’s design easily.

Inside the Display Options, you can set the Theme:

Choose Light, Dark, or go Custom.
Pick Custom Colors to match your brand style exactly.

The image displays the Display Options of Custom iFrame widget within a customization interface, showcasing settings to style the downloadable PDF. Visible options include theme selection set to "Custom," a custom blue color choice, automatic zoom functionality, and tools for text selection and scrolling. These settings provide users with flexibility and control over the presentation and styling of downloadable PDFs.

Plus, into the Style tab,

Add some padding for breathing room.
Set a background color for contrast.
Add a border or soft shadow to make it pop visually.

Just a few small tweaks, and your downloadable PDF will look like a seamless part of your Elementor page — not something dropped in randomly.

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 embedded iframe in Elementor with ease and flexibility.

Publish and Go Live

Once everything looks good, hit Update or Publish.

Your visitors can now view and download your PDF right from your WordPress site — no extra steps, no confusion.
Mission accomplished!

Final Thoughts

If you need to add a downloadable PDF to Elementor, the Custom iFrame plugin makes it really simple.

You upload the file, flip the Download toggle, and you’re done. Visitors get the file they need, and you get a cleaner, faster website. Why make it harder than it has to be?

Tried it out? Got a question? Or maybe you have a cool way you’re using PDFs on your site?
Drop a comment below — we’d love to hear from you! 🚀

How to Add Downloadable PDF in Elementor Easily? – Custom iFrame