So fügen Sie eine Schaltfläche im WordPress-Editor hinzu [Tutorial]

So fügen Sie eine Schaltfläche im WordPress-Editor hinzu [Tutorial]

Warum ist der WordPress-Button-Block so wichtig?

Die Navigation auf der Website ist für Besucher und Kunden wichtig. Wir wollen sie von einer Unterseite weiter versenden. Führen Sie sie durch den gesamten Einkaufsprozess. Deshalb ist es wichtig, wichtige Links korrekt in den Seiteninhalt einzufügen.

Grundsätzlich haben wir 2 Möglichkeiten. Verwenden Sie den Standardlink oder die Standardschaltfläche. Es gibt unterschiedliche Meinungen darüber, wann die Option „erste“ und „später“ zu verwenden ist. Normalerweise gibt es auf einer Seite mehrere mögliche Aktionen. Wir müssen sicherstellen, welches primär und welches sekundär ist. Wir empfehlen Ihnen, die Schaltfläche nur für primäre Aktionen zu verwenden. Dadurch erreichen Sie eine größere Sichtbarkeit dieser primären Aktion. Sie lenken die Aufmerksamkeit der Besucher auf diese Aktion. Wir können es auch Call-to-Action-Button nennen. Erstellen Sie nicht zu viele Schaltflächen auf einer Unterseite.

Was sind die Haupttastenfunktionen?

  • Schaltflächen können die Aufmerksamkeit der Besucher erregen – ein Aufruf zum Handeln
  • Sie trennen Seiten- oder Beitragsinhalte und machen sie besser lesbar
  • Hilfe bei der Orientierung auf der Seite. Viele Besucher scannen die Seite nur visuell mit den Augen
  • Leiten Sie Besucher mithilfe von Hyperlinks zu anderen Seiten

Es gibt viele Parameter, die den Erfolg einer Schaltfläche bestimmen. Wichtig ist beispielsweise Größe, Platzierung oder Buttonfarbe. Es ist notwendig, die Standard-UI- und UX-Prinzipien zu befolgen. Die grüne Farbe wird für Schaltflächen mit positiver Wirkung verwendet, beispielsweise um etwas zu kaufen. Rote Farbe steht für eine negative Nachricht – zum Beispiel für die Abmeldung vom Newsletter. Richtig gestaltete Schaltflächen beeinflussen so direkt das Verhalten der Besucher.

Hinzufügen einer Schaltfläche auf jeder Seite oder jedem Beitrag in WordPress

Situation vor WordPress 5

Das Hinzufügen von Schaltflächen war ein recht komplizierter Vorgang, bevor der WordPress-Blockeditor erfunden wurde. Denn diese Funktion war in WordPress nicht selbstverständlich. Sie können das Design mit Page Builder oder einem Drittanbieter-Plugin verwenden. Shortcodes erstellen in diesem Fall Schaltflächen.

In unseren älteren WordPress-Themes können Sie Schaltflächen mithilfe von Shortcodes im visuellen Editor hinzufügen. Nachdem Sie auf Shortcode einfügen -> Schaltfläche geklickt haben, können Sie im modalen Fenster verschiedene Einstellungen vornehmen. Text, Textfarbe, Schaltflächenfarbe, URL, Ausrichtung usw. Dank dieser erweiterten Einstellungen können Sie Tasten ganz einfach und schnell ohne Programmieraufwand hinzufügen.

Schaltfläche über Shortcodes hinzufügen
Hinzufügen einer Schaltfläche über Shortcodes vor der Veröffentlichung des Blockeditors

Wie verwende ich den Button-Block im WordPress-Editor?

Dank WordPress 5 gibt es einen zweiten Weg. Viel einfacher. Der visuelle Editor von WordPress bietet viele nützliche Blöcke. Um eine Schaltfläche auf einer Website zu erstellen, können Sie jetzt den WordPress-Schaltflächenblock im Editor verwenden.

Schritt-für-Schritt-Anleitung zum Hinzufügen einer Schaltfläche im WordPress-Editor

1. Zunächst müssen Sie entscheiden, wo Sie den Button einfügen möchten
2. Der Tastenblock kann auf verschiedene Arten hinzugefügt werden:
– durch Klicken auf „+“ in der oberen Leiste oder an einer beliebigen Stelle im Blockeditor, wo Sie „Schaltflächenblock“ auswählen

Schaltfläche „Hinzufügen“ durch Klicken auf „+“ hinzufügen
Schaltflächenblock hinzufügen, indem Sie auf „+“ klicken
Schaltfläche „Hinzufügen“ über die Suchleiste
Schaltflächenblock über Suchleiste hinzufügen
Schaltflächenblock über Schrägstrich hinzufügen
Hinzufügen eines Tastenblocks mit Schrägstrich „/“

– Sie können jeden Block auch über die Suchleiste finden. Geben Sie einfach „Button“ ein.

– Durch Eingabe von „/“ erhalten Sie Zugriff auf alle verfügbaren Blöcke

3. Der erstellte Tastenblock kann weiter konfiguriert werden

Fügen Sie Schaltflächentext und URL-Adresse hinzu

Sobald die WordPress-Block-Schaltfläche erstellt wurde, können Sie darin Text eingeben. Denken Sie daran, dass es für die Call-to-Action-Schaltfläche besser ist, einen kurzen Text mit klarer Botschaft zu verwenden. Sie können den Text fett, kursiv oder unterstrichen formatieren. Alle diese Änderungen können durch Klicken in der Symbolleiste vorgenommen werden. Sie können die Schaltfläche auch seitlich ausrichten oder zentrieren.

