Building an Advanced Layout in Webflow using Finsweet CMS Library

If you're looking to create a unique and custom layout inside a dynamic list on your Webflow website, the Finsweet CMS Library is a powerful tool to achieve that. In this tutorial, we'll explore how to use the add classes component of the Finsweet CMS Library to create a totally different layout within a dynamic list on a Webflow site.

If you're new to using the Finsweet CMS Library, it's recommended to first check out the example one tutorial before proceeding with this advanced example. Example two will delve into how to add a custom layout within the dynamic list using the add classes component.

Normal vs. Custom Dynamic List Layout

At the outset, you'll have a normal dynamic list integrated into the page, displaying the default layout. This could be a simple list of items fetched from the Webflow CMS. The goal is to transform this dynamic list into a unique and unconventional layout, like the one shown in the example.

Using Add-on Classes

To achieve this, you'll be utilizing the "add classes" feature of the Finsweet CMS Library. This involves creating custom arrays of classes to be added to every fourth item within the dynamic list. These classes will alter the layout and appearance of the items they are applied to.

Defining Four Distinct Arrays

We start by defining four distinct arrays of different classes to be added to every fourth item in the dynamic list. These arrays include:

1. Collection list item add classes with the add-on class of 2/3
2. Collection list item add classes one third
3. Collection list item one third
4. Collection list item add classes 2/3

Additionally, we'll be applying item content add classes with an add-on class of "sticky" to add further customization to the layout.

Implementing Custom Code

The next step involves implementing custom JavaScript code to add the defined classes to the dynamic list items in the desired frequency and arrangement.

Integration of Finsweet CMS Library Script

Before the closing body tag of the Webflow site, the Finsweet CMS Library script is included. This initiates a new instance of the library and targets the collection list, storing it in a variable called projectsGrid.

Adding Class Arrays to Every Fourth Item

Four unique arrays of classes are created and added to every fourth item within the dynamic list. These arrays are designed to bring about the specific layout changes defined earlier. They are set to start at different intervals within the list to ensure a diverse and engaging layout.

Step-by-Step Custom Code Walkthrough

Let's break down the custom code utilized in creating the advanced layout within the dynamic list.

Defining Two Thirds First Array

The first array, named "two-thirds first," creates a two-thirds size layout for the first item. It targets the collection list item to add the "2/3" class and adds the "sticky" class to the item content. This is how the initial unique layout structure is established.

Frequency and Start Setting

Each array is set to have a frequency of four, indicating that the defined classes will be added to every fourth item in the list. The start interval for each array ensures that the classes are added to different sets of items, creating a varied layout throughout the dynamic list.

Optimization and Flexibility

The custom code is showcased in a detailed manner to highlight the flexibility and potential for optimization. It's demonstrated how the same array can be used with different start and frequency settings to achieve diverse layouts without duplicating the code.

Streamlining the Code

For those interested in code optimization, it's illustrated how the creation of multiple arrays can be streamlined to make the implementation more efficient. By reusing the same array and adjusting the start and frequency settings, a cleaner and more concise code structure can be achieved without sacrificing the layout's uniqueness.

Conclusion

The Finsweet CMS Library coupled with the add classes component empowers Webflow users to create complex and captivating layouts within dynamic lists. This serves as a prime example of the endless possibilities available for creating intricate and personalized designs using Webflow and the Finsweet CMS Library.

By understanding and applying the concepts outlined in this tutorial, users can embark on their journey of creating unique layout structures, interactions, and more within their Webflow projects. The ability to leverage custom JavaScript code to enhance the visual and functional aspects of a website opens up a world of creative opportunities.

This advanced example demonstrates just a fraction of what can be accomplished with the Finsweet CMS Library and Webflow. Feel free to explore and experiment with similar techniques to achieve your own innovative and visually stunning layouts. Don't hesitate to share your creations with the community to inspire and showcase the potential of the tools and techniques available within the Webflow ecosystem.