PDF Flipbook shows a PDF as a book with an animated page turn. Pick a file from your media library and it renders every page in the browser. Visitors read it on your page instead of downloading it first.
A hotel guest guide as a two-page spread, a restaurant menu one page at a time and a shop catalogue in a styled frame. Use the buttons under each book to turn the pages. Each PDF takes a moment to load.
The default layout: pages side by side with the cover on its own. Navy pill buttons with custom labels, a download button, and the cover as the loading placeholder.
Single page spread is on, so one page shows at a time. The book is set to 100% of this narrow card. Download is hidden.
A two-page spread inside a cream frame: Background Color, a 1px border and a 14px radius on the flipbook, with square terracotta buttons.
No conversion and no page images to upload.
Drop PDF Flipbook onto your page.
Pick a PDF from your media library, or enter a PDF URL from a custom field in PDF Dynamic URL.
Choose a single page or two-page spread, set the button text, and style the buttons and border.
Built on PDF.js and turn.js.
Every page is drawn from the PDF in the browser with PDF.js. There are no page images to prepare.
Pages turn like a real book, with the first page shown as a cover.
Show a two-page spread, or switch on Single page spread to always show one page.
The two-page spread switches to a single page on screens 768px wide or less, and the book resizes with the window.
Add a download link for the PDF, with its own text and styling, or hide it.
Show your own image and a spinner while the PDF loads.
Pull the PDF from a custom field, so one template can show a different document on each post.
Change the Next, Previous and Download labels, for example to translate them.
Set colours, hover colours, typography, borders and padding for the navigation and download buttons.
Any document that reads better as a book than as a download.
Let visitors flick through your brochure on the page.
Show a restaurant menu as a book instead of a file link.
Publish issues that readers can page through.
Present product ranges and price lists.
Share a design or photography portfolio as a PDF book.
Show annual reports and guides, with an option to download.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| PDF File | The PDF from your media library. | — |
| PDF Dynamic URL | A PDF URL, for example from a custom field. Used instead of PDF File when set. | — |
| Loading Placeholder Image | An image shown with a spinner while the PDF loads. | — |
| Single page spread | Always show one page at a time. | Off |
| Next Button Text | Label for the next button. | Next |
| Previous Button Text | Label for the previous button. | Previous |
| Download Button Text | Label for the download link. | Download |
| Design | ||
| Width | Width of the flipbook. | 100% |
| Borders | Border around the flipbook. | — |
| Background Color | Background behind the pages. | — |
| Navigation Buttons | ||
| Background Color | Button colour, with a hover colour. | — |
| Typography | Text style, with a hover colour. | — |
| Borders & Padding | Button shape and spacing. | — |
| Download Button | ||
| Background Color | Button colour, with a hover colour. | — |
| Typography | Text style, with a hover colour. | — |
| Borders & Padding | Button shape and spacing. | — |
| Hide Download Button | Hide the download link. | On |
No. Upload the PDF to your media library and select it. The pages are drawn in the browser from the original file.
Yes. Each flipbook loads and turns on its own. This page has three, each with a different PDF and style.
On screens 768px wide or less, a two-page spread switches to a single page so the text stays readable.
Only if you want them to. The download button is hidden by default. Turn off Hide Download Button to show it.
Yes. Put the field's URL in PDF Dynamic URL. It takes priority over the PDF File setting.
Every page is rendered before the book appears, so long or heavy PDFs take longer to load. Add a placeholder image so visitors see something straight away.
PDF Flipbook is included with Phox Elements, along with 140+ other premium elements for Breakdance.