Stream highlight: Creating multiple layouts for Webflow collection template pages

[@rosannemac]

Genius! Seriously, so creative. Thank you so very much for this. I'm officially a fan now.

[@mikedawgfive]

I was just trying to figure out how to do this with my portfolio collections. Very cool!

[@pixelgeek]

glad I could help 😁

[@catarinapereira493]

Thank you so much! 😉 Great work! Really creative solution!

[@micahsparks6104]

Perfect! Thanks my friend!

[@pixelgeek]

thanks for watching! :)

[@uilifecteau4841]

You should probably set a default layout that clients can change, to avoid the "hey, where's my post?" conversation :) Great video Nelson.

[@pixelgeek]

good idea :) another idea is to make the layout option field set to "required" in the collections manager.

[@hishamitani]

Hi! I was just thinking about this as well. I found a solution: 1. Create a layout field, start numbering from Layout 2 2. For your "base" layout, don't do anything, keep it as it is and set the "Conditional Visibility" on that div/section/container to filter based on your "Layout" Option Field. Add a conditional visibility filter to this this default section by: "Element is visible when..." 1st dropdown: "Layout" (or whatever you call that option field) 2nd dropdown: "Is Not Set" That way, when you don't have a layout set, it will default to your base design. When a layout is set, it will show whichever design is visible for that specific layout. Nelson, your advice is usually great and spot on but I disagree with your answer below :D. I work in B2B tech marketing where there aren't that many posts/collection items as in other industries most times; but even with this, going back through 500-1,500 posts in more mature companies and marking each with a layout "just because it's set to required" isn't efficient nor is it user-friendly. That's why I think the solution above provides a more balanced approach for already existing CMS collections, rather than ones that are being built from scratch.

[@VoyagesJapan]

AMAZING!!! Thank you!!!

[@joshua26271]

I just wanted to stop by and say I spent all day trying to do this, only to stumble on this video. Very thankful for you, and since it's pride month, give me a call and we can go on a date or somethin. Lol....jk...unlesss?

[@sebobastiseppobas]

Nice one!

[@pietrolago]

That's awesome guys, thanks! One question: When we use the "conditional visibility" feature, does that mean that the web browser won’t even render the elements that are hidden, or even with some elements not showing, they're still being loaded on the background?

[@aharmon]

I'd like to know the answer to this as well. If conditional visibility changes visibility: none, I think the browser skips rendering the section altogether. BUT don't quote me on that ;)

[@pietrolago]

@@aharmon yeah I think that’s probably what happens. At least, from what I can see, I’m using this feature quite heavily on a particular project and I’m not noticing any drop on speed in the live website...

[@RahulNagpal98]

while the elements are not displayed to the user, they still consume some resources as they are loaded by the browser. However, their impact on page load time and performance should be minimal compared to visible elements, especially if the hidden elements do not contain heavy content such as complex scripts.

[@Aotearoa-NZ]

Hey! I'm wanting to do a similar thing but with alternating layouts for collection lists. Could you make a vid on this?

[@darrenmmatthews]

I thought this was the perfect solution to a problem I was dealing with...but it is duplicating my H1's and H2's. Are there any rules I can apply to stop the hidden sections from being crawled?

[@Webflow]

This is true. Also, this is a very old stream and we suggest using the same layout for all collection items in the same collection. If you need to vary the layout a bit, we also suggest using the rich text field.

[@realguitarshredder]

I can't copy paste cause I have nested collections and those are not allowed in a single page. Any other tricks I can do something like this? I want to show the collections in various views, so if the user wants to see it in grid view it will come, horizontal etc. help please

[@NachoLoizaga]

Wow. I love you

[@julijaspat4477]

I was building a collection page according to this logic and couldn't continue, because webflow limits the amount of collection items you can have on a single page to 20. Nice way to find this out. What a waste of time.