Before you start: audit and inventory

Before touching any tool, document exactly what you're moving. Open your WordPress admin and catalog:

Pages

How many static pages? Which are high-traffic? Which can be retired? Export the list from Pages → All Pages.

Posts

How many blog posts or articles? What categories and tags structure them? Which drive organic traffic? Cross-reference with Google Analytics or Search Console.

Custom post types

Case studies, team members, product pages, testimonials, FAQs. Any content managed through custom post types or ACF will map to Framer CMS collections.

Media library

How many images and files? Which are actively used? WordPress media libraries accumulate significant unused assets over time.

Plugins

Document every active plugin and what it does. You'll need to figure out which functionality needs to be replicated in Framer, which gets replaced by native features, and which you can drop entirely. Common replacements:

Before proceeding: create a full WordPress backup, both database and files. Use your host's backup tools, a plugin like UpdraftPlus, or a manual export. You won't be deleting your WordPress site immediately, but having a complete backup ensures you can reference or restore anything during the process.

This inventory is your migration scope. Most teams find that a significant portion of their WordPress content is outdated, redundant, or low-performing. Migration is a natural opportunity to clean house.

A practical pruning rule: if a page has had zero organic traffic and zero backlinks for 12+ months, it's a strong candidate to retire rather than migrate. Don't carry dead weight into your new platform.

Step 1: Set up your Framer project

Create a new project and establish the structural foundation before importing content.

Site structure

Build your page hierarchy. Start with high-priority pages. You don't need to recreate every WordPress page. Focus on pages that receive traffic, drive conversions, or represent your core offering.

Design system

Set up colors, fonts, and spacing in Framer's style system. Keeping your current brand? Match it exactly. Refreshing the design (most teams do during migration)? Establish the new system here. Framer automatically optimizes font loading and, so you don't need to worry about performance impact. You can upload your own custom font.

If your team already uses Figma, you'll feel at home. Framer's editor works in a very similar way. The learning curve is minimal, and designers can start building production pages on day one. You can also copy/paste elements directly from Figma into Framer using the Figma-to-Framer plugin. Teams can work simultaneously using live collaboration.

Components

Build reusable components for repeating elements: navigation, footer, CTAs, cards, section layouts, testimonial blocks. Framer's component system with variants and properties is significantly more powerful than WordPress template parts. Invest time here early. For team-wide consistency, set up a shared component library.

Breakpoints

Configure responsive breakpoints. Framer gives you direct control over how every element behaves at each screen size. A fundamental upgrade from WordPress's theme-dependent responsive behavior. For a full overview of what's possible, see design.

Step 2: Migrate your CMS content

Framer's CMS has evolved significantly. Key capabilities to know before migrating:

Relational collections

Connect collections to each other (blog posts → authors, products → categories) without duplicating data. Multi-reference fields let you link multiple items to any entry. In many cases more flexible than WordPress's taxonomy and relationship systems.

File fields

Collections support file uploads (PDFs, spreadsheets, presentations) for resource libraries, whitepapers, and case studies.

On-page editing

Once your site is live, authorized team members can edit CMS content directly from the published site. Click edit, see blue outlines on editable elements, click and type to update. Changes only go live when published. Your marketing team can update content without ever opening the Framer editor. A major workflow advantage over WordPress's admin panel.

AI content generation

The CMS includes AI-assisted features for drafting entries, suggesting copy variations, and generating placeholder content.

Collection limits to plan around: CMS limits vary by plan. Pro gives you 10 collections and 2,500 items per collection. Scale starts at 20 collections and 10,000 items, expandable to 40 collections and 40,000 items with add-ons (€20 per additional 10,000 items). If your WordPress site has more than 10 custom post types, you'll need to consolidate some during migration or move to a Scale or Enterprise plan for higher limits. Most teams find this forces a healthy content architecture review.

Five approaches for migrating content

Option A: CSV import (most common for bulk content)

