Teil 4: Die Grundlegenden Blöcke des WordPress-Block-Editors

In einer Serie von Anleitungen führen wir Sie in den neuen Standardeditor von WordPress ein. Dies ist Teil 4 unseres Block-Editor-Tutorials, in dem wir Einblick in die grundlegendsten Blöcke und Ihre Einstellungen geben.

Übersicht der Beiträge unseres Block-Editor-Tutorials

Teil 1: Eine Einführung in den Block-Editor
Teil 2: Dokument-Einstellungen der Beiträge und Seiten
Teil 3: Die wichtigsten Grundfunktionen und Einstellungen
Teil 4: Grundlegende Blöcke (dieses Tutorial)
Teil 5: Strukturelle und komplexe Blöcke
Teil 6: Überblick über Struktur und Inhalt
Teil 7: Wiederverwendbare Blöcke
Teil 8: Widgets

Die Einstellungs-Bereiche des Block-Editors

Für das Erstellen der Inhalte einer Seite oder eines Beitrags, sind drei Bereiche des Block-Editors wichtig: In Abbildung 1 sehen Sie die obere Werkzeugleiste (Punkt 1), die rechte Seitenleiste (Punkt 2) mit Block-Einstellungen (Punkt 2.1) und die Block-Werkzeugleiste (Punkt 3).

Die Bedienelemente innerhalb dieser Bereiche variieren intelligent je nach ausgewähltem Block, da jeder Block individuelle Einstellungsmöglichkeiten besitzt. Dokument-Einstellungen führen ebenfalls zu Veränderungen der Bedienelemente, Bezeichnungen und Funktionen.

Punkt 1: Die obere Werkzeugleiste

Im linken Bereich der oberen Werkzeugleiste können Sie über das „+“ einen neuen Block hinzufügen. Über die Pfeile revidieren Sie Arbeitsschritte oder wiederholen sie. Die drei folgenden Optionen lassen sich leichter in Verbindung mit Ihren Funktionen zu erläutern, auf die wir zu einem späteren Zeitpunkt genauer eingehen.
Hinweis: Quereinsteiger des Tutorials finden weitere Informationen der oberen Werkzeugleiste im vorherigen Tutorial Die wichtigsten Grundfunktionen und Einstellungen.

Punkt 2: Die rechte Seitenleiste – Block-Einstellungen

Anpassungen für Blöcke nehmen Sie unter dem Reiter Block vor (Abbildung 1 Punkt 2.1). Hier können Sie in Abhängigkeit des verwendeten Blocks allgemeine Einstellungen wie z.B. Farben, Hintergrundfarben, Bild- und Textgrößen vornehmen.
Der Unterpunkt Erweitert wird für CSS-Kenner interessant: Er bietet die Möglichkeit, CSS-Klassen für den Block zu vergeben, um diese individuell mit Hilfe von CSS zu gestalten. Bei einigen Blöcken, wie zum Beispiel den Überschriften, lassen sich IDs für Anker-Links (Sprungmarken) vergeben.

Punkt 3: Die Block-Werkzeugleiste

Über die Block-Werkzeugleiste können je nach Block unterschiedliche Einstellungen vorgenommen werden.

Un nu geiht dat los!

Zum Erstellen von Inhalten und somit auch Blöcken haben wir eine neue Seite erstellt. Der Block-Editor kann aber auch in Beiträgen verwendet werden.
Hinweis: Es gibt häufig mehrere Methoden, Blöcke anzulegen und Inhalte anzupassen. Für eine bessere Übersicht konzentrieren wir uns in der Regel auf einen Weg.

Titel und Permalink

