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!
How to create a custom popup?
Such flipbook opening image is created using the custom type popup. It takes any HTML inside the shortcode.

[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; }
All DearFlip comments and discussion have been moved to
https://github.com/dearhive/dearflip-js-flipbook/discussions