CMS for Case Studies

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.

Any help is welcome.

Thank you!
Roberto


Here is my public share link: Webflow - Roberto-Pocas

Hey Roberto, welcome to the forum.

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.

1 Like

Welcome @Roberto_Pocas_Leitao :wave:

You’re very close.

What it sounds like you’re missing is the use of a CMS Rich Text Field and some good structure.

A great way to figure out how to build these things is by looking at examples, and the best example to look at is Webflow itself.

Here is their case study page:

To me, it’s very obvious to me that this specific page is a static page, with a “Collection List Element” added to it, linking to CMS Template Pages.

Here’s why I believe this to be the case…

I reviewed a few of the case study pages and it’s obvious to me they are using the CMS to build this.

How do I know?

They all have the same basic layout with some deviations stored within each CMS item.

For example, checkout this case study:

You can see they are using Rich Text for almost the entire case study. It starts just below the title:

And extends all the way to the bottom of the page just before the “Explore more Enterprise stories” section linking you out to other case studies.

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.

Hope that helps!

3 Likes

That’s awesome @ChrisDrit ! Thank you so much for a very thorough explanation.
I can see the light now with Rich Text.

It seems like I may be able to embed some code as well. Maybe to create a grid or columns within Rich Text?

Thank you!

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.

I appreciate the help.

Cheers!