CMS: Collection pages vs Static pages

Design help CMS
1

I suspect this isn’t possible, but I wanna know for sure: My portfolio will have between 5 to 15 projects. I have a CMS collection for each project and have styled up the page (link below).

Every project will have these core elements:

But not every page will look the same below. For example, maybe there will be 10 images instead of 2. Or maybe there will be GIFs and images. Or video. Or maybe text blocks and images. etc

I thought maybe I could copy elements out of the Collections page into a static page, but that doesn’t work: https://cdn.zappy.app/96f95018918bf2c42e4c905c89bbc09b.png

To the extent this explainer makes sense, how would I accomplish this? I worry there is “that’s not possible (without code)” and I’m to create 5-15 static pages.

Here is my public share link: Clockwise rebrand

2

Have you played with conditional visibility? For example, if the video field is empty, don’t display that element.

1 Like
3

I have a little bit of experience using that (mostly with switches), but that’d be designing it from the back-end. Is there another way to do that within the page?

Or is there a way to duplicate the page template and add to it?

4

Not really (duplicate the page template) unless you create another CMS Collection.

The power of CMS pages is that it’s one template populated with different data pulled from your CMS.

The built-in conditional visibility would help design it and account for the differences you mention. That’s the intent behind it, but it wouldn’t be driven by switches toggled from within the CMS.

It would be designed from the frontend based upon a field being populated or not.

Screen Shot 2023-03-25 at 10.05.36 AM
Screen Shot 2023-03-25 at 10.05.36 AM476×596 22.9 KB

Screen Shot 2023-03-25 at 10.09.40 AM
Screen Shot 2023-03-25 at 10.09.40 AM476×506 20 KB

Screen Shot 2023-03-25 at 10.09.52 AM

“Is Set” means if the field has a value, if it’s empty (“Is Not Set”), don’t display the elements this conditional visibility is attached to.

You’re not limited (much) by what you can apply conditional visibility to. Apply it to entire sections of the page if that’s what you want to do.

What you’re outlining deviates from how it’s normally approached to solve this problem.

Are there other reasons you haven’t mentioned that this wouldn’t work for you? If not, I’d encourage you to setup a test CMS and associated CMS template page, play around with it.

Good luck!

5

Hey Jon, here’s the approach I use.
If you’re creative it gives you a lot more flexibility in page layout variation than you’d expect.

6

OHHHHHHHHH that’s what that means! I had been using switches for this purpose. This is way easier!

Anyway, I think I have what I need. It could be as simple as using cond’l visibility for a few fields, or creating custom layouts like that insanely-eye opening video and tutorial (wow @memetican!).

Thanks both!

7

One thing to be careful of…

It’s easy to start making wide, sweeping changes. Like changing the entire page versus micro level changes - small sections, divs, elements, and so on.

This can potentially cause several problems that you need to be on the look out for.

Page size.

All of those changes live on the page and are downloaded to the visitors browser. They are only “hidden”, not removed from the web page. So you can very easily impact the speed of your site depending upon the amount of changes you include.

This can cause a poor user experience (slow page loading) and drop your rankings in Google.

Duplicate content.

Since the content lives on the page and is hidden, you’ve potentially introduced a lot of duplicate content on the same page. This can appear to search engines as “keyword stuffing” (along with a few other issues).

This can very easily effect your Google rankings.

Assets

All assets are still linked to on the page. For example, images. That said, Webflow rocks :raised_hands: , and they pro-actively stop the loading of images that are hidden (mostly). At times this has broken. Also, make sure to test other assets you load on the page as you may find some unexpected surprises.

This can cause a poor user experience (slow page loading) and drop your rankings in Google.

Unexpected outcomes.

I’ve mentioned a few common issues, but there are more. Much of the time it can cause a lot of wheel spinning and head scratching as to why things aren’t displayed or working as you’ve intended.

Another thing to think through as you build solutions like this.

In all cases I’ve seen first hand this effect search rankings (and user experience) when making a lot of wide, sweeping changes. Generally it’s a bad idea to go extreme with this.

So at the very least, just be aware of it as you work through your own solutions :+1:

2 Likes
8

Solid points and good things to look out for. Much obliged!

9

No problem. The things to watch out for are just because it’s technically possible, doesn’t mean you should be doing it. Good luck!

1 Like
10

Collection Pages:

Collection pages are dynamic webpages that are generated from a database of user reviews. They allow users to easily browse through a list of reviews and sort them according to their preferences.

Static Pages:

Static pages are webpages that are coded with HTML and CSS. They are created once and remain unchanged unless manually edited.

1 Like