Layout Elemente, Listen, Zitate | Gutenberg Tutorial Teil 6

Webdesign

Bloggen ··· Design ··· Tutorials ··· WordPress

Gutenberg - Layout Elemente

WP Gutenberg Editor: Im Teil 6 geht es die Verwendung von Listen und Zitaten sowie Layout Elemente wie Spalten, Gruppen, etc. + Tutorial zum Download

Inhaltsverzeichnis

Layout Elemente im Gutenberg Editor

In den drei vorherigen Teilen meines Gutenberg Tutorials haben Sie die wichtigsten Allgemeinen Blöcke kennengelernt. 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 einiger Layout Elemente im Browser wird auch von der, einer Website zugrunde liegenden, Programmierung bzw. dem verwendeten Theme 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.

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.

Gutenber g- Layout Elemente 1
Liste – Zitat (Screenshots: Gutenberg Editor / eb)

Zitate und Pullquotes

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.

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 diese Layout Elemente verä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 der Layout Elemente 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, bearbeiten 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 der Layout Elemente, 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.

Ein Pullquote ist eigentlich auch nur ein Zitat mit einemTextfeld und einer Zeile für die Quellenangabe (cite) ist , hebt dieses jedoch besonders hervor. Nähere Informationen dazu finden Sie in meinem Tutorial zum Herunterladen.

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 „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. 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.

Ü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 1 px.

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 er würde 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.

  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. 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.

Gutenberg - Layout Elemente 2
Spalten (Screenshot: Gutenberg Editor / eb)

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. Außerdem können Sie über die rechte Seitenleiste auch noch die Hintergrundfarbe des gesamten Spaltenblocks, nicht jedoch der einzelnen Spalten, ändern.

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. Wie auch beim Spalten-Block 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. 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 Gruppieren aus.

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 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 oder Layout Elemente 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. 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.

Mehr / Weiterlesen

Zum Abschluss dieses Beitrags über Layout Elemente 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. 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.

Gutenberg Editor Teil 6: Ausführliches 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.

Dieser Beitrag gefällt Ihnen? Kopieren und teilen Sie den Link.

Sie haben Fragen / Anmerkungen oder möchten immer auf dem Laufenden bleiben?

ALLE KATEGORIEN

Webdesign
Internet
Reviews
How-To
Allgemein / Wörterbuch

ALLE SCHLAGWÖRTER

AktuellAndroidAppleAppsBloggenBrowserCloudDesignDSL-WLAN • E-MailFotoGoogleInternetsicherheitiOSmacOSMicrosoftMessengerMobilfunkOnlinediensteRechtSEOSocialTutorialsWindowsWordPress