WordPress: Button einfügen

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

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

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

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

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

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

Oben ö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

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.