Web Design & Development September 10, 2026

Framer vs WordPress with Divi: the same site, built twice

On this page

Short answer up front. If you’re a designer or a founder shipping a marketing site alone, Framer is the best tool I’ve used for that job. If the site is a business asset that has to outlive the people who built it, build it in WordPress with Divi 5, because the code and the content stay in your hands and any WordPress developer can take over. I know because in September 2026 I built the same 13-section homepage in both, and both builds are live below.

Framer is the tool designers keep sending me. “It’s like Figma, but it publishes.” I’d nodded along for a couple of years without really testing the claim, so this month I took a finished homepage design and built it in Framer and in WordPress with Divi 5, side by side.

Framer vs WordPress with Divi at a glance

Framer WordPress with Divi 5.9
Editing content Click a section, edit every control in the right-hand panel Click a section, edit every field in the Visual Builder panel
Changing layout On the canvas, with a designer’s skills Drag sections and rows in the builder
Building the sections 13 React code components, written by hand 21 custom Divi 5 modules, generated from one spec each
Where the content lives Property controls in the design file, plus CMS collections for repeating pages A database you can export
Code export None A theme in a repository, deployable anywhere
Forms and commerce Built-in form component; commerce through marketplace plugins Gravity Forms, WooCommerce, memberships
Hosting and updates Included, nothing to patch Your host, your updates, or a care plan
Price $10 to $30 a month per site, plus $20 a month per extra editor Divi $89 a year or $249 once, unlimited sites and editors
Lighthouse in this test Not scored (unpublished at the time) 100 across all four categories, mobile and desktop

Both builds are live:

Nothing on either is real. Filler copy, inactive buttons. What’s real is the motion and the editing experience, and that’s what this article is about. It’s the second of two write-ups from the same weekend; the first compares Craft CMS with WordPress and Divi. If you only want the verdict for your own site, the Divi vs Framer page has the short version.

The same homepage design built three ways, shown side by side in browser windows: WordPress with Divi 5, Craft CMS 5, and Framer
The same 13-section design rendered by the Divi 5 build, the Craft CMS 5 build and the Framer build.

Why build the same site twice?

Because “Framer is great” and “Framer locks you in” are both true, and only a real build shows you where the line falls. The design is a 13-section marketing homepage for a travel technology company. Parallax hero, click-to-open mega menus, a mobile drawer, a pinned section where a running total types itself out as you scroll, a logo rail and a timeline that scrub with the page, count-up metrics, and a spec-sheet section with status chips that have to read “In progress” until the client can prove otherwise. WCAG 2.2 AA, reduced-motion fallbacks, the works.

Both versions had to match the same static prototype, and both had to be editable by someone who has never seen the code.

What did I build in Framer?

Framer has two ways to build a page. You can draw it on the canvas with Framer’s own layout tools, or you can write React components and drop them in. A page like this one, with scroll-scrubbed sections and a mega menu, isn’t something you draw. So I ported the static prototype into 13 code components, one per section, plus a shared file for tokens, base styles and hooks.

Every piece of content became a property control. Headline, eyebrow, the four hero images, every menu, rail and link, each metric with its label and status chip, each timeline milestone, the partner logos, the footer columns. Click a section on the canvas, and the whole thing is editable in the right-hand panel. The SOC 2 and ISO 27001 rows are a dropdown that flips “In progress” to “Confirmed” without touching code.

That’s the good news, and it’s very good. Once the components existed, I dragged 13 layers into a vertical stack, added a 390-pixel phone breakpoint, and had a working, editable site. Publishing is a button. Hosting, CDN and SSL are included. There’s nothing to update and nothing to patch.

The Framer editor with a demo section selected on the canvas and its property controls shown in the right-hand panel
The Framer editor: a section selected on the canvas, with every property control exposed in the right-hand panel.

What did I build in WordPress with Divi 5?

On the WordPress side, Divi 5 lets you register your own modules for the Visual Builder. I wrote a generator that turns one spec per section into a module: PHP that renders on the server, a matching React bundle for the builder, and the section’s CSS with colours and spacing rewritten to Divi’s Variable Library. Twenty-one modules in total, 13 sections and 8 child types.

The editing experience ends up looking a lot like the Framer one. Click a section, edit in the panel, save. Partners are a custom post type with the logo as the featured image. Timeline milestones are a repeater. The header, announcement bar and footer live in the Theme Builder. Videos open in a modal the module owns.

The difference is what’s underneath. The WordPress version is a theme I can put in a repository, deploy to any host, and hand to another developer.

