Custom art directed blog post

I use Webflow’s CMS for all of my blog posts, but there are certain posts that I’d love to art direct for a more custom feel (and take advantage of custom layouts, like including comparison tables or grids. )

A) How would I organize this in the pages panel? Create a folder with the same CMS slug so it feels like it’s in the same area as everything else?

B) Can you create page templates outside of the CMS collection pages, or would these essentially be one-offs?

C) Is this completely asinine or have you tried this before?


Unfortunately, you’re rather limited here.

a) I’m pretty sure that’s not possible. You can name a page and a folder with the same slug, but a collection page and a folder are handled similarly from a path namespacing perspective.
b) No, you could use components [pka. symbols] however components and CMS content don’t mix particularly well yet.
c) Never! Always good to experiment with designs.

So here are a few approaches.

Just stick with core Webflow design, but when you want to get creative do that through the Collection and pages. Background textures, color schemes… all of that’s possible with CMS binding. If you want to go really nuts with font changes and such, you could even store a chunk of CSS inside of your collection, but you’d have to HTML decode it when you embed it in your page. Let me know if you want to do that, I have a script that handles that.

Build your creative pages in a separate folder, but you’ll never link to them directly.
You’ll also represent them in the CMS as an item, but the item will have a special field “Overlaid page” with a local path or full URL.
When that exists, you’ll basically cover your whole collection page in a big IFRAME, containing the target page, with whatever design and styling you’ve built it with.

Use your CMS only for “standard” pages, and build your special pages in a folder.
Like above, you’ll have an item representing those pages, at the official URL, but when they’re accessed you’ll redirect to the ACTUAL location of the static page in its folder.
That page will contain a small piece of script that rewrites the URL history, so that what the user sees in the browser bar is the URL they expect, as though it were a collection page.
You’ll see some URL rabbiting as it redirects, but it will happen decently fast, especially once it’s cached.

Here’s a demonstration of that mechanism path-rewriting mechanism;