Schaltflächenbearbeitung
In wenigen Sekunden können Sie das Aussehen Ihrer Schaltfläche vollständig ändern

Die Schaltfläche verweist normalerweise auf eine andere Seite oder externe Website. Aus diesem Grund gibt es direkt darunter einen Eingang zum Hinzufügen einer URL-Adresse. Der Vorteil besteht darin, dass für das Hinzufügen einer URL keine Textauswahl erforderlich ist.

Schaltflächenfarbe ändern

Mit dem neuen Editor können Sie den WordPress-Schaltflächenblock in wenigen Sekunden ändern. Verwenden Sie einfach die Einstellungen in der Seitenleiste auf der rechten Seite. Sie können die Hintergrundfarbe der Schaltfläche oder die Textfarbe innerhalb der Schaltfläche ändern. Es gibt grundlegende vordefinierte Farben oder Sie können Ihre eigenen auswählen. Alle Änderungen sind sofort sichtbar, um zu sehen, ob die Farbkombination stimmt.

Schaltflächenfarbe ändern
Sofortiger Farbwechsel der Schaltfläche nach dem Klicken auf die ausgewählte Farbe

Eine tolle Funktion ist, dass der WordPress-Blockeditor Sie warnt, wenn Sie falsche Kombinationen auswählen, z. B. grauer Hintergrund und weiße Textfarbe, dass die Schaltfläche auf Ihrer Website möglicherweise nicht lesbar ist.

Finden Sie Ihren eigenen Button-Stil

Optionen für den Tastenstil
Ändern Sie den Stil Ihrer Schaltfläche direkt in der Symbolleiste oder in den Inspector-Einstellungen

Um den Button ultraschnell und ohne Aufwand zu erstellen oder zu ändern, können Sie einen der vorbereiteten Stile verwenden. Die Schaltfläche kann auf diese Weise beispielsweise in eine abgerundete, umrandete oder rechteckige Form geändert werden. Probieren Sie aus, was am besten zu Ihrem Website-Stil oder -Design passt.

Bearbeitungsschaltfläche mit benutzerdefiniertem CSS

Mit benutzerdefinierten CSS-Klassen kann eine noch größere Anpassung erreicht werden. Auf diese Weise können Sie Ihre eigenen CSS-Stile und Stilschaltflächen im WordPress-Editor genau nach Ihren Wünschen hinzufügen.

Benutzerdefinierte Klasseneingabe
Fügen Sie eine benutzerdefinierte Klasse ein, um Ihre Schaltfläche zu gestalten

Wie wir sehen, gibt es einen viel einfacheren Weg als die Verwendung eines Tasten-Shortcodes. Der WordPress-Button-Block kann in jedem Theme verwendet werden, das mit dem WordPress-Block-Editor kompatibel ist. Lesen Sie mehr über unser brandneues Citadela WordPress-Theme. Es wurde speziell für den WordPress Block Editor entworfen und entwickelt.

Extra-Tipp zum Schluss

Vergessen Sie nicht, den Block Ihrer WordPress-Schaltflächen und den Schaltflächenerfolg selbst zu überwachen. Wenn Sie Google Analytics verwenden, können Sie eine eindeutige URL erstellen. Um Besucherklicks zu verfolgen, können Sie hinzufügen Google UTM-Parameter. Die URL kann mit dem URL-Builder erstellt werden. Durch das Hinzufügen von Parametern können Sie die Quelle des Besuchs identifizieren. Dies ist sehr nützlich, wenn Sie wissen möchten, von wo Besucher auf Ihre Einkaufsseite gelangt sind.

Was ist derzeit Ihr größtes Problem mit der WordPress-Button-Blockierung? Lassen Sie uns in den Kommentaren unten diskutieren. Teilen Sie Ihre Erfahrungen mit der Verwendung von Schaltflächen auf der Website.

4 Gedanken zu „How to add button in WordPress editor [tutorial]

  1. Vielen Dank, dass Sie dieses Tutorial geteilt haben. Können Sie mir bitte auch erklären, wie ich eine Blockvorlage erstellen kann? Ich mache dasselbe mit dieser Ressource https://wpitech.com/create-wordpress-gutenberg-block-templates/, aber sie gibt einen Fehler aus und ich habe einige Programmierzeilen im Frontend. Das ist der Code
    add_action( 'init', function() {
    $args = array(
    'public' => true,
    'label' => 'Neuigkeiten',
    'show_in_rest' => true,
    'template_lock' => 'all',
    'template' => array(
    array( 'Kern/Absatz', array(
    'placeholder' => 'Aktuelle Nachrichten',

  2. Wissen Sie, ob es eine Möglichkeit gibt, Inhalte mit einer Schaltfläche zu reduzieren, ohne ein Plugin herunterzuladen? Grundsätzlich verwende ich WordPress.com Premium, nicht Business, daher ist das Herunterladen von Plugins keine einfache Option.

    Danke!

    1. Hallo,

      Danke für die Frage. Sie sollten den Support von wordpress.com direkt fragen, ob er eine Lösung für Ihr Problem anbieten kann. Mit freundlichen Grüßen!
      Zlatko
      AIT-Team

Kommentare sind geschlossen.