Image-focused eBook

Showcase your six-chapter eBook with exciting images, enticing the user to jump right into their desired topic and navigate through a diverse range of interactive components. This template includes several interactive components such as flows, turning a dense content into an fun exploration experience. Users are encouraged to complete a quiz gathering information of their favorite choice.

COMPLEXITY

Medium

TYPE

eBook

USE CASE

Education

Features available

Here are the major features, abilities, and interactive elements used in this template.

Flow

Flow will allow you to build step-based interactive elements, such as Tabs, Accordions, and other elements, with great customizability. Use cases and examples of it's power are the abiltiy to create a carousel of images all the way to a one page assessment that presents one question at a time.

Reveal

Reveal will allow you to create two-state interactive content. A use case for this would be an information tooltip, where in one state an information icon is seen but when hovered or clicked on, a second state is shown displaying the tooltip text.

Lightbox

Lightbox will allow you to create pop-up windows on your page via click or on page load. A use case for this would a video lightbox displaying a video in a pop-up window in the center of the screen when a button or link is clicked on to play the video.

How-to use

Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.
To update the content within your Flow, begin by selecting it on the canvas.
Within the Flow, locate the first Flow Step at the top. Within this Flow Step is a Container with two Containers, one with three button-like elements and another with text. You can edit the contents within the containers, add content, or remove all of the content from the Flow Step.

You can add and change the style of navigation, with the Flow selected, on the right side menu under Variables, the option Navigation Enabled must be active.


Scrolling down, under Micro-themes, select Flow and choose the navigation style and position.

There are currently three steps to this Flow, and the button-like elements have the Behavior, Move to Step to each one of them, they are “First”, “Next” and “Last”.

If you wish to add a Flow Step you’ll need to add a Flow Step located under the Interactions tab on the right menu.


Specifically with this feature, if there’s a need of using more than three Flow Steps you’ll need to change the navigation from Behaviors, Move to Step to using Anchors.

To change or remove a Lightbox, begin by selecting the element on the Canvas.

The Lightbox is set up to show images from each chapter the quiz was taken, e.g. Quiz Chapter 1 = Lightbox with images for Chapter 1. To be able to that Rules and Show & Hide Conditions were set up.


Under the Variables menu, you’ll be able to see the URL it is opening in the Lightbox, also the Rules applied when you open the Content tab.

To edit the content of what is shown in the Lightbox, open the page Thank You on the far right menu, under Creative.
Selecting the Responsive Grid on the Canvas. You'll see a purple dot on Show & Hide in the Styles menu. It’ll show you the condition on which it I’ll be shown, matching the Rule applied to the Lightbox.
Within the Responsive Grid, you can edit the contents, add and/or remove some of the content.

To change or remove a Flow, begin by selecting the element on the Canvas.

You can add and change the style of navigation, on the right side menu under Variables, the option Navigation Enabled must be active.


Scrolling down, under Micro-themes, select Flow and choose the navigation style and position.

If you wish to add a Flow Step you’ll need to add a Flow Step located under the Interactions tab on the right menu.

To change or remove a Flow, begin by selecting the element on the Canvas.

You can add and change the style of navigation, on the right side menu under Variables, the option Navigation Enabled must be active.


Scrolling down, under Micro-themes, select Flow and choose the navigation style and position.

There are currently three steps to this Flow, and the button-like elements have the Behavior, Move to Step to each one of them, they are “First”, “Next” and “Last”.

If you wish to add a Flow Step you’ll need to add a Flow Step located under the Interactions tab on the right menu.
To update the navigation, with the Button selected, on the Behavior menu,  In Flow select the option Move to Step and the direction desired.

To change or remove a Reveal, begin by selecting the element on the Canvas.

A Reveal is made up with two important elements: a Reveal Trigger and a Reveal Container. A Reveal Trigger is as the name suggests, what triggers the revealed content, the first first shown. A Reveal Container is what lies after.

With the Reveal selected, you’ll be able to edit its variables, under the Edit tab, Variables section. 


You can change the type, when and how it’ll interact with other Reveal components and on mobile devices. Also the Position of how Reveal Container will be shown in relation to the Reveal Trigger. Lastly you’ll be able to tag the Reveal.

Content structure

Here is the content structure’s template to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.
Preview Content Writing TemplateOpens in a new window.

Best practices

Be sure to tag everything that is "taggable" so that you are able to review everything at a later time in your reports.

Reveals
Flows
Flowsteps
Links
Tabs
Accordions
Lightboxes
Rotators
Sliders

Your conversion point is the most important measurement in determining whether your creative is converting visitors. We recommend having one conversion point per creative. Here is the element and methods in which to set your conversions:

Links
Behaviors
Actions

Before going live with your experience, you want to run a final proofing process. This will review the experience as a whole, with any final revisions necessary. Here is the most important items to be reviewed before GoLive:

  • Review of any integrations
  • Review of conversion point
  • Review of tagging
  • External links are working correctly (opening in a new window)
  • Mark respondents as always new if used for conference or live event
  • Uncheck the robot meta directives (no archive, no follow, no index)
  • Remove path description (if applicable)
  • Make sure traffic source has been added to social share — og URL, twitter (create bit.ly), email share
  • Once live, debug on Facebook (if applicable)

Related templates

If you like this template, you might want to check out these other similar models.

Have a question?

Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions, so we can make sure to have this page constantly up to date.