> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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](/elementor/documents/embed-pdf).

<Callout kind="info">
  3D Flipbook PDF is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). [View pricing](https://customiframe.com/pricing) — plans start at $29 one-time.
</Callout>

## Requirements

- [Custom iFrame Free plugin installed and active](/getting-started/installation)
- [Custom iFrame Pro plugin installed and active](/getting-started/installation)
- Elementor installed
- A PDF file or PDF URL to embed

## Step 1: Add the Custom iFrame Widget

<Steps>
  <Step title="Install both Custom iFrame plugins" icon="download" title-type="p">
    Install and activate both **Custom iFrame Free** and **Custom iFrame Pro** from your WordPress dashboard.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress plugin directory showing Custom iFrame for Elementor plugin by Coderz Studio with 5-star rating and active installations count"
      width="818"
      height="363" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the flipbook. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.
  </Step>
</Steps>

## Step 2: Add the PDF

<Steps>
  <Step title="Set Source Type to PDF" icon="file-text" title-type="p">
    In the Content tab, set **Source Type** to **PDF**.
  </Step>
  <Step title="Choose File or URL" icon="upload" title-type="p">
    Choose **File** to upload from your media library, or choose **URL** to paste an external PDF link.
  </Step>
</Steps>

## Step 3: Enable 3D Flipbook PDF in Elementor

<Steps>
  <Step title="Turn on the 3D Flipbook View toggle" icon="book-open" title-type="p">
    In the Content tab, find **3D Flipbook View** and set it to **Yes**. The PDF immediately switches to an animated page-flip layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912775/elementor/documents/3d-flipbook-pdf/3d-flipbook-settings.webp"
      alt="Custom iFrame widget settings panel in Elementor showing PDF source upload field and 3D Flipbook View toggle enabled"
      width="360"
      height="521" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 4: Adjust Height and Layout

<Steps>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to at least 500px for the flipbook to display properly. Keep **Auto Height** off for a consistent layout.
  </Step>
</Steps>

## Step 5: Save and Publish

<Callout kind="success">
  Click **Update** or **Publish**. Your 3D Flipbook PDF is now live on your WordPress site.
</Callout>

Want to fine-tune PDF display options, toolbar controls, or other widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) 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

<ExpandableGroup>
  <Expandable title="Do I need Custom iFrame Pro for 3D Flipbook?" default-open="false">
    Yes. The 3D Flipbook View toggle is a Pro-only feature. You need both the free and Pro plugins installed and active. [View pricing](https://customiframe.com/pricing).
  </Expandable>
  <Expandable title="Does 3D Flipbook work with a PDF URL?" default-open="false">
    Yes. You can use either **File** (uploaded to your media library) or **URL** (external PDF link) as the source. Both support the flipbook view.
  </Expandable>
  <Expandable title="What height should I set for the flipbook?" default-open="false">
    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.
  </Expandable>
  <Expandable title="Can I use the standard PDF toolbar with 3D Flipbook?" default-open="false">
    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.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed PDF in Elementor" href="/elementor/documents/embed-pdf" icon="file-text" horizontal={false}>
    Embed a standard PDF viewer in Elementor.
  </Card>
  <Card title="Embed Google Docs in Elementor" href="/elementor/documents/embed-google-docs" icon="file-text" horizontal={false}>
    Embed Google Docs in Elementor.
  </Card>
</Columns>

## Related Guides

- [Embed Documents in Elementor - Overview](/elementor/embed-documents)
- [Embed PDF in Elementor](/elementor/documents/embed-pdf)
- [Embed Google Docs in Elementor](/elementor/documents/embed-google-docs)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)