Bloecke Cat Design

Block Buttons

Name des Blocks: Buttons
Englische Bezeichnung: Buttons
Ist in der Sektion: Design
Getestet mit WordPress-Version: 5.6
Überarbeitet am: 1. November 2020
Getestet mit WordPress-Theme: Twenty Twenty
Block Buttons
Block Buttons

Werkzeugleiste

Spalten

Alle Blöcke können in Spalten umgewandelt werden. Klickt man auf das erste Icon der Block-Werkzeugleiste wird ein Menü aufgeklappt. 

Dort wurde mit WordPress 5.6 die Option “Spalten” hinzugefügt. Das fehlt auf einigen Abbildungen.

Icon mit Pfeil nach oben/unten

Wenn mehr als ein Block in den Inhaltsbereich eingefügt wird, erhält die Block-Werkzeugleiste zwei weitere Icons. Auf dem Bild rechts wird das Icon mit den Pfeilen nach oben und nach unten hervorgehoben.

Durch Klick auf eins der Pfeile wird der Block in die entsprechende Richtung bewegt.

Icon mit Drag-and-Drop-Funktion

Dieses Icon gibt es seit WordPress 5.5.2. Klick darauf, Mauszeiger gedrückt halten und den Block an die gewünschte Stelle ziehen.

Beide Icons sind auf den meisten hier abgebildeten Block-Werkzeugleisten nicht zu sehen.

Seitenleiste

Beitrag oder Seite statt Dokument

In der rechten Seitenleiste hieß der erste Tab bislang immer Dokument.

Dies wurde nun geändert, je nachdem, ob man an einer Seite oder einem Beitrag arbeitet, steht dort der entsprechende Name.

Für diese Änderung wurden die Abbildungen auf gutenberg-editor.de nicht extra neu erstellt.

Theme Twenty Twenty-One

Zusätzliche Styles

Alle Abbildungen auf gutenberg-editor.de wurden mit dem Theme Twenty Twenty erstellt. Mit WordPress 5.6 gibt es ein neues Standard-Theme: Twenty Twenty-One.

Im Großen und Ganzen ähneln sich die Darstellungen im Adminbereich. Doch hin und wieder hat das neue Theme zusätzliche Styles, zum Beispiel beim Block Bild die Styles Frame und Borders (Rahmen). 

Farbtafeln

Das neue Theme Twenty Twenty-One stellt andere Auswahlfarben zur Verfügung als das Theme Twenty Twenty.

Rechts ist oben die Farbtafel von Twenty Twenty und darunter die von Twenty Twenty-One zu sehen.

Selbstverständlich stehen in beiden Themes unter dem Link “individuelle Farbe” alle denkbaren Farben zur Verfügung.

Generell gilt: Jedes Theme kann hinsichtlich Darstellung variieren. Die Grundelemente jedoch sollten sich kaum unterscheiden.

Beschreibung: Block Buttons

Der Block Button, über den man einen einzelnen Button einfügen konnte, wurde durch den Block Buttons ersetzt. Mit dem Block Buttons ist das Einfügen eines einzelnen oder mehrerer Buttons, inklusive Verlinkung auf Dateien, Seiten oder Medien, möglich.

Nachdem der Block Buttons in den Inhaltsbereich eingefügt wurde, befindet sich der Cursor innerhalb des ersten Buttons, was das Tippen der Beschriftung ohne Umwege ermöglicht. Rechts davon ist der Inserter (Plus-Icon), über den sich der nächste Button per Klick einfügen lässt.

Hält man den Mauszeiger über das ganz links befindliche Icon der Werkzeugleiste taucht oberhalb ein neues Icon auf. Klickt man auf dieses gelangt man in den Elternblock – der Container, der alle Buttons beinhaltet. 

Sowohl Kindelement (einzelner Button) als auch das Elternelement (Container/übergeordneter Block) haben unterschiedliche Werkzeugleisten mit teils anderen Funktionen (siehe Bilder in der Spalte “Werkzeugleiste” rechts).

Werkzeugleiste

Der Text des Buttons kann über die Werkzeugleiste formatiert und der Block verlinkt sowie nach rechts oder links verschoben werden, siehe Spalte “Werkzeugleiste”.

Der Elternblock kann links, rechts oder zentriert ausgerichtet werden.

Seitenleiste

Die Seitenleiste bietet zusätzlich die Optionen, zwischen zwei vorgegebenen Stilen zu wählen, der Eckenradius kann separat eingestellt werden.

Optional sind frei wählbare Textfarbe sowie Hintergrundfarbe und -verlauf. Die Verlinkung des Buttons ist in einem anderen Tab (oder Fenster – je nach Browsereinstellung), auch das Setzen eines rel-Attributes ist möglich.

Werkzeugleiste

T Buttons 01

Von links nach rechts:

  1. Block-Style ändern
  2. Nach links oder rechts bewegen
  3. Button verlinken
  4. Text fett markieren
  5. Text kursiv markieren
  6. Dreieck
    1. Text durchstreichen
    2. Hochgestellt
    3. Inline-Bild
    4. Code-Auszeichnung
    5. Textfarbe
    6. Tiefgestellt
  7. Weitere Optionen
Formatierungen ansehen
Formatierungs Icons
Zum Vergrößern Klick aufs Bild
Tastaturkürzel ohne eckige Klammern ausführen.
T Buttons 02
T Buttons 03
T Buttons 04

Von links nach rechts:

  1. Block-Typ ändern
  2. Nach oben/unten bewegen
  3. Ausrichtung
    1. Block links ausrichten
    2. Block zentrieren
    3. Block rechts ausrichten
  4. Weitere Optionen

Seitenleiste

Hintergrund: Farbe

S Buttons 02

Hintergrund: Farbverlauf

S Buttons 03

WordPress 5.3

Video-Anleitung zum Block Buttons

Mit Klick auf das Bild wird eine Verbindung zu YouTube hergestellt, was datenschutzrechtliche Relevanz hat. Mehr dazu in der Datenschutzerklärung.

Funktionsübersicht: Block Buttons

Block-Kategorie:
Design
Block-Ausrichtung:
Keine, Links, Rechts, Zentriert
Text-Farbe:
Komplett, Teilweise
Text-Formatierung:
Durchgestrichen, Fett, Inline-Bild, Inline-Code, Kursiv, Hochgestellt, Tiefgestellt
Text-Link:
Ja
Hintergrund:
Farbverlauf, Hintergrundfarbe
Block-Typ-Umwandlung in:
Sonstiges:
Eckenradius, HTML-Anker
Änderung in Block-Stil:
Füllen, Kontur
Standard-Stil festlegen:
Ja
CSS-Klasse (Block-Stil):
is-style-fill, is-style-outline
Mit Block Classic erstellbar:
Nein
Scroll to Top