Tutorials

Die neuesten Webflow Webdesign-Tipps, -Tutorials, -Einblicke und -Ressourcen

10 beeindruckende Webflow Website Animationen (2021)
Inspiration
April 2021

Level:

10 beeindruckende Webflow Website Animationen (2021)

Heute will ich euch zehn beeindruckende Webflow Websites vorstellen, die durch echt coole Animationen überzeugen. Mit dabei sind One Pager, Agentur Website, Unternehmens-Präsenz, Landingpages und Portfolios.

E-Mail Adresse in Webflow verschlüsseln
Designer
April 2021

Level:

Einfach 👌

E-Mail Adresse in Webflow verschlüsseln

Ich zeige dir einen einfachen Weg, wie du in Webflow verlinkte E-Mail Adressen verschlüsseln kannst.

Cooler Website Bild-Zoom Effekt (Spannung aufbauen)
Animation
April 2021

Level:

Fortgeschritten 👍

Cooler Website Bild-Zoom Effekt (Spannung aufbauen)

Bild ran zoomen on Button press: Sobald man mit der Maus in einen bestimmten Bereich kommt, verschwindet der Cursor und wird durch ein Element ersetzt, welches den Cursor verfolgt und auf die Interaktion aufmerksam macht.

Icons in Webflow mit Google Fonts einbinden
Designer
April 2021

Level:

Einfach 👌

Icons in Webflow mit Google Fonts einbinden

Lerne wie du super einfach über Google Fonts jede Menge Open Source Icons in dein Website Projekt integrieren kannst.

Webflow CMS einfach erklärt in unter 10 Min (Content Management System)
Webflow CMS
April 2021

Level:

Einfach 👌

Webflow CMS einfach erklärt in unter 10 Min (Content Management System)

Im Schnelldurchlauf zeige ich dir anhand eines Anwendungsbeispiels, wie das Webflow CMS grundlegend funktioniert und wie es sich von anderen CMS unterscheidet.

Das Webflow CMS: Wann, wie und warum nutzen
Webflow CMS
April 2021

Level:

Einfach 👌

Das Webflow CMS: Wann, wie und warum nutzen

Dieses Video gibt dir eine Übersicht, was du mit dem Webflow CMS machen kannst und bei welchen Kundenaufträgen ich es schon eingesetzt habe (Beispiele).

Einen Button Text on hover austauschen
Animation
April 2021

Level:

Fortgeschritten 👍

Einen Button Text on hover austauschen

In diesem Tutorial zeige ich dir zwei Wege, wie du einen Button oder Link Text in Webflow bei einem Hover Effekt austauschen kannst.

Dropdown Rand bzw. Rahmen (Border) in Webflow animieren
Animation
April 2021

Level:

Fortgeschritten 👍

Dropdown Rand bzw. Rahmen (Border) in Webflow animieren

Ich zeige dir Schritt für Schritt wie man in Webflow einen Rand bzw. Rahmen (Border) animiert?

Die Zukunft von Website Animationen? Das kann Webflow!
Animation
April 2021

Level:

Einfach 👌

Die Zukunft von Website Animationen? Das kann Webflow!

Schau dir an was mit Webflow an Scroll-Animationen und Interaktionen alles so möglich ist und welche coolen Animationen andere Webdesigner damit schon erstellt haben.

Konfetti Website Animation in dein Webflow Projekt integrieren
Animation
April 2021

Level:

Fortgeschritten 👍

Konfetti Website Animation in dein Webflow Projekt integrieren

Lass Konfetti in deiner Website explodieren. Mit diesem JavaScript Code geht das super einfach.

Kaleidoskop Effekt in Webflow – Muster im Hintergrund bewegen
Animation
April 2021

Level:

Profi 💪

Kaleidoskop Effekt in Webflow – Muster im Hintergrund bewegen

Schau dir an wie man in Webflow ein Muster im Hintergrund in einem Kaleidoskop Stil während der Mausbewegung animiert und bewegt (on mouse movement) und dabei noch neue Pattern generiert.

Trick: Website Elemente schnell responsive machen
Designer
April 2021

Level:

Fortgeschritten 👍

Trick: Website Elemente schnell responsive machen

Eine Methode wie du im responsive Webdesign wahnsinnig schnell Elemente, Button und Typografie responsive machen kannst.

Fancy Button Text Animation
Animation
April 2021

Level:

Einfach 👌

Fancy Button Text Animation

Ein weiterer Button Effekt, welcher eigentlich zwei Text-Elemente benötigt. Ich zeige dir, wie du diesen mit einem Webflow Symbol extrem vereinfachen kannst.

Kreis der Mauszeiger verfolgt – Webflow Tutorial
Animation
April 2021

Level:

Fortgeschritten 👍

Kreis der Mauszeiger verfolgt – Webflow Tutorial

