I’m new to Webflow, and what I’d like to do is create a reusable layout for all static pages (and potentially CMS Collections pages as well).
As far as I can tell, since the
<body> element can’t be made into a component, one solution would be to create a wrapper div containing the entire page layout, make it a component, and apply it to each page.
Are there any other more elegant solutions?
Edit: I’ll add that I’m also interested in using CMS collections for entering editable content for each top-level page, but this seems to be quite complicated. It looks like the setup is geared more toward making static page portions editable based on user permissions. Do I have that right?
For static pages, Components or copy-paste.
Collection pages are by definition templates, which sounds more relevant to what you’re doing.
If you want to get complex, you could build a page-sized component with a bunch of properties, use it on your static pages and on your collection pages as well. There you’d bind some of the properties to your collection.
Seems massively complex to setup though and I’m not sure what the point would be.
Collection pages are not “top-level” pages .e.g.
/leek-soup, they can only be beneath a collection path, e.g.
/recipes/leek-soup. You could push a page full of CMS data into a static page via a collection list that is filtered to a single item “Leek Soup”, and the page-sized component could be useful here I guess.
User permissions aren’t really a thing unless you’re an Enterprise customer.
If you’re trying to make top level pages that represent CMS collection items, e.g.
/onion-soup, I’d personally go with a reverse proxy approach. Much more scaleable and admin-friendly, but requires good technical knowledge or someone to build it for you.
Thank you so much. Pretty much answers my questions.
Just to explain why I’m thinking this way: I’m coming to Webflow for my small business site having previously used a couple of flat-file static site generators (first Grav and then Astro). So I’m used to a system that builds pages using a base or master layout (and subcomponents), and populates parts of a page using pre-defined YAML properties (e.g. H1, Hero Image).
I was expecting to be able to do something similar in Webflow, but it looks like that’s more reserved for CMS pages, and possible but tricky to manage with static pages, as you explained.
Do I have that right?
Exactly right, and that makes perfect sense. Even on WP, designers often run into a similar issue where Webflow’s inability to do top-level pages from a CMS is… difficult to adjust to.
A number of my clients retain SEO experts, who cannot work with those limitation, so I reverse proxy everything and build a path remapping layer for them.
Most sites don’t need this, but if you ever do, I’ve some details here-
Thanks, I appreciate you helping me understand the limitations and the solution.
Since my choice to migrate to Webflow was about making my web maintenance tasks simpler (fingers crossed), I think I’ll just stick with Webflow’s limitations and adjust my expectations.