Nach dem Erstellen eines Beitrags vergeben Sie zunächst einen Beitragstitel durch einen Klick in den Bereich „Titel hier eingeben“. Vergeben Sie einen Titel und „Speichern“ Sie über den gleichnamigen Link in der oberen Werkzeugleiste. Daraufhin wird automatisch ein Permalink generiert.
Hinweis: Beachten Sie bei der automatischen Generierung des Permalinks, dass Umlaute korrekt umgewandelt und Satzzeichen erst entfernt werden, wenn die Seite veröffentlicht wird. Der Block-Editor stellt aktuell diese Umwandlung beim ausschließlichen Speichern nicht korrekt dar.
Tipp: Möchten Sie den Permalink ändern, nehmen Sie diese Änderung bitte vor der Veröffentlichung vor, da Änderungen im Nachhinein zu fehlerhaften Verlinkungen, sogenannten 404-Seiten, führen.
Wenn Sie den Permalink korrigieren müssen oder wollen, gehen Sie wie folgt vor:

• Klicken Sie erneut auf den Titel, erscheint über ihm eine weiße Leiste mit dem Permalink. Klicken Sie auf Bearbeiten, können Sie den Permalink bearbeiten. Das Speichern nicht vergessen, da sonst die Änderung nicht wirksam ist (Abbildung 2).

• Alternativ passen Sie den Permalink durch die Dokument-Einstellung an, detailliert erklärt in: Dokument-Einstellungen der Beiträge und Seiten.

Blöcke anlegen

Den ersten Block erstellen Sie unterhalb Ihres Seitentitels. Dort sehen Sie einen Text und daneben ein „+“ (Abbildung 3).
Zu Anfang ist es am einfachsten, über das „+“ den gewünschten Block auszuwählen, da Sie die Block-Namen noch nicht kennen. Mit mehr Übung können Sie in die Kurzschreibweise übergehen.

Hinweis: Es kommt vor, dass Sie nur den Text oder nur das „+“ sehen. Nicht in Panik geraten, mit dem Klick auf den Text erscheint auch wieder das „+“.
Über das „+“ öffnet sich die Block-Bibliothek (Abbildung 4.1), in der sich alle vorhandenen Blöcke befinden.

Über den kleinen Pfeil oben rechts (In der Abbildung 4.1 rot markiert) können Sie den geöffneten Eintrag schließen und sehen die komplette Liste der Blöcke (Abbildung 4.2) nach Themen gruppiert. Unter dem Eintrag Meistgenutzt werden die von Ihnen am häufigsten verwendeten Blöcke angezeigt.

Hinweis: Nutzen Sie das „+“ in der oberen Werkzeugleiste, um einen Block hinzuzufügen, wird Ihnen beim Mouseover der Blöcke eine Vorschau angezeigt. Eine kurze Erklärung zum Block wird ebenfalls mitgeliefert. Eingefügt wird der Block unterhalb Ihrer derzeitigen Block-Position.
Eine Variante zusätzliche Blöcke anzulegen bietet die Block-Werkzeugleiste: Über das Mehr-Optionen-Bedienelement/Drei-Punkte-Icon (Abbildung 5 Punkt 1) können Sie einen neuen Block Davor- oder Danach einfügen (Abbildung 5 Punkt 2).

Last but not least erlauben es Ihnen einige Blöcke mithilfe der Enter-Taste, schnell einen weiteren Block anzulegen. Probieren Sie es einfach aus.

Die grundlegenden Blöcke zum Einfügen von Inhalten

Die folgenden Blöcke sind die wichtigsten Blöcke, um Inhalte in Ihren Beitrag oder auf Ihre Seite einzufügen. Die Liste der grundlegenden Blöcke, auf die wir im Detail eingehen, schließt viele “Allgemeine Blöcke” und einige “Layout-Elemente” ein:

• Absatz-Block (Allgemeine Blöcke)
• Überschrift-Block (Allgemeine Blöcke)
• Blöcke verschieben
• Mehr-Block (Layout-Elemente)
• Zitat-Block (Allgemeine Blöcke)
• Liste-Block (Allgemeine Blöcke)
• Bild-Block (Allgemeine Blöcke)
• Galerie-Block (Allgemeine Blöcke)
• Buttons-Block (Layout-Elemente)

Absatz-Block