Schau dir an wie du in Webflow einen Kreis erstellst, der den Cursor in einem bestimmten Bereich oder auf der ganzen Seite verfolgt.

Symbole in Symbole kopieren – Komponenten in Webflow verschachteln
Designer
April 2021

Level:

Einfach 👌

Symbole in Symbole kopieren – Komponenten in Webflow verschachteln

Schau dir an wie du in Webflow Symbole in andere Symbole kopieren kannst und damit wunderbar verschachtelte Komponenten baust.

Eigene Website Page Load Animation in Webflow erstellen
Animation
April 2021

Level:

Fortgeschritten 👍

Eigene Website Page Load Animation in Webflow erstellen

Schau dir an wie du in Webflow eine eigene Seiten-Lade-Animation für deine Startseite baust. Damit kannst du Elemente nacheinander rein animieren und für den ersten Wow-Effekt sorgen.

Ein Mega Menü in Webflow erstellen – Dropdown Navigation
Navigation
April 2021

Level:

Fortgeschritten 👍

Ein Mega Menü in Webflow erstellen – Dropdown Navigation

Webdesign Tutorial wie du direkt in Webflow eine individuelle Navigation mit einem Dropdown Menü anlegst (Mega Menu).

Eigene Dropdown Navigations-Animation in Webflow erstellen - Mega Menü
Navigation
April 2021

Level:

Fortgeschritten 👍

Eigene Dropdown Navigations-Animation in Webflow erstellen - Mega Menü

Wir bauen eine individuelle Navigations-Dropdown-Animation (Mega Menü) welche on hover automatisch das dropdown öffnet und abgespielt wird.

Die beste mobile Website Navigation bauen (gute UX)
Navigation
April 2021

Level:

Einfach 👌

Die beste mobile Website Navigation bauen (gute UX)

Meinen Denk- und Arbeitsprozess, eine nutzerfreundliche Mobile Website Navigation zu erstellen, die NICHT im Header platziert ist und damit eine bessere User Experience liefert.

FAQ CMS Akkordeon erstellen – mit Lottie Animation
Webflow CMS
April 2021

Level:

Einfach 👌

FAQ CMS Akkordeon erstellen – mit Lottie Animation

In diesem Tutorial erstellen wir eine zweispaltige FAQ-Liste mit Inhalten aus dem Webflow CMS.

Hintergrundfarbe beim scrollen ändern – Scroll-Animation
Scroll-Animation
April 2021

Level:

Fortgeschritten 👍

Hintergrundfarbe beim scrollen ändern – Scroll-Animation

Schau dir an wie du während dem scrollen auf einer Website die Hintergrundfarbe einer Section änderst bzw. mit einem fade-in / fade-out Effekt ein und ausblendest.

Apple Card Scroll Animation mit Webflow bauen
Scroll-Animation
April 2021

Level:

Profi 💪

Apple Card Scroll Animation mit Webflow bauen

Wir bauen zusammen eine aufwändige Scroll-Animation, die auch auf der Apple-Card Website zu finden ist.

Button Hover-Effekt: Hintergrund links rein und rechts raus animieren
Animation
April 2021

Level:

Einfach 👌

Button Hover-Effekt: Hintergrund links rein und rechts raus animieren

In diesem Webflow Tutorial zeige ich dir einen weiteren coolen Button Hover-Effekt.

Button Zoom Hover Effekt
Animation
April 2021

Level:

Einfach 👌

Button Zoom Hover Effekt

Wie du in Webflow einen Button Zoom-In Hover-Effekt erstellen kannst.

Lottie Animation in eine Navigation einbinden (Burger Icon)
Animation
April 2021

Level:

Einfach 👌

Lottie Animation in eine Navigation einbinden (Burger Icon)

Wie du in Webflow Lottie-Animationen einbindest und bei einem Hamburger-Icon abspielst (Navigation).

Header in Webflow später rein animieren
Scroll-Animation
April 2021

Level:

Fortgeschritten 👍

Header in Webflow später rein animieren

Blende deinen Header bzw. deine Navigation aus und ein abhängig davon, bei welchem Bereich der Seitenbesucher gerade scrollt.

Webflow Symbole kennenlernen: Komponenten bauen und wiederverwenden
Designer
April 2021

Level:

Einfach 👌

Webflow Symbole kennenlernen: Komponenten bauen und wiederverwenden

Ein kompakter Überblick, was die Webflow Symbole sind und wie du sie intelligent in dein Website Projekt einsetzen kannst.

Button Hintergrund animieren – Webflow Hover-Effekt
Animation
April 2021

Level:

Einfach 👌

Button Hintergrund animieren – Webflow Hover-Effekt

Wie du den Hintergrund eines Buttons als Hover-Effekt einfach von links nach rechts animieren kannst.