Inline, lightbox or fullscreen: three ways to put a flipbook on a page

A flipbook can sit in the page like an image, wait behind a cover until someone clicks it, or take over the whole screen. Which one you pick changes how fast the page loads, how many books fit on it and how people find their way in. This guide covers all three, with the shortcodes for each. If you haven’t made the flipbook yet, start with how to turn a PDF into a flipbook on WordPress.

Inline: the book is part of the page

Inline is the default (mode="normal"). The flipbook fills the width of whatever contains it, and readers can start turning pages without a click.

[real3dflipbook id="12"]

Use it when the flipbook is the point of the page: a product catalog page, this month’s magazine, a brochure with a short intro above it. One inline book per page is the comfortable maximum. Each one starts its own viewer as the page loads, so three inline books mean three times the work.

This is an inline flipbook:

To open on a particular page, add startpage:

[real3dflipbook id="12" startpage="5"]

Lightbox: a cover first, the book on click

In lightbox mode the page shows only a cover. A click opens the book over the page, and closing it brings the reader back to where they were.

[real3dflipbook id="12" mode="lightbox"]

This is the same kind of embed in lightbox mode. Click the cover:

Nothing loads until someone opens the book, which makes lightbox the right choice for anything below the fold and for pages with several publications: an archive of issues, a set of catalogs, a downloads page. The loading speed guide has more on why this matters.

The cover can be the first page of the flipbook, or any image you set as the lightbox thumbnail in the flipbook settings. You don’t have to use a cover at all.

A text link. lightboxtext shows a link instead of the cover:

[real3dflipbook id="12" mode="lightbox" lightboxtext="Read the 2027 catalog"]

For example:

Your own button. Give the flipbook a CSS class with lightboxcssclass, and any element on the page with that class opens it: a button in the hero, a menu item, an image in a card.

[real3dflipbook id="12" mode="lightbox" lightboxcssclass="open-catalog"]

Then add open-catalog as the CSS class of a button in the block editor or in Elementor.

Open straight away. lightboxopened="true" opens the book as soon as the page loads, which works well for a landing page linked from an email or a QR code.

To show every flipbook on the site as a row of covers, use id="all":

[real3dflipbook id="all"]

For a proper library, the Bookshelf addon puts the covers on wood, metal or glass shelves, or in a plain grid. Our guide to building a digital library shows how to set one up.

Fullscreen: the whole page is the book

Fullscreen mode (mode="fullscreen") covers the entire page. Readers see the flipbook and its toolbar and nothing else.

[real3dflipbook id="12" mode="fullscreen"]

Use it for a dedicated reading page: the link in a newsletter, the address behind a QR code on a printed flyer, a catalog you share on social media. Put the shortcode on an otherwise empty page and send people straight to it.

Phones

Lightbox is often the better choice on a phone even when the desktop page shows the book inline: the book gets the whole screen instead of a narrow column. The flipbook settings have a separate mode for phones, so you can keep the book inline on desktop and open it from a cover on mobile.

Which one to choose

If you are not sure, start with one inline book at the top of a page and switch everything further down to lightbox.

Comparing plugins? Our guide to the best flipbook plugins for WordPress puts prices and features side by side.