The Divi 5 Visual Builder editing the demo homepage, with a module's settings panel open beside the live page
The Divi 5 Visual Builder on the same page: click a section, and every string, link and image is a field in the panel.

What does Framer do better than WordPress?

Designing in it is a pleasure. Framer is the tool I’d want if I were a designer who had to ship a site alone. Moving things around on the canvas feels like Figma, and the breakpoint model is better than anything I’ve used in a WordPress builder. You add a phone frame, adjust, and it just holds.

The panel-editing model is excellent for marketing content. Every control I wrote showed up as a clean field with the design’s copy as the default. A marketer opening this site for the first time would not need a walkthrough.

Zero operations. No hosting to choose, no updates, no security patches, no caching plugin, no backups to arrange. For a small team with no developer, that alone can justify the subscription.

Instant publishing and staging. Edit, preview, publish. The canvas is deliberately static (all my motion gates off on it), and the preview animates. That split is exactly right.

Where did Framer fall short?

The components had to be hand-written, and Framer’s runtime has quirks nobody tells you about. A few I hit:

  • Relative imports need the file extension. Without .tsx, Framer reports an unresolved file and quietly drops the component from the panel.
  • Empty controls arrive as empty arrays, not undefined, so React’s default props never kick in. Every list needs its own fallback.
  • Media queries on the canvas look at the editor window, not the frame. A 390-pixel phone frame renders desktop CSS. I ended up measuring each component’s own width with a ResizeObserver and emitting every media block a second time as class-based rules so the canvas shows a true mobile render.
  • Framer doesn’t paint the page background behind code components, so any section without its own background shows grey until you paint it white yourself.

None of these are deal-breakers. All of them are hours, and they’re hours a designer can’t spend.

There’s no code export. Framer’s own help centre says published sites cannot be exported as standalone HTML, because its performance features run on Framer’s infrastructure. So the site lives on Framer’s hosting for as long as it exists. The help centre also states that code components can no longer read CMS collections directly, which rules out the pattern I’d normally reach for on a content-heavy site. Third-party exporters exist; they scrape the published page and don’t reliably carry over stateful components.

Two content layers, and only one of them is a CMS. Page content lives in component property controls. Framer’s CMS collections are for repeating content that gets its own pages (blog posts, case studies). That’s a sensible split, but it means the homepage content isn’t queryable, exportable or shareable with anything else. It’s in the design file.

Forms, commerce and integrations are thinner. Framer has a built-in form component that can send submissions to email, a Google Sheet or a webhook. Commerce runs through marketplace plugins, such as a Stripe checkout page or a Shopify bridge, rather than anything native. For a demo site it didn’t matter. For a business that needs form submissions tracked in a CRM, a store, gated content or a membership area, you’re stitching in third-party services and paying for each.

Pricing is per site and per seat. As of September 2026, a Basic site plan is $10 a month billed yearly (30 pages, 1,000 CMS items, 50 GB bandwidth), Pro is $30 a month (150 pages, 2,500 CMS items and 100 GB, with paid add-ons that take it to 40,000 items and 2 TB), and additional editors are $20 a month each, or $10 for editors who only touch content. Reasonable for one marketing site. Across an agency’s client list, or for a team of five editors, it adds up in a way a one-time Divi licence doesn’t.

What does WordPress with Divi do better than Framer?

You keep it. The theme is code in a repository. The content is in a database you can export. The site runs on standard WordPress, so if Zealous Sites disappears tomorrow, another WordPress developer picks it up. That’s not a hypothetical concern for a business; it’s the reason clients ask me who else could maintain their site.

Custom modules give the developer the whole stack and the client the builder. This is what surprised me most in this whole exercise. I’d thought of Divi as the thing you use instead of writing code. Divi 5 modules are code that presents itself inside the builder. I control the markup, the CSS, the fields and their defaults. The client gets drag-and-drop on top. Framer’s code components come close on the editing side, but the canvas layout is still Framer’s, and the code never leaves.

Structured content and integrations are native or one plugin away. Post types, taxonomies, repeaters, Gravity Forms with submission tracking, WooCommerce, memberships, multilingual. Framer has a CMS; WordPress is one.

Performance is in your hands. The live Divi build scores 100 for performance, accessibility, best practices and SEO in Lighthouse on mobile and desktop. I didn’t score the Framer build in the same run because it wasn’t published at the time. If you want to compare them yourself, run PageSpeed Insights on both links above.

One licence, unlimited sites. Divi is $89 a year or $249 once, for as many sites as you build.

What does WordPress cost you in return?