Der Absatz-Block ist der Standard-Block und wird automatisch verwendet, sobald Sie ohne eine Block-Auswahl anfangen, Ihren Text zu tippen. Jeder durch die Enter-Taste erzeugte Absatz wird in einem neuen Absatz-Block angelegt.

Den geschriebenen Text passen Sie bei Bedarf über die Block-Einstellungen (Abbildung 6 Punkt 1) nach Ihren Wünschen an. Über die Block-Werkzeugleiste (Abbildung 6 Punkt 2) können Sie Dinge wie die Textausrichtung, den Schriftschnitt, individuelle Farbveränderungen und Verlinkungen bestimmen.

Text in verschiedenen Farben darstellen

In den Block-Einstellungen (Abbildung 6 Punkt 1) vergeben Sie unter Farbeinstellungen eine grundlegende Textfarbe – diese gilt für den kompletten Absatz-Block. Um nur einen Teil des Textes andersfarbig zu gestalten, markieren Sie zunächst den gewünschten Textteil. Im nächsten Schritt navigieren Sie sich in der Block-Werkzeugleiste (Abbildung 6 Punkt 2), über den kleinen Pfeil neben dem Link-Bedienfeld (Büroklammer-Icon) zu dem Punkt Textfarbe. Nun können Sie eine vordefinierte Farbe wählen oder bestimmen eine individuelle Farbe über die gleichnamige Option (Abbildung 7).

Nehmen Sie sich etwas Zeit und machen sich weiter mit den Einstellungsmöglichkeiten des Absatz-Blocks vertraut: Diesen Block werden Sie am meisten verwenden.

Setzen Sie einen Link

Markieren Sie einen Textteil und verlinken diesen über das Link-Bedienelement (Büroklammer-Icon) über die Block-Werkzeugleiste. Zum Aufheben der Verlinkung klicken Sie erneut auf das Bedienelement.
Tipp: Beim Verlinken auf externe Websites stellen Sie den Regler In einem neuen Tab öffnen auf „an“ (Abbildung 8). Sie wollen ja nicht, dass Ihre Besucher Sie verlassen.

Überschrift-Block

Ihre Überschrift erhält einen eigenen Block, mit eigenen Block-Einstellungen. Er ähnelt dem Absatz-Block. Passen Sie Ihre Überschrift durch die Block-Einstellungen und Block-Werkzeugleiste an.
Tipp: Beachten Sie die Syntax Ihrer Überschriften und sorgen Sie für eine saubere Struktur. H1 ist die größte und H6 die kleinste Überschrift. H1 ist für den Titel der Seite oder des Beitrags reserviert und sollte nur einmal auf jeder Seite vorkommen. Entsprechend können Sie H1 im Block-Editor nicht auswählen.

Exkurs: Blöcke verschieben

Fällt Ihnen nach der Erstellung des Überschriften-Blocks auf, dass sich die Überschrift oberhalb des Absatz-Blocks besser machen würde, ändern Sie einfach die Reihenfolge über die 6 Punkte am linken Rand eines Blocks. Sie können einen Block mit Hilfe von Drag & Drop verschieben. Eine blaue Linie erscheint an der Stelle, wo der Block eingesetzt würde. Oder aber, Sie klicken über die Pfeile den Block an die gewünschte Position (Abbildung 9).

Mehr-Block

Den Mehr-Block setzen Sie ein, um auf Übersichtsseiten (z. B. Kategorieseiten) einen Vorschau- oder auch Kurztext zu bestimmen. Wann der Mehr-Block und wann der Textauszug (aus den Dokument-Einstellungen) zum Einsatz kommen, richtet sich nach dem verwendeten Theme. Eine individuelle Beschriftung des Buttons erfolgt durch das Klicken auf den Button-Text „Weiterlesen“. Übrigens: Für die Einzelansicht eines Beitrags spielt dieser Block keine Rolle. Hier wird immer der gesamte Inhalt angezeigt.
Tipp: Für mehr Infos zum Thema Kurzversion Ihrer Blockbeiträge und welche Rolle in diesem Zusammenhang der „Mehr“-Block bzw. Weiterlesen-Tag spielt, können Sie in dem Beitrag WordPress Beiträge mit Weiterlesen-Tag oder Auszug kürzen von Thomas Weichselbaumer nachlesen.

