The Microsite with 3 Calculators is an interactive experience that has 3 individual calculators that vary in input field such as text input, sliders, and dropdowns. Aside from having 3 calculators, the experience also has a series of mini quizzes on the landing page and result pages using choices. Not to forget, this experience also features micro-animations and reveals that change color on hover. This highly interactive experience allows clients to create multiple experiences, using the individual calculators while capturing the users on a single starting point. The Microsite with 3 Calculators is both an logic oriented and informative experience.
- Type: Microsite
- Complexity: Expert
- Use case: Brand Awareness
Features available
Here are the major features, abilities, and interactive elements used in this template.
- Animation
- Flow
- Navigation reveal
- Reveal
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.
Animation
Step 1: Select the element you would like to apply to. Navigate to the +Animations panel, in the first dropdown select the trigger (immediate, scroll into view, etc.), then use the second dropdown to select the type of animation.
Step 2: To change or remove the animation, select the element that current has an animation applied to it. Navigate to the +Animations panel, and click the “x” icon next to the animation type.
Flow
Step 1: Flow anchoring is used to send a user from one point to another when an element is selected. In this experience anchoring is used on the result page quizzes. If you want to add an additional choice to the quiz with a new result as well, add an additional Flow Step to the Quiz Flow.
Step 2: Duplicate the result container from the previous result Flow Step. Adjust the copy for the new choice. Also add top and bottom padding to the Flow Step to reflect the previous ones.
Step 3: Select the new Flow Step and navigate to the anchor on the Flow Step panel. Add a unique anchor name. Don’t forget to also add a tag for behavioral tracking.
Step 4: There are a few options on how the choice can be added.
1. If there isn’t enough space to have all the choices in a single row, consider selecting the row within the Choice Group, and duplicate it into the Responsive grid within the Choice Group. Adjust the new row accordingly by removing the additional choices or updating duplicated choices to new ones.
2. You can also add an additional column to the existing row and duplicate just the choice to the new column. Don’t forget to adjust the row settings and column widths accordingly after.
Step 5: Select the new choice. Update the Data Value to reflect the new choice, then navigate to the Behaviors panel. With the Behaviors panel open, expand the Scroll to, in the dropdown set the anchor as the new result Flow Step added Step 1. Set the Behaviors in Form to Validate and Submit. Don’t forget to also add a tag.
Navigation reveal (add additional links)
Step 1: To add an additional link to the navigation, navigate to the Basics components and select a link element. Drag the element into the column that contains the other links.
Reveal
Step 1: Up replace the icon in the reveals, select the image within the centering table and double click, use the image editor to upload or re-select a different image.
Step 2: To adjust the size of the image icon, select the image then navigate to the Layout panel. Increase the size under the Width and Height. The greater the pixel value the larger the image will become.
Step 3: To make the reveal container bigger or smaller select the Reveal Trigger container and navigate to the Layout panel. Under Width and Height adjust the height value. The greater the value, the longer the reveal will be. *If the height or padding is adjusted for the Reveal Trigger, don’t forget to make the same change on the Reveal container.
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.
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 to [email protected], so we can make sure to have this article constantly up to date.