Trick: Bestimmte Webflow CMS Elemente größer / kleiner machen

Ich zeige dir einen Trick, wie du die Größe von CMS-Elementen über einen Schalter (Toggle) kontrollieren kannst und damit deinen Kunden mehr Freiheit in der Darstellung von CMS Kollektionen in Webflow geben kannst. Bei mir ist es schon häufiger vorgekommen, dass ich bestimmte Elemente z.B. in einem CMS Bilder-Grid oder einer Blog Teaser Liste in ihrer Größe bzw. in ihrem Design verändern wollte. Das ist so direkt im Webflow Designer nicht möglich, da hier nur jeder erste, letzte oder gerade und ungerade CMS Element gleichzeitig angesprochen werden können. Mit ein bisschen Custom jQuery Code ist dieses Problem aber schnell gelöst und du kannst beliebigem Elemente innerhalb einer Collection Liste im Design verändern. In meinem Beispiel hat jedes CMS Element hat einen Toggle "medium", "large" und "align bottom". Sobald einer dieser Optionen aktiv ist, wird per custom code eine Klasse zum Element "grid-item" hinzugefügt, welches die Größe des Elements bzw. das alignment verändert. Die Klassen und Größen der Kacheln können in dem versteckten Grid unter der CMS Collection verändert werden. Damit es funktioniert, muss der jQuery Custom Code hinzugefügt werden. Das Ergebnis ist erst auf der Live Seite zu sehen.