Layout Elemente, Listen, Zitate | Gutenberg Tutorial Teil 6

Nachdem Texte und Bilder ihren Platz auf der Webseite gefunden haben, kommen im 6. Teil des Tutorials Listen, Zitate und Layout Elemente wie Buttons, Spalten, etc. dazu.

Aktualisiert am 02-02-2020, Ellena

Layout Gutenberg
Grafik: eb (Logo: Gutenberg)

Layout Elemente im Gutenberg Editor

In den drei vorherigen Teilen meines Gutenberg Tutorials hast du die wichtigsten Allgemeinen Blöcke kennengelernt (s. Abb. 29 links). Obwohl auch Listen und Zitate dazu zählen, habe ich sie unter Layout Elemente eingeordnet, da sie irgendwie eine Zwischenstellung einnehmen.

Sowohl im Gutenberg Editor erstellte Listen als auch Zitate können bzgl. des Designs später je nach Webseite unterschiedlich aussehen. Zwar gibt es keinen Unterschied im Backend. Aber insbesondere bei Zitaten zeigt sich u. U. ein deutlicher Unterschied im Frontend. Denn das Aussehen im Browser wird auch von dem, einer Webseite zugrunde liegenden, Theme bestimmt.

Listen

Zunächst erstellst du wieder einen neuen Block, indem du im Auswahlmenü auf Liste klickst. Die weiteren Anpassungsmöglichkeiten richten sich danach, ob es sich um eine Liste mit Punkten oder um eine nummerierte Liste handelt. Wenn du mit einer Liste beginnst, bietet dir der Editor standardmäßig immer eine Punkte-Liste an.

Hinter den ersten Punkt schreibst du nun deinen Text. Im Gegensatz zu einem normalen Textblock, bei dem du mittels Betätigen der Eingabe-Taste einen neuen Block erstellt, gelangst du hier in eine neue Zeile bzw. der nächsten Punkt auf deiner Liste erscheint.

Falls deine Liste Unterpunkte enthalten soll, gehst du wie folgt vor:

  1. Betreffende Zeile markieren und
  2. im Bearbeitungsmenü auf das
  3. Zeilensymbol mit Pfeil nach rechts klicken.

Die markierte Zeile rückt etwas nach rechts. Auch alle Zeilen, die du danach über die Eingabe-Taste erstellst, beginnen dann an der „eingerückten“ Stelle. Außerdem verändert sich das Aussehen des Listen-Symbols. Aus dem Punkt wird ein Kreis. Wenn eine oder alle folgenden Zeilen wieder ganz links beginnen sollen, markierst du sie und klickst dieses Mal auf das Textsymbol mit dem Pfeil nach links (s. Abb. 30).

Darüber hinaus hast du bei der Punkte-Liste neben den üblichen Bearbeitungswerkzeugen wie Highlight- / Textfarbe, Fett, Kursiv und Verlinkung keine weiteren Anpassungsmöglichkeiten. Anders ist das bei einer nummerierten Liste. Denn in der rechten Seitenleiste stehen dir die Optionen, einen Ausgangswert für die Nummerierung bestimmen und / oder die Nummerierung umkehren zur Verfügung (s. Abb. 30 rechts).

Zitate

Auch beim Zitat-Block hast du zwei Optionen. Entweder Standard oder Groß. Wobei die Eingabemaske bei beiden gleich ist, nur im Frontend ist bei der zweiten Variante die Schrift des Zitat-Textes größer (s. Abb. 31, 32).

Zunächst schreibst du den Text in den Zitat-Block (ohne Betätigen der Eingabe-Taste!). Anschließend klickst du auf Schreibe eine Quellenangabe und fügst dort den Namen des Verfassers und eventuell noch einen Link zur Quell-Seite ein. Abgesehen von der Anpassung des Texts über die Bearbeitungsleiste hast du beim Zitat-Block keine weiteren Gestaltungsmöglichkeiten. Denn wie bereits oben erwähnt, wird die Darstellung der Zitate von deinem Theme bestimmt.

