Ein schönes Grid Layout in Webflow bauen | Beginner Tutorial

In diesem Anfänger Webflow Tutorial bauen wir zusammen ein schönes Grid Layout. Gerade bei einem variablen magazinartigen Design kann man das CSS Grid sehr gut einsetzen und dank Webflow visuell aufbauen, ohne den komplizierten Code im Hintergrund schreiben zu müssen.
Das Blog Layout ist komplett an das Webflow CMS angebunden und steht dir als kostenloses Template in meinem Webflow Account zur Verfügung.
Als Responsive Lösung auf Desktop habe ich die Wizardry Methode von Timothy Ricks eingebunden. Auf Tablet und Mobile skaliert das Design natürlich auch wunderbar runter.

Webflow Grid Design Animation

In diesem zweiten Teil animieren wir das Grid Layout direkt in Webflow. Wir legen eine 3D Page-Load Animation für den Schriftzug an, animieren die Linien und den Rand des Grids und geben den Bildern einen netten Effekt, sobald sie in den sichtbaren Bereich des Seitenbesuchers scrollen.
Für den Bild-Hover Effekt habe ich ein wenig eigenen CSS Code geschrieben.
Du findest das komplette Projekt kostenlos als Cloneable in meinem Webflow Account.