Trick: Change the Size of Webflow CMS Elements via a Toggle

It has often happened to me that I wanted to change the size or design of certain elements, e.g. in a CMS image grid or a blog teaser list. This is not possible directly in Webflow Designer, as only every first, last or even and odd CMS element can be addressed at the same time. With a bit of custom jQuery code, however, this problem is quickly solved and you can change any elements within a collection list in the design.

In my example, every CMS element has a “medium”, “large” and “align bottom” toggle. As soon as one of these options is active, custom code is used to add a class to the “grid-item” element, which changes the size of the element or the alignment. The classes and sizes of the tiles can be changed in the hidden grid under the CMS collection.
For it to work, the jQuery custom code must be added. The result can only be seen on the live page.