Flipbook Settings
Fully customize your flipbook with many available settings.
Global Settings
With global settings you can change settings for all flipbooks. Global settings are found in Real3D Flipbook > Settings.
Flipbook Settings
Each flipbook can override global settings with its own settings.
Table of Contents
Custom Table of content will override Table of Contents created by page titles or PDF outline embedded in PDF. You can add elements and subelements. Each element or subelement has properties 'title' and 'page'.
General
Mode
Flipbook embed mode, following modes are available:
normal
Flipbook embedded in a container div
Flipbook container height is proportional to width and maintains constant width/height ratio. This ratio can be changed with option Container responsive ratio
lightbox
Flipbook opens in a fullscreen overlay on thumbnail click
More about Lightbox settings here
fullscreen
Flipbook covers entire page
View mode
Following view modes are available:
webgl
realistic 3D page flip with lights and shadows
3d
CSS 3D flip
2d
CSS flip animation
swipe
horizontal slide animation
simple
change page instantly without animation
Initial zoom
Initial book zoom, recommended between 0.8 and 1
Zoom step
Between 1.1 and 4
Zoomed size
Override maximum zoom size which is by default equal to texture size. For example "texture size" is 2048, enable zoom beyond texture size with "zoomed texture size" : 3000
Reset zoom
Reset zoom after page flip, window resize, exit from fullscreen or toggle toc, thumbs, bookmarks, search
Double click zoom
Zoom with double click
Single page
Display one page at a time
Page flip duration
Duration of flip animation, recommended between 0.5 and 2
Deep linking
Enables to link to specific page within flipbook, for example if flipbook is at example.com, open page 2 with example.com#2
Deep linking prefix
Instead of default deeplinking hash #$page_number it can be defined custom prefix so the hash will be #$prefix$page_number. For example link to flipbook page 2:
myflipboook.com#2
link with custom prefix "book1_page"
myflipboook.com#book1_page2
Responsive view
Switching from two page layout to one page layout if flipbook width is below certain threshold
Responsive view threshold
Flipbook width threshold for responsive view feature, default 480
PDF page size
Height of rendered PDF page, in px
PDF page size (small)
Height of rendered PDF page on small screen
height of the container
if the container height will be proportional to width
PDF Text layer
Enable for text selection tool and text search, disable for faster page loading
PDF Link color
The color overlay of PDF links
PDF Link color hover
The color overlay of PDF links on hover
Front cover
If the flipbook has cover (1, 2-3, 4-5,...) or shows only inner pages (1-2, 3-4, 5-6,...)
Back cover
If the flipbook has back cover
Container responsive ratio
The ratio width/height of the flipbook container div (mode normal), recommended between 1 and 2
Show Thumbnails on start
Show thumbnails view on start
Show Table of Contents on start
Show Table of Content view on start
Search PDF on start
Show search menu on start
Close Table of Contents when page is clicked
Close Thumbnails when page is clicked
Autoplay on start
If pages will flip automatically
Autoplay interval (ms)
Automatic page flip interval
Right to left mode
Flipping from right to left (inverted)
Thumbnail size
Thumbnail height for thumbnails view
Logo image
Logo image that will be displayed inside the flipbook container
Logo link
URL that will be opened on logo click
Logo link target
If the logo link will open in new tab
Logo CSS
Custom CSS for logo
Menu CSS selector
Example '#menu' or '.navbar'. Used with mode 'fullscreen' so the flipbook will be resized correctly below the menu
Container z-index
Set z-index of flipbook container
Preloader text
Text that will be displayed below the preloader spinner
Google Analytics tracking code
Add your Google Analytics ID to track custom events from flipbook. Available events are 'lightbox open' and 'pdf download'
To find the Google Analytics ID:
Sign in to your Analytics account.
Click Admin.
Select an account from the menu in the ACCOUNT column.
Select a property from the menu in the PROPERTY column.
Under PROPERTY, click Tracking Info > Tracking Code. Your Google Analytics ID is displayed at the top of the page.
Download PDF instead of displaying flipbook if browser is IE
Force keyboard arrows for navigation
Always use keyboard arrows for flipping pages
Disable arrows for navigation if not fullscreen
Touch swipe to turn page
Right click context menu
Set to Disabled to disable right click save image
Access
Option to limit flipbook access to only WooCommerce users who bought the product or have subscription, by default everyone has full access to flipbooks
Lightbox
Lightbox flipbook displays flipbook thumbnail on the page and opens the flipbook in a fullscreen overlay when the thumbnail is clicked. There are other options to open the lightbox flipbook, like using a CSS class or using hash navigation (deep linking). Thumbnail can be hidden if the flipbook should be opened from a button or text link.
CSS class
Any element on the page containing flipbook shortcode that has this CSS class will trigger the lightbox.
Overlay background
Lightbox background CSS, for example hex color:
#999or rgb color:
rgb(128,128,128) or rgba color with transparency:
rgba(0,0,0,0.5)or image:
url("images/background.jpg")Overlay background pattern
Background image repeated
Overlay background image
Background image for the flipbook
Thumbnail container CSS
Custom CSS for the thumbnail container div
Thumbnail
Image that will be added in place of shortcode and will trigger the lightbox. Thumbnail is automatically generated from flipbook first page thumbnail or from first PDF page. To change the thumbnail size update the option Thumbnail height and click Generate Thumbnail
Thumbnail height
The height in px of the generated thumbnail image
Thumbnail CSS
Custom CSS for thumbnail (size, shadows, border, etc.)
Thumbnail info
If the thumbnail info will be displayed over the book
Thumbnail info text
If not set, the book name will be used
Thumbnail info CSS
Custom CSS for thumbnail info
Text link
Text that will be put in place of the shortcode and will trigger the lightbox
Text link CSS
Custom CSS for the text link (size, shadows, border, etc.)
Text link position
Top or bottom
Opens on start
If the lightbox opens immediately when the page loads
Opens in fullscreen
If the lightbox opening will also switch browser to fullscreen mode
Show title
Show book title
Show date
Show book date
Hide thumbnail
Do not display the thumbnail
Vertical margin
Lightbox overlay vertical margin
Horizontal margin
Lightbox overlay horizontal margin
Link
Open URL instead of opening the flipbook
Link opens in new window
Open link in new browser window
WebGL
Here you can adjust the WebGL view like lights, shadows, camera angle or page material.
Lights
Realistic lightning, disable for faster performance
Light position x
Light X position, between -500 and 500
Light position y
Light Y position, between -500 and 500
Light position z
Light Z position, between 1000 and 2000
Light intensity
Light intensity, between 0 and 1
Shadows
Realistic page shadows, disable for faster performance
Shadow Map Size
Shadow quality, 1024 or 2048 or 4096
Shadow opacity
Shadow darkness, between 0 and 1
Shadow plane distance
Distance of shadow from the page, between 10 and 20
Page hardness
Between 1 and 5, default 2
Cover hardness
Between 1 and 5, default 2
Page material roughness
Between 0 and 1, default 1
Page material metalness
Between 0 and 1, default 0
Page segments W
Number of page segments horizontally, default 6
Page segments H
Number of page polygons vertically, default 1
Page middle shadow size
Shadow in the middle of the book
Left middle shadow color
CSS color, for example #CCC
Right middle shadow color
CSS color, for example #999
Antialiasing
Disable for faster performance
Camera pan angle
Between -10 and 10
Camera tilt angle
Between -30 and 0
Rotate camera on mouse click & drag
Camera pan max
Max pan angle for mouse drag rotate, between 0 and 20
Camera pan min
Min pan angle for mouse drag rotate, between -20 and 0
Camera tilt max
Max tilt angle for mouse drag rotate, between -60 and 0
Camera tilt min
Min tilt angle for mouse drag rotate, between -60 and 0
Rotate camera on mouse move
Camera pan max
Max pan angle for mouse move rotate, between 0 and 5
Camera pan min
Min pan angle for mouse move rotate, between -5 and 0
Camera tilt max
Max tilt angle for mouse move rotate, between -10 and 0
Camera tilt min
Min tilt angle for mouse move rotate, between -10 and 0
With UI settings you can change background and menu colors, layout and styles.
UI
Here you can customize the UI by changing layout, colors, icon set.
Layout
Choose between 4 premade UI layouts.
Skin
Choose between light, dark or gradient skins.
Icons
Choose between Font-awesome or Material icon sets.
Advanced UI settings
UI layout, colors, sizes, margins, backgrounds
Skin
Color
Primary color - icon color, text color
Background color
Secondary color - UI background color
Flipbook background
Color of flipbook container. Can be color, pattern, image or transparent.
Top menu
Background color
Shadow
Margin
Padding
Over book
Transparent
Floating
Bottom menu
Background color
Shadow
Margin
Padding
Over book
Transparent
Floating
Buttons
Buttons on fixed menu
Color
Background color
Radius
Margin
Size
Padding vertical
Padding horizontal
Box shadow
Text shadow
Border
Floating Buttons
Buttons on transparent menu
Color
Background color
Hover holor
Hover background color
Size
Radius
Border
Side navigation buttons
Arrows for turning pages that are on the left and right side of the book
Enabled
If not enabled, navigation arrows will show in the menu
Color
Background color
Radius
Margin
Size
Padding vertical
Padding horizontal
Box shadow
Text shadow
Border
Menu buttons
Here you can customize the toolbar by enabling or disabling each button, changing button position (top or bottom toolbar), icon and title.
Translate
Here you can replace default strings with your translation.
Mobile
Adjust flipbook settings for mobile
Flipbook can have different settings for mobile, which can be configured in
Edit Flipbook > Mobile
Flipbook size
Flipbook size can be changed with setting Mobile > Container responsive ratio which is the width/height ratio of the flipbook container. For landscape container, this setting needs to be more than 1, for example 1.5 or 2. For portrait mode, this setting needs to be less than 1, for example 0.5 or 0.7.
Overrides
Convert PDF links
Automatically open any PDF link as lightbox flipbook. Enabled by default.
Convert only PDF links with CSS class
If Convert PDF links is enabled, setting this option will convert only PDF links with this CSS class. Use this if you want to open only specific PDF links as flipbooks.
Convert only PDF links without CSS class
If Convert PDF links is enabled, setting this option will not convert PDF links that have this CSS class. Use this to force the default behavior for specific links.
Last updated
Was this helpful?