How to add a flipbook in Elementor: shortcode or widget

Elementor has no flipbook widget of its own, and its PDF options stop at a link or a download button. With Real3D Flipbook there are two ways to put a real page-turning book on an Elementor page: paste a shortcode, or use the Elementor addon, which adds a flipbook widget to the panel.

Both need the Real3D Flipbook WordPress plugin. If you don’t have a flipbook yet, start with how to turn a PDF into a flipbook on WordPress.

Option 1: the Shortcode widget

Every flipbook has a shortcode. Open it under Real3D Flipbook in the WordPress admin and copy it. It looks like [real3dflipbook id="12"].

1. Edit the page with Elementor.
2. Drag the Shortcode widget onto the page.
3. Paste the flipbook’s shortcode and update the page.

The editor shows the shortcode, not the book, so open the page itself to see the result.

Shortcode parameters change how the flipbook appears on this page without touching its settings. Some useful ones:

For example, [real3dflipbook id="12" mode="lightbox" viewmode="swipe"] shows the cover image and opens the book in a lightbox, with pages that slide sideways.

Option 2: the Elementor addon

The addon adds a flipbook widget to the Elementor panel. Drop it on the canvas, then either pick one of your flipbooks or make one on the spot by uploading a PDF or pasting a PDF address.

The widget’s settings are in the panel, next to everything else on the page:

• View mode: WebGL, 3D, 2D, swipe, scroll or simple.
• Embed mode: normal (in the page), lightbox or fullscreen.
• Container size for a flipbook shown in the page.
• Lightbox text and image for the link or cover that opens it.
• Lightbox CSS class to open it from any element.

You see the result in the editor as you change it, so there is no switching between the editor and the live page. Everything else, such as the toolbar, colors and table of contents, still comes from the flipbook’s own settings.

The addon costs $19 a year or $29 once for one site, and is also part of the bundle with all seven addons. See addons.

Open the flipbook from your own button

Often the best place for a flipbook on a landing page is behind a button: the page stays short, and the book only loads when someone wants it. Both options can do that with a CSS class.

1. Add a Button widget, or select an image or a heading.
2. On its Advanced tab, type a class name into CSS Classes, for example open-catalog.
3. Set the flipbook to open in a lightbox with that class: in the addon, use the Lightbox CSS class setting. With a shortcode, add mode="lightbox" class="open-catalog".

Every element with that class now opens the flipbook. The lightbox loads nothing until it is opened, so a page with several flipbooks behind buttons stays fast. Inline, lightbox or fullscreen compares the three ways to show a book.

Tips for Elementor layouts

• Give an inline flipbook room. The book fills the width of its column. In a narrow column, a two-page spread gets small, so use a full-width section, or a lightbox.
• Check the phone layout. In Elementor’s mobile preview, a spread may be too small to read. Swipe mode shows one page at a time on phones. See which flipbook view mode to use.
• One flipbook in the page, the rest in lightboxes. Several books in the page all start loading at once. Behind buttons, each one loads only when it’s opened.

Questions about Elementor flipbooks

Do I need the addon to use a flipbook in Elementor?

No. The Shortcode widget works with any flipbook. The addon adds a widget with live preview and settings in the Elementor panel.

Can I show the flipbook on its own page instead?

Yes. Set the embed mode to fullscreen, or mode="fullscreen" in the shortcode, and the book fills the whole window. That suits a page made only for a catalog or a magazine issue.

Why does the editor show the shortcode instead of the flipbook?

The Shortcode widget is drawn on the live page, not in the editor. Preview or open the page to see the book, or use the addon for a live preview.

Can I show a different PDF with the same settings?

Yes. Add a pdf parameter to the shortcode, like [real3dflipbook id="12" pdf="https://…/spring.pdf"], to show another PDF with the same flipbook’s settings. In the addon, set the PDF address in the widget.

Is there an addon for WPBakery too?

Yes. The WPBakery addon does the same for WPBakery Page Builder.