Find out how to Upload E-book Previews to Divi’s Writer Format Pack

Each week, we give you a brand new and unfastened Divi structure pack which you’ll use on your subsequent venture. At the side of each and every structure pack, we additionally proportion a use case that’ll mean you can take your web page to the following degree.

This week, as a part of our ongoing Divi design initiative, we’re going to turn you the way to upload e book previews for your web page the usage of Divi’s Author Layout Pack and the unfastened 3D Flipbook plugin. Including previews for your web page is helping guests of their resolution making. They may be able to get a style of your product and be satisfied of the content material that you simply’re sharing. To proportion a e book preview, you’re going to desire a PDF document containing the choice of pages of your (e)e book you might be keen to proportion totally free.

Sneak Peek

Section 1: Obtain & Set up the Unfastened Interactive three-D FlipBook Plugin

Step 1: Obtain the Plugin

To create the e book preview, we’ll want to obtain the unfastened Interactive three-D FlipBook plugin via going to the next page and clicking at the obtain button.

Step 2: Add & Set up the Plugin

Whenever you’ve downloaded the plugin, and positioned it for your pc, cross forward and add it for your plugins via going to Plugins > Upload New. After importing, remember to turn on the plugin as neatly.

Section 2: Add Your E-book Preview PDF Report

Step 1: Upload New three-D Flipbook

The very first thing you’ll want to do, after importing and putting in the three-D Flipbook plugin, is including your e book preview PDF information. You’ll be able to upload as much as as many e book previews as you want. Cross to three-D Flipbook> All Books > Upload New.

Step 2: Add Your E-book Preview PDF Report

Add each and every PDF document as a separate e book. This comprises giving it a name as neatly.

Section 3: Generate Shortcode #1: Lightbox Activation Hyperlink

Step 1: Cross to Generate Shortcode

We’re going to turn you two tactics on the way to come with those e book previews. The primary one is on click on and the second will seem at the web page itself. We’ll get started off with the e book preview on click on. Cross to three-D Flipbook > Shortcode Generator.

Step 2: Select PDF Report

Throughout the three-D Turn E-book tab, choose the PDF document you wish to have to make use of.

Step 3: Alternate View Mode

Then, transfer over to the View mode tab and choose ‘Lightbox activation hyperlink’.

Step 4: Replica Shortcode

The shortcode will robotically replace consistent with the adjustments you are making. Cross forward and duplicate this shortcode. We’ll want it within the subsequent a part of this instructional.

Section 4: Upload Lightbox Activation Hyperlink to Hero Segment of House Web page

Step 1: Cross to Homepage & Allow Visible Builder

It’s time so as to add the e book preview on click on for your homepage! Cross forward and open the web page with the Visible Builder.

Step 2: Take away E-book Symbol Module in First Column of Hero Segment

Then, take away the Symbol Module within the first column of the hero phase. As a result of the way in which the shortcode purposes, we’re going to make use of a Code Module as a substitute.

Step 3: Upload Code Module As a substitute

Cross forward and upload a brand new Code Module to the primary column.

Step 4: Upload Your Shortcode

Subsequent, upload the shortcode you’ve created to the content material field of this Code Module.

Step 5: Upload Symbol HTML Between Shortcode

And proper in the course of the shortcode, you’ve the gap so as to add some further HTML code. We’ll use this HTML code so as to add a picture. Replica the next HTML code and change the URL with your individual Symbol URL:

Step 6: Alternate Sizing of Code Module

In fact, we would like this symbol to be responsive. That’s why we’ll trade the Width for pill and speak to to ‘52%’ within the Sizing subcategory. Cross forward and click on at the symbol after saving and exiting the Visible Builder to look the outcome!