Home › Build Guides › Build a Landing Page
Beginner ⏱ 30-45 min

Build a Landing Page

Ship a beautiful, high-converting landing page in under an hour

Framer
FramerDesign & Hosting
 Vercel
VercelAlt Hosting

What You'll Build

A polished, responsive landing page with animations, CTA sections, and analytics - live on a custom domain.

Prerequisites

Architecture

Framer handles everything - design, hosting, SSL, and CMS. You design visually, add interactions, and publish with one click. No code needed.

You (design in Framer) → Framer (hosts & serves) → Custom domain

5 Steps

1Create a new Framer project 2Build the hero section 3Add features and social proof 4Make it responsive 5Publish and connect your domain
1
Framer

Create a new Framer project

~2 min

Start a new project in Framer from a blank canvas or a template.

  1. Go to framer.com and sign in
  2. Click "New Project" and choose a blank canvas or browse templates
  3. Set your canvas width to Desktop (1440px) - Framer auto-generates responsive breakpoints
💡
Tip: Start from a template if you want to move fast. Framer's community templates are high quality and fully customizable.
2
Framer

Build the hero section

~10 min

Design a hero with headline, subheadline, CTA button, and an optional hero image or illustration.

  1. Add a Section component (full width, centered content)
  2. Add your headline as a heading element - use 48-64px font size
  3. Add a subheadline paragraph below - keep it to 1-2 sentences
  4. Add a CTA button with a contrasting color and clear action text
  5. Optionally add a hero image, screenshot, or Lottie animation
💡
Tip: Use Framer's scroll animations to fade the hero in on load. Subtle entrance animations increase perceived quality.
3
Framer

Add features and social proof

~15 min

Build a features grid, testimonials section, and any other content blocks you need.

  1. Create a features section with a 3-column grid - each card has an icon, title, and description
  2. Add a social proof section: logos, testimonials, or metrics
  3. Add a pricing section if applicable (use Framer's component variants for toggle between monthly/yearly)
  4. Add a final CTA section that repeats your main call to action
  5. Add a simple footer with links and copyright
💡
Tip: Keep your page to 5-7 sections max. More isn't better - clarity converts.
4
Framer

Make it responsive

~10 min

Switch to tablet and mobile breakpoints and adjust layouts for smaller screens.

  1. Click the breakpoint switcher in Framer's toolbar
  2. Switch to Tablet (768px) - adjust font sizes, padding, and grid columns
  3. Switch to Mobile (375px) - stack columns vertically, reduce font sizes
  4. Test all interactive elements (buttons, links) at each breakpoint
  5. Preview in Framer's built-in browser preview
💡
Tip: Framer inherits styles from larger breakpoints. Only override what needs to change on smaller screens.
5
Framer

Publish and connect your domain

~5 min

Publish your landing page and optionally connect a custom domain.

  1. Click "Publish" in the top right of Framer
  2. Your page goes live on a .framer.app subdomain immediately
  3. To add a custom domain: go to Site Settings → Custom Domain
  4. Add a CNAME record pointing to cname.framer.app at your domain registrar
  5. Framer automatically provisions SSL
💡
Tip: Add your meta title, description, and OG image in Site Settings → SEO before publishing. First impressions on social media matter.

🎉 You're Done!

A polished, responsive landing page with animations, CTA sections, and analytics - live on a custom domain.

Related Guides

🎨
Build a Portfolio Site Beginner · 1-2 hours
📧
Start a Newsletter Beginner · 30-45 min

Related Comparisons

Framer vs Webflow →
Done for you

Want this built for you?

Get a step-by-step checklist, setup order, and the exact config for every tool in this guide. Or let me build it for you.

Get the checklist → Want this built for you?