How to open a 3D flipbook using image?(Pro)- DearFlip WordPress

We are asked often how to create design similar to what we have on our 3D flipbook WordPress plugin landing page. In that example, when a user clicks on the image, flipbook opens. Plus, the image itself looks like an flipbook, in fact it’s a screen capture of the flipbook.

Click the image above to open a flipbook!

Contents hide

1 How to create a custom popup?

2 How to add a play icon? (version below 2.0)

How to create a custom popup?

Such flipbook opening image is created using the custom type popup. It takes any HTML inside the shortcode.

custom flipbook — Notice how the image is wrapped inside shortcode tags`[dflip]` and `[/dflip]`

How to add a play icon? (version below 2.0)

The icon is added using custom CSS.

            ._df_custom.ti-control-play,.play-button.ti-control-play {
                margin-bottom: 0px;
                position: relative;
            }

            ._df_custom.ti-control-play:before,.play-button.ti-control-play:before {
                top: 50%;
                top: 50%;
                position: absolute;
                left: 50%;
                font-size: 40px;
                background: #ffdd11;
                border-radius: 50%;
                padding: 13px 10px 11px 16px;
                box-shadow: 0px 1px 5px #777;
                margin-top: -30px;
                margin-left: -30px;
                display: block;
                color: white;
            }