Webflow Tutorials,
Anleitungen und Tipps

Ein magnetischer Video Play Button der on hover erscheint und den Mauszeiger verfolgt. Bei Klick öffnet sich dann die Lightbox mit dem Video.

In diesem Blogbeitrag stelle ich euch 11 Agentur Websites vor, die mit Webflow realisiert wurden.

Webflow hat auf der diesjährigen No-Code Konferenz mehrere große neue Updates für das Jahr 2022 vorgestellt. Ich fasse für dich die wichtigsten Punkte nochmal zusammen.

Mit diesem jQuery Code kannst du in Webflow super einfach die aktuelle Jahreszahl zu deinem Copyright hinzufügen. Der Zeitstempel aktualisiert sich zum Jahresanfang automatisch.

Zehn tolle Webflow Slider zum Klonen. Wirf einen Blick auf meine zehn kostenfreien Favoriten und verwende sie in deinen Webflow Projekten.

Wir bauen zusammen eine dezente Scroll-Into-View Animation, welche Teaser Bilder rein animiert, sobald sie in den sichtbaren Bereich des Seitenbesuchers kommen.

Ein Trick, wie du die Größe von Webflow CMS-Elementen über einen Schalter (Toggle) kontrollieren kannst. Damit lässt sich das Design einer beliebigen Box innerhalb deiner Kollektions-Liste komplett verändern.

Webflow oder Squarespace - welches Tool ist der bessere Website Builder für deine Zwecke? Finde es heraus: Im Webflow vs. Squarespace Vergleich.

Wir setzen zusammen ein umfangreiches Case Study Projekt in Webflow um. Ich gehe für dich Schritt für Schritt das Layout durch. Du kannst den Aufbau gerne als Inspiration für dein Portfolio verwenden.

Mit diesem Custom Code kannst du in Webflow ganz einfach automatisch ein Pfeil Icon zu jedem Link hinzufügen. Das Symbol wächst sogar je nach Größe der Headline oder des Fließtextes mit.

Lerne Schritt für Schritt meinen responsive Design Prozess in Webflow kennen. Wir gehen zusammen eine komplette Unterseite durch damit das Layout auch auf Tablets und mobilen Endgeräten gut aussieht.

Eine Sammlung mit 15 Button und coolen Hover-Effekten für dich kostenfrei zum Kopieren bzw. Klonen in dein Webflow Projekt. Lass dich inspirieren!

Wir gehen zusammen mein SEO-Tipps durch um deine Webflow Website und auch die Seiten deiner Kunden fit für Suchmaschinen zu machen.

In dieser Anleitung zeige ich dir, wie du einen bestehenden Blog mit einer CSV Datei automatisiert zu Webflow migrieren kannst und anschließend alle nötigen CMS Felder in Webflow anlegst.

Einen kurzer Überblick, wie aus der Sicht eines Kunden bzw. Teammitglied über den Webflow Editor eine Website und CMS-Inhalte bearbeitet werden können.

Ein Splitscreen-Design passend für dein Portfolio, bei dem links die Texte durch scrollen und rechts die Projektbilder sticky immer im Viewport bleiben und sich je nach Projekt-Teaser und Scroll-Position austauschen.

Die Webflow Slideshow-Komponente kannst du in wenigen Schritten mit einer eigenen Animation versehen. In dieser Anleitung schauen wir uns das anhand einer Autoplay-Galerie mal genauer an.

Schritt für Schritt Prozess, wie ich das Layout einer Website Unterseite von einem realen Kundenauftrag in Webflow umsetze.

Wir bauen zusammen in Webflow eine 3D Scroll-Animation, mit der du während des Scrollens ein Tablet langsam zum Betrachter hin rotieren lassen kannst.

Ich habe für dich ein paar kostenlose iPhone und iPad Mockups vorbereitet, die du ganz einfach in dein Webflow Projekt kopieren und per Klick anpassen kannst.

Lerne wie du eine Collage aus vielen Bildern während des scrollens ran oder raus zoomen kannst. Das Ganze nutze ich ganz oben in einer meiner Portfolio Case Studies.

In diesem Webflow Tutorial bauen wir zusammen ein Foto-Magnet Text Menü. Ein Bild wird zuerst mit einem Hover-Effekt eingeblendet und verfolgt dann den Mauszeiger.

In diesem Webflow vs. WordPress Vergleich werden wir uns beide CMS Systeme genauer ansehen und Funktionen sowie Vor- und Nachteile gegenüberstellen.

Wie du die standard Webflow Navigations-Komponente auf deine Bedürfnisse anpasst und eine vollflächiges Menü inklusive eigener Animation erstellst.

In diesem Beitrag erkläre ich dir, wie die Webflow Preise aufgebaut sind und was eine Website im Vergleich bei Webflow am Ende des Tages dich und/oder deine KundInnen kostet.

Der Kreis bewegt sich magnetisch mit dem Mauszeiger und dient dabei als Maske, um ein drunterliegendes Bild anzuzeigen. Ein Bisschen Custom-Code ist nötig.

Lerne wie du in wenigen Schritten einen Schriftzug oder eine ganze Headline an das Scrolling anbinden kannst, um die einzelnen Buchstaben während dem scrollen zu animieren

Ist Webflow sicherer als Wordpress? Was sind Webflow-Schwachstellen und wann kann es zu Problemen mit deiner Website kommen? Genau damit habe ich mich eine Stunde beschäftigt und ein paar Learnings für dich festgehalten.

Webflow eignet sich hervorragend für die Erstellung von Portfolio Webseiten. Hier sind 10 echt coole Beispiele. Von Freelancer über Studio bis hin zur Agenturseite.

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.

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

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.

Lerne wie du super einfach über Google Fonts jede Menge Open Source Icons in dein Website Projekt integrieren kannst oder eigene Icon-Fonts für Webflow erstellst.

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

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

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.

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

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.

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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