The standard approach for large volumes of structured content.

Export from WordPress: Tools → Export. Select content types. WordPress generates an XML file (WXR format). You could also use WP All Import for this.

Convert XML to CSV: Use a conversion tool or script to transform the XML into CSV. Several free tools handle this, including dedicated WordPress-to-Framer converters. During conversion, clean shortcode artifacts, strip WordPress-specific formatting, fix broken HTML, and remove empty tags. This is also a chance to improve content quality. Rewrite weak meta descriptions, fix slugs, remove drafts you don't want to carry forward.

Prepare your CSV to match Framer's requirements:

Set up your CMS collection: Create a collection with fields matching your CSV columns by name and type. Here's how WordPress content maps:

• WordPress posts → Framer CMS collection (e.g., "Blog Posts")

• WordPress categories → Single select or reference to a separate collection

• WordPress tags → Multi-select or comma-separated text

Custom fields (ACF, Meta Box) → Matched by type: text, number, boolean, image, date, color, link

• Featured images → Image field (full URL, downloaded on import)

• Post excerpt → Text field

• Author → Text field or reference field

Import: CMS collection → Import → select your CSV. Framer matches columns to fields by name. Only fields that exist in your collection get imported, so you don't have to import every column. Review the preview, then confirm.

Need to re-import? Framer uses the Slug field to match and update existing items rather than creating duplicates.

Watch for: alt text often drops during bulk CSV operations. After import, spot-check your images to verify alt text carried over. It matters for both accessibility and SEO. For a walkthrough, see the CSV import lesson and the CMS developer reference.

Option B: HTML to Framer Chrome extension (visual migration)

The official HTML to Framer extension lets you copy visual elements directly from your live WordPress site and paste them into Framer.

How it works

Install from the Chrome Web Store. Navigate to your WordPress site. Activate the extension, hover over elements to select them. Press Esc while hovering to select a parent container. Copy, then paste (Cmd+V / Ctrl+V) into Framer.

Best for

Migrating specific sections, components, or page layouts where you want to preserve visual structure. It copies the HTML/CSS, not CMS data.

Limitations

Doesn't migrate CMS content, metadata, or dynamic functionality. It's a visual shortcut, not a full migration tool.

Option C: Manual migration

For smaller sites (under 50 pages), manual migration is often the fastest and highest-quality approach. Copy content directly into Framer pages or CMS items with full control over formatting.

Option D: Server API (programmatic sync)

Launched in February 2026, Framer's Server API lets you sync CMS collections programmatically from any external source: Notion, Airtable, databases, or your WordPress REST API directly. It runs over a stateful WebSocket channel, making it fast for batch operations and well-suited for automated migration pipelines.

How to use it

Create an API key in Site Settings. Install the framer-api npm package. Write a script that reads from your WordPress REST API (or any data source) and pushes content into Framer collections. Trigger via webhooks, scheduled jobs, or one-off scripts.

Best for

Developer-led migrations where the team wants full control over the import pipeline, or teams that want to run WordPress and Framer in parallel and keep content synced during a gradual transition. Also useful for ongoing content workflows that pull from external databases or CMSes.

The Server API is currently free to use.

Also worth exploring: the Framer Marketplace includes AI-powered plugins that help adapt and restructure content during migration. Useful when you're not just porting content but improving it in the process.

Most enterprise teams combine approaches: CSV import or WordPress import plugins for bulk CMS content (blog posts, case studies), manual rebuild for key pages (homepage, product pages, landing pages), the HTML to Framer extension for replicating specific visual sections, and the Server API for automated or ongoing sync workflows. For developers building custom integrations, the code components documentation and component sharing guide are useful starting points.

Step 3: Rebuild key pages

Your homepage, product pages, and primary landing pages should be rebuilt from scratch, not ported mechanically. This is where migration becomes an upgrade.

Layout

