Layout ❺
Create dynamic layouts in your Webflow-hosted site
Last updated
Was this helpful?
Create dynamic layouts in your Webflow-hosted site
Last updated
Was this helpful?
Webflow is great at designing static pages but its CMS layouts come with inherent structural limitations that can be difficult to work around.
100 collection items limit in a list
5 nested collection items in a nested list
"closed" lists, i.e. no built in support for inserting static content in with your dynamic content
no CMS support for UX's like tabs
SA5 Layout was designed to make complex layouts much easier by allowing elements to be moved automatically after the page has loaded, and we do this with a very versatile item / slot tagging approach.
In the broadest sense tag any container element ( e.g. a DIV ) as a slot, and tag any elements as items to be put into that slot, and SA5's Layout engine will reorganize your entire page according to those rules.
Here is a exceptionally simple example of how elements can be targeted to containers, and re-organized on page load. The wfu-layout-target attribute is used to match and identify the wfu-layout container, and the element is moved.
This technique can expanded in many ways;
Use CMS custom attribute binding and slugs to dynamically define containers, for example country groupings, or product category groupings.
Use CMS custom attribute binding and slugs to dynamically define and target your items to those containers.
Use namespaces to avoid naming conflicts in complex layout builds.
Make a tabs element a layout container, and tabs will be automatically created.
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.
Combine collection lists, even from different collection sources
Handle complex layout requirements that would typically require a large number of collection lists
e.g. events into a 31-slot month calendar view
Overcome nested-item limits in collection lists
Push static elements into a collection list
Group elements on your page under grouping headings
e.g. a glossary of terms and A-Z groupings
Build hierarchical site navigations
CMS-bound tabs;
Create tabs dynamically from a collection list
Create dynamic, nested tab arrangements
e.g. country level tabs containing city level tabs, from CMS data
A layout container is container element
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.
Optional. This is used to namespace container names and avoid conflicts when there is a possibility of duplication. Recommended when wfu-layout is bound to a CMS slug.
wfu-layout-ns = ( layout container namespace )
For complex nested layouts, the wfu-layout is often bound to a CMS item slug and in a complex page layout there is a possibility of naming conflicts. To prevent conflicts, you can also define a namespace.
When a layout container has a namespace specified, it will only accept layout items which match both the container name and the namespace attributes.
Optional. Allows you to use specialized handlers, which e.g. create tabs
wfu-layout-handler = ( handler type )
auto ( default ) - select the appropriate handler for the element, based on the element you've applied the layout attribute to.
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
Optional. If desired, you can specify how the container is initialized before loading.
wfu-layout-init = ( setting )
none ( default ) - do nothing
clear - clear the contents / tabs / slides before layout
The primary reason for this is that in the designer, you may want to use placeholder content inside of your container just to facilitate layout and design work. That content may not be relevant to the published page, so you can have it cleared automatically if you prefer.
wfu-preload
visible ( default ) - keep the element visible
hidden - completely hidden from view
invisible - takes up space but otherwise not visible
wfu-layout-target = ( layout container name )
Identifies the container this element should be moved to.
wfu-layout-ns ( 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-ns with an arbitrary identifier to isolate these areas and prevent namespace conflicts or overlaps.
First, add the library as detailed in Quick Start.
See above for details.