Einerseits sind Zitate, wie in meinem Beispiel, oft durch eine vertikale Linie links vom Text gekennzeichnet. Andererseits gibt es aber auch Themes, bei denen Zitate mit einem hervorgehobenen Anführungszeichen beginnen. Wenn du an diesem Layout etwas ändern möchtest, sind Programmierkenntnisse zwingend notwendig. Solange es nur um die Schriftgröße geht, könntest du einen entsprechenden Code unter

  1. Design
  2. Customizer
  3. zusätzliches CSS

einfügen. Falls dir aber das gesamte Design nicht gefällt, müsstest du dies in der CSS-Datei deines Themes ändern. Dazu suchst du die Stellen der Programmierung, die das Design der Zitate bestimmen. Entweder du kopierst die Codes, bearbeitest sie im TextEditor auf deinem PC und

  1. fügst sie im Customizer unter zusätzliches CSS
  2. bzw. in das Stylesheet deines Child-Themes (wenn du eines nutzt) ein.

Oder du überschreibst die Codes in der Original-CSS-Datei deines Themes mit den modifizierten Codes. Jedoch ist insbesondere letzteres vor allem für Anfänger nicht zu empfehlen.

Des weiteren ist dabei zu bedenken, dass alle Änderungen, die du direkt in der CSS-Datei deines Themes vornimmst, nicht dauerhaft sind. Denn sie werden vom nächsten Theme-Update wieder mit der Programmierung des Theme-Entwicklers überschrieben.

Die eigentlichen Layout Elemente

Unter Layout Elemente fasst der Gutenberg Editor sehr unterschiedliche Blöcke zusammen. Allen gemeinsam ist lediglich, dass sie spezielle Gestaltungs-Aufgaben erfüllen. Dementsprechend haben sie mit dem eigentlichen Inhalt wenig zu tun und finden auch nicht auf jeder Seite / in jedem Beitrag Verwendung. Am häufigsten dürften wohl Buttons eingesetzt werden.

Am häufigsten dürften wohl Buttons eingesetzt werden. Dabei handelt es sich um auffällige Schaltflächen, deren Verlinkung i. d. R. auf eine andere Webseite oder auf eine andere Stelle auf deiner Webseite verweist.

Um einen Button einzufügen, klickst du auf

  1. Block-Auswahlmenü
  2. Layout-Elemente
  3. Button

Im sich nun öffnenden Block befindet sich ein schmaler Button und darunter das Eingabefeld für den Link. In der rechten Seitenleiste legst du zunächst den Stil (ohne oder mit Rahmen) fest. Außerdem bestimmst du, ob sich die Zielseite in einem neuen Tab öffnen soll (s. Abb. 33). Anschließend stellst du den Eckenradius (den Grad der Abrundung des Buttons) ein.

Des weiteren könntest du noch die Hintergrund- und die Textfarbe ändern, sofern du nicht die Vorgaben deines Themes beibehalten möchtest. Nachdem du den Text eingeben und die URL des Zieles eingetragen hast, legst du die Orientierung sowohl des Textes als auch des Buttons (links-, rechtsbündig, zentriert) fest (s. Abb. 34).

Üblicherweise ist der Button-Text zentriert und nicht zu lang. Denn auf mobilen Geräten wird der Text sonst möglicherweise in zwei Zeilen dargestellt, was nicht immer besonders ansprechend aussieht.

Gestalterische Layout Elemente

Während Buttons zumindest eine Funktion hinsichtlich der Interaktion der Besucher mit deiner Webseite haben, dienen die Layout Elemente Trennzeichen und Abstandhalter rein optischen Zwecken. Unter Trennzeichen ist eine Linie mit einem vorgegebenen Abstand zum vorhergehenden und nachfolgenden Block zu verstehen. Sowohl die Höhe der Linie als auch die jeweiligen Abstände sind im Gutenberg Editor voreingestellt. Jedoch hast du die Wahl zwischen drei Varianten:

  • Lange Linie über die gesamte Breite des Blocks (nicht der Seite!),
  • kurze Linie (wird nicht von allen Themes übernommen) oder
  • gepunktete Linie – beide in der Mitte des Blocks.

