Easy Infographic

This Easy Infographic allows users to scroll through six sections about a specific topic with a downloadable asset. The top navigation includes a CTA that will scroll the user to the bottom of the page where they can fill out a form which allows them to download an asset. Another CTA located in the hero section will scroll the user to the first section of the page to promote page fluidity. The user will encounter different content interactivity within each section and will be asked to complete a simple form, at the bottom, allowing the user to download an asset. 

COMPLEXITY

Low

TYPE

Infographic

USE CASE

Engagement

Features

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

Anchor Link

Anchor will allow you to link a section or page element to a specfic link or button. A use case for this would be to place an anchor on an about section that links to the About link in the page's navigation.

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.

Accordion

Accordion will allow you to organize content vertically into separate sections that expand and contract when clicked on. A use case for this would be to create a FAQ of product or service related questions, where each accordion label would have it's own questions and the answer within the accordion section.

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.

Animation

Animation will allow you to animate elements via microthemes. A use case for this would be to have a section fade up and in to a page via scroll.

Form

Form will allow you to build simple to complex forms that contain different types of inputs and toggles, and can be combined with rules to create logic based results. Use cases for a Form are quizzes, assessments, calcuators, and traditional forms.

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 setup the Scroll to Sections feature, you will first need to select the section you want the CTA to scroll to. Here we are selecting the form located at the bottom of the page. 

Select the Anchor icon under the Edit panel and assign an anchor to a specific section where the button will scroll to. (Ei. Section 2 - Topic). 

Click on the CTA to open the Edit Actions window. Then under the Behavior settings, select the anchor name and assign a unique tag. 

To adjust the height of the bar, select the Container to open up the Edit settings. Then click on the Layout tab to expand the layout settings.
Adjust the height or width of the Container under the Width and Height tab.

Select the Reveal element to display the Edit settings. You can customize the reveal settings in the Variables tab. 

You can customize the reveal settings in the Variables tab. 

Under the Microtheme tab, you can add different reveal settings by selecting Reveal. 

Choose one from the list of transition or overlay options. 

To update the content within your Accordion, begin by selecting it on the canvas.

As a side note you are able to edit the Settings for the Accordion itself by always having the first section expanded, tagging each accordion section when it is clicked on (which is done by default), and closing an accordion section when another is expanded.

Select an Accordion Section by clicking on it on the Canvas or by selecting in the Variables menu. Here in the Variables section you are able to update the Label for the specific Accordion Section, which is the front face title, and you are also able to provide it with a Tag.

With the Accordion Section expanded on the Canvas, you can double-click on and edit the Text element, or add or remove content from within the Section.

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 one Row and one Column Responsive Grid. You can edit the contents within the columns, add content, or remove all of the content from the Flow Step.

Assign actions to elements that will be used to navigate between Flow steps by visiting the Behaviors settings. Bring the user to the next step by expanding the “Behaviors in flow” tab.

You can also change the style of the navigation by choosing the Flow microtheme.
After choosing the Flow Microtheme, another dropdown will appear where you can choose from a list of sub-category options.

To change or remove an Animation, begin by selecting the element on the Canvas.

To remove the Animation, click on the blue X to the right of the active Microtheme.

 

To change the Animation, click on the Trigger dropdown above the active Animation and select a Trigger.

From the second dropdown that appears, select an Animation from the available options.

To change a field within your Form, begin by selecting the Form on the canvas.

Select a field from within the form.

Update the input's Data Field within the Variables settings by clicking on it and then choosing a new Data Field from within the pop-up window.

To change the Submit Button's Behaviors begin by selecting it on the Canvas.

Click on the Behaviors from within the Variables settings to Validate and Submit.
 

To remove the Behavior and add an Action, click on the trash can icon and then click on the + Actions button within the Variables settings.

Click on the Actions from within the Variables settings to assign the Go to Page location and select the page the button should link to.
 

To remove the Action, click on the trash can icon.

Content Structure

Here is the content structure’s template and quick video tour 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
  • Review of any/all integrations
  • Review of conversion point
  • Review of tagging
  • Mark respondents as always new if used for conference/live event
  • Uncheck No Archive, No Follow, No Index (if applicable)
  • 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)
  • Close testing traffic source and archive experience in Creative Dev campaign

Related Template

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

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.