SaaS landing page sections
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.