Links

Layout ❺🧪

Create dynamic layouts in your Webflow-hosted site
BETA. This library is released in BETA. Questions or problems should be directed to the forum, link above.
Webflow is great at creating static pages but the layouts come with inherent structural limitations that are sometimes difficult to work around.
SA5 Layout was designed to make complex layouts much easier by allowing elements to be moved after the page has loaded.
SA5 Layout is a very flexible library. Because it has such a wide range of use cases, it can be difficult to understand its massive range of applications. Spend some time in the docs and demos and feel free to ask questions in the forum.

Use Cases

  • Combine collection lists
  • Handle complex layout requirements that would typically require a large number of collection lists
    • e.g. a calendar view
  • Overcome nested-item limits in collection lists
  • Push static elements into a collection list
  • Group elements on your page under grouping headings
  • Build hierarchical site navigations
CMS-bound tabs;
  • Create tabs dynamically from a collection list
  • Create dynamic, nested tabs e.g. country level and a city level, from CMS data

Features

  • Tag any DIV as a named container element with a custom attribute
  • Tag any other elements to be moved into that DIV on page load
  • Use CMS-bound custom attributes to create CMS-driven groupings and layouts

Demonstration

Usage - Layout Container

I want this DIV / tabs element to be the target container for layout operations

wfu-layout = ( layout container name )
layout container name can be any unique arbitrary string to identify that container. It can also be bound to a collection list slug for more dynamic, powerful layouts.

I want to restrict layouts to a zone ( advanced )

wfu-layout-zone ( optional ) = ( layout container namespace )
Optional. Recommended when wfu-layout is bound to a CMS slug.
For complex nested layouts, the wfu-layout is often bound to a CMS item slug. To prevent conflicts, you can also create a namespace in the form of a zone.
When a layout container has a zone specified, it will only accept layout items which match both the container name and the zone attributes.

I want to use the following layout handler

wfu-layout-handler (optional)
  • auto (default) - select the appropriate handler for the element
  • default - do not use a handler, this is the case for standard DIV layouts
  • tabs - must be placed on a tabs outer element
  • slider - must be placed on a slider outer element

Initialize the container (optional)

wfu-layout-init (optional)
  • none (default) - do nothing
  • clear - clear the contents / tabs / slides before layout

Prior to loading the layout, I want the container to appear as...

wfu-preload
  • visible ( default ) - keep the element visible
  • hidden - completely hidden from view
  • invisible - takes up space but otherwise not visible

Usage - Layout Item

Target the item

wfu-layout-target = ( layout container name )
Identifies the container this element should be moved to.

I want to restrict layouts to a zone ( advanced )

wfu-layout-zone ( optional ) = ( layout container namespace )
Optional. Recommended when wfu-layout is bound to a CMS slug.
For complex nested layouts, the wfu-layout is often bound to a CMS item slug. To prevent conflicts, you can also create a namespace in the form of a zone.
When a layout item has a zone specified, it will only be moved to zones which match both the container name and the zone attributes.
NAMESPACES
In Webflow, wfu-layout is often easily used with CMS data-bound attributes and item slugs. Since this can create multiple targets with the same name on a page, you can use wfu-layout-zone with an arbitrary identifier to isolate these areas and prevent namespace conflicts or overlaps.

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes as desired

See above for details.
Last modified 18d ago