The Saas Landing Page is a low complexity, standard experience that focuses on lead generation. This template includes different interactive elements such as flows, reveals and tool tips. With engaging animations and unique hover effects, viewers will stay engaged with the content every step of the way. At the end of the experience, the viewers can contact your company by providing their email.

  • Type: Landing Page
  • Complexity: Low
  • Use case: Lead Generation

Features available

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

  • Animation
  • Flow
  • Tool tips
  • Typing text (custom code)

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

Animations

Step 1: To edit or to add an animation, first select the element you want to animate on the canvas. 

Step 2: Under the Animations panel, expand the (trigger) dropdown, and select the animation trigger. 

Step 3: After selecting the animation trigger, another (choose) dropdown will appear. Expand the second dropdown to select the type of animation you want to apply. 

Step 4: To remove an existing animation, click on the X to the right of the blue animation tag.

Flow

Step 1: To edit the flow settings, first locate the Flow element on the canvas. 

Step 2: Under the Variables panel, you can edit the flow settings to Auto-Play by checking the Auto-play box and unchecking it to remove it. When selecting the Auto-play feature, you can set an Auto-Play Delay which is measured in seconds. The default value is 4 seconds before the flow step changes. 

Tooltips (Reveal)

Step 1: The tooltips are created using reveals and layered positioning. To edit the tooltip location, first select the Reveal trigger on the canvas and press the up key on your keyboard to jump to the Reveal element. 

Step 2: To change the position of the tooltip, under the Variables panel, scroll down until you see the Layout tab. Expand the layout tab to adjust the tooltip settings.

Step 3: Once the layout panel is expanded, scroll down until you see the Position tab. 

Step 4: Change the percentage accordingly to adjust the position of the tooltips. 

Typing Text

Step 1: To edit the typing text copy, locate the Text element on the canvas, that is located above the Code Block container.

Step 2: Click on the Text element to open the edit window. 

Step 3: Edit the text then press the OK button to save the changes. 

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: