Spezialelemente und Widgets | Gutenberg Tutorial Teil 7

Der letzte Teil des Gutenberg Tutorials informiert über Spezialelemente wie Formatierungen, Widgets und Einbettungen sowie deren Verwendung und Besonderheiten.

Aktualisiert am 02-02-2020, Ellena

Spezialelemente Gutenberg
Grafik: eb (Logo: Gutenberg)

Spezialelemente

Als Spezialelemente werden in meinem Tutorial Blöcke bezeichnet, die jeweils ein besonderes Feature in einen Beitrag einfügen. Einerseits können diese recht nützlich sein. Andererseits dürften sie in den meisten Beiträgen aus unterschiedlichen Gründen nur relativ selten Verwendung finden. Zunächst zu den Elementen oder Blöcken, die im Gutenberg Editor unter Formatierung aufgelisteten sind (s. Abb. 43 oben).

Auf den Vers-Block gehe ich hier nicht näher ein, da sich sein Verwendungszweck wohl von selbst erklärt.

Code

Wie die Bezeichnung schon andeutet, handelt es sich um Elemente, die zumindest Basiswissen hinsichtlich CSS- und HTML-Programmierung voraussetzen. Denn ohne diese Programmiersprachen kannst du mit beiden Blöcken nichts anfangen. Außer du suchst dir z. B. bei w3schools „fertige Codes“ und kopierst sie.

Eigentlich ist das Symbol für den Code-Block im Gutenberg Editor irreführend. Denn normalerweise umschließen Kleiner/Größer-Zeichen einen HTML-Code. Jedoch bietet dir hier der Code-Block die Möglichkeit, einen CSS-Code-Schnipsel, der zwischen geschwungenen Klammern steht, anzuzeigen und ggfs. zu modifizieren (s. Abb. 43 unten). Außerdem lässt sich der Code-Block in vorformatierten Text umwandeln und/oder gruppieren.

HTML

Wesentlich nützlicher ist der HTML-Block. Denn er ermöglicht es, das Layout eines Text- oder Bild-Blocks etc. anzupassen. Wenn dein Text z. B. in einer Box mit Rahmen erscheinen soll, suchst du im Gutenberg Editor bisher vergeblich danach. Deshalb musst du zunächst einen entsprechenden CSS-Code für eine Border-Box in deinem Theme erstellen. Anschließend kannst du eine Box mit beliebigem Inhalt in deinen Beitrag einfügen (s. Abb. 44):

  1. HTML-Block erstellen
  2. CSS-Klasse deines neuen Codes,
  3. den eigentlichen Inhalt des Blocks sowie
  4. das Ende des Codes

Anschließend kannst du dir über die Vorschau in der Bearbeitungsleiste den Text ansehen.

Um das reale Erscheinungsbild deines Blocks mit Rahmen zu sehen, klickst du auf den „Vorschau“-Button in der Kopfleiste des Editors.

Vorformatierter Text

Obwohl es sich bei dem Element Vorformatiert eigentlich nur um einen Textblock handelt, gibt es doch einen Unterschied zum Standard-Textblock. Wie ich bereits in meinem Gutenberg Tutorial Teil 4 beschrieben habe, ist beispielsweise ein einfacher Zeilenumbruch innerhalb eines Textblocks nicht möglich. Denn durch das Betätigen der entsprechenden Taste erstellst du automatisch einen neuen Textblock mit der entsprechenden Leerzeile zwischen den beiden Blöcken.

Dagegen kannst du in einen vorformatierten Block beliebige Zeilenumbrüche einbauen oder Zeilen nummerieren, ohne dass automatisch ein neuer Textblock oder eine eigenständige Liste entsteht (s. Abb. 45).

Pullquote

Auch ein Pullquote ist im Prinzip nur ein Zitat (s. Gutenberg Tutorial Teil 6). Jedoch hebt dieses Element das Zitat besonders hervor. Zwar besteht es genauso wie das Standard-Zitat aus dem Textfeld und einer Zeile für die Quellenangabe (cite), aber du hast mehr Gestaltungsmöglichkeiten.

Der Gutenberg Editor bietet zwei Vorlagen an. Einerseits die Begrenzung durch eine durchgehende Linie ober- und unterhalb des Zitats (s. Abb. 46). Andererseits ein stärkeres Einrücken und Verkürzen der Textzeilen (s. Abb. 47). Auch kannst du eine Haupt- (Farbe der Linien / Hintergrundfarbe) und eine Textfarbe festlegen. Darüber hinaus kann ein Pullquote nicht nur links- oder rechtsbündig angelegt werden, sondern auch die gesamte Breite deines Textes oder deiner Webseite einnehmen.

Für das Zitieren eines (längeren) Textes von einer anderen Webseite oder aus einem Interview ist das Standard-Zitat die erste Wahl. Wenn du einen einzelnen Satz besonders hervorheben willst, verwendest du den Pullquote-Block.

Tabellen

Unter die Spezialelemente fallen auch Tabellen. Um eine Tabelle zu erstellen, gehst du wie folgt vor:

  1. Auf Tabelle klicken
  2. Anzahl der Spalten und Zeilen festlegen
  3. Stil (Standard / Streifen) auswählen
  4. Tabelle erstellen

Darüber hinaus bestimmst du in der rechten Seitenleiste, ob deine Tabelle

  • Zellen mit einer festen Breite,
  • eine Kopfzeile
  • und/oder eine Fußzeile

enthalten soll (s. Abb. 48). Außerdem kannst weitere Anpassungen über die Bearbeitungsleiste vornehmen. Einerseits ist dies die Position der Tabelle (Links-, Rechtsbündig, zentriert, weite oder gesamte Breite).

Andererseits findest du in der Leiste zusätzlich ein besonderes Tabellen-Symbol (s. Abb. 49). Dahinter verbergen sich die Werkzeuge zur Bearbeitung der einzelnen Spalten und Zeilen. So kannst du relativ einfach

  • Zeilen oben / unten hinzufügen oder löschen
  • Spalten links / rechts hinzufügen bzw. löschen.

Einschränkung bei Gutenberg-Tabellen

Obwohl das Erstellen und Bearbeiten des Tabellen-Blocks im Gutenberg Editor recht einfach zu sein scheint, gibt es einen großen Nachteil. Die mit Hilfe des Editors erstellten Tabellen sind nicht wirklich responsive. Je nach Gesamt-Breite, Anzahl der Spalten und Umfang des Inhalts ist ihr Erscheinungsbild auf kleineren Bildschirmen unbefriedigend.

Entweder reicht die Tabelle über den Bildschirmrand hinaus oder sie ist so gestaucht, dass in einem Feld nur ein bis zwei Wörter Platz finden. Das führt dazu, dass du bei jedem einzelnen Feld nach unten scrollen musst, um den gesamten Text lesen zu können. Somit wird der eigentliche Zweck einer Tabelle, Inhalte übersichtlich darzustellen, verfehlt.

Um eine übersichtliche und mobilfreundliche Tabelle zu erstellen, ist es besser auf „externe“ Lösungen zu zurückzugreifen. Entweder du verwendest einen eigenen CSS-Code (im Internet findest du zahlreiche Beispiele, deren Code du kopieren und in dein Stylesheet einsetzen kannst). Oder, du installierst eventuell ein Plugin wie Ninja Tables (für viele unterschiedliche Tabellen).

Spezialelemente – Widgets

Mit der Einführung des Gutenberg Editors wurde es möglich, bestimmte Widgets auch in Beiträge / auf Seiten an beliebiger Stelle einzubauen. Zuvor blieb die Anzeige von Widgets auf die Seitenleiste(n) und den Footer beschränkt. Bei den Widgets für Neueste Beiträge und Neueste Kommentare sind folgende Einstellungen möglich:

  • Mit oder ohne Beitragsinhalt
  • Gesamter Beitrag oder ein Auszug
  • Maximale Anzahl der Wörter des Auszugs
  • Beitragsdatum
  • Reihenfolge (Neu > Alt, Alt > Neu, A-Z, Z-A)
  • Beiträge (nur) aus bestimmten Kategorien
  • Anzahl der Beiträge sowie der Spalten

Darüber hinaus bietet der Gutenberg Editor noch folgende Widgets an (s. Abb. 50 oben):

  1. Kalender
  2. Archive
  3. Kategorien – Schlagwörter-Wolke
  4. Shortcode
  5. RSS
  6. Suchen

Kalender und Archive

Das Erscheinungsbild dieser beiden Spezialelemente wird durch WordPress selbst und dein Theme bestimmt. Abgesehen von dem Einfügen einer CSS-Klasse unter Erweitert kannst du sie nicht verändern. Der Kalender zeigt den aktuellen Monat, wobei der aktuelle Tag farblich hervorgehoben ist. Außerdem befindet sich darunter ein Link zum vorherigen Monat (s. Abb. 50).

Auch die Archive lassen sich nicht anpassen. So zeigt das Widget immer eine Monats-Liste (s. Abb. 50). Nachdem du auf einen Monat geklickt hast, öffnet sich eine neue Seite, auf der die in dem betreffenden Monat veröffentlichten Beiträge aufgelistet sind.

(Da die beiden Abbildungen von einer Testseite mit nur wenigen Beiträgen stammen, sind die Angaben nicht übertragbar. Bei einer regelmäßig gepflegten Webseite entsprechen die angezeigten Daten natürlich der üblichen kalendarischen Reihenfolge.)

Kategorien und Schlagwörter-Wolke

Während auch die Schlagwörter-Wolke nicht veränderbar ist, hast du bei den Kategorien einige Optionen. So kannst du diese als Drop-Down-Liste und/oder hierarchisch anzeigen (s. Abb. 50). Wenn du Anzahl der Beiträge anzeigen aktivierst, erscheint die Anzahl der einer bestimmten Kategorie zugeordneten Beiträge in Klammern hinter dem Namen.

Das Aussehen der Schlagwörter-Wolke wird wiederum allein durch dein Theme bestimmt. Wobei sich die Schriftgröße der einzelnen Schlagwörter bei manchen Themes nach der Häufigkeit der Verwendung richtet. Je häufiger, desto größerer (s. Beispiel am Ende meiner Beiträge).

Shortcode, RSS und Suchen

Auch diese drei Spezialelemente lassen sich nicht anpassen. Das Shortcode-Widget (nicht zu verwechseln mit dem Code-Block) verwendest du, wenn du einen, z. B. von einem Plugin erstellen, Code in den deinen Beitrag integrieren möchtest. Nachdem du den in den Plugin-Einstellungen erstellten Code kopiert hast,

  1. erstellst einen Shortcode-Block und
  2. fügst den Shortcode in das vorgegebene Feld ein (s. Abb. 51).

Ähnlich verfährst du beim RSS-Widget, nur dass du hier die URL des gewünschten RSS-Feeds einfügst (s. Abb. 51-5). Wenn du das Suchen-Widget verwenden möchtest, kannst du in dem entsprechenden Feld einen Platzhalter wie „Suche“ oder „Suchbegriff eintragen“ vorgeben (s. Abb. 51).

Einbettungen

Den Abschluss bilden Spezialelemente, mit deren Hilfe du Texte, Videos etc. von externen Webseiten direkt in deinen Beitrag einbinden kannst. Dazu klickst du auf den entsprechenden Anbieter aus der Liste Einbettungen (s. Abb. 52). Anschließend gibst du in das vorgegebene Feld des Blocks den Link ein, unter dem der gewünschte Inhalt, z. B. das YouTube-Video oder der Tweet, verfügbar ist (s. Abb. 53). Nachdem du auf Einbetten geklickt hast, erscheint das Startbild des Videos bzw. der Tweet in deinem Beitrag.

Alle Abbildungen ansehen »

Probleme bei Einbettungen

Allerdings ist eine Einbettung aus zwei Gründen nicht ganz unproblematisch. Einerseits können insbesondere Videos die Ladezeit deiner Webseite negativ beeinflussen. Andererseits ist es rechtlich bedenklich. Zunächst muss auch beim Einbetten von Inhalten das Urheberrecht gewahrt bleiben.

Des weiteren spielt der Datenschutz eine entscheidende Rolle. Wenn du beispielsweise ein YouTube-Video einbettest, werden bereits beim Besuch deiner Webseite Daten an Google übertragen und Cookies gesetzt. Dazu muss der Besucher das Video noch nicht einmal abspielen.

Bette ein Video nicht ein, sondern biete einen Link an. Dies kannst du mittels eines Buttons oder auch eines eigenen Vorschaubilds tun. Wie bei den „Shariff-Share-Buttons“ wird die Verbindung zum Drittanbieter dann erst nach dem Klick auf den Link aufgebaut.

Falls du absolut nicht auf das „echte“ Video verzichten möchtest, gibt es noch weitere Lösungsansätze, deren Umsetzung jedoch wesentlich aufwendiger ist. Auf jeden Fall solltest du auf Autoplay bei Videos oder Musik verzichten.

Hiermit endet mein Gutenberg Tutorial. Bei weitergehenden Fragen zum Arbeiten mit dem Gutenberg Editor kannst du mich jederzeit gerne kontaktieren.



Weitere Gutenberg Tutorials

Mehr zum Thema

WordPress
WordPress Tutorials
Share Buttons
DSGVO-konforme Teilen-Buttons
Websites
Farbkonzepte für Websites