To be fair to Framer, a good chunk of my weekend went into fighting Divi and WordPress, and none of that fighting exists on Framer.

  • Divi loads jQuery, jquery-migrate, waypoints and a few other scripts, around 60 KB, even on a page with no stock modules. I wrote a hook to drop them.
  • Divi’s default viewport tag blocks pinch-zoom, which fails WCAG. I override it.
  • Divi requests every weight of your Google Fonts. Subsetting and self-hosting took the font payload from 187 KB to 64 KB.
  • Divi’s wrappers add their own padding and margins, so every module selector in my build is prefixed to outrank them.
  • Hosting, updates, backups and security are your problem, or your developer’s.

That last one is the real trade. Framer removes the operations burden entirely. WordPress hands it to you, or to a care plan, and gives you the code and the content in exchange.

Framer vs WordPress: what does each cost in 2026?

Framer WordPress + Divi 5
Platform Basic $10/mo or Pro $30/mo per site, billed yearly Free
Builder Included Divi $89/yr or $249 lifetime, unlimited sites
Editors $20/mo each ($10/mo for content-only editors) Unlimited
Hosting Included $10 to $50/mo typical, your choice
Forms Built-in component; third-party for CRM tracking Gravity Forms (paid) or others
Commerce Marketplace plugin (Stripe checkout or a Shopify bridge) WooCommerce free (paid extensions vary)
Code and content No export Yours to move
Operations None Updates, backups, security

Prices checked September 2026 against each vendor’s pricing page. They change; confirm before quoting.

Framer or WordPress: which should you pick?

Pick Framer if you’re a designer or a founder shipping a marketing site alone, you don’t have a developer, the site is mostly pages and a blog, and you’d rather pay a subscription than think about hosting. Early-stage startups, portfolios, product launch pages. Framer is the best tool I’ve used for that job.

Pick WordPress with Divi if the site is a business asset that will outlive the people who built it. If you need forms tracked, a store, gated content, or more than a couple of editors. If you want to be able to hire anyone to work on it later. If you want the code. That’s most established businesses I talk to.

Pick either if your worry is whether the marketing team can edit it. Both passed that test convincingly.

Where I landed

Framer impressed me most from a designer’s chair and least from a developer’s. The canvas is the best I’ve used, and then the moment I needed something the canvas couldn’t do, I was writing React with one hand and working around the runtime with the other, for a site I could never take with me.

WordPress with Divi 5 gave me the thing I actually want: a page builder the client already understands, sitting on top of modules I wrote myself, in a theme I can hand to anyone. Framer taught me what a great editing panel looks like. I went back and made sure my Divi modules felt the same.

If you’re choosing between them, I’m happy to open both demos on a call and tell you which one I’d build for your team. Book a free 30-minute call or reach out through the contact page. If you already know it’s Divi, the Divi developer page has prices.

Framer vs WordPress FAQ

Is Framer a good choice for a small business website?

For a brochure site run by one person with no developer, yes. Hosting, SSL and updates are included, and the panel editing is as easy as it gets. The moment the business needs tracked form submissions, a store, gated content or several editors, the per-seat pricing and the plugin stitching start to work against it, and WordPress becomes the cheaper and more portable option.

Can you self-host a Framer site?

No. Framer’s help centre states that published sites can’t be exported as standalone HTML, because features like image optimisation run on Framer’s infrastructure. Third-party exporters capture the rendered page, and in my experience they don’t carry stateful code components across cleanly. Leaving Framer means rebuilding.

Does Framer have a CMS?

Yes, with a caveat. Framer’s CMS collections handle repeating content that gets its own pages, such as blog posts or case studies. Page content, like a homepage headline or a metric, lives in component property controls inside the design file, which means it isn’t queryable or exportable the way a WordPress database is.

Do you need a developer to build in Framer?

Not for a page you can draw on the canvas. For anything with custom interaction, like the scroll-scrubbed timeline and mega menus in this build, someone has to write React code components, and Framer’s runtime has quirks (file extensions in imports, empty-array props, canvas media queries) that cost real hours the first time through.

Can a marketer edit a Framer site as easily as a WordPress site?

In this test, yes on both. Framer exposes every control in the right-hand panel, and the Divi build exposes every field in the Visual Builder panel, so a marketer edits a headline the same way on either. Divi adds layout changes on top, and WordPress adds the ability to hire almost anyone to work on the site later.

Since writing this I built the same design six more times inside WordPress itself, in Divi, GeneratePress, Elementor, Astra, Kadence and the block editor. Read the six-way WordPress theme comparison.

Want results like these?

Let's scope your project and put a real number on it.