WordPress to Framer

Before rebuilding anything, take a complete inventory of your WordPress site:

Pages: List every page (Home, About, Services, Contact, etc.). Note which ones are critical vs. which can be dropped.
Blog posts: How many? Do you need them all in the new site?
Forms: Contact forms, newsletter signups, payment forms. Note which plugin powers each one (Contact Form 7, Gravity Forms, etc.).
Plugins: List active plugins and what each one does. Many won't have a Framer equivalent - you'll need alternatives.

Take screenshots of every page for reference while rebuilding. This becomes your design spec.

For blog posts, use the built-in WordPress exporter: go to Tools → Export → All Content. This gives you an XML file with all posts, titles, dates, and content.

For page content, copy-paste is usually the fastest approach. Open each page and copy the text content into a Google Doc or Notion page. Download all images from your Media Library (Media → Library, select all, bulk download).

If you have a large blog (50+ posts), you may want to use a tool like wp-cli to export posts as markdown files, which are easier to import into Framer's CMS later.

Head to framer.com and create an account. You can start from a template or a blank canvas. If you're new to Framer, starting from a template and customizing it is the fastest route.

Set up your brand foundations first:

Colors: Add your brand colors as shared styles (background, text, accent).
Fonts: Import your brand fonts or choose from Framer's Google Fonts integration.
Breakpoints: Framer supports Desktop, Tablet, and Mobile. Design desktop first, then adjust for smaller screens.

This is where the bulk of the work happens. Prioritize your pages:

Start with the homepage. This sets the design language for the rest of the site. Use Framer's component system to create reusable sections (navbar, hero, footer) that you'll use across all pages.

Then build high-traffic pages (About, Services/Products, Contact). Don't try to recreate your WordPress site pixel-for-pixel. This is an opportunity to modernize your design.

Framer's visual editor lets you drag and drop layout elements, add interactions, and preview on multiple screen sizes in real-time. It's a completely different workflow from WordPress - more like Figma than a CMS.

If you have blog posts, create a CMS collection in Framer: go to the CMS tab, create a new collection called "Blog Posts" with fields for title, slug, content, featured image, date, and any categories you use.

Import your posts. Framer supports CSV import for CMS collections. Format your WordPress export into a CSV with matching columns and upload it. For content, you can use the rich text field which supports basic formatting.

Create a blog listing page and individual post template in Framer that pulls from your CMS collection. Framer generates static pages for each CMS item - great for SEO.

Framer has a built-in form component that sends submissions to email. For most contact forms, this is all you need.

For more advanced forms, embed third-party tools:

Tally or Typeform for complex forms with conditional logic.
Cal.com for booking/scheduling (replaces WordPress booking plugins).
Stripe Payment Links for simple payments (replaces WooCommerce for basic use cases).

Newsletter signup forms can embed your email provider's code directly (Beehiiv, ConvertKit, etc.).

Don't skip this step - SEO mistakes during migration can tank your traffic. For every page:

Meta title and description: Copy from your WordPress pages (use the same titles/descriptions that were working).
OG images: Set Open Graph images for social sharing.
Sitemap: Framer auto-generates a sitemap. Submit it to Google Search Console at yourdomain.com/sitemap.xml.
URL structure: Keep the same URLs where possible. If URLs must change, set up 301 redirects (next step).

In Framer, go to Site Settings → Custom Domain and add your domain. You'll need to update your DNS records:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: proxy.framer.app

Before switching DNS, set up 301 redirects in Framer's site settings for any URLs that changed. Common examples:

/blog/2024/01/my-post  →  /blog/my-post
/category/news         →  /blog
/?p=123                →  /about

Once DNS propagates (minutes to hours), your Framer site is live. Keep your WordPress site running for a week in case you need to reference anything, then take it down.