Streaming live at 10am (PST)

Different order of fields in CMS Template Pages


#1

Hi,

I hope somebody can help with some advice on creating collections for support pages for a site I have already designed in Webflow. These pages will all have similar content but won’t necessarily be in the same order on each page. For example one page could be:-

• Headline
• Text
• Image
• Image
• Tip section

While another page could be:-

• Headline
• Image
• Video
• Text
• image

Is it possible to have these in a different order on each page?


Here is my public share link: LINK
(how to access public share link)


#2

I assume you’re talking about CMS Template pages.

You can. It requires duplicating some content, which depending on what your site is could be an issue or not. It would bean issue if there is a LOT of content and things like video players. But I bet you’re OK.

So make a section in your Template page and design your first layout. Duplicate the section and design your other layout. Call them layouts A and B, on sections A and B.

In your Collection settings, add an Option field, with the options Layout A and Layout B. Or, just add a checkbox that says “Alternate layout”. The former solution is more evolutive as you could have more than 2 layouts, so let’s go with the Option field.

Now assign layout A or B to your Collection Items.

Back to the Template page, select the Layout A section, add a Conditional Visibility in the Settings tab, that says “Show the section if layout Option is A”. On section B, you’ll do the opposite. Now you’ll only have 1 layout per page, but it will change depending on your choice in the Collection Item.

You don’t necessarily need to do that on complete sections, and prefer having duplicate sub elements instead and use the same technique to show/hide them. I have a blog where 1 article can be either a report, a gallery, a video piece etc… there’s just a bunch of CMS fields shown or hidden depending on some rules.

You can also use other rules for showing layout B or not, for example, “if there is no second image, then show section B” etc…


#3

Thanks very much Vincent! This is exactly what I needed to know.