Block: Buttons

Mit dem Buttons-Block kannst du einen oder mehrere Buttons in deinem Beitrag oder deiner Seite erstellen.

Die Block-Werkzeugleiste

Buttons-Block (Eltern-Element)

Screenshot des Buttons-Blocks, ohne das Inhalt hinzugefügt wurde.

Seit WordPress 5.4 ersetzt der Buttons-Block den einzelnen Button-Block, den es vorher gab. Beim neuen Buttons-Block können jetzt mehrere einzelne Buttons nebeneinander oder untereinander hinzugefügt werden. Außerdem kann jeder Button einzeln angepasst werden. Weitere Buttons kannst du mit dem Plus-Icon in der rechten unteren Ecke hinzufügen.

Mit dem ersten Einstellungs-Icon kannst du die Ausrichtung der Elemente, also der einzelnen Buttons, definieren. Dabei kannst du zwischen links ausgerichtet, zentriert ausgerichtet, rechts ausgerichtet und mit Abstand zwischen den Elementen auswählen.

Sofern es das Theme erlaubt, kannst du zusätzlich den die Ausrichtung des Buttons-Block auf die weite oder volle Breite einstellen.

Button-Block (Kind-Element)

Screenshot des Buttons-Blocks, es wurden zwei Buttons mit Text hinzugefügt. Beim zweiten Button ist der Stil zu Kontur geändert worden.

Wenn du nun auf einen einzelnen Button klickst, bleiben die Ausrichtungs-Einstellungen des Eltern-Elements sichtbar und es kommen weitere Einstellungsmöglichkeiten für den individuellen Button hinzu.

Bei den einzelnen Button-Elementen kannst du wie gewohnt eine URL eingeben und diese in einem neuen Tab öffnen lassen, falls nötig. Den Text auf dem Button kannst du außerdem fett und kursiv setzen.

Die Texte auf den Buttons können wie gewohnt fett und kursiv eingestellt werden. Hinter dem kleinen Pfeil nach unten verstecken sich weitere Funktionen zur Textformatierung. Diese und die Einstellungen im weiterführenden Menü hinter den drei Punkten am Ende erklären wir dir auf der Übersichtsseite der Blöcke unter Die Block-Werkzeugleiste.

Die Einstellungen in der Seitenleiste

Buttons-Block (Eltern-Element)

Screenshot der Buttons-Einstellungen in der Seitenleiste, also des Eltern-Elements.

Beim Buttons-Block, dem Eltern-Element, kannst du in der Seitenleiste unter Layout als erstes die Ausrichtung der Elemente (wie in der Werkzeugleiste) anpassen. Zusätzlich kannst du hier die Richtung der Buttons bestimmen, also horizontal (nebeneinander) oder vertikal (untereinander). Die Option “Erlaube Umbrechen auf mehrere Zeilen” ist standardmäßig aktiviert und sorgt dafür, dass wenn der Platz für die Buttons zu eng wird, z. B. in einer mobilen Ansicht, dass die Buttons untereinander dargestellt werden.

Bei Größe hast du zwei Optionen: einmal der Außenabstand, der über die drei Punkte rechts neben der Überschrift eingeblendet werden kann. Mit dem Außenabstand kannst du bestimmen, ob die Buttons einen genauen Abstand zu anderen Blöcken erhalten sollen. Beim Buttons-Block ist der Außenabstand nur für oben und unten möglich, erkennbar an den zwei schwarzen Balken oben und unten beim Viereck vor dem Eingabefeld. Als Einheiten kannst du zwischen Pixel, Prozent, Em, Rem, VW (Viewport Width) und VH (Viewport Height) wählen. Stellst du hier einen Abstand ein, gilt er für beide Seiten. Dies kannst du über den blauen Button rechts daneben umstellen, sodass du zwei Textfelder erhälst, bei denen du die Abstände separat eintragen kannst.

Mit der zweiten Einstellung Block-Abstände kannst du festlegen, wie groß der Abstand zwischen den einzelnen Button-Blöcken sein soll.

Button-Block (Kind-Element)

Screenshot der Button-Einstellungen in der Seitenleiste, also des Kind-Elements.

Bei den einzelnen Button-Blöcken kannst du standardmäßig zwischen zwei Stilen wählen, dem gefüllten Stil und dem Kontur-Stil. Ebenfalls kannst du einen Standard-Stil festlegen, welcher automatisch für einen neu erstellten Button gesetzt wird.

Bei der Einstellung für Rand kannst du einstellen, ob der Button leicht oder stärker abgerundete Ecken haben soll. Du kannst den Wert entweder über das Eingabefeld oder den Slider definieren. Dieser gilt standardmäßig für alle vier Ecken. Über den blauen Button rechts kannst du zum Einzel-Modus umschalten, bei dem du jede Ecke individuell einstellen kannst.

Mit Einstellungen der Breite kannst du einem Button eine fest definierte Breite geben, die dieser abhängig von der verfügbaren Inhaltsbreite einnimmt.

Unter Typografie kannst du die Textgröße sowie aktuell nur den Schriftnamen (Schriftart) ändern. Letzteres ist aber noch nicht vollständig unterstützt (Stand 5.9).

Bei Größe kannst du den Innenabstand wählen, entweder für alle vier Seiten gleich oder einzeln angepasst über den blauen Button rechts.

In älteren Versionen des Block-Editors gab es in der Seitenleiste Link-Einstellungen. Unter anderem gab es ein Eingabefeld für das rel Attribut beim Link. Dieses findet sich nun beim Button-Block unter Erweitert. Hier kannst du, wenn nötig, nofollow, noreferrer oder die neuen Attribute sponsored oder ugc einfügen.

Farbe & Erweitert

Unter Farbe findest du die Möglichkeit, die Text-, Hintergrund- und Linkfarbe für den gewählten Block zu ändern. Eine Übersicht, welche Einstellungen möglich sind, findest du auf der Block-Übersichtsseite.

Unter Erweitert kannst du einen HTML-Anker und zusätzliche CSS-Klassen definieren, mehr dazu findest du ebenfalls auf der Block-Übersichtsseite.

Umwandeln in andere Blöcke

Du kannst einen Button nicht in andere Blöcke umwandeln. Die Umwandlung in die Blöcke Spalten und Gruppe bewirkt, dass der Buttons-Block in einen Gruppen-Block verschoben wird.