Buttons bauen und gestalten

Wofür der Button Maker

Ein Button ist der Knopf, auf den dein Leser klicken soll: „Jetzt bestellen“, „Gratis testen“, „Zum Angebot“. Du baust ihn mit ein paar Klicks, mit Beschriftung, Farbe, Größe und Form, und du siehst beim Einstellen sofort, wie er aussieht.

Der Button Maker arbeitet im Werbetext-Editor und im Werbemittel-Editor gleich. Nur der Knopf heißt anders, und der Button landet an einer etwas anderen Stelle.

Einen Button einfügen

Im Werbetext-Editor: Setz den Cursor an die Stelle, an die der Button gehört, und klick in der Werkzeugleiste auf Button (das Symbol mit dem abgerundeten Knopf). Steht der Cursor mitten in einem Absatz, teilt die App den Absatz und setzt den Button dazwischen. Fügst du Text von einer Webseite ein, wird ein Link, der dort wie ein Button aussieht, nur dann ein Button, wenn er allein in seiner Zeile steht. Mitten im Satz bleibt er ein Link.

Im Werbemittel-Editor: Klick in den Absatz, hinter dem der Button stehen soll, und dann in der Leiste auf + Button. Der Button kommt hinter diesen Absatz. Steht dein Cursor auf einer leeren Zeile, kommt er genau dorthin. Vorbelegt ist er hier mit den Farben, die auf deiner Seite schon vorkommen.

In beiden Fällen öffnet sich das Fenster Button einfügen. Du stellst ein, was du brauchst, und siehst den Button daneben in der Vorschau. „Einfügen“ setzt ihn, „Abbrechen“ verwirft alles.

Die 9 Einstellungen

• Beschriftung. Was auf dem Button steht. Eine Zeile, höchstens 80 Zeichen.
• Link. Wohin der Button führt. Dazu gleich mehr.
• Schriftgröße. 12 bis 40 px. Die Abstände wachsen mit: Bei 18 px Schrift hat der Button innen 13 px Luft oben und unten und 25 px links und rechts, außen 14 px zum Text darüber und darunter. Bei 36 px ist alles etwa doppelt so groß. So wirkt ein großer Button nie gequetscht und klebt nicht am Nachbartext.
• Hintergrundfarbe und Schriftfarbe. Über das Farbfeld oder als Hex-Wert wie #1d4ed8. Im Werbemittel-Editor stehen zusätzlich die Farben deiner Seite bereit, damit alles zusammenpasst. Heben sich Schrift und Hintergrund zu wenig voneinander ab, sagt dir das Fenster das. Verboten ist es nicht, du entscheidest.
• Eckenabrundung. Von 0 px (eckig) bis 50 px, ganz rechts wird der Button zur Pille.
• Leichte Schattierung. An oder aus.
• Ausrichtung. Links, Mittig oder Rechts.
• Fett. An oder aus.

Der Link: #formular, bekanntes Ziel, Platzhalter

Das Link-Feld nimmt Adressen mit https://, E-Mail-Adressen mit mailto:, Telefonnummern mit tel: und Sprungziele auf der eigenen Seite wie #formular. „www.beispiel.de“ und „name@beispiel.de“ ergänzt die App selbst. Was nicht geht, sagt sie dir, bevor du einfügst.

Lässt du das Feld leer, gilt diese Reihenfolge:

1. Das Bestellformular. Hat die Seite im Werbemittel-Editor ein Bestellformular mit dem Anker #formular, springt ein leerer Link dorthin. Ein Button auf einer Verkaufsseite mit Formular soll zum Formular führen, nicht von der Seite weg.
2. Ein bekannter Ziel-Link. Gibt es kein Bestellformular, und steht in deinem Briefing oder in einer deiner eigenen Chat-Nachrichten eindeutig eine Zieladresse, dann steht sie schon im Feld. Das ist etwa eine Adresse hinter „Bestelllink:“, „Shop-Link:“, „Anmeldelink:“ oder „Zielseite:“, oder eine Anweisung wie „Verlinke den Button mit https://…“. Darunter siehst du, woher sie kommt: „Aus dem Briefing“ oder „Aus einer Nachricht im Chat“. Du kannst sie überschreiben. Im Werbetext gibt es kein Bestellformular, dort ist das immer der erste Schritt.
3. Der Platzhalter https://dummy.link. Er ist mit Absicht erkennbar. So siehst du beim Durchsehen sofort, wo noch eine echte Adresse fehlt.

