Über diese Vorlage
Bevor du beim Thema Call-to-Action-Block für ein Gesundheits- oder Wellness-Produkt nachbaust, lies FAQ CTA: Komposition und Spezifikation stehen beide hier. Die Überschrift der Seite lautet „Send Money Worldwide at the Best Rates“, und die Komposition ist um genau diese Worte gebaut. Farbe bleibt auf weiß #F0F0F0 darunter und helles rot #FF4B2B für die Akzente begrenzt, gesetzt in Inter. Geliefert wird React und Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Das Bewegungsbudget umfasst Übergänge von 6.5s. Leih dir die Struktur, nicht das Thema: Die Zahlen zum Thema Call-to-Action-Block wandern unverändert in deine Marke.
Gemacht für
- Growth-Teams, die ein Call-to-Action-Block-Design für ein Gesundheits- oder Wellness-Produkt neu einfärben und den 640x468-Rahmen behalten wollen, während sich die Angebotstexte ändern.
- Gemacht für einen Solo-Gründer, der ein Call-to-Action-Block-Design für ein Gesundheits- oder Wellness-Produkt ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Call-to-Action-Block-Briefing versorgt, startet mit dem Prompt über 9.456 Zeichen.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Wortmarke, Links und die Aktion in #FF4B2B teilen eine Grundlinie, was eine dünne Zeile nicht zufällig wirken lässt. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #FF4B2B ist das einzige Element in der Leiste mit Gewicht.
- Feste Stufen statt einer Skala. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt Abstände in 10px-Schritten und 6.5s Übergänge, und der Build muss genau diese Werte treffen. Jeder Wert hat genau eine Aufgabe: eine Schriftstufe, ein Abstand, ein Eckenradius oder ein Übergang.
- Zwei Schriften, klare Aufgaben. Die Schriften sind Rollen zugewiesen und nicht gemischt: Inter trägt Display und Oberfläche zusammen. Ein Schriftwechsel ist unproblematisch, solange Größen und Gewichte dort bleiben, wo das Briefing sie gesetzt hat.
- Ein Breakpoint für die Links. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt. Die Referenz wurde mit 640x468 erfasst.
Bewegung & Interaktion
Eine lebende Leinwand im Zentrum
Die visuelle Arbeit übernimmt hier ein WebGL-Canvas. Die Szene reagiert auf den Viewport, statt als Bild dahinter zu liegen.
Interaktion bleibt lokal
Nur die Bedienelemente reagieren auf den Zeiger (Hover-Zustände auf Buttons und Links statt auf jeder Karte und Tabs oder ein Akkordeon, das Inhalte an Ort und Stelle austauscht), die Seite wirkt also reaktionsschnell, ohne jedes Element zur Zielscheibe zu machen. Nichts auf der Seite öffnet ein Modal oder kapert das Scrollen; die Interaktionen bleiben am Element. Wenn ein Zustand keine Aktion bestätigt, lass ihn weg.
So wird der Eintrag Call-to-Action-Block deiner
Fang beim Versprechen an, nicht bei der Dekoration. Schreibe „Send Money Worldwide at the Best Rates“ zu einem Satz um, der sagt, was du machst, und setze ihn in Inter in der Display-Größe aus dem Briefing. Ersetze helles rot #FF4B2B durch deinen eigenen Akzent und prüfe ihn gegen weiß #F0F0F0, bevor du etwas anderes anfasst. Dein Akzent muss denselben Kontrasttest bestehen wie der der Referenz.
Wie der Eintrag Call-to-Action-Block umbricht
Eine feste Desktop-Skala wäre einfacher gewesen. Das Briefing nimmt dafür eine andere Entscheidung auf: eine Größe zwischen 15px und 10px, und genau das hält die Display-Zeile zwischen den Breiten proportional. Die Skala folgt dem Viewport; die Abfolge bleibt.
Was ein Gesundheits- oder Wellness-Produkt hier gewinnt
Dass das für ein Gesundheits- oder Wellness-Produkt funktioniert, liegt daran, dass die Referenz dem Leser nie zumutet, die Botschaft selbst zusammenzusetzen. „Send Money Worldwide at the Best Rates“ leistet diese Arbeit ab dem ersten Frame. Layout, Schrift und Farbe sind entschieden (weiß #F0F0F0 und helles rot #FF4B2B, gesetzt in Inter), die erste Bildschirmfläche liest sich also als fertiges Argument und nicht als Haufen von Teilen. Es gibt einem Leser im Bereich Gesundheit den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Ist der Prompt zu FAQ CTA eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 9.456 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Wie viel von FAQ CTA hängt von React und Tailwind CSS ab?
FAQ CTA wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
Kann ich die Übergänge von FAQ CTA behalten und nur die Zeitwerte ändern?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 6.5s abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