Auto-layout (Flexbox-based) and Grid layouts. More flexible and predictable than anything WordPress page builders offer, with clean semantic markup.

Interactions

Scroll-based animations, hover effects, parallax, and micro-interactions built natively. No JavaScript plugins.

CMS integration

Connect dynamic content from collections to page elements. Blog feeds, case study grids, team directories, all driven by CMS data with filterable, sortable views.

Responsive design

Design each breakpoint with intention. Direct control at every screen size with per-breakpoint overrides for layout, spacing, typography, and visibility.

Answer-first content structure

If you're rebuilding pages from scratch, structure them for how people (and AI) actually find information in 2026. Lead key sections with a direct question as the heading. Follow with a concise 1–2 sentence answer before expanding. Add FAQ sections around core topics. Each question creates an additional retrieval opportunity for AI search engines. This approach helps your pages show up in Google's AI Overviews, ChatGPT, Perplexity, and other answer engines. Framer's guide on building answer-oriented pages covers this in detail.

Step 4: Set up forms and integrations

Replace your WordPress form plugins with Framer's native capabilities or direct integrations.

Forms

The native form builder supports 10+ input types with customizable design (focus states, loading states, success states). Submissions go to email, Google Sheets, or a custom webhook endpoint. Webhooks send JSON via HTTP POST with optional SHA-256 signature verification. For CRM, connect directly to HubSpot, Salesforce, or any endpoint via webhooks or Zapier. Built-in spam protection and rate limiting included. For complex workflows, integrate with Formspree, Tally, or Typeform.

Analytics

Built-in analytics on Pro+ plans cover sessions, pageviews, referrers, geography, and devices. For GA4, add the tracking script in Site Settings → Custom Code → Head. Same for Plausible, Fathom, Mixpanel, or any other tool. You can also track link clicks and form submissions.

Marketing tools

Email marketing (Mailchimp, ConvertKit, Loops), live chat (Intercom, Crisp, or any snippet-based tool), CRM, and any third-party tool via Site Settings → Custom Code or the native embed component. You can also build custom integrations. Framer also integrates with Clay for enrichment workflows on form submissions. See integrations for the full list.

Framer is built on React, so when you need something custom (a dynamic calculator, a pricing slider, a live data integration), developers can build custom React components that plug directly into the editor. Your marketing team uses them like any other design element.

Cookie consent and GDPR

If your WordPress site uses a cookie consent plugin (CookieBot, Complianz, CookieYes), you'll need to replace it. Framer doesn't have a native cookie consent tool. The standard approach: embed a third-party consent manager (CookieBot, Osano, or OneTrust) via Site Settings → Custom Code. Configure it to block analytics and marketing scripts until consent is given. If you serve EU visitors, this is not optional. Set this up before go-live, not after. See details on how Framer handles cookies and GDPR. If your security team requires a content security policy, see this article.

Step 5: Configure redirects

Critical step. Before switching your domain, set up 301 redirects from every WordPress URL that receives traffic or backlinks to its Framer equivalent. This is what preserves your search rankings.

In Framer: Site Settings → Redirects.

Redirect limits by plan:

• Hard cap: 2,500 rules per project

• Note: Free plans don't include redirects. Basic only offers 5, so most migrations need Pro or above.

Wildcard redirects make bulk handling efficient:

