SYGNAL UNIVERSITY

Webflow Layout Techniques

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

‍

How do you make that Collection List layout in the way you want?

This course is a growing collection of interesting layout techniques and solutions in Webflow.

  • Annotate images with precisely-positioned elements on top.
  • Create variable layout options for your clients, where each CMS item can choose how it should be presented.
  • Create advanced layout styling techniques like leader lines.
  • Organize text into magazine-style column.

‍

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.