Webflow SEO Checkliste (mehrere zusammengefasst)

Ein Effekt, welcher eine Sektion horizontal über den Screen scrollt und gleichzeitig Bilder hinter einem Fenster parallax bewegt. Ohne Custom Code!

Dieser CSS Code überschreibt das Standard-Design von Webflow, welches jedem Lightbox-Schließen-Button mitgegeben wird. Du kannst es mit deinem eigenen Icon versehen.

Zeige beim laden einer Seite das erste Element einer FAQ Liste standardmäßig geöffnet an.

Passe die Standard-Hintergrundfarbe des Browsers an, wenn Text markiert ist, und steuere diese mit deinen Webflow Variablen.

Dieser einfache Code, stoppt das Scrollen des Hintergrunds, wenn das Webflow mobile Menü geöffnet ist. Funktioniert auch auf Desktop.

Ein kreativer Effekt, der auch auf der Webflow Conf Website 2022 angewendet wurde. Die Elemente verschwinden automatisch on hover und tauchen wo anders wieder auf.

Passe Webflow Tabs mithilfe von Attributen so an, dass sie automatisch nach einer festgelegten Zeit zum nächsten Tab wechseln (mit animierter Tab-Bar).

Ein Accordeon mit einer großen Tabelle verwendet "overflow: hidden", während die Tabelle selbst "overflow: auto" nutzt, um sowohl horizontal als auch vertikal gescrollt werden zu können. Eigentlich funktioniert "position: sticky" innerhalb dieser Tabelle nicht mehr, mit dieser Code-Vorlage allerdings schon.

Showreelz ist ein kreativer Feed, der inspirierende und bemerkenswerte Designvideos präsentiert.

Wenn du mit zusätzlichem Custom Code in Webflow arbeitest, soll dieser auch manchmal nur bei einem bestimmten Breakpoint ausgegeben werden. Dieser Code hilft dir dabei.

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Wenn du mit horizontal scrollbaren Sektionen arbeitest, solltest du vorwärts und rückwärts Button hinzufügen, die der User als Backup klicken kann, da nicht jede Maus horizontal scrollen kann.