• * matches any path: /blog/* redirects all blog posts in one rule.

• Capture groups (:1, :2) reference matched segments: /blog/:1/:2 → /articles/:2 restructures URLs dynamically.

• Named segments (:slug) match specific path segments between slashes.

Examples:

/blog/* → /articles/:1 (redirects /blog/my-post to /articles/my-post)

/?p=* → /blog (handles WordPress default permalinks)

/category/* → /blog?category=:1 (redirects category archives)

If your redirect count exceeds your plan limit, prioritize: pages with the most organic traffic first, then backlinks, then remaining indexed pages. Part 2 covers the full strategy. For setup instructions, see how to maintain SEO ranking. Not sure which plan you need? See Framer plans.

Step 6: Test before switching DNS

Before changing DNS records, verify everything:

• All pages render correctly across breakpoints (desktop, tablet, mobile)

• All CMS content is present and formatted correctly

• Forms submit and reach the right destination

• Redirects resolve to correct pages (test with your staging URL)

• Analytics and tracking scripts fire on page load

• Third-party integrations work (chat, CRM, marketing tools)

• Internal links point to new Framer URLs, not old WordPress paths

• Images load correctly (no broken wp-content references)

Use Framer's staging environment to test thoroughly. On Pro+ plans, enable staging in Site Settings → Staging & Versions. You get an isolated .framer.app URL where you can publish and review without affecting your live WordPress site. Publish as many iterations as needed, deploy to production when ready.

Important: make sure your staging URL is not being indexed by Google. Framer staging sites (.framer.app) are noindexed by default, but verify this. Duplicate indexing during migration can cause serious SEO issues.

Framer maintains version history. Every publish creates a version you can roll back to. A significant improvement over WordPress, where staging typically requires a separate hosting environment, database clone, and manual deployment.

Have a rollback plan before you switch DNS. Know exactly what "abort" looks like: DNS records to revert, WordPress site still running, team communication plan. The first 72 hours post-migration are critical. Keep your WordPress site fully operational during this period so you can revert DNS if you discover a blocking issue. Most teams never need the rollback, but not having one is how migrations become disasters.

Step 7: Switch DNS and go live

When your Framer site is fully tested:

Update your DNS records to point to Framer:

For apex/root domains (e.g., yourdomain.com):

• A record → 31.43.160.6

• A record → 31.43.161.6

For subdomains (e.g., www.yourdomain.com):

• CNAME record → sites.framer.app

Important: Framer migrated to new dedicated hosting infrastructure in 2025. The old IPs (52.223.52.2 and 35.71.142.77) were deprecated as of July 1, 2025. Use the current IPs above. Framer now owns its IP addresses directly, which gives them greater control and ensures the IPs aren't flagged by security systems. If you run into issues, see troubleshooting.

Important: changing A records and CNAMEs does not affect your email. MX records (which route email) are separate DNS entries. As long as you don't modify or delete your MX records during the switch, your domain email (team@yourdomain.com) will keep working exactly as before. Double-check your MX records before making changes, just to be safe.

SSL is automatic. Certificates are provisioned once DNS propagates. No manual setup.

Pro tip: 48 hours before your planned DNS switch, lower your DNS TTL (Time to Live) to 300 seconds (5 minutes). This means when you actually update the records, the change propagates much faster. Most visitors see the new site within minutes instead of hours. After migration is confirmed stable, raise TTL back to its normal value (typically 3600 seconds / 1 hour).

DNS propagation takes up to 48 hours (usually 1–4 hours with a lowered TTL). During this window, some visitors may still reach your old WordPress site. Don't take WordPress offline until propagation is complete.

Timing: switch DNS during your lowest-traffic window. Typically early morning or weekends for B2B sites. Never during peak hours. Any fluctuation during high-traffic periods can compound into lost conversions and confusing analytics.

After DNS resolves: verify the live site, test all redirects with the production domain, confirm SSL is active, and submit your new sitemap to Google Search Console (covered in Part 2).

You don't have to migrate everything at once

One of the biggest misconceptions about platform migration is that it's all or nothing. It doesn't have to be.

Framer's Advanced Hosting lets you migrate page by page. Point your domain to Framer, enable "Match pages first," and Framer serves any page that exists in your project while routing everything else to your existing WordPress site. As you build and publish pages, they automatically replace the corresponding WordPress pages. WordPress keeps serving the rest.

This is how many enterprise teams approach it: start with a single landing page or campaign page, prove the workflow, then expand. Miro shipped their first Framer page in a week and now runs their full website on the platform with 27 million monthly visits across 17 localized versions.

Multi-site routing

Advanced Hosting also supports hosting multiple Framer projects or external origins under a single domain using rewrite rules. No third-party reverse proxy needed.

Availability

Available as a Scale add-on and included on Enterprise plans. Check for current pricing. For technical details on how Framer's hosting works, see the hosting infrastructure guide.

Timeline expectations

Based on real enterprise migrations:

Small sites (under 30 pages, no blog): 1–2 weeks with 1–2 people.

Medium sites (30–100 pages, blog with 50–200 posts): 3–6 weeks depending on design complexity, content cleanup, and redirect volume.

Large sites (100+ pages, extensive CMS, multiple languages): 6–12 weeks with a dedicated team or Framer Expert partner. Sendcloud's multi-market migration was phased by market to manage complexity.

These timelines assume a design refresh, which most teams do. A straight port is faster, but most teams take the opportunity to upgrade their web presence alongside the platform change.

When Framer might not be the right fit

Not every WordPress site should migrate to Framer. Be honest about your requirements before committing.

E-commerce

If your site runs WooCommerce with product catalogs, shopping carts, and checkout flows, Framer is not an e-commerce platform. You'd need a dedicated solution like Shopify for the store, potentially with Framer handling your marketing pages alongside it.

Membership or gated content

If your business depends on user accounts, paywalls, or member-only content areas (using MemberPress, Restrict Content Pro, or similar), Framer doesn't have native user authentication or access control. Evaluate whether a third-party auth layer meets your needs before migrating.

Very large content libraries

If your site has more than 10,000 CMS items (e.g., a blog with 15,000+ posts), you'll need a Scale or Enterprise plan, and even then the 40,000-item ceiling matters. Sites with hundreds of thousands of pages may need a different architecture.

Heavy server-side logic

If your WordPress site relies on PHP processing, database queries per request, or custom REST API endpoints that power other services, Framer's static architecture won't replicate that functionality. Evaluate whether Framer's Server API, webhooks, and third-party integrations can cover your server-side needs.

WordPress multisite

If you run a WordPress multisite network with shared users and content across subdomains, migrating to Framer requires treating each subsite as a separate project. Advanced Hosting can route them under one domain, but the shared-database model doesn't translate directly.

This isn't a limitation of Framer specifically. It's a matter of matching the right tool to the job. If your primary use case is a marketing website, campaign pages, a blog, and content that your team needs to ship fast, Framer is built for exactly that.

A word of caution

Don't change everything at once. Changing your platform, URL structure, design, and content simultaneously makes it impossible to diagnose what caused any ranking changes. Research consistently shows that changing both domain and URL structure in a single migration doubles the risk of SEO loss.

The safest approach: keep URLs, content, and metadata identical during migration, then optimize once rankings are stable. Save the design refresh and content improvements for after the dust settles, or at least stagger them by 4–6 weeks.

Working with a Framer Expert

For enterprise migrations with complex requirements (large content volumes, multiple languages, custom integrations, or tight timelines), a certified Framer Expert can accelerate the process significantly.

Certified Framer Experts specialize in enterprise WordPress-to-Framer migrations and handle the technical execution while your team focuses on content strategy and stakeholder alignment. You can organize your projects using workspaces and folders.

Framer's Project Transfer feature makes handoff seamless. An Expert builds the site in their workspace, then transfers it to yours with zero downtime. You get an email with clear instructions, and the Expert can stay on as an editor for ongoing support.

For enterprise teams: Enterprise workspaces include SSO, SOC 2 compliance, granular roles and permissions, custom font uploads, team component libraries, and dedicated account management. If you're planning for growth, see how to set up your site for scale.

What's next

Content migrated, site rebuilt. Now make sure your search rankings survive (and improve). Part 2 has the complete SEO checklist.