Multiple nested Collections

This Webflow study solves the long-standing problem of the nesting multiple collections with unlimited collection items in one single page.

Client:
Public Showcase
Project Type:
Webflow Clonable
Date:
September 18, 2021

The nested collections feature, which is available by default in Webflow designer, is a powerful tool. You can place a collection inside a collection on every static page (e.g. display blog tags on the main blog page). Webflow has, however, provided this feature with two drastic limitations: (1) Nested collection items are limited to a maximum of 5 items. (2) Maximum one nested collection list per page.

An easy and lightweight way to nest unlimited collections with unlimited collection items on any single and dynamic page is to use a (simple) jQuery code snippet.

This solution is based on the jQuery .load() function - a simple way to fetch data from a server and place the returned HTML into a matching element.

This project ist clonabe in the Webflow Showcase and contains short documentation to start from scretch ;-).

Other

Works

My design work lives at the intersection of modernism & elegant simplicity. Placing emphasis on typography, color, and motion. — My process begins by visualizing an overall narrative for the project, making it impossible to ignore. — I incorporate interaction into my designs because you feel a connection when things move as you’d expect them to.

Smoothly Masonry
Webflow Clonable
Masking on Scroll
Webflow Clonable