I am having a VERY difficult time building case studies using CMS.
The idea is great, but my plan has only 30 fields allowed, and because every case study is different, I’d need about 8 to 12 sections, each with its own title, text, images, etc. So a lot more than 30 fields.
Am I not utilizing CMS properly?
Am I able to add “non-collection” section to a collection page?
Is there a better way?
I tried building a separate page for a case study, but the issue there is that I can’t use collection lists and link items to a non-collection page.
Yes the CMS is good for well-defined, narrowly-shaped data.
What you’re trying to do sounds a bit wider that it is designed for, in terms of data-shape variation between your items.
You have a few approaches you can go with.
USE STATIC PAGES, AND REFERENCE
If your number of case studies is relatively low, just use static pages. You can still have a CMS list referencing them, but in it you’d put a URL field to support your link to the static page.
USE RICH TEXT FIELDS, WITH EXTENSIONS
Rich text fields are the most versatile field format. It’s not perfect for structured sections, but you can do a tremendous amount with them and some creative styling. You also have the ability to do custom HTML embeds within your rich text, which gives you unlimited options if you can write HTML. If you add Finsweet’s Powerful Rich Text feature you can write that HTML directly into your copy, and embed reusable “components” as well.
Meaning, they store all of that in a CMS Rich Text Field. The CMS RTF allows you to add some styling to it, like adding headers, bolding text, and so on. You may also add images, videos, etc…
This is what they’ve done.
You can also see that the main title of the case study is nothing more than a “Header Element” of type “H1” and is going to be populated from the CMS as well:
So what they’ve done is broken down the CMS Template Page into major sections that the CMS populates.
Here’s their basic structure:
Case study title.
Sub title text.
Customer stats.
Hero image (offset on desktop).
Customer tags.
Case study user quote.
Case study user quote author.
Rich Text block (content of the case study).
Explore more case study stories.
A slider widget.
That’s about 10 CMS fields. They use more, because there are more elements on the page than I’ve outlined, but that means they have 20 fields left for them.
If you look at anyone of those case studies you’ll see that exact same pattern. This is how they create them without using up all of their CMS fields.
One of the other defining characteristics of their case studies are the theme (color) changes between each.
That may lead to some confusion as traditionally you cannot change the design based on different CMS items - that is, until very recently.
I suspect they are taking advantage of a new-ish feature they’ve released to do just that:
One of its standout abilities is to control CSS from your CMS:
“Customize page styling based on a field value, using custom CSS. For example, different categories of your blog can look different by binding a Category field to an attribute, then using an attribute selector in your CSS like div[data-category]. #IYKYK”
It strongly suggests that they are doing just that.
Anywho…
You are on the correct path. I’d recommend diving into the pattern that Webflow themself uses and do the same.
Thank you @memetican !
I’m going to try the embed code in Rich Text for creating columns or a grid.
And I think the URL idea in the collection list will solve my other issue.