HTML + CSSOverlays

Onboarding-Modal in Schritten

Ein Willkommens-Modal mit drei Schritten, einer Illustration, die Farbe und Form ändert, Punkten und Weiter-Buttons.

Einstellungen

16px
1x

Code

<div class="uv-oob"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Willkommen zeigen</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-label="Willkommen"><div class="il" aria-hidden="true"><i class="a"></i><i class="b"></i><i class="c"></i></div><div class="sl"><div class="st on" aria-hidden="false"><p class="ti">Ordne deine Ideen</p><p class="ds">Erstelle Boards und zieh Karten zwischen Spalten.</p></div><div class="st" aria-hidden="true"><p class="ti">Arbeite im Team</p><p class="ds">Lade dein Team ein und kommentiert in Echtzeit.</p></div><div class="st" aria-hidden="true"><p class="ti">Bleib im Zeitplan</p><p class="ds">Termine, Erinnerungen und Hinweise aufs Handy.</p></div></div><div class="ft"><span class="dt"><i class="on"></i><i></i><i></i></span><button type="button" class="bk">Zurück</button><button type="button" class="nx"><span class="n">Weiter</span><span class="e">Loslegen</span></button></div></div></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Overlays

Alle ansehen: Overlays

Wofür du ihn nutzen kannst

Der erste Start prägt den Ton eines Produkts, und eine kurze Tour schlägt eine Textwand. Dieses Modal führt durch drei Schritte. Bei jedem verschiebt die Illustration Formen und Verlauf, Titel und Beschreibung gleiten seitlich herein, die Fortschrittspunkte dehnen sich und der Hauptbutton wechselt von Weiter zur abschließenden Aktion.

Pfeiltasten wechseln die Schritte, ab dem zweiten erscheint ein Zurück-Button, und Escape schließt die Tour. Bearbeite die Schritte in den Daten am Anfang des Codes und halte jede Beschreibung bei einem Satz.