This Statistical Infographic is an engaging display of information using many interactive features to break down content into simple visual displays that make key points easy to understand. Visitors are welcomed with moving text animation, full page hero background, and an anchor CTA leading to additional content below. Navigating through the experience, visitors will notice animated content and figures, as well as reveals when hovering or clicking through key figures that display additional facts. This infographic uses bold colors, imagery, icons, and stats to encourage visitors to learn more about the experience.
- Type: Infographic
- Complexity: Medium
- Use case: Education
Here are the major features, abilities, and interactive elements used in this template.
- Text and icon inline block display
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.
Step 1: Select a section where you want the CTA to scroll to and add an anchor.
Step 2: Assign the anchor with a unique name (Ei. Section 1).
Step 3: Select the button and in the behavior panel, select the anchor and assign a unique tag.
Step 1: To add or adjust the animation on an element, first select the element the animation is applied to or you would like to apply too. Navigate to the Animations panel, select a trigger state, then select the type of animation to apply.
Step 1: Place an interactive Flow Step element in the existing flow.
Step 2: Navigate to the previous flow step, use the arrow keys on your keyboard to go one level down to the element that is nested within the flow step. Select the element, copy it, and paste it in the new flow step that has been added from Step 1.
Step 3: Copy an unselected reveal state, and place it within the column level. To do this select the reveal, hold the option key down on your keyboard, with your mouse click and drag the reveal until the column level is highlighted in green and says “Copy reveal into column”.
Step 4: Drag the reveal to match the order of the navigation and adjust the content within the reveal. The stand alone container is the selected state when the user is on the current flowstep they do not see the reveal to indicate that is the current step they are on. Update the stand alone container to show the copy for the new flowstep.
Step 5: Navigate to the new flowstep, add an anchor and assign the flow step a tag.
Step 6: Duplicate a reveal in all other flow steps and adjust the icon, and copy to match the last flow step. Don’t forget to update both the reveal trigger and the reveal.
Step 7: Select the new reveal added, navigate to the Behaviors panel, select Scroll To, choose the anchor name of the new flow step from the drop down and assign a tag. Repeat this on the new reveal added in each flow step.
Content Writing Template
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.
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 to [email protected], so we can make sure to have this article constantly up to date.