How I added custom-designed blog layouts to a Webflow CMS blog
Most Webflow blogs eventually hit the same limitation:
everything starts looking identical.
You have a CMS collection, a RichText field, maybe a cover image, and every article follows the same structure. That works until someone wants a post that behaves more like a custom landing page than a normal article.
I ran into this on a recent project.
The client already had a Webflow site with a CMS-powered blog section. Their existing posts used a standard RichText layout: mostly text, some images, nothing unusual.
Then they wanted to publish a highly designed editorial-style article.
Not just a prettier blog post.
A completely different layout.
The design required things like:
- multi-column sections
- styled cards
- decorative borders
- highlight panels
- custom spacing systems
- reusable content blocks
- shifting visual hierarchy across the page
The problem was straightforward: Webflow RichText is not built for that kind of layout flexibility.
So the real question became:
How do you create a completely custom-designed blog post without rebuilding the entire blog system?
Why Webflow RichText was not enough
Webflow’s RichText field is fine for standard publishing workflows.
But once the layout gets ambitious, you start fighting the editor instead of using it.
The main limitations show up quickly:
- nested layouts are awkward
- advanced grids do not map cleanly
- section-specific styling becomes brittle
- reusable custom components are hard to manage
- one article cannot easily diverge from another structurally
You can force some of this through embeds inside RichText, but that becomes messy to maintain very quickly.
For this project, the constraints were:
- existing blog posts had to remain untouched
- only selected posts needed custom layouts
- future custom layouts should still be possible
- the solution had to stay manageable inside Webflow
That ruled out trying to make RichText do something it was never designed to do.
The approach
Instead of coupling content and layout to one RichText field, I separated the post content from the layout type.
I added a new field to the blog CMS collection:
blog_layout
Possible values looked like this:
normal
blog-design1
blog-design2
All existing posts stayed on:
normal
Then inside the CMS template page, I used conditional visibility:
- if
blog_layout == normal, show the default RichText section - if
blog_layout == blog-design1, show a custom embed layout - if
blog_layout == blog-design2, show another custom layout
That turned the CMS into a lightweight layout-switching system without breaking the existing publishing flow.
The interesting part: custom HTML layouts
For the specially designed article, I used Webflow’s custom embed component and wrote the article body directly in HTML.
Not a full HTML document.
Just the content section needed for that post.
<section class="feature-hero">
<div class="container">
<h1>The Future of Connected Infrastructure</h1>
<p>Intro content here...</p>
</div>
</section>
<section class="insight-grid">
<div class="card">...</div>
<div class="card">...</div>
</section>
The styling lived either in global styles or alongside the embed, depending on what made sense for the page.
That gave the design team a way to implement the exact layout they wanted instead of approximating it through RichText hacks.
Why this worked
The main advantage was flexibility.
Once the pattern existed, the client could create entirely different visual experiences for selected posts without affecting the rest of the blog.
That opened the door for things like:
- editorial-style long-form articles
- interactive case studies
- timeline-based stories
- campaign landing pages
- product showcase pages
- event recap layouts
All of it still lived inside the existing Webflow CMS setup.
No migration.
No rebuild of the blog architecture.
No external CMS.
The tradeoff
This approach does reduce editor flexibility for non-technical users.
For regular blog posts, editors can keep using RichText normally.
For custom-designed posts, the situation changes:
- the content lives as HTML
- structure and styling are tightly connected
- editing safely requires at least some technical understanding
So this works best when:
- custom-designed posts are occasional
- a developer handles publishing
- or the client has someone technical internally
If every article needs a fully modular visual builder, this starts to break down. At that point, a headless CMS is usually the cleaner long-term decision.
Alternatives I considered
1. Forcing everything through RichText
This can work for minor styling tweaks.
It is a bad fit for complex layouts.
Eventually you end up with fragile hacks that are hard to maintain and easy to break.
2. Creating separate static pages
This works at first, but it creates a different maintenance problem.
You lose the consistency of the CMS workflow and start duplicating blog logic for no real gain.
3. Moving to a headless CMS
Tools like Sanity, Contentful, or Strapi would absolutely provide a cleaner structured-content model for this kind of requirement.
But for this project, that would have been overkill.
The client already had an established Webflow setup and only needed occasional custom-designed articles. Layout-based conditional rendering was the most pragmatic solution.
Final thoughts
What I liked about this approach is that it preserved the parts that were already working:
- the existing CMS
- existing blog URLs
- existing SEO structure
- the familiar editorial workflow
While still creating a controlled escape hatch for the posts that needed something more custom.
Sometimes the right answer is not replacing the system.
Sometimes it is building a clean boundary around the limitation and giving yourself one deliberate way around it.