Zitat-Block

Der Zitat-Block bietet Ihnen die Möglichkeit, ein Zitat in dem Standard- oder Groß-Stil anzuzeigen. Einzustellen ist dies in den Block-Einstellungen. Den Unterschied erkennen Sie bereits bei der Auswahl.
Neben dem Zitat können Sie auch die dazugehörige Quelle angeben (Abbildung 10). Beide Bereiche können unabhängig voneinander durch die Block-Werkzeugleiste gestaltet werden.

Liste-Block

Ihre Aufzählungen bekommen auch einen eigenen “Liste-Block“. Sie können in der Block-Werkzeugleiste wählen, ob Sie mit vorangestellten Zeichen oder Zahlen auflisten wollen. Über die entsprechenden Bedienelemente passen Sie das Schriftbild an. Die Abbildung 11 zeigt die Block-Werkzeugleiste des Liste-Blocks.

Die Enter-Taste erzeugt einen neuen Listen-Punkt. Mit der Rückschritt-Taste können Sie einen Listen-Punkt bei Bedarf wieder löschen.

Bild-Block

Sobald Sie sich für den Bild-Block entscheiden, können Sie zwischen Hochladen, Mediathek und Von URL einfügen wählen (Abbildung 12.1).

Die Mediathek enthält alle vorhandenen Bilder. Über den gleichnamigen Reiter können Sie Dateien hochladen (Abbildung 12.2).

Hinweis: Wir raten aus datenschutzrechtlichen Gründen von der Möglichkeit, Bilder über die Verlinkung einer URL einzubetten, ab.
Nach der Auswahl des Bildes bietet die Block-Einstellungen mehrere Darstellungs-Möglichkeiten. Unter Style wird definiert, ob das Bild im Standard-Stil (mit Ecken) oder Abgerundet angezeigt werden soll. Die Bild-Einstellung hält den Alt-Text, die Bildgröße und Bildabmessungen bereit.
Tipp: Vergeben Sie einen Alternativ Text (Alt-Tag)! Dieser wird angezeigt, sollte Ihr Bild nicht ordnungsgemäß laden. Für Screen-Reader, die sehschwache Personen die Website vorlesen, ist dies ebenfalls sehr wichtig! Google nutz Alternativ-Text und Bild-Titel für eine erfolgreiche Platzierung in den Suchergbnissen.
In der Block-Werkzeugleiste kann zusätzlich die Ausrichtung eines Bildes geändert werden (zweites Bedienelement von links – Abbildung 13).

Ausrichtungsmöglichkeiten

• Links- und Rechtsbündig, sowie zentrieren ist selbsterklärend.
• Weite Breite platziert das Bild über die vordefinierte Seitenbreite (Wird je nach Theme definiert oder eingestellt).
• Die Gesamte Breite ist fensterfüllend.

Unterhalb des Bildes wird, falls vorhanden, automatisch die Beschriftung hinzugefügt. Wenn nicht gewünscht – einfach löschen!
Tipp: Für die Nutzung der Weite Breite oder Gesamte Breite Einstellung, stellen Sie in den Block-Einstellungen (Bild-Einstellung > Bildgröße) die Vollständige Größe ein. In dem Beitrag Bilder optimal für WordPress vorbereiten, finden Sie weitere Optimierungs-Kniffe.

Galerie-Block

