{"id":5098,"date":"2019-10-23T16:00:58","date_gmt":"2019-10-23T14:00:58","guid":{"rendered":"https:\/\/tatjanafilimonov.de\/?p=5098"},"modified":"2026-04-23T15:39:06","modified_gmt":"2026-04-23T13:39:06","slug":"perfekter-cta","status":"publish","type":"post","link":"https:\/\/tatjanakruck.de\/kampagne\/perfekter-cta\/","title":{"rendered":"9 Tipps f\u00fcr einen perfekten CTA-Button"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Was ist ein CTA?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Der CTA, Call-to-Action, ist ein Begriff aus dem Onlinemarketing und bedeutet nichts anderes als \u201eHandlungsaufforderung\u201c.<\/p>

Diese Handlungsaufforderung kommt meist in Form eines auff\u00e4llig platzierten Buttons und soll die Websitebesucher bzw. Kunden zu einer bestimmten Aktion verleiten. Das kann zum Beispiel Kauf in einem Onlineshop oder Registrierung f\u00fcr den Newsletter einer Website sein.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Warum ist ein perfekter CTA-Button wichtig?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Der CTA-Button soll dich dabei unterst\u00fctzen, dein Ziel zu erreichen. Ob es nun mehr Abverk\u00e4ufe, viele Abonnements oder sonstiges geht, der CTA-Button soll so gestaltet werden, dass deine Konsumenten sich direkt angesprochen f\u00fchlen und die gew\u00fcnschte Handlung durchf\u00fchren. Der Call-to-Action soll also zu einer besseren Konvertierungsrate beitragen.<\/p>

Bei der Gestaltung des CTA gibt es einiges zu beachten. Zum einen soll er designtechnisch einwandfrei und zum anderen strategisch optimal sein. Deshalb werde ich im Folgenden zun\u00e4chst auf das korrekte Design und dann auf die Marketing-Aspekte eingehen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

1. W\u00e4hle die richtige Form<\/h2>\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Auf Websites, in Newslettern oder Apps sind die erfolgreichsten CTA\u2019s tats\u00e4chlich Buttons. Diese haben meist eine rechteckige Form mit spitzen oder abgerundeten Ecken. Diese Form ist von den Konsumenten \u201egelernt\u201c und sorgt f\u00fcr eine klare Botschaft.<\/p>

Call-to-Action in Form eines Sterns z.B. w\u00e4re dagegen vielleicht auff\u00e4lliger, w\u00fcrde aber wahrscheinlich zuerst f\u00fcr Verwirrung sorgen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

2. W\u00e4hle die richtige Gr\u00f6\u00dfe<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Der CTA-Button sollte eine optimale Gr\u00f6\u00dfe haben. Zu kleine Buttons \u201everschwinden\u201c zu schnell zwischen den anderen Elementen und werden schlichtweg \u00fcbersehen. In Hinblick auf die Darstellung und Nutzung auf mobilen Ger\u00e4ten sollte er so gro\u00df sein, dass er bequem mit den Fingern angeklickt werden kann.<\/p>

Andererseits ist der Button zu gro\u00df, wirkt er zu massiv und kann als Werbung empfunden werden.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

3. Passe die Textgr\u00f6\u00dfe an<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Bei dem Text kommt es vor allem auf die Lesbarkeit an. Schriftgr\u00f6\u00dfe und Schriftfarbe sollten so gew\u00e4hlt werden, dass der Text auf allen Ger\u00e4ten deutlich zu lesen ist. Als Richtwert kannst du die Schriftgr\u00f6\u00dfe von 16px nehmen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

4. Sorge f\u00fcr ausreichenden Abstand<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Ein perfekter CTA-Button braucht Raum, und zwar innen und au\u00dfen. Das hei\u00dft zum einen soll das Verh\u00e4ltnis zwischen der Buttongr\u00f6\u00dfe und der Gr\u00f6\u00dfe des Textes so gew\u00e4hlt werden, dass ein ausreichender Abstand zwischen dem Text und der Button-Kante m\u00f6glich ist. Dieser Abstand sollte an allen Seiten mind. 5px betragen. Schaue dabei, dass dein Text mittig platziert ist.<\/p>

Zum anderen solltest du gen\u00fcgend Abstand zwischen dem Button und den umliegenden Elementen lassen. So bekommt der CTA insgesamt mehr Raum und grenzt sich deutlich von weniger wichtigen Elementen ab. Der Konsument ist in der Lage, den Button noch schneller optisch zu erfassen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

5. Schaffe mehr Kontrast<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

W\u00e4hle m\u00f6glichst kontrastreiche Farben f\u00fcr deinen Button. Das hei\u00dft, vor allem der Kontrast zwischen der Farbe des Buttons selbst und der Farbe des Textes innerhalb des Buttons muss gro\u00df sein. Zudem sollte der Button sich von den umgebenden Elementen optisch abheben.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Um die Wichtigkeit des Buttons weiter zu unterst\u00fctzen, kannst du zum Beispiel einen dezenten Schatten verwenden. Er l\u00e4sst den Button plastischer wirken, wodurch dieser noch pr\u00e4senter wird. Auf eine dunkle Umrandung solltest du dagegen verzichten. Sie wirkt altbacken und unfreundlich.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

6. Ber\u00fccksichtige die Psychologie der Farben<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Nicht nur in Bezug auf das Design ist die Farbe des CTA wichtig, sie hat einen Einfluss auf die Entscheidungsfreudigkeit deiner potenziellen Kunden. Damit kommen wir zu marketingrelevanten Faktoren.<\/p>

Es ist mittlerweile bekannt, dass bestimmte Farben bestimmte Assoziationen hervorrufen. Bei Blau denken zum Beispiel viele automatisch an Sauberkeit, Wasser, Medizin. Bei Rot an Liebe, W\u00e4rme, Gefahr. Das hat was mit der Psychologie der Farben zu tun. Diese hat unmittelbare Auswirkungen darauf, ob auf den Button geklickt wird oder nicht.<\/p>

Ergebnisse einiger A\/B-Tests zeigen, dass zum Beispiel gr\u00fcne Buttons meist besser konvertieren als rote. Allerdings kann es auf deiner Website oder deiner Landingpage auch ganz anders sein. Deshalb ist es gut eigene A\/B-Tests durchzuf\u00fchren, um mit Sicherheit sagen zu k\u00f6nnen, welche Farbe f\u00fcr dich am besten funktioniert.<\/p>

So spricht prinzipiell auch nichts dagegen, bei den Buttons mit den Farben deines restlichen Designs zu arbeiten. Hauptsache bleibt aber, dass der Button auff\u00e4llig und pr\u00e4sent genug bleibt. Auch in diesem Fall lohnt es sich einen oder mehrere A\/B-Tests zu fahren, um unterschiedliche Varianten auf beste Conversionrate zu pr\u00fcfen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

7. Mache den CTA zum Platzhirsch<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Zu weiteren strategischen Entscheidungen in Bezug auf Conversionoptimierung mit dem CTA geh\u00f6rt die prominente Platzierung des Buttons. Im Idealfall sollte er sich \u201eabove the fold\u201c, also dem ohne Scrollen sichtbaren Bereich befinden. Hierbei sollten sich allerdings auch alle f\u00fcr die gew\u00fcnschte Handlung erforderlichen Informationen in unmittelbarer N\u00e4he, ebenfalls above the fold, befinden. So kann der User ohne weitere Umst\u00e4nde der \u201eHandlungsaufforderung\u201c an Ort und Stelle nachkommen.<\/p>

Bei Produkten im Onlineshop, vor allem auf den mobilen Ger\u00e4ten, sollte sich der Kauf-Button unter den Produktinfos befinden. Denn die Analyse des Userverhaltens zeigt, dass der User sich zuerst \u00fcber das jeweilige Produkt informieren m\u00f6chte und er erst danach zum Klick auf den Kauf-Button bereit ist. Dementsprechend erwartet er den CTA weiter unten. Befindet sich der Button an einer anderen Stelle, \u00fcberfordert dies den User.<\/p>

Mehrfache prominente Platzierung eines Call-to-Action separat voneinander innerhalb einer Landingpage ist ebenfalls sinnvoll. Sucht der User nach weiteren Infos, scrollt es nach unten und kommt im Laufe seines \u201eEntscheidungsprozesses\u201c automatisch zur erneuten Handlungsaufforderung. W\u00fcrde dies nicht passieren, m\u00fcsste er zur\u00fcck nach oben scrollen. Dies ist vergleichbar mit zur\u00fcckbl\u00e4ttern in einem Buch, in dem auf Seite 10 die Erkl\u00e4rung zu einzelnen Werten aus der Tabelle auf Seite 1 zu finden sind. Es ist schlichtweg umst\u00e4ndlich.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

8. Behalte stets die Kontrolle<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In einigen F\u00e4llen werden alternative Handlungsaufforderungen direkt nebeneinander platziert, um dem User zum Beispiel die Navigation zu erleichtern. Das ist nicht falsch! Wichtig ist aber, dass du die Kontrolle dar\u00fcber, welchen Button er anklicken soll, nicht verlierst.<\/p>

Der wichtigste Button soll vom User unterbewusst als solcher wahrgenommen werden. Das hei\u00dft also, dieser Button muss auff\u00e4lliger als die anderen sein. Dies kann entweder durch Gr\u00f6\u00dfe oder durch farbliche Gestaltung gesteuert werden.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

9. Finde die richtigen Worte<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die richtige Formulierung der Handlungsaufforderung ist einer der wichtigsten Aspekte bei der Gestaltung des perfekten CTA. Sie soll kurz und pr\u00e4gnant sein. Der User muss klar verstehen, warum er auf den Button klicken soll und was die Konsequenz dieses Handelns w\u00e4re. Genauer gesagt ist \u201eNewsletter abonnieren\u201c oder \u201eKostenpflichtig kaufen\u201c besser als \u201eHier klicken\u201c.<\/p>

Formuliere die Handlungsaufforderung so, dass sie zum Kontext deiner Website bzw. deiner Landingpage passt. In jedem Fall sollte die Formulierung aber ein starkes Verb in Befehlsform enthalten, z.B. \u201eKlicke hier\u201c oder \u201eVerpasse keine Rabattaktionen, abonniere unseren Newsletter\u201c.<\/p>

Bei der zweiten Formulierung wird zudem mit Emotionen der User gespielt. Ihm wird suggeriert, dass er etwas verpasst, wenn er sich nicht anmeldet. Das ist ein probates Mittel, um ihn zur Handlung zu bewegen. Der User erkennt sofort seinen Vorteil. Er m\u00f6chte nichts verpassen und immer am Laufenden bleiben. Der m\u00f6gliche finanzielle Vorteil wirkt an der Stelle fast nebens\u00e4chlich.<\/p>

Dringlichkeit und Social Proof verst\u00e4rken ebenfalls die Kraft der CTA-Formulierung. \u201eMelde dich jetzt an\u201c oder \u201eSichere dir einen der letzten Pl\u00e4tze\u201c zwingen den User sofort eine Entscheidung zu treffen und erh\u00f6hen die Wahrscheinlichkeit einer Conversion. Formulierungen wie \u201eWerde jetzt auch zum Profi\u201c oder \u201eWerde jetzt Teil der coolsten Community\u201c beinhalten den sozialen Aspekt. Hier wird zum einen signalisiert, dass der User genauso wie andere auch schon zum Profi werden kann. Er kann sich also darauf verlassen, dass andere damit einen Erfolg hatten. Zum anderen wird er eingeladen, Teil einer Gruppe zu werden, was das instinktive Verlangen nach Zugeh\u00f6rigkeit zu einem sozialen Kreis weckt.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

CTA-Button in WordPress erstellen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Inzwischen arbeiten viele Themes, Landingpage- und Newsletter-Anbieter mit sogenannten Pagebuildern. Mit ihnen kannst du ganz einfach und schnell individuelle CTA-Buttons per Drag & Drop erstellen, ohne eine Zeile Code schreiben zu m\u00fcssen. Solltest du keinen Pagebuilder benutzen, kann dir das Plugin MaxButtons<\/a> helfen. Damit kannst du nach deinem Wunsch formatierte Buttons erstellen und sie anschlie\u00dfend per Shortcodes in die Seiten einf\u00fcgen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Was ist ein CTA? Der CTA, Call-to-Action, ist ein Begriff aus dem Onlinemarketing und bedeutet nichts anderes als \u201eHandlungsaufforderung\u201c. Diese Handlungsaufforderung kommt meist in Form eines auff\u00e4llig platzierten Buttons und soll die Websitebesucher bzw. Kunden zu einer bestimmten Aktion verleiten. Das kann zum Beispiel Kauf in einem Onlineshop oder Registrierung f\u00fcr den Newsletter einer Website […]<\/p>\n","protected":false},"author":1,"featured_media":10332,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5098","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"_links":{"self":[{"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/posts\/5098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/comments?post=5098"}],"version-history":[{"count":0,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/posts\/5098\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/media\/10332"}],"wp:attachment":[{"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/media?parent=5098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/categories?post=5098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/tags?post=5098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}