Spezialelemente und Widgets | Gutenberg Tutorial Teil 7

, ,
-

Spezialelemente Gutenberg Editor
Besondere Blöcke / Spezialelemente im Gutenberg Editor (Quelle: Gutenberg)

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

Inhaltsverzeichnis

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 die Spezialelemente oder Blöcke, die im Gutenberg Editor unter Formatierung aufgelisteten sind.

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 Spezialelemente, die zumindest Basiswissen hinsichtlich CSS- und HTML-Programmierung voraussetzen. Denn ohne diese Programmiersprachen können Sie mit beiden Blöcken nichts anfangen. Außer Sie suchen sich z. B. bei w3schools „fertige Codes“ und kopieren sie.

Seit WordPress Version 5.5 wird der Shortcode-Block ([|]) im Gutenberg Editor wird verwendet, um beispielsweise einen, von einem Plugin generierten, Code einzufügen (s. hierzu auch unter „Widgets“). Falls Sie (noch) eine ältere WordPress Version verwenden, finden Sie Angaben zum „Code“-Block im Tutorial.

Um einen Block mittels eines CSS-Codes zu gestalten, verwenden Sie das Feld in der Seitenleiste des Editors > Erweitert > Zusätzliche CSS-Klasse(n). 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 Ihr Text z. B. in einer Box mit Rahmen erscheinen soll, suchen Sie im Gutenberg Editor bisher vergeblich danach. Deshalb müssen Sie zunächst einen entsprechenden CSS-Code für eine Border-Box in Ihrem Theme erstellen. Anschließend können Sie eine Box mit beliebigem Inhalt in Ihren Beitrag einfügen:

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

Tipp Gutenberg Spezialelemente Um das reale Erscheinungsbild Ihres Blocks mit der Veränderung der Spezialelemente zu sehen, klicken Sie auf den „Vorschau“-Button in der Kopfleiste des Editors oder auf die „Vorschau“ für den gesamten Beitrag.

Gutenberg Editor HTML
Individielles HTML

Nach dem selben Prinzip können Sie hier auch eigene zusätzliche HTML-Codes einfügen.

Vorformatierter Text

Obwohl es sich bei Vorformatiert eigentlich nur um einen Textblock handelt, fällt er unter Spezialelemente, da es doch einen Unterschied zum Standard-Textblock gibt. 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 erstellen Sie automatisch einen neuen Textblock mit der entsprechenden Leerzeile zwischen den beiden Blöcken.

Gutenberg Spezialelemente Vorformatiert
Vorformatierten Text hinzufügen
Gutenberg Spezialelemente Code 2
Eigenen Code eintragen

Dagegen können Sie in einen vorformatierten Block beliebige Zeilenumbrüche einbauen oder Zeilen nummerieren, ohne dass automatisch ein neuer Textblock oder eine eigenständige Liste entsteht.

Pullquote

Obwohl ein Pullquote im Prinzip auch nur ein Zitat (s. Gutenberg Tutorial Teil 6) ist, habe ich es unter Spezialelemente eingeordnet. Er hebt ein Zitat besonders hervor. Zwar besteht es genauso wie das Standard-Zitat aus dem Textfeld und einer Zeile für die Quellenangabe (cite), aber Sie haben mehr Gestaltungsmöglichkeiten.

Gutenberg Spezialelemente Pullquote 1
Pullquote einfügen
Gutenberg Spezialelemente Pullquote 2
Zwei Pullquote-Varianten

Der Gutenberg Editor bietet zwei Vorlagen an. Einerseits die Begrenzung durch eine durchgehende Linie ober- und unterhalb des Zitats. Andererseits ein stärkeres Einrücken und Verkürzen der Textzeilen. Auch können Sie 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 Ihres Textes oder Ihrer Webseite einnehmen.

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

Tabellen

Unter die Spezialelemente fallen auch Tabellen. Um eine Tabelle zu erstellen, gehen Sie 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 bestimmen Sie in der rechten Seitenleiste, ob Ihre Tabelle

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

enthalten soll. Außerdem können Sie weitere Anpassungen über die Bearbeitungsleiste vornehmen. Einerseits ist dies die Position der Tabelle (Links-, Rechtsbündig, zentriert, weite oder gesamte Breite).

Gutenberg Spezialelemente Tabelle 1
Tabelle einfügen
Gutenberg Spezialelemente Tabelle 2
Anzahl der Spalten/Zeilen

Andererseits finden Sie in der Leiste zusätzlich ein besonderes Tabellen-Symbol. Dahinter verbergen sich die Werkzeuge zur Bearbeitung der einzelnen Spalten und Zeilen. So ist es relativ einfach möglich,

  • Zeilen oben / unten hinzufügen oder zu löschen
  • Spalten links / rechts hinzufügen bzw. zu löschen
Gutenberg Spezialelemente Tabelle 3
Tabellen-Layout

Einschränkung bei Gutenberg-Tabellen