Das Hinzufügen oder Auswählen von Bildern haben wir beim Bild-Block erklärt. Beim Galerie-Block können in den Block-Einstellungen die Spaltenanzahl, Bilder zuschneiden, Link zu und Bildgröße eingestellt oder ausgewählt werden.
Über die Bildergröße definieren Sie die anzuzeigende Galerie-Größe, sofern weitere Einstellungen es zulassen. Testen Sie die einfach.
Wenn gewünscht, vergeben Sie eine Galerie-Beschriftung oder einzelne Beschriftungen der Bilder.
Die Reihenfolge der Bilder ändern Sie über die, in Abbildung 14 markierten, Pfeile. Jederzeit können Sie weitere Bilder hinzufügen, die Ausrichtung ändern oder Bilder entfernen.

Hinweis: Um ein Galeriebild bei einem Mausklick in voller Größe anzuzeigen, müssen Sie Mediendatei in den Block-Einstellungen unter Link einstellen. Übrigens: Vermeiden Sie die Anhangseite! Mehr zu den Gründen lesen sie in unserem Beitrag Anhang-Seiten deaktivieren.

Buttons-Block

Den letzten grundlegenden Block stellen wir Ihnen jetzt vor … Trommelwirbel …. den Buttons-Block! Mittels Buttons können Sie zum Beispiel elegant zu Unterseiten verlinken oder Downloads anbieten. Die Buttons konfigurieren Sie in den Block-Einstellungen. Dort finden Sie die nachfolgenden Optionen:

Styles
1. Unter Styles bestimmen Sie, ob Ihr Button eine Hintergrundfarbe oder lediglich eine Umrandung erhält.
Hintergrund- und Textfarbe
2. Textfarbe ändern: Bestimmen Sie, welche Farbe der Text haben soll.
3. Hintergrund: Bestimmen Sie, ob der Hintergrund einfarbig oder ein Farbverlauf Ihrem Button das gewisse Extra verleihen soll.
Rand-Einstellungen
4. Eckenradius: Möchten Sie Ihren Button eher rund, leicht abgerundet oder eckig? Hier wird’s eingestellt.
Link-Einstellungen
5. In einem neuen Tab öffnen: Sobald die hinterlegte URL auf eine externe Seite führt, ist es von Vorteil, diese Option zu nutzen.
6. Link rel: Links können mit rel-Attributen wie dem nofollow ausgestattet werden. Mehr Informationen zu dem Thema erhalten Sie hier.
Jetzt haben Sie den Button optisch aufgehübscht. Damit der Button nun auch seinem Job nachkommen kann, muss er noch verlinkt werden. Der Link wird über das Bedienelement Link (Büroklammer-Icon) der Block-Werkzeugleiste eingefügt (Abbildung 16 Punkt 1). Jetzt können Sie den Link einfügen (Abbildung 16 Punkt 2) und das Ganze abspeichern über den Pfeil aus Abbildung 16 Punkt 3.

Die Verlaufseinstellungen

• Abbildung 17, Punkt 1 zeigt Ihnen die Verlaufsoptionen, nachdem Sie unter Hintergrund auf den Button Verlauf geklickt haben.
• Punkt 2: Hier können Sie vorgefertigte Verläufe wählen oder Sie passen Verläufe nach Ihren Vorstellungen an.
• Punkt 3: Dazu klicken Sie in die Kreise, bestimmen eine Farbe. Durch weitere Klicks in den Balken, werden weitere Farbpunkte/Kreise angelegt, denen Sie ebenfalls eine Farbe geben können. Das Positionieren der Kreise im Balken beeinflusst den Farbverlauf, Übergang und die Farbdominanz.
• Punkt 4: Radial oder linear? Hier wird umgestellt.
• Punkt 5: Bei der Wahl des linearen Verlaufs stellen Sie einen Winkel für den Verlauf ein.

Hinweis: Ihre Änderungen können Sie direkt im Button beobachten.

Sie möchten zwei oder fünf Buttons nebeneinandersetzen?

Ach wie gut, dass der Block-Editor daran gedacht hat ;-)
Über das „+“ neben dem Button können weiteren Buttons hinzugefügt werden (Abbildung 18).

Hinweis: Bei Platzmangel ordnen sich die Buttons automatisch über mehrere Zeilen an.