---
description: Fully customize your flipbook with many available settings.
---

# Flipbook 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'.

<figure><img src="https://1488491450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQXjrk5pE8HnxE3nIqS%2Fuploads%2FhMSduzi3TVFAZI9NSd4Z%2Fimage.png?alt=media&#x26;token=f12f4162-7632-41cc-8435-cc84ab05bb6a" alt=""><figcaption><p>Custom Table of Contents</p></figcaption></figure>



## _General_

### Mode

Flipbook embed mode, following modes are available:

#### **normal**

Flipbook embedded in a container div

<figure><img src="https://1488491450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQXjrk5pE8HnxE3nIqS%2Fuploads%2FgqTHmek1BQJPvpwI82Zv%2Fimage.png?alt=media&#x26;token=0935ef9d-fc18-4a4c-930d-28584166c618" alt=""><figcaption></figcaption></figure>

Flipbook container height is proportional to width and maintains constant width/height ratio. This ratio can be changed with option [**Container responsive ratio**](#container-responsive-ratio)

#### **lightbox**

Flipbook opens in a fullscreen overlay on thumbnail click

<figure><img src="https://1488491450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQXjrk5pE8HnxE3nIqS%2Fuploads%2F9rYhzsCVTc1vP8VJ4DdN%2Fimage.png?alt=media&#x26;token=a3280391-d98b-45e2-8c25-3318f2ca186d" alt=""><figcaption></figcaption></figure>

More about Lightbox settings [**here**](broken-reference)&#x20;

#### **fullscreen**

Flipbook covers entire page

<figure><img src="https://1488491450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQXjrk5pE8HnxE3nIqS%2Fuploads%2FxBw4W3zIcAx1qmnUztmQ%2Fimage.png?alt=media&#x26;token=649d9a9a-eba8-4a20-a33d-f256986460ba" alt=""><figcaption></figcaption></figure>

### 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

&#x20;Display one page at a time

### Page flip duration &#x20;

&#x20;Duration of flip animation, recommended between 0.5 and 2

### Deep linking&#x20;

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:

&#x20;myflipboook.com#2

&#x20;link with custom prefix "book1\_page"

&#x20;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

&#x20;Flipbook width threshold for responsive view feature, default 480

### PDF page size&#x20;

Height of rendered PDF page, in px

### PDF page size (small)

Height of rendered PDF page on small screen

&#x20;height of the container

&#x20;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**&#x20;

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**

&#x20;Flipping from right to left (inverted)

### **Thumbnail size**

&#x20;Thumbnail height for thumbnails view

### **Logo image**

&#x20;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'

&#x20;To find the Google Analytics ID:

1. &#x20;Sign in to [your Analytics account](https://analytics.google.com/).
2. &#x20;Click [Admin](https://support.google.com/analytics/answer/6132368).
3. &#x20;Select an account from the menu in the ACCOUNT column.
4. &#x20;Select a property from the menu in the PROPERTY column.
5. &#x20;Under PROPERTY, click **Tracking Info** > **Tracking Code**. Your [Google Analytics ID](https://support.google.com/analytics/answer/7372977) 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:

```
#999
```

or rgb color:

```
rgb(128,128,128) 
```

or rgba color with transparency:

```
rgba(0,0,0,0.5)
```

&#x20;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.)&#x20;

### 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**

&#x20;Custom CSS for the text link (size, shadows, border, etc.)&#x20;

### Text link position

Top or bottom

### **Opens on start**&#x20;

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&#x20;

### Over book

### Transparent

### Floating

## Bottom menu

### Background color

### Shadow

### Margin

### Padding&#x20;

### 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&#x20;

`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.
