Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)

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.

Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)
Code-Vorlage
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 40 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

Die Integration von kreativen Effekten auf Websites verleiht ihnen eine besondere visuelle Anziehungskraft. Dieser kreative Effekt ist einfach einzubinden und verleiht der Website eine spielerische und einzigartige Ästhetik, ähnlich dem, was auf der Webflow Conf Website 2022 umgesetzt wurde.

Der Effekt wird durch einen schlanken JavaScript und CSS Code ermöglicht, der es den Elementen erlaubt, sich auf der Seite frei zu bewegen. Beim Schweben über die Elemente (hover) verschwinden sie automatisch, nur um an anderer Stelle wieder aufzutauchen. Ein Attribut ermöglicht die einfache Integration dieses Codes in deine Website.

Die Vorteile dieser Webflow-Trick-Vorlage:

  1. Ästhetische Anziehungskraft: Der Effekt verleiht deiner Website ein originelles und kreatives Design, das Besucher anspricht und ihre Aufmerksamkeit auf sich zieht.
  2. Interaktive Elemente: Die automatische Verschwinden- und Erscheinen-Funktion bietet eine interaktives Erlebnis für die Nutzer, die beim hover über die Elemente überrascht werden.
  3. Einzigartigkeit: Der Effekt hebt deine Website von anderen ab und vermittelt ein modernes und innovatives Erscheinungsbild.
  4. Dynamik: Die Bewegung der Elemente verleiht der Website Dynamik und Energie, die das Benutzererlebnis verbessern.
  5. Einfache Integration: Mit dem zur Verfügung gestellten JS Code und CSS Code ist die Einbindung dieses Effekts unkompliziert und erfordert keine umfangreichen Programmierkenntnisse. Nur ein Attribut, welches du auf eine Sektion anwenden musst!Insgesamt trägt dieser kreative Effekt dazu bei, die Ästhetik deiner Website zu bereichern und eine spielerische Note hinzuzufügen, die das Interesse der Besucher weckt und die Nutzererfahrung aufwertet.
Diesen Trick und 40 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?

Weitere nützliche Webflow Tricks

Mehrere 303 Redirects in Webflow auf einmal anlegen (CSV Upload)
Freischalten
Mehrere 303 Redirects in Webflow auf einmal anlegen (CSV Upload)

Mehrere 303 Redirects in Webflow auf einmal via CSV Upload hochladen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Copyright Jahreszahl im Footer automatisch aktualisieren
Kostenlos
Freischalten
Copyright Jahreszahl im Footer automatisch aktualisieren

Copyright Jahreszahl im Footer einer Webflow Website automatisch aktualisieren.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)
Kostenlos
Freischalten
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)

Einfach bild reinziehen und zwischen Screenshot-Modus, perfekten Browser-Mockups oder Geräten wie iPhone, Tablet und MacBook wählen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Kostenlose Bilder und Videos für Kundenprojekte – meine Quellen (kommerzielle Zwecke)
Freischalten
Kostenlose Bilder und Videos für Kundenprojekte – meine Quellen (kommerzielle Zwecke)

Liste an Plattformen für kostenloses Bild- und Videomaterialien. Nutze ich als Webdesigner bei jedem Kundenauftrag.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Auf ein FAQ Element von einer anderen Seite verlinken und es geöffnet anzeigen
Freischalten
Auf ein FAQ Element von einer anderen Seite verlinken und es geöffnet anzeigen

Verlinke auf ein bestimmtes FAQ-Element von einer anderen Seite aus zu verlinken und es gleichzeitig geöffnet anzuzeigen. Einfach ?faq=3 mit an die URL hängen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
SVG Code Zeichenlimit für Embed Felder in Webflow umgehen
Freischalten
SVG Code Zeichenlimit für Embed Felder in Webflow umgehen

Umgehe das 10.000 Zeichen Limit für Webflow Embed Fields und füge große SVG Bilder als Code zu deiner Website hinzu.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow SEO Checkliste (mehrere zusammengefasst)
Freischalten
Webflow SEO Checkliste (mehrere zusammengefasst)

Ich habe dir einige wichtige Punkte von verschiedenen SEO Beiträgen in diesem Beitrag zusammengefasst.

Allgemein
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webdesign Animations-Inspiration – Godly
Kostenlos
Freischalten
Webdesign Animations-Inspiration – Godly

Jede verlinkte Seite hat eine Video-Vorschau, um schnell zu entscheiden, ob es als Inspiration geeignet ist, oder nicht.

Inspiration
Text-Anleitung
Demo Beispiel
Video-Anleitung
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird
Freischalten
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird

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

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Position Sticky innerhalb von overflow auto / hidden
Highlight
Freischalten
Position Sticky innerhalb von overflow auto / hidden

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.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)
Freischalten
Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)

Automatisiert 'rel=nofollow' Attribut bei allen Links in Richt-Text-Elementen hinzufügen. Spart Zeit und verbessert SEO.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Tabellen für Rich-Text Inhalte visuell erstellen
Freischalten
Tabellen für Rich-Text Inhalte visuell erstellen

Webflow bietet keine Tabellen-Funktion in Rich Text Elementen. Mit diesem Tool kannst du Tabellen und Inhalte visuell gestalten und den Code als Embed einfügen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung