3D Flipbook PDF in Elementor

Step-by-step guide to display a 3D flipbook PDF in Elementor using Custom iFrame Pro. Turn static PDFs into interactive page-flip experiences.

Overview

Custom iFrame Pro lets you display 3D Flipbook PDF in Elementor by enabling one toggle in the PDF widget settings. Pages animate like a real book when visitors flip through the document.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Want to embed a standard PDF without the flipbook effect? See Embed PDF in Elementor.

3D Flipbook PDF is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing — plans start at $29 one-time.

Requirements

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

Install both Custom iFrame plugins

Install and activate both Custom iFrame Free and Custom iFrame Pro from your WordPress dashboard.

WordPress plugin directory showing Custom iFrame for Elementor plugin by Coderz Studio with 5-star rating and active installations count

Open your page in Elementor

Go to the page where you want the flipbook. 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.

Step 2: Add the PDF

Set Source Type to PDF

In the Content tab, set Source Type to PDF.

Choose File or URL

Choose File to upload from your media library, or choose URL to paste an external PDF link.

Step 3: Enable 3D Flipbook PDF in Elementor

Turn on the 3D Flipbook View toggle

In the Content tab, find 3D Flipbook View and set it to Yes. The PDF immediately switches to an animated page-flip layout.

Custom iFrame widget settings panel in Elementor showing PDF source upload field and 3D Flipbook View toggle enabled

Step 4: Adjust Height and Layout

Set the height

Set Height to at least 500px for the flipbook to display properly. Keep Auto Height off for a consistent layout.

Step 5: Save and Publish

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

Want to fine-tune PDF display options, toolbar controls, or other widget behavior? See the Set Up Custom iFrame in Elementor guide for all widget options.

This guide showed you how to display a 3D Flipbook PDF in Elementor using Custom iFrame Pro. From uploading the PDF to enabling the flipbook view and publishing, the whole setup runs through the Elementor editor without any code.

FAQ

Yes. The 3D Flipbook View toggle is a Pro-only feature. You need both the free and Pro plugins installed and active. View pricing.

Yes. You can use either File (uploaded to your media library) or URL (external PDF link) as the source. Both support the flipbook view.

Set height to at least 500px. Taller values (600px to 800px) work well for A4-sized documents. Keep Auto Height off so the flipbook maintains a consistent size.

No. Enabling 3D Flipbook View replaces the standard PDF viewer with the flipbook layout. PDF toolbar settings do not apply when flipbook mode is active.

Also Available For

Embed PDF in Elementor

Embed a standard PDF viewer in Elementor.

Embed Google Docs in Elementor

Embed Google Docs in Elementor.

Was this page helpful?

Last updated today

Built with Documentation.AI