Die App rät dabei nicht. Sie belegt nur vor, wenn genau eine Adresse eindeutig als Ziel bezeichnet ist. Steht daneben „Beispiel“, „alt“, „Konkurrenz“ oder ein Fragezeichen, oder stehen mehrere verschiedene Adressen da, bleibt das Feld leer. Eine Landingpage bekommt nie den Link einer anderen Landingpage. Solange die App noch sucht, steht im Feld „Sucht einen bekannten Ziel-Link in Briefing und Chat …“, und „Einfügen“ wartet diesen Moment ab.

Dieselbe Regel gilt für den Link-Knopf (🔗) in beiden Editoren.

Einen Button ändern

Klick den Button an. Im Werbetext-Editor erscheint darunter Button gestalten, ein Doppelklick tut dasselbe. Im Werbemittel-Editor steht Button gestalten in der Leiste unter dem angeklickten Element, auch bei Buttons, die die KI gebaut hat. Das Fenster öffnet sich mit den Werten, die dieser Button gerade hat. Unten sitzt Button löschen.

Nach dem Einfügen und nach dem Gestalten steht der Cursor hinter dem Button. Du kannst also sofort weiterschreiben, ohne den Button zu treffen.

Strg+Z nimmt jeden Schritt zurück, auch das Einfügen und das Löschen. Zurückholen kannst du ihn im Werbetext-Editor mit Strg+Y, im Werbemittel-Editor mit Strg+Umschalt+Z, in beiden auch über den Knopf ↷.

Vom Werbetext ins Werbemittel

Gestaltest du aus deinem Werbetext ein Werbemittel, nimmt jeder Button seine Gestaltung mit: Hintergrundfarbe, Schriftfarbe, Eckenabrundung und Schattierung. Schriftgröße, Innenabstand und Breite legt die Gestaltung fest, damit der Button ins Layout der Seite passt.

Die App erkennt den Button an seiner Beschriftung. Hat die KI beim Gestalten die Beschriftung umgeschrieben, trägt er die Farben, die sie für die Seite gewählt hat. Dann klickst du ihn im Werbemittel-Editor an und passt ihn mit Button gestalten an.

Was im Export daraus wird

• HTML und PDF zeigen den Button genau so, wie du ihn gebaut hast.
• Word macht aus dem Button eine farbige Fläche in deiner Hintergrundfarbe, mit deiner Schriftfarbe und Ausrichtung und ohne Unterstreichung. Steht er allein in seiner Zeile, bleiben runde Ecken rund, und der Schatten ist da, in Word genauso wie in LibreOffice. Der Abstand nach oben und unten bleibt derselbe wie im Werbetext- oder Werbemittel-Editor. Steht der Button in einem Kasten (Johnson Box), wird er in Word ein farbiges Wort in seiner Zeile, denn Word erlaubt kein Textfeld im Textfeld. Steht er in einer Johnson Box, die noch ein Zitat ist, ist er eingerückt wie ihr Text.
• Outlook am Desktop verliert beim Einfügen aus der Zwischenablage den Innenabstand und die Rundung. Die Farbe bleibt.

Mehr zu den Formaten steht in der Anleitung Exportieren.

2 Dinge, die gern übersehen werden

Im Änderungsverlauf steht der ganze Stand. „Wiederherstellen“ holt eine frühere Fassung vollständig zurück, Button samt Farbe, Größe und Form.

Die KI legt von sich aus keine Buttons an. Sie behält und ändert Buttons, die schon im Text stehen, aber sie baut keine neuen. Den ersten Button setzt du selbst.

Kurz zusammengefasst

• Werbetext-Editor: Button in der Werkzeugleiste (das Symbol mit dem abgerundeten Knopf). Werbemittel-Editor: + Button in der Leiste.
• 9 Einstellungen: Beschriftung, Link, Schriftgröße, Hintergrund- und Schriftfarbe, Eckenabrundung, Schattierung, Ausrichtung, fett.
• Leeres Link-Feld: im Werbemittel mit Bestellformular erst #formular, sonst der bekannte Ziel-Link, sonst der Platzhalter https://dummy.link.
• Vorhandenen Button anklicken und Button gestalten wählen, Strg+Z nimmt jede Änderung zurück.
• Beim Gestalten des Werbemittels behalten Buttons aus dem Werbetext ihre Farben, ihre Rundung und ihre Schattierung.
• In Word wird der Button eine farbige Fläche. Allein in seiner Zeile bleibt er rund und behält seinen Schatten.