# Add Flipbook to Post or Page

* Block Editor (Gutenberg)
* Classic editor
* Elementor
* WPBakery Page Builder

## Block Editor (Gutenberg)

Embed flipbook into post or page using the Block Editor (Gutenberg)

1. Create new page with **Pages** > **Add New Page** or edit existing page.
2. Click on the `+` to add **Rael 3D Flipbook** block.
3. Select flipbook from the dropdown.
4. Click **Publish** or **Update** button.
5. Click **View page** link to see the flipbook.

## Classic editor

Embed flipbook into post or page using the WordPress Classic editor

1. Create new page with **Pages** > **Add New Page** or edit existing page.
2. Click **Rael 3D Flipbook** button above the editor and select the flipbook.
3. Select flipbook or pdf and click **Insert flipbook** button.
4. Click **Publish** or **Update** button.
5. Click **View page** link to see the flipbook.

<figure><img src="https://1488491450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQXjrk5pE8HnxE3nIqS%2Fuploads%2FcAUVGzH59TneYQPzXzf4%2Fimage.png?alt=media&#x26;token=8ba2ff9e-43ea-4c98-bd8b-d83025028095" alt=""><figcaption></figcaption></figure>

### Shortcode

Flipbook can be embedded in a post or page via shortcode.&#x20;

Edit flipbook and copy the shortcode, for example

```
[real3dflipbook id="1"]
```

Paste the shortcode into a post or page

### Shortcode params

### id

embed flipbook by ID

```
[real3dflipbook id="1"]
```

### name

embed flipbook by its name instead of ID

```
[real3dflipbook name="Book 1"]
```

### pdf

pass the PDF URL to flipbook, this can be used to show different PDF-s using the same flipbook

```
[real3dflipbook id="1" pdf="http://...book1.pdf"]

[real3dflipbook id="1" pdf="http://...book2.pdf"]
```

### mode

set flipbook mode via shortcode param, available are **normal**, **lightbox**, **fullscreen**

```
[real3dflipbook id="1" mode="lightbox"]
```

### viewmode

set flipbook view mode, available are **webgl**, **3d**, **2d**, **swipe**, **simple**

```
[real3dflipbook id="1" thumb="" class="book1"]
```

### thumb

set flipbook thumbnail image

```
[real3dflipbook id="1" thumb="http://..."]
```

or hide the thumbnail

```
[real3dflipbook id="1" thumb=""]
```

### class

set CSS class that will open the lightbox flipbook, any element on the page with this CSS class will open the flipbook, this is used to open flipbook with a button or image or text&#x20;

## Elementor

Embed flipbook using the the Shortcode element.

For easier use in Elementor, see [**Real3D Flipbook Elementor Addon**](https://real3dflipbook.gitbook.io/wp/broken-reference)&#x20;

## WP Bakery

Embed flipbook using the Shortcode block.

For easier use in WPBakery Page Builder, see [**Real3D Flipbook WPBakery Addon**](https://real3dflipbook.gitbook.io/wp/broken-reference)