Healthcare Landing Page

This engaging and resourceful landing page template breaks down large content into different visual displays. In the hero section of the Healthcare Landing Page, you will notice micro-animations, information displayed in a flow, and a Lead Gen capturing opportunity through the form. As visitors scroll through the experience, they will notice additional resources for speciality health care, odometer counters, reveals that change color on hover, flow navigation with icons displaying additional content and a google imported map. Visitors are encouraged to navigate this experience and discover different ways content can be displayed.

COMPLEXITY

Medium

TYPE

Landing Page

USE CASE

Lead Generation

Features available

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

Custom Code

Custom Code will allow you to add custom interactivity via Javascript or CSS to your creative. A use case for this would be this odometer script that is added to the page and text element in order to have it act as number counting up.

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.

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.

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.

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 change the placement of the Flow progress bar either left, right, top or bottom select the Flow container and navigate to the Micro-Themes. Under the Micro-Themes dropdown select Flow, under the second dropdown select either Navigation Alignment: Left, Right, Top, or Bottom.
To change the Flow style from number to dots or a progress bar in light or dark select the Flow container and navigate to the Micro-Themes. Under the Micro-Themes dropdown select Flow, under the second dropdown select from the different Navigation Styles available.
To change the direction of the flowsteps sliding in and out select the Flow container and navigate to the Micro-Themes. Under the Micro-Themes dropdown select Flow, under the second dropdown select from the All Step options.
To change the odometer counter to a different value, select any of the current odometer Text containers. Open the Text Editor.
On the open left of the Text Editor select Standard Text. Update the data-prev and the data-val value. Data-prev refers to the starting value and the data-val refers to the end value. If you change the Data-prev value to a value other than 0, update the display value as well.
If you want to display next before the counter add the text before the <span>. If you want to display text after the odometer add the text after the </span>.

Select the last flow step within the Flow. Hold the alt key on Windows or options on Mac and drag the flow step until the Flow highlights green. The bold green bottom border on the flow indicates that it will duplicate into the Flow. You can alternatively select the flow step, press Ctrl+C or Command+C then navigate to the flow and press Ctrl+V or Command+V.

Select the newly added flow step. Navigate to the right hand side panel. In the top right corner there is an anchor symbol. Add an anchor. An anchor allows users to be sent to a specific point on the page when a Scroll to behavior is added targeting the anchor.

Follow Step 1 and duplicate the row with the selected state adding a new row to the column.

Adjust the layout for the new row. Remove duplicated containers that aren't needed, change copy, and update the image icon. Note that you will want to adjust the image size to match the rest of the navigation icons.
Select the new flow step navigation container within the column. Navigate to the Behaviors panel, update the Scroll To anchor point in the dropdown selecting the name of the new flow. Don’t forget to update the tag as well.
The new flow step is now complete. Now navigate to all previous flow steps and update the navigation adding the new flow step navigation following Steps 3 & 4. Use the Micro-Themes to redesign the style of unselected state to match all other unselected navigations. 

Start by adding a Row element into the Responsive Grid within the form.

If only one new form input is being added then you will probably want to remove two of the default columns that come with a new row, and adjust the row settings so that the column spans the entire width of the row. If there are two new form inputs then remove one of the default columns and adjust the row settings. Alternatively you can hover each end of the column and drag left or right to change the width.

Using the interactive Form elements, drag the desired input type (slider, text input, dropdown etc.) into the new column.

Remove the label text. Select the input within the new Form Field and navigate to the Variable panel. Update the input type (text, email, phone number, etc.), set to required if necessary, add a data field, and placeholder text.

Select the element on the page where you would like to apply or change the animation. Navigate to the Animation panel, select the trigger (immediate, hover, scroll always, etc.) and then select the type of animation.

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.