Obwohl das Erstellen und Bearbeiten von Tabellen im Gutenberg Editor recht einfach zu sein scheint, gibt es einen großen Nachteil dieser Spezialelemente. Die mit Hilfe des Editors erstellten Tabellen sind nicht wirklich responsiv. 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 Sie bei jedem einzelnen Feld nach unten scrollen müssen, um den gesamten Text lesen zu können. Somit wird der eigentliche Zweck einer Tabelle, Inhalte übersichtlich darzustellen, verfehlt.

Tipp Gutenberg Spezialelemente Um eine übersichtliche und mobilfreundliche Tabelle zu erstellen, ist es besser auf „externe“ Lösungen zu zurückzugreifen. Entweder Sie verwenden einen eigenen CSS-Code (im Internet finden Sie zahlreiche Beispiele, deren Code Sie kopieren und in Ihr Stylesheet einsetzen können). Oder Sie installieren 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:

  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 Ihr Theme bestimmt. Abgesehen von dem Einfügen einer CSS-Klasse unter Erweitert können Sie 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.

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

GutenbergSpezialelemente Kalender 1
Kalender einfügen
Gutenberg Spezialelemente Kalender 2
Veröffentlichungsdatum von Posts

Kategorien und Schlagwörter-Wolke

Während auch die Schlagwörter-Wolke nicht veränderbar ist, haben Sie bei den Kategorien einige Optionen. So können Sie diese als Drop-Down-Liste und/oder hierarchisch anzeigen. Wenn Sie Anzahl der Beiträge anzeigen aktivieren, 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 Ihr 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.

Shortcode, RSS und Suchen

Auch diese drei Spezialelemente lassen sich nicht anpassen. Das Shortcode-Widget verwenden Sie, wenn Sie einen, z. B. von einem Plugin erstellen, Code in Ihren Beitrag integrieren möchten. Nachdem Sie den, in den Plugin-Einstellungen erstellten, Code kopiert haben,

  1. erstellen einen Shortcode-Block und
  2. fügen den Shortcode in das vorgegebene Feld ein.
Gutenberg Spezialelemente Shortcode
Shortcode Widget

Ähnlich verfahren Sie beim RSS-Widget, nur dass Sie hier die URL des gewünschten RSS-Feeds einfügen. Wenn Sie das Suchen-Widget verwenden möchten, können Sie in dem entsprechenden Feld einen Platzhalter wie „Suche“ oder „Suchbegriff eintragen“ vorgeben.

Einbettungen

Den Abschluss bilden Spezialelemente, mit deren Hilfe Sie Texte, Videos etc. von externen Webseiten direkt in Ihren Beitrag einbinden können. Dazu klicken Sie auf den entsprechenden Anbieter aus der Liste Einbettungen. Anschließend geben Sie 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. Nachdem Sie auf Einbetten geklickt haben, erscheint das Startbild des Videos bzw. der Tweet in Ihrem Beitrag.

Gutenberg Spezialelemente Einbettungen
Einbettung von Medien

Probleme bei Einbettungen

Allerdings ist die Nutzung der Spezialelemente zur Einbettung aus zwei Gründen nicht ganz unproblematisch. Einerseits können insbesondere Videos die Ladezeit Ihrer Website 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 Sie beispielsweise ein YouTube-Video einbetten, werden bereits beim Besuch Ihrer Website Daten an Google übertragen und Cookies gesetzt. Dazu muss der Besucher das Video noch nicht einmal abspielen.

Tipp Gutenberg Spezialelemente Betten Sie ein Video nicht ein, sondern bieten Sie einen Link an. Dies können Sie 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 Sie absolut nicht auf das „echte“ Video verzichten möchten, gibt es noch weitere Lösungsansätze, deren Umsetzung jedoch wesentlich aufwendiger ist. Auf jeden Fall sollten Sie auf Autoplay bei Videos oder Musik verzichten.

Links zur Website des erwähnten Anbieters:

Kein Affiliate Link. Ich erhalte von diesem Unternehmen keine Provision.

Hiermit endet mein Gutenberg Tutorial. Bei weitergehenden Fragen zum Arbeiten mit dem Gutenberg Editor können Sie mich jederzeit gerne kontaktieren.

Weitere Gutenberg Tutorials

Beitrag teilen

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


Ähnliche Themen

EU-US Privacy Shield ist ungültig, was nun? | 10 Tipps für Websites | x Tipps für Websites

Nachdem das Privacy Shield nicht mehr wirksam ist, ist ein Datentransfer in die USA auch von Websites rechtswidrig. Wertvolle Hinweise zur Lösung des Problems.

WordPress Plugins installieren| Tutorial Teil 4

Im 4. Teil meines Tutorials (für EU-Blogger und Anfänger) geht es um WordPress Plugins, deren Installation und Verwendung. + Tutorial zum Download

Kürzlich veröffentlicht

Um die Nutzung meiner Website zu optimieren, verwende ich Cookies. Diese werden nur auf Ihrem Gerät gespeichert. Ich erfasse und speichere keine personenbezogenen Daten meiner Website-Besucher.
AKZEPTIEREN
ABLEHNEN
Datenschutz