WordPress: Button einfügen

WordPress-Button
In WordPress einen Button erzeugen – mit dem Gutenberg-Editor kein Problem

Ein Call-to-Action-Button zeigt Besuchern, welche Aktion sie konkret ausführen sollen. Beispiele:

  • Newsletter abonnieren
  • Produkt in Warenkorb legen
  • An einer Umfrage oder einem Gewinnspiel teilnehmen
  • Einen Download starten
  • Ein Kontaktformular abschicken

Hier siehst du einen Button im praktischen Einsatz: Demoshops.de (Aufforderung, einen Demoshop zu reservieren).

Buttons in WordPress

Kaufmann und Kauffrau im E-Commerce
Kaufmann und Kauffrau im E-Commerce – das neue Buch des Betreibers von onlineshop-diy 😉

Du hast drei Möglichkeiten, um in WordPress einen Button zu erzeugen und zu platzieren:

  1. Vorhandene Buttons nutzen. Shop-, Newsletter- und Kontaktformular-Plugins haben Buttons integriert
  2. Ein Button-Plugin nutzen
  3. Einen Button-Block einfügen, ab WordPress 5

Vorhandene Buttons nutzen

CleverReach Formulardesigner
Das Anmeldeformular für den Newsletter enthält auch einen Button

Das Bild oben zeigt den Formular-Designer des Newsletter-Programms CleverReach. Ein Anmelde-Button ist bereits enthalten. Auch WooCommerce, Contact Form 7 und Umfrage-Plugins bringen ihre Buttons mit. Allerdings:

  • Die Buttons funktionieren nur innerhalb ihrer Plugins
  • Für flexible Buttons muss eine andere Lösung her

Button-Plugin

Buttons für WordPress
Das Max-Buttons-Plugin erzeugt Buttons für WordPress

Weit verbreitet ist MaxButtons. Das WordPress-Plugin ist kostenlos oder in einer Pro-Version erhältlich. Tutorial:

  1. Button erstellen
  2. Shortcode abrufen
  3. Shortcode platzieren, wo der Button erscheinen soll

Social Media Share-Buttons

Zu Max Buttons gibt es auch ein Share-Buttons-Addon. Du kannst damit Beiträge von deiner WordPress-Seite zum Teilen auf Facebook, Twitter, Pinterest, LinkedIn, etc. freigeben.

Share-Buttons und DSGVO

Achtung: Share-Buttons verstoßen gegen die EU-DSGVO die europäische Datenschutzgrundverordnung – wenn sie Daten weitergeben, ohne dass deine Besucher darüber vorher informiert wurden.

Button-Block

Am leichtesten funktionieren Buttons mit einem Button-Block. Voraussetzung ist der Gutenberg-Editor, den du seit August 2018 in deiner WordPress-Installation aktivieren kannst. Tutorial:

  • Button-Block einfügen
  • Button erzeugen
  • Button ausrichten
  • Button beschriften
  • Button mit Link versehen
  • Farbe des Buttons ändern

Block in Gutenberg einfügen

Blöcke im Gutenberg-Editor

Unterhalb eines Textes soll ein Button erscheinen. So funktioniert es:

  1. Klicke auf das Plus-Zeichen, den Inserter, um einen neuen Gutenblock anzulegen.
  2. Es öffnet sich ein Suchfeld für Blöcke. Hier tippst du Button ein.

Button-Block wählen

Der Button-Block

WordPress zeigt nun das Symbol für den Button-Block an.

  • Klicke auf das Button-Symbol
  • Der Button-Block öffnet sich und nun kannst du den Button ausrichten, beschriften und verlinken

Button ausrichten, beschriften und verlinken

Button beschriftenOben öffnet sich die Button-Werkzeugleiste

  1. Mit Hilfe der Werkzeuge, du kennst sie aus Word oder Libre Office, richtest du den Button links, mittig oder rechts aus. Die Schrift kannst du fett oder kursiv erscheinen lassen.
  2. Im Hauptfeld des Button-Blocks gibst du den Button-Text ein.
  3. Im Eingabefeld darunter legst du die Ziel-URL für den Button fest. Beispiel: https://mein-blog.de/shop

Vergiss nicht, nach Eingabe der URL rechts auf Haken mit dem Enter-Zeichen zu klicken. Erst damit wird die URL übernommen. Sieht schon gut aus … aber die Farbe des Buttons passt noch nicht zu deinem WortdPress-Farbschema? Das lässt sich ändern.

Farbe des Buttons ändern

Farbe des Buttons ändern

So änderst du die Farbe:

  1. Klicke rechts auf die drei Punkte, um den Inspektor für den Block zu öffnen
  2. Im Inspektor wählst du eine Hintergrundfarbe für den Button aus
  3. Falls die Standard-Farben nicht ausreichen: Gib deine Wunschfarbe als Hexcode in das Eingabefeld, zum Beispiel #ffffff für Weiß

Das war es schon. Jetzt klickst du oben auf Veröffentlichen!

So einfach wie einen Button kannst du auch eine Tabelle, ein Zitat oder einen mehrspaltigen Text in WordPress einfügen. Hier geht es zur Übersicht der Gutenblocks.