Standardmäßig sind die Trennzeichen hell-grau. Aber du kannst über die Farbeinstellungen auch jede beliebige andere Farbe verwenden. Falls du die Höhe ändern möchtest, wäre dies wiederum nur über einen eigenen CSS-Code möglich.

Anders beim Abstandhalter, der dazu dient, zwei Blöcke beliebig weit auseinander zu rücken. Nachdem du unter Layout Elemente den Abstandhalter gewählt hast, erscheint ein Block mit einer vorgegebenen Höhe von 100 px. Diese kannst du entweder über die Einstellungen in der rechten Seitenleiste oder durch Bewegen des blauen Punkts im Block selbst verändern (s. Abb. 35).

Wenn du die Höhe neu bestimmst, sollte du Wirkung sowohl auf Desktops als auch auf mobilen Geräten überprüfen. Was auf einem großen Bildschirm gut aussieht, kann auf einem kleinen Bildschirm irritieren. Denn wenn der „weiße Zwischenraum“ dort fast den gesamten Bildschirm einnimmt, könnte der Besucher meinen, der Beitrag sei zu Ende und die Seite vorzeitig verlassen.

Falls du die Layout Elemente Zitat, Button, Trennzeichen und Abstandhalter mehrfach verwenden möchtest, kannst du jeweils den von dir gewählten Stil als Standard-Stil speichern. So erscheinen sie beim nächsten Einsatz direkt in „deinem“ Stil.

Spalten

Nachdem das Einfügen der letzten drei Layout Elemente relativ einfach war, ist das Gestalten eines Spalten-Layouts etwas aufwendiger. Wenn du im Auswahlmenü für den neuen Block auf Spalten geklickt hast, bietet dir der Gutenberg Editor direkt fünf Varianten an. Entweder entscheidest du dich für eine davon oder du klickst auf Überspringen. Unabhängig davon, welche Wahl du getroffen hast, kannst du das Layout auch später jederzeit noch verändern (s. Abb. 36).

  1. In eine Spalte klicken
  2. in der rechten Seitenleiste eine andere prozentuale Breite einstellen

Auch die Anzahl der Spalten passt du über die rechte Seitenleiste an, indem du in den Spalten-Block klickst und die Anzahl verringerst oder erhöhst.

Außerdem kannst du dann über das Bearbeitungsmenü den gesamten Block auch noch links-, rechtsbündig oder mittig ausrichten sowie dich für weite oder gesamte Breite entscheiden (s. Abb. 37). Jedoch spielen diese Anpassungen nur auf Desktops eine Rolle. Denn aufgrund des Responsive-Designs erscheinen die Spalten auf Geräten mit kleinerem Bildschirm i. d. R. untereinander.

Um die Spalten mit Inhalt zu füllen, klickst du auf das Plus-Zeichen in einer Spalte und erstellst einen Text- oder Bild-Block. Anschließend fügst du weitere Blöcke ober- oder unterhalb ein und bearbeitest sie, wie du es beim Gutenberg Editor gewohnt bist.

Am besten ist es, wenn der Inhalt der einzelnen Spalten in etwa gleich lang ist, die Spalten also die gleiche Höhe haben. Wenn der Unterschied zu groß ist, ergibt das kein besonders harmonisches Bild.

Gruppe

Eines der noch recht neuen Layout Elemente ist die Gruppe. Der Vorteil ist, dass so mehrere Blöcke zusammengefasst sind und sich als „ein Block“ gemeinsam bewegen lassen. Darüber hinaus kannst du die Gruppe farblich hervorheben. Während eine Änderung der Hintergrundfarbe des Spalten-Blocks nicht vorgesehen ist, klickst du hier auf den Gruppe-Block und bestimmst über die Einstellungen in der rechten Seitenleiste eine neue Farbe.

