Powered with a modern and sleek design, the Plan Finder quickstart  is built to help you find the best fitness plan that fits your needs. Minimalism and bold colors are the biggest players, featuring an animated hero background, stunning images and a unique checklist accordion to accommodate all your information.

  • Type: Solution Finder
  • Complexity: Medium
  • Use case: Sales Enablement

Features available

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

  • Accordion Checklist
  • Anchor
  • Flow
  • Full Page Content
  • Hero Content
  • Hero Video Background
  • Quiz Questions

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.

>> Framing screenshots

Accordion Checklist

Step 1: Place an Accordion element into Column 1 Step 3 container. Add accordion headline titles for each section under the Variables panel and add a tag.

Step 2: Select Section 1 of the accordion. Place a container into Section 1, and add bottom margin 1em in the Layout panel.

Step 3: Place text element into Step 2 container. In the text editor, display the copy in bullet format. This will ensure that bullet styling can be edited using the Micro-Themes. Add 1em bottom margin in the Layout panel.

Step 4: Add another container into Step 2 container. Under Animations set to Immediate “Pull Left”, set a background color using the Micro-Themes, and 1px height under Layout panel.

Step 5: Duplicate Step 2 container into the accordion section, and change copy based on the amount of bullet points to be included.

Anchor

Step 1: Decide where users should be sent upon clicking on a specific element. With the element selected, navigate to the top right hand side of the Edit panel and select the anchor. Give the anchor a unique name.

Step 2: Select the trigger element that will send the user to destination in Step 1. Navigate to Behaviors, select Scroll to “Anchor Name” and assign a tag.

Flow

Step 1: Place Flow element on the canvas. In the Micro-Themes under Flow, set “All steps: Slide Vertically” and a background color.

Step 2: Navigate to the flow step level within the flow. In the Micro-Themes under Regions select “Content”. Scroll down to the Layout panel and set top padding 6em. *Don’t forget to also assign a tag to collect behavioral data from users.

Step 3: By default Flows appear with 3 Flow steps. To add more drag in an Interactive Flow Step element placing it inside the Flow.

Full Page Content

Step 1: Place a container on the canvas. Give it a background color.

Step 2: Place a Responsive Grid within Step 1 container. In the Micro-Themes set the Grid Layout to “Nested Responsive Grid”. Remove the third column and adjust Column 1 to be six columns wide, and Column 2 to be six column wide.

Step 3: Place a container in Column 1. In the Micro-Themes set the alignment to “Left Align”, Pod to “Transparent”, and Responsive Setting (XS) to “XS Padding 1em”. In the Layout panel, set the left, top, and right padding to 6em.

Step 4: Place all necessary copy text in Step 3 container. Make font-size and color adjustments using the dropdowns in the Micro-Themes. Use the Layout panel to add margin and padding.

Step 5: With Column 2 selected, add a background image, and check “Responsive Background Image”. Use the Show & Hide panel to hide in the SM and XS viewport.

Step 6: With Column 2 selected, adjust the height to 50em, less or more depending on the amount of copy in Column 1.

Hero Content

Step 1: Place a Responsive Grid inside the container of Hero Video Background Step 2. Adjust the row to have two columns. Column 1 is seven columns wide, and column 2 is 5 column wide.

Step 2: Place a container Column 1. In the Micro-Themes set Pod to “Transparent” and Responsive Setting (XS) to “XS Padding 1em”. In The Borders & Corners panel select a color, set the thickness to 1px and in the dropdown select “Solid”. Scroll down to the Layout panel, set the bottom padding to 4em.

Step 3: Place text element into Step 2 container. Add copy, and use the Micro-Themes panel to increase the font-size and change text color.

Step 4: Add an additional Grid Row to the Responsive Grid in Step 1. This row should be below content in Step 2 and 3. Column 1 is three columns wide, column 2 is seven columns wide, and column 3 is two columns wide.

Step 5: Place container into Column 1. Set Animation to Immediate “Fade In Down” and Looping Infinite. In The Micro-Themes, set alignment to “ Center Align” and styling to “Circle/Oval”. In the Show & Hide, check off “Hide in XS”. Add color and 0.5px solid border in the Borders & Corners. In the Layout section, set top margin to 2em, and width and height to 40px.

Step 6: with Column 2 selected, in the Micro-Themes set Responsive Settings (XS) to “XS No Margins” and “XS Padding 1em”. In the Layout panel set the top margin to -3em.

Step 7: Place a container in Column 2. In the Micro-Themes select a pod, ideally one with a colored background. In the Layout panel, set the bottom margin to 4px, and padding 1em all around.

Hero Video Background

Step 1: Place a container on the canvas. Navigate to the Background panel. Upload the video as a background image. *The video file should be formatted as a gif.

Step 2: Place a container inside the step 1 container. In the Micro-Themes, set the Background to “Black Transparent Background” and Regions to “Content”. In the Layout panel, set the top and bottom padding to 8em. *Padding can be adjusted if content copy exceeds word limit in the Content Structure document.

Quiz Questions

Step 1: Place a Responsive Grid within the Flow Step. Remove the default two columns, and change the row settings so that the single column now spans the entire row.

Step 2: Place container into column. In the Micro-Themes select pod “Transparent”.

Step 3: Place Form element in Step 2 container. Remove the submit container including the button.

Step 4: Place a Choice Group element into the form. Adjust the Variables and select the desired data field for this specific question. In the Micro-Themes under Choice Group select “Style: None”. 

Step 5: Place a Responsive Grid within the Choice Group element. In the Micro-Themes under Grid Layout select “Nested Responsive Grid”. Remove the third column and adjust the row setting to that Column 1 and 2 are six column wide. Add an additional row into the responsive grid.

Step 6: Place a Choice element in the column. Adjust the Variables and change the Mode to “Expanded”. In the Behaviors panel, set Behavior In Flow to “Move to step Next” And Behaviors in Form “Validate and Submit”. In The Layout panel set the bottom margin to 1em.

Step 7: For the last question choices in the Solution Finder, don’t set the Behavior In Flow to “Move to step Next”. Instead, in the Variables panel, under Form Submit Action set the action to go to the page that users should see after the assessment is complete.

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.

Share this: