Webflow Layout Techniques

Creating Variable Layout Options, per Collection Item

Overview
Responsive Layout Techniques
Intro
102
Element Layouts
Aspect Ratio
Int
201
Responsive Image Annotations
Int
6:50
202
Collection List Alternating Item Layouts
Int
4:32
601
Collection Page & Collection List Layouts
Collection List Card Layouts
Int
4:32
601
Creating Variable Layout Options, per Collection Item
Int
11:46
602
Random List Items on Every Page Refresh
Intro
10:00
603
Variable Collection Item Sizes in a Grid Layout
Int
603
Limit Collection List Items by Breakpoint
Intro
10:00
604
Hide Collection List on Empty, or Item Qty
Intro
605
Responsive Pagination
Intro
605
Masonry Grid Layouts
Intro
607
Glossary w/ Letter Groupings
Intro
612
Master-Detail Layouts
Master-Detail Layouts
Intro
710
CMS-Driven Expando
Intro
19:42
714
CMS-Driven Modals
Intro
715
Special Layouts
Creating Leader Lines
Int
5:54
821
Photo Gallery Layouts
Int
821
Column Layouts
Int
822
Text Layouts
Int
823
Checkerboard Grid Styling
Int
824
Advanced Techniques
Breakpoints
Adv
901
No items found.

The purpose of the CMS and Collection Pages in Webflow is to support large sets of same-shaped data. Recipes. Blog posts. Employee bios. Products. All of these pretty much contain the same shape of content and use the same basic layout.

Some types of pages such as a project portfolio are not as easy to fit into Webflow's CMS model because you may have very different type of information that you want to show for each project, and in a different arrangement.

If you have only a few projects, static pages is your best bet, and Webflow recently ( 2023-Q2 ) increased the number you can have to 150 static pages per site.

However if you have a lot of projects, or really want them in the CMS for other reasons, you can make heavy use of conditional visibility and rich text fields to create more versatile layouts.

This video and the cloneable demonstrate a way to manageably create 4 or 5 different layouts for a Collection Page, which will switch depending on a defined item type. In the sample of a project portfolio, think video project, website project, product design project, branding project...

Note that even though I designed this technique for a client website, I use it very rarely. Basic conditional visibility and a well-thought choice of CMS fields will solve most of your issues.

Resources

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.