Landing Page
落地页
Aliases:落地页卖东西的落地页产品主页官网首页营销首页产品介绍页转化页
What is it
A marketing page organized vertically around one conversion goal: nav and hero explain "what is this and why it's good", mid-sections use features and social proof (logos, testimonials, numbers) to dissolve objections, and a strong call-to-action closes. Sections follow the persuasion order — each screen answers the visitor's next question.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Promoting one product or campaign, chasing signups or sales
- Visitors from ads or links must grasp value fast
- First conversion must happen without logging in
✕ When not to use
- Everyday surfaces for logged-in users
- Complex long-lived content sites — use documentation instead
- Database-like pages that need frequent lookup
Variants
Classic Hero
经典 Hero
Big headline + visual + one CTA, the general default
Feature Grid
功能矩阵
Card matrix of features right after the hero
Long-scroll Story
长滚动叙事
One point per screen, scroll-driven persuasion
Waitlist
候补列表
Hero + email capture only, for pre-launch
Page structure
- 01
Navbar
Logo, anchor nav and primary CTA, often transparent over the hero.
- 02
Hero
A value proposition plus primary CTA; the first screen must say what and for whom.
- 03
Features
Three to six benefits with visuals, backing the value proposition.
- 04
Social proof
Customer logos, testimonials or key numbers.
- 05
Closing CTA
A final conversion push that repeats the primary CTA.
- 06
Footer
Sitemap, legal and social links closing the page.
Implementation
flexgridscroll-behavior: smoothscroll-snap-type: y mandatorySections stacked vertically: hero fills or nearly fills the viewport, features adapt as a card grid, social proof is a logo row plus testimonial cards. One accent CTA color, repeated before the footer. The long-scroll variant can use scroll-snap; entry animations respect prefers-reduced-motion.
Related concepts
A horizontal navigation bar pinned to the top of the page: brand on the left, primary links in the middle, search, actions and avatar on the right. It is the front door of a site — the 3–7 most important destinations compressed into one strip, folding into a hamburger menu on mobile. Usually kept visible with position: sticky.
ComponentsContainsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsContainsElements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.
MotionUsed withReveals a headline line by line or word by word instead of fading the whole block in. The spoken-rhythm staggering gives copy order and weight — a staple of landing-page hero titles, section intros and scrollytelling, usually triggered once on entering the viewport.
MotionUsed withOn hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionUsed with