Layout Elemente, Listen, Zitate | Gutenberg Tutorial Teil 6

Aktualisiert am 02-02-2020, von Ellena

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.

Layout Elemente im Gutenberg Editor

In den drei vorherigen Teilen meines Gutenberg Tutorials haben Sie 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 Website 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 der, einer Website zugrunde liegenden, Programmierung bestimmt.

Listen

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

Hinter den ersten Punkt schreiben Sie nun Ihren Text. Im Gegensatz zu einem normalen Textblock, bei dem Sie mittels Betätigen der Eingabe-Taste einen neuen Block erstellen, gelangen Sie hier in eine neue Zeile bzw. zum nächsten Punkt Ihrer Liste.

Falls Ihre Liste Unterpunkte enthalten soll, gehen Sie 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 Sie danach über die Eingabe-Taste erstellen, beginnen dann an der „eingerückten“ Stelle. Außerdem verändert sich das Aussehen des Listen-Symbols. Aus dem Punkt wird (je nach Theme, s. o.) ein Kreis. Wenn eine oder alle folgenden Zeilen wieder ganz links beginnen sollen, markieren Sie sie und klicken dieses Mal auf das Textsymbol mit dem Pfeil nach links (s. Abb. 30).

Darüber hinaus haben Sie 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 Ihnen die Optionen, einen Ausgangswert für die Nummerierung bestimmen und / oder die Nummerierung umkehren zur Verfügung (s. Abb. 30 rechts).

Layout Elemente Gutenberg
Grafik: eb (Logo: Gutenberg)

Zitate

Auch beim Zitat-Block haben Sie 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 schreiben Sie den Text in den Zitat-Block (ohne Betätigen der Eingabe-Taste!). Anschließend klicken Sie auf Schreibe eine Quellenangabe und fügen dort den Namen des Verfassers und eventuell noch einen Link zur Quell-Seite ein.

Abgesehen von der Anpassung des Texts über die Bearbeitungsleiste haben Sie beim Zitat-Block keine weiteren Gestaltungsmöglichkeiten. Denn wie bereits oben erwähnt, wird die Darstellung der Zitate von Ihrem 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 Sie an diesem Layout etwas ändern möchten, sind Programmierkenntnisse zwingend notwendig. Solange es nur um die Schriftgröße geht, könnten Sie einen entsprechenden Code wie „has-small-font-size“ unter

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

einfügen. Falls Ihnen aber das gesamte Design nicht gefällt, müssten Sie dies in der CSS-Datei Ihres Themes ändern. Dazu suchen Sie die Stellen der Programmierung, die das Design der Zitate bestimmen. Entweder Sie kopieren die Codes, bearbeitest sie im TextEditor auf Ihrem PC und

  1. fügen sie im Customizer unter zusätzliches CSS
  2. bzw. in das Stylesheet Ihres Child-Themes (sofern Sie eines nutzen) ein.

Oder Sie überschreiben die Codes in der Original-CSS-Datei Ihres 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 Sie direkt in der CSS-Datei Ihres Themes vornehmen, 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. Dabei handelt es sich um auffällige Schaltflächen, deren Verlinkung i. d. R. auf eine andere Website oder auf einen anderen Beitrag Ihrer Website verweist. Um einen Button einzufügen, klicken Sie auf

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

Im sich nun öffnenden Block befindet sich ein „abgerundeter Vorschau-Button“ und darunter das Eingabefeld die Bearbeitungsleiste. In der rechten Seitenleiste legen Sie zunächst den Stil (ohne oder mit Rahmen) und den Grad der Rundung an den Ecken fest (s. Abb. 33). Wie auch bei anderen Blocks nutzen Sie für die Verknüpfung das Link-Symbol in der Bearbeitungsleiste mit den bereits im Gutenberg Textblock-Tutorial erwähnten Möglichkeiten.

Des weiteren könnten Sie noch die Hintergrund- und die Textfarbe ändern, sofern Sie nicht im Customizer Ihres Themes gemachten Vorgaben beibehalten möchten. Nachdem Sie den Text eingeben und die URL des Zieles eingetragen haben, legen Sie noch die Orientierung (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 Ihrer 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 haben Sie 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 Sie können über die Farbeinstellungen auch jede beliebige andere Farbe verwenden. Falls Sie die Höhe ändern möchten, 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 Sie unter Layout Elemente den „Abstandhalter“ gewählt haben, erscheint ein Block mit einer vorgegebenen Höhe von 100 px. Diese können Sie entweder über die Einstellungen in der rechten Seitenleiste oder durch Bewegen des blauen Punkts im Block selbst verändern – Minimum-Höhe wäre 20 px (s. Abb. 35).

Wenn Sie die Höhe neu bestimmen, sollten Sie die 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 Sie die Layout Elemente Zitat, Button, Trennzeichen und Abstandhalter mehrfach verwenden möchten, können Sie jeweils den von Ihnen gewählten Stil als Standard-Stil speichern. So erscheinen sie beim nächsten Einsatz direkt in „Ihrem“ Stil.

Spalten

Nachdem das Einfügen der letzten drei Layout Elemente relativ einfach war, ist das Gestalten eines Spalten-Layouts etwas aufwendiger. Wenn Sie im Auswahlmenü für den neuen Block auf Spalten geklickt haben, bietet Ihnen der Gutenberg Editor direkt fünf Varianten an. Entweder entscheiden Sie sich für eine davon oder Sie klicken auf Überspringen. Unabhängig davon, welche Wahl Sie getroffen haben, können Sie 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 passen Sie über die rechte Seitenleiste an, indem Sie in den Spalten-Block (zwischen zwei Spalten) klicken und die Anzahl verringern oder erhöhen.

Außerdem können Sie dann über das Bearbeitungsmenü den gesamten Block auch noch links-, rechtsbündig oder mittig ausrichten sowie sich 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, klicken Sie auf das Plus-Zeichen in einer Spalte und erstellen einen Text- oder Bild-Block. Anschließend fügen Sie weitere Blöcke ober- oder unterhalb ein und bearbeiten sie, wie Sie es beim Gutenberg Editor gewohnt sind.

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 können sie die Gruppe farblich hervorheben. Während eine Änderung der Hintergrundfarbe des Spalten-Blocks nicht vorgesehen ist, klicken Sie hier auf den Gruppe-Block und bestimmen über die Einstellungen in der rechten Seitenleiste eine neue Farbe.

Außerdem bietet Ihnen 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. klicken Sie auf einen bereits vorhanden Block,
  2. dann auf Umwandeln in (im Drei-Punkte-Menü der Bearbeitungsleiste)
  3. und wählen Gruppe aus (s. Abb. 39).

Anschließend haben Sie zwei Möglichkeiten. Entweder Sie erstellen mittels Davor / Danach einfügen einen neuen Block. Oder Sie klicken auf einen anderen vorhandenen Block,

  1. bewegen ihn über die Gruppe bis eine blaue Linie erscheint,
  2. fügen ihn dort ein = Drag&Drop (s. Abb. 40) und bewegen ihn ggfs.
  3. mit Hilfe der Pfeile noch nach oben oder unten.

Mittels beider Methoden können Sie natürlich Ihrer Gruppe noch beliebige Blöcke hinzufügen und per Drag&Drop auch wieder daraus entfernen.

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 Sie den Seitenumbruch eingefügt haben. Darunter erscheint automatisch eine neue Zeile mit 1, 2, … oder „nächste Seite“ etc. – je nach Theme (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 Ihres Beitrags wird an Ihre 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 Sie nichts an der Beitragsstruktur ändern, hat das keine Bedeutung. Falls Sie den Beitrag aber dahingehend bearbeiten, dass die Folgeseite/n wegfallen, resultiert daraus eine 404 Fehlermeldung. Sie sollten dann eine Weiterleitung auf die ursprünglich erste Seite des Beitrags einrichten.

Alle Abbildungen ansehen »

Mehr / Weiterlesen

Zum Abschluss dieses Beitrags soll noch das Element Mehr erwähnt werden. Wenn Sie dieses unter der Einleitung Ihres Beitrags (Textauszug) einfügen, erscheint im Editor eine Trennlinie Weiterlesen. Außerdem sehen Sie 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.

Standardmäßig ist die Option ausgeschaltet und in der Beitragsübersicht sehen Sie den Textauszug bis zur „Trennlinie“. Unter dem sichtbaren Textauszug erscheint ein Weiterlesen-Link. Nachdem Sie auf den Link geklickt haben, können Sie den kompletten Beitrag lesen.

Falls Sie sich jedoch für Ausblenden entscheiden, sehen Sie nach dem Klick auf den Weiterlesen-Link nur noch den Teil des Beitrags, der sich unterhalb der „Trennlinie“ befindet.

Tutorial herunterladen »

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

Fragen oder Anmerkungen » Kontakt

Mehr zum Thema

Websites
Was sind schlecht gemachte Websites?
WordPress
WordPress – individuelle Anpassung