3D Flipbook PDF Viewer
Display any PDF as an interactive 3D page-flip viewer in Elementor and Gutenberg using Custom iFrame Pro.
Overview
Custom iFrame 3D Flipbook PDF Viewer turns any embedded PDF into an interactive page-flip experience. Pages animate like a real book when visitors flip through the document. Enable it with a single toggle in the PDF source settings.
Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.
3D Flipbook PDF Viewer 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
- WordPress with Elementor or the Gutenberg block editor
- A PDF file or PDF URL
Use Cases
The 3D Flipbook view works well for document types where a book-like reading experience adds value:
- Brochures and product catalogues
- Annual reports and company profiles
- Magazines and digital publications
- Ebooks and guides
- Portfolio booklets
For technical documents, manuals, or forms where readers need to search or copy text, use the standard PDF embed instead. See Embed PDF in Elementor or Embed PDF in Gutenberg.
How to Enable 3D Flipbook
In Elementor
Open your page in Elementor
Go to the page where you want the flipbook. Click Edit with Elementor.
Add the Custom iFrame widget and set Source Type to PDF
Drag the Custom iFrame widget onto your page. In the Content tab, set Source Type to PDF.
Add your PDF
Choose File to upload from your media library, or choose URL to paste an external PDF link.
Enable 3D Flipbook View
Find 3D Flipbook View in the Content tab. Set it to Yes. The PDF immediately switches to the animated flipbook layout in the editor.
Set the height and publish
Set Height to at least 500px. Keep Auto Height off for a consistent layout. Click Update or Publish.
In Gutenberg
Open your page in the block editor
Go to the page where you want the flipbook. Click Edit.
Add the Custom iFrame block and set Source Type to PDF
Add the Custom iFrame block. In the right panel, set Source Type to PDF.
Add your PDF
Choose File or URL and add your PDF.
Enable 3D Flipbook View
In the block settings panel, find 3D Flipbook View and toggle it on. The PDF switches to the flipbook layout.
Set the height and publish
Set Height to at least 500px. Keep Auto Height off. Click Update or Publish.
The 3D Flipbook PDF Viewer is live. Visitors can flip through pages with an animated book effect.
Height Recommendations
| Document type | Recommended height |
|---|---|
| A4 portrait | 600–800px |
| Landscape brochure | 450–600px |
| Tall catalogue | 700–900px |
Keep Auto Height off when using 3D Flipbook View. Auto Height can conflict with the flipbook layout and cause sizing issues.
Standard PDF vs. 3D Flipbook
| Feature | Standard PDF viewer | 3D Flipbook |
|---|---|---|
| Toolbar (zoom, print, download) | Yes | No |
| Page-flip animation | No | Yes |
| Text search inside PDF | Yes | No |
| Works with File source | Yes | Yes |
| Works with URL source | Yes | Yes |
| Requires Pro | No | Yes |
FAQ
Yes. Both File (uploaded to your media library) and URL (external PDF link) work as sources for the flipbook view.
No. Enabling 3D Flipbook View replaces the standard PDF viewer with the flipbook layout. Toolbar controls such as zoom, print, and download are not available in flipbook mode.
Set height to at least 500px. For A4 documents, 600–800px works well. Keep Auto Height off for a consistent layout.
Yes. The flipbook responds to touch swipe gestures on mobile devices. Set a height that fits the expected mobile screen size to keep the flipbook fully visible without scrolling.
Related Guides
Last updated today
Built with Documentation.AI