Außerdem bietet dir der Gutenberg Editor auch für die Gruppe neben der normalen noch die weite bzw. gesamte Breite an (s. Abb. 38). Um eine Gruppe zu erstellen,

  1. klickst du auf einen bereits vorhanden Block,
  2. dann auf Umwandeln in (links im Bearbeitungsmenü)
  3. und wählst Gruppe aus (s. Abb. 39).

Anschließend hast du zwei Möglichkeiten. Entweder du erstellst mittels Davor / Danach einfügen einen neuen Block.

Oder du klickst auf einen anderen vorhandenen Block,

  1. bewegst ihn über die Gruppe bis eine blaue Linie an der gewünschten Stelle erscheint
  2. und fügst ihn dort ein = Drag&Drop (s. Abb. 40).

Mittels beider Methoden kannst du natürlich deiner Gruppe noch beliebige Blöcke hinzufügen.

Spezielle Layout Elemente – Seitenumbruch

Die beiden letzten Layout Elemente tragen weniger zur Gestaltung eines Beitrags bei, sondern wirken sich eher auf dessen sichtbare Länge aus. So führt das Einfügen eines Seitenumbruchs dazu, dass ein sehr langer Beitrag auf zwei oder mehr Seiten aufgeteilt wird.

Während sich der gesamte Beitrag im Gutenberg Editor auch weiterhin auf einer Seite befindet, ist er anschließend für die Besucher nur bis zu der Stelle sichtbar, an der du den Seitenumbruch eingefügt hast. Darunter erscheint automatisch eine neue Zeile mit 1, 2, … (s. Abb. 41). Um den Beitrag weiterzulesen, klickt der Besucher dann auf die 2 usw. und muss nicht endlos nach unten scrollen.

Jedoch hat die Sache einen kleinen Haken. Denn für die zweite, dritte … Seite deines Beitrags wird an deine ursprüngliche Beitrags-URL automatisch eine …/2/ usw. angehängt. Auch wenn die Änderung minimal ist, handelt es sich für Suchmaschinen um eine neue URL. Solange du nichts an der Beitragsstruktur änderst, hat das keine Bedeutung. Falls du den Beitrag aber dahingehend bearbeitest, dass die Folgeseite/n wegfallen, resultiert daraus ein 404 Fehler. Du solltest dann eine Weiterleitung einrichten.

Mehr / Weiterlesen

Zum Abschluss dieses Beitrags soll noch das Element Mehr erwähnt werden. Wenn du dieses unter der Einleitung deines Beitrags (Textauszug) einfügst, erscheint im Editor eine Trennlinie Weiterlesen. Außerdem siehst du in der rechten Seitenleiste die Option Den Textauszug auf der kompletten Inhaltsseite ausblenden (s. Abb. 42). Das bedeutet, dass die Wirkung dieses Elements weniger den Beitrag selbst, sondern vielmehr dessen Darstellung auf der Beitrags-Übersichts- bzw. Blog-Seite betrifft.

Alle Abbildungen ansehen »

Standardmäßig ist die Option ausgeschaltet und in der Beitragsübersicht siehst du den Textauszug bis zur „Trennlinie“. Unter dem sichtbaren Textauszug erscheint ein Weiterlesen-Link. Nachdem du auf den Link geklickt hast, kannst du den kompletten Beitrag lesen. Falls du dich jedoch für Ausblenden entscheidest, siehst du nach dem Klick auf den Weiterlesen-Link nur noch den Teil des Beitrags, der sich unterhalb der „Trennlinie“ befindet.

Soviel zur Beschreibung der Layout Elemente. Im 7. Teil meines Gutenberg Tutorials wird es etwas „technischer“, denn es geht u. a. um Formatierungs-Elemente.


Weitere Gutenberg Tutorials

Mehr zum Thema

WordPress
WordPress Tutorials
Websites
Geht es ohne Webdesigner?
EU Recht
Reform des Urheberrechts