SaaS landing page sections

SaaS landing page sections
On this page

Landing pages sections

Heros

Annotated teardowns of landing page Heros (the first element outside of navigation) from leading SaaS pages

Social proof: client logos

Client logos are a great form of landing page social proof. Examples of client logos on SaaS landing pages are coming soon.

Annotated screens

What: Images are a powerful way to show your product but can be overwhelming. Using annotations and labels can help point the user to critical info, or contextualise the benefits.

Microanimations

What: Short animations can explain flows simply and help you bring your product to life on your landing page.

Features

What: Highlight your product features in a compelling way, inspired by these examples. Traditionally features follow benefits and show how the benefit is achieved.

Diagrammatic images

What: Visualise complex flows and processes with simple diagrams, like on these leading landing pages

Quantification and specificity

What: Images are a powerful way to show your product but can be overwhelming. Using annotations and labels can help point the user to critical info, or contextualise the benefits.

You / your language

What: Short animations can explain flows simply and help you bring your product to life on your landing page.

Building pain

What: Use emotional language to amplify the pain of the current way of doing things to drive people to act

Benefits language

What: Focus on the why not the what. Why does that feature matter?

Replaces

What: similar to before and after, but here the comparison is often against other tools or processes that visitor may use.

FAQs

What: Landing page FAQs allow you to address visitor doubts. Using heat and click maps you can also learn which answers are most explored. Address these common doubts earlier on your landing page.

USPs

What: Clearly highlight and promote what your product or business does uniquely. Support your claims with meaningful evidence, quantification or testimonials. See examples below.

Embedded sign up

What: similar to before and after, but here the comparison is often against other tools or processes that visitor may use.

Evidence your claims: customer support

What: Don't just make claims, evidence them. Here's some examples with Customer Support claims being supported. Active Campaign have a 22-point series of commitments to support their customer service claim.

Use Cases

What: Highlight different uses for your product with a use-case or objectives element. Alternatively (or also) create different landing pages for key use cases. See how Sleeknote captures use cases as goals.

Alternate CTA

What: An action for the visitor to take if they're not yet ready to sign up.

Personas

What: Writing directly to different buyer or user personas who are visiting your landing page. Similar to use cases, but one persona can have multiple key use cases.

Live Demo

What: Show your visitors your product, don't just tell them about it. A live demo with dummy data allows people to navigate and explore your actual product without signing up.

Code Snippet

What: Prove your solution is easy to implement and address technical doubts with your actual implementation code snippet.

Template Directory / Showcase

What: Highlight templates and examples that help new users achieve their goals quicker, and show visitors the amazing things your product can create.

Vs Current Process or Competitor

What: Compare your solution with the current process or competitors. Similar to before and after but tends to be more process focussed than story or emotion focused.

Before and after

Also known as โ€œthe old wayโ€ and โ€œthe new wayโ€

What: show your visitor what life will be like after implementing your product. Tell that story with words, metrics or visuals. See examples below. Note: when using words to describe the 'before' you are trying you build pain.