Loading tutorials…
Loading tutorials…
Framer feels like Figma until you hit publish — then it suddenly behaves like a real CMS. This walks the path from empty project to a live custom domain, including the breakpoint and domain-connect steps that trip up most first-time builders.
Who this is forFounders and marketers launching a Framer marketing site themselves. If you're a designer who builds in Figma daily, you'll feel at home. If you came from WordPress or Webflow, the canvas-first model takes a day to click. Either way, this is the right path to a publishable site.
What you'll need
Step 1
Framer separates Workspaces (billing + team) from Projects (sites). Get this hierarchy right before inviting anyone.
Open framer.com and sign in. You land on the workspace dashboard.
Click 'New project' at the top right. Choose 'Start from scratch' rather than a template — templates carry assumptions (breakpoints, fonts, styles) that are hard to remove later.
Name the project after the site, not the company (e.g., "marketing-site-v3" not "Acme Inc"). You'll have multiple projects per company over time.
Workspace settings → Members: only invite people who need edit access. Reviewers should use the share link, not a seat — Framer charges per editor on paid plans.
Inside the project, top-left menu → Project settings → General. Set the project name, favicon (32x32 PNG or ICO), and default OG image (1200x630 PNG).
Step 2
Framer ships with Desktop, Tablet, Phone breakpoints by default. Decide if you also need a Wide (1440px+) breakpoint BEFORE you start designing.
In the top-right of the canvas, click the breakpoint icon (looks like stacked rectangles). You'll see Desktop, Tablet, Phone.
Click '+' to add a Wide breakpoint (1440px and up) if your audience skews high-resolution. Most B2B SaaS marketing sites should have this.
Decide your breakpoint widths now: Desktop default is 1200px, Tablet 810px, Phone 390px. Match these to your design file if you have one.
Once breakpoints are locked, never delete them — Framer's auto-layout cascades from Desktop down. Deleting Desktop mid-build breaks everything.
Set the base font size, default color tokens, and primary heading style at the project level (Design Panel → Styles) BEFORE building pages. Changing later means manually re-applying.
Step 3
Frame the home page as stacked Sections (full-width containers). Don't free-position elements — auto-layout is what makes Framer responsive.
Insert → Section. This adds a full-width frame to your canvas. Each section becomes a horizontal band on the live site.
Inside the section, use Stack (vertical or horizontal auto-layout) for all content. Never use absolute positioning — Framer will let you, but the result breaks at every breakpoint.
Set each Stack's "Distribute" and "Align" properties at the top of the Design panel. These are the equivalent of CSS flexbox justify-content and align-items.
Use Framer's responsive tokens: % widths, min/max heights, and Fill/Hug/Fixed sizing. 'Hug' = shrink to content, 'Fill' = take available space, 'Fixed' = locked pixel value.
Test each section at every breakpoint as you build, not after. A 5-section page built without breakpoint-testing typically takes 2 hours to fix retroactively vs 10 minutes to fix per section as you go.
Step 4
Project settings → SEO. Set default meta title pattern, description, OG image, and robots indexing. Per-page overrides come later.
Open Project settings → SEO. Set the site title pattern: usually "{Page Title} | {Company Name}".
Default meta description: 150-160 chars, mentions the primary keyword for the site's homepage. Per-page descriptions override this.
Upload a default OG image: 1200x630px PNG, under 1MB, includes your logo + a one-line value prop. Per-page OG images override this.
Robots.txt: leave as 'Allow all' for production. Framer auto-generates a clean sitemap.xml at /sitemap.xml.
If you're staging on the .framer.app subdomain before launch, set 'Discourage search engines' to ON at the project level until you cut over to the custom domain. Forgetting this causes Google to index the staging URL — a common SEO leak that takes 60+ days to clean up.
Step 5
Site settings → Domain. Framer gives you DNS records to add at your registrar. Verification typically takes 5-30 minutes.
Project settings → Domain. Click "Connect domain." Enter your domain (e.g., example.com or www.example.com).
Framer shows the records to add: usually an A record pointing to a Framer IP and a CNAME for www. Copy these.
In your registrar (Namecheap, GoDaddy, Cloudflare, etc.), open DNS management for the domain. Add the A and CNAME records exactly as Framer shows them.
If you're on Cloudflare, set the records to 'DNS only' (grey cloud, not orange) — Framer handles SSL itself and gets confused by Cloudflare's proxy at first connection.
Wait 5-30 minutes. Framer auto-detects propagation and provisions a Let's Encrypt SSL cert. Once green-check appears, click "Publish" → choose the custom domain checkbox.
Step 6
Run through this checklist before sharing the live URL. Most "Framer launches" miss 3-4 of these.
Click every primary CTA on every page. Confirm each goes to the intended URL or scrolls to the intended section.
Test on a real phone, not just the Phone breakpoint preview. Framer's preview is close but not identical to mobile Safari/Chrome.
Run the site through Google PageSpeed Insights. Aim for mobile Performance score 80+. If below 60, your hero image is likely uncompressed (next step).
Compress hero images: under 200KB each. Use WebP via Squoosh.app or TinyPNG before uploading.
Confirm favicon shows in the browser tab. Confirm OG image renders on Slack/Twitter/LinkedIn using opengraph.xyz preview tool.
Verify all forms submit. Framer's native form goes to a webhook, Zapier, or built-in collection — test the full submit-to-notification flow, not just the form UI.
Common mistakes
Designing only at Desktop breakpoint
What goes wrong: Your site looks beautiful on a 27-inch monitor and embarrassing on an iPhone. ~70% of marketing-site traffic is mobile. Conversion rate craters at $2-5 CPL cost.
How to avoid: Build at all breakpoints from section 1. Cycle through Desktop → Tablet → Phone every time you add a section. 10 minutes per section, not 2 hours of retroactive fixing.
Forgetting to set per-page SEO meta
What goes wrong: Every page inherits the project-default meta title and description. Google sees 8 pages titled "Acme Inc | Marketing Platform" and ranks none of them. Lost organic traffic compounds at ~$500-2,000/mo in equivalent ad spend.
How to avoid: Page settings → SEO panel → write unique title (50-60 chars) and description (150-160 chars) per page. Include the page's primary keyword in the title.
Publishing the .framer.app staging URL to search engines
What goes wrong: Google indexes both the staging .framer.app subdomain and your custom domain. Duplicate content penalty, split authority, hard-to-explain rank drops. Takes 60-90 days to clean up via canonical tags.
How to avoid: Project settings → SEO → set "Discourage search engines" ON for the staging URL. Set it OFF only after you cut over to the custom domain. Verify with site:yourdomain.framer.app in Google.
Uncompressed images crashing mobile speed
What goes wrong: A 4MB hero image kills First Contentful Paint on mobile. PageSpeed Insights score drops to 30. Google demotes the page in mobile-first rankings.
How to avoid: Compress every image to under 200KB before upload. Use WebP format. For above-the-fold images, set explicit width/height in the Framer Design panel to prevent layout shift (CLS).
Skipping the favicon and OG image
What goes wrong: Site shows the default Framer icon in browser tabs. Social shares show generic preview cards. Both make the brand look unfinished. Estimated 10-20% click-through-rate hit on social posts.
How to avoid: Project settings → upload a 32x32 favicon (PNG/ICO) and a 1200x630 default OG image. Test the OG with opengraph.xyz before sharing the URL anywhere.
Recap
Done — what's next
How to set up a Framer CMS collection
Read the next tutorial
Hand it off
Setting up a Framer site is one weekend. Maintaining it, expanding the CMS, adding integrations, and keeping it fast as the team adds pages is an ongoing job. Framer specialists on EverestX typically run $200-600/mo at $14-16/hr for ongoing site management.
See specialist rates
No. The Mini plan ($5/mo) is enough for a custom domain and basic CMS. Pro ($15/mo) unlocks more CMS items, password-protected pages, and team features. Most solo founders ship on Mini, upgrade to Pro when they need 1,000+ CMS items.
Framer is canvas-first (Figma-like UX) and ships faster for design-led brands. Webflow is structure-first (HTML/CSS-like UX) and scales better for content-heavy sites with 100+ pages. For a 5-20 page marketing site led by a designer, Framer is usually faster. For a site that will grow into a blog/docs/case-study library, Webflow is more stable.
Yes, but it's a manual rebuild — no automated importer exists. Export your content (posts, pages, media) from WordPress, design the new site in Framer, and paste content into Framer CMS or pages. Most agency migrations take 40-80 hours for a 20-page site. DIY usually takes 80-120 hours including learning curve.
Not inherently. Framer produces clean HTML, ships fast Core Web Vitals out of the box, and supports per-page meta. Where teams lose SEO is misconfiguring redirects on migration, leaving the .framer.app staging URL indexable, or skipping per-page meta titles. Avoid those three and you'll match or beat your old WordPress setup.
Project settings → Custom Code → Head section. Paste the GA4 gtag snippet with your Measurement ID. Publish. Verify in GA4 Realtime within 60 seconds. We have a dedicated tutorial that walks this and the conversion-tracking setup.
Framer has a basic native store, but it's not a real ecommerce platform. For 1-10 SKUs and digital products, Framer is fine. For 50+ SKUs, inventory, taxes, multi-currency, or subscriptions, use Shopify with a Framer marketing site embedded via subdomain. Framer + Shopify is a common stack.
Framer
The Framer CMS is fast once you understand it — but the canvas-first UX hides decisions that matter: slug strategy, reference fields, dynamic SEO meta. This walks the full setup for a blog (and the same pattern works for case studies, team, jobs).
Framer
Framer ships clean HTML and fast Core Web Vitals — but it does not auto-generate good SEO meta. Every page needs deliberate title, description, OG, and (for CMS) dynamic bindings. This is the full setup specialists run on every Framer site.
Framer
Framer doesn't have a native GA4 field — every install goes through Custom Code. Half of DIY Framer GA4 installs end up double-counting from the .framer.app staging subdomain or missing form-submit events entirely. This walks the full install.
Framer
Framer is gorgeous and accessible — until you hit the wall where every change costs you a day. This is the honest framework: when the time cost of DIY exceeds the cost of hiring, and how to tell which side you're on.
Webflow
Webflow doesn't have a native GA4 field anymore — every install goes through Custom Code. Most DIY setups end up double-counting from the webflow.io staging subdomain or missing events from form submits. This walks the install + the filters that fix both.