Buy Now
Blog
Guides

How to turn a PDF into a flipbook on WordPress

Real3D Flipbook editor in WordPress: Toolbar tab with eight toolbar styles and the live preview of a catalog

A PDF on a website is a download. A flipbook is the same document opened right there on the page, with pages that turn, a table of contents, zoom and selectable text. Readers see the first page before they have decided whether they care, which is why flipbooks get read and downloads mostly don’t.

This guide goes through the whole process with Real3D Flipbook, from the PDF to a published page, with screenshots of each step. If you are still choosing a plugin, our comparison of the best flipbook plugins for WordPress puts the options side by side. If you only need a simple PDF viewer, see PDF viewer for WordPress and how to embed a PDF in WordPress.

1. Check the PDF first

The flipbook shows whatever is in the PDF, so fix the PDF before uploading it.

  • Same page size throughout. Mixed sizes work, but the book looks uneven as pages turn.
  • Embedded fonts. Export with fonts embedded, or text renders in a fallback font.
  • Export for screen. The viewer fetches pages as they are needed rather than the whole file up front, but a 200 MB print export still makes the first page slow. Images at 150 ppi are plenty.
  • Links and bookmarks. Links inside the PDF stay clickable, and PDF bookmarks become the table of contents. If your layout app can add them, do it before exporting.

2. Install the plugin

Go to Plugins → Add New → Upload Plugin, choose the plugin’s zip file, install and activate it, then activate your licence when the plugin asks for it. A Real3D Flipbook menu appears in the WordPress admin.

3. Create the flipbook

  1. Go to Real3D Flipbook → Add new and give it a title.
  2. On the Pages tab, click Select PDF or images and pick the PDF from the media library, or upload it there. You can also paste the address of a PDF into the PDF URL field.
  3. A thumbnail of every page appears, and the live preview on the right shows the flipbook as visitors will see it.
The Pages tab with a PDF added: every page as a thumbnail, and the live preview on the right

Nothing is converted. The browser renders each page from the PDF when a reader gets to it, so the flipbook is ready the moment the upload finishes.

If the media uploader rejects the file as too large, that is the WordPress upload limit, not the plugin. Ask your host to raise it, or put the PDF on the server by FTP and paste its address into the PDF URL field instead of uploading. A PDF hosted on another domain needs CORS headers; the documentation has the lines to add.

4. Choose how it looks

The settings are on the same screen, and the live preview updates as you change them. Switch the preview between desktop and phone with the icons in its corner.

General tab. Two settings decide most of the result:

  • Mode. Normal shows the flipbook inline on the page. Lightbox shows a cover and opens the book over the page when it is clicked, which works well for a grid of catalogs. Fullscreen covers the whole page. Our guide to inline, lightbox and fullscreen embeds explains when to use each.
  • View mode. Realistic 3D (WebGL) is the default: pages that bend and cast shadows as they turn. CSS 3D is lighter for older devices, swipe slides pages like a carousel, scroll stacks them like a PDF viewer, and simple changes pages without an animation. See which flipbook view mode to use.
The General tab with the Mode and View mode settings next to the live preview

Toolbar tab. Pick one of eight toolbar styles from picture previews: a bar at the bottom or top, controls in the corners, a floating pill, a video-player style bar or a minimal set. Every button (thumbnails, table of contents, zoom, search, download, print, share) can be switched off, renamed or moved. Turn download off if the PDF should stay on the site.

The Toolbar tab with the eight toolbar styles and the live preview

Appearance and Mobile tabs. Appearance sets the skin, colors and background. On screens narrower than 768 px the viewer shows one page at a time, so a two-page spread is never squeezed onto a phone, and the Mobile tab takes separate settings for phones, for example swipe on phones and realistic 3D on desktop.

5. Publish and put it on a page

Click Publish. The shortcode then appears in the Publish box with a Copy button:

[real3dflipbook id="123"]

Paste it into a Shortcode block, or add the Real3D Flipbook block and pick the flipbook from the list. In Elementor use the Shortcode widget, or the Elementor addon for a widget with a live preview; there is a WPBakery addon too. The flipbook fills the width of whatever contains it, so the page layout decides how big it is.

Each flipbook also has its own page at its permalink, which you can link to or share directly.

6. Make it load fast

  • Range requests. The viewer downloads the PDF in pieces, so readers see the cover while the rest arrives. The server has to support HTTP range requests. Nearly all do, but some proxies and CDNs strip them.
  • Fast Web View. Save the PDF with “Fast Web View” (a linearized PDF) so the first pages sit at the start of the file.
  • Lightbox for anything lower on the page. A lightbox flipbook loads nothing until it is opened.
  • Pre-rendered pages. For big catalogs, the PDF Tools addon converts the PDF to page images and a JSON file on the server once, so nothing has to be rendered in the reader’s browser.

The loading speed checklist goes through each of these in detail.

If something doesn’t work

The flipbook stays on the loading spinner. Open the PDF’s address directly in the browser. If it doesn’t open, the address is wrong. If it opens but the flipbook doesn’t, the PDF is probably on another domain without CORS headers; move it to the same site or add the headers from the documentation.

The upload fails. The file is larger than the WordPress upload limit. Raise the limit, or upload the PDF by FTP and paste its address into the PDF URL field.

The cover takes several seconds. The server is probably not answering range requests, or the PDF is a large print export. Check both with the loading speed checklist.

Links in the PDF don’t work. Links only come through if they are in the exported PDF. Check that your layout app’s export keeps hyperlinks, then upload the PDF again.

Zoomed pages look soft. Pages are re-rendered sharper as readers zoom in. The Zoom size setting on the General tab sets the maximum, for example 4000 for fine print and maps.

Questions people ask

Can readers still download the PDF? Yes, through the download button, which you can hide.

Does the text stay selectable and searchable? Yes. The viewer keeps the PDF text layer, so readers can select text and search the whole book.

What if the pages are images, not a PDF? Select PDF or images accepts JPG and PNG too, one image per page.

Can I add videos or links on top of the pages? Yes, with the Page Editor addon. See interactive flipbook pages.

Right-to-left languages? There is a right-to-left option that flips the reading direction, page numbering and navigation. See right-to-left flipbooks.

Can I show many flipbooks on one page? Yes. Use lightbox mode for each, or put the covers on a shelf; see building a digital library.

More from the blog

All posts

Turn your PDFs into flipbooks

Catalogs, magazines and brochures with a realistic page flip, on WordPress, Shopify, Wix or any website.