Textblock und Textgestaltung | Gutenberg Tutorial Teil 4

Textblock einfügen

Eigentlich ist ein Textblock nichts anderes als ein Absatz deines Beitragstextes. Wenn du einen neuen Beitrag beginnst, befindet sich unter dem Titel bereits ein leeres Feld mit der Aufforderung: Schreib etwas oder tippe „/“ zur Blockauswahl. Dahinter siehst du ein (+) zur Auswahl anderer Blöcke.

Falls dein Beitrag direkt mit einem Textblock beginnen soll, schreibst du einfach deinen Text in dieses Feld. Dabei müssen alle Sätze direkt aufeinander folgen.

Denn im Gegensatz zu Word o. ä. beendet die Eingabe-Taste im Gutenberg Editor den aktuellen Absatz. Anschließend erscheint darunter automatisch ein neuer Textblock mit einem (von den Einstellungen für das Theme bestimmten) Abstand zum vorhergehenden. Falls in einem Textblock ein Satz in einer neuen Zeile beginnen soll, musst du eine andere Lösung wählen (s. u.).

Zeilenumbruch und Worttrennung im Textblock

Einerseits hängt die Anzahl der Wörter pro Zeile natürlich von der Länge der einzelnen Wörter ab. Andererseits muss dir aber auch bewusst sein, dass der Zeilenumbruch variabel ist. Da du (hoffentlich) ein mobilfreundliches Theme verwendest, verändert sich der Zeilenumbruch abhängig von der Bildschirmgröße. Wenn im Editor beispielsweise 14 Wörter in einer Zeile Platz finden, können es später auf der Webseite (Desktop) mehr sein. Auf einem mobilen Gerät wären es dagegen deutlich weniger.

Für den Randausgleich gilt im Prinzip dasselbe wie für den Zeilenumbruch. Denn dieser würde bei einer anderen Bildschirmgröße u. U. zu unschönen und unnötig großen Abständen zwischen einzelnen Wörtern führen. Deshalb wird er im Gutenberg Editor auch gar nicht angeboten.

Auch die Trennung von Wörtern ist im Editor nicht üblich. Wenn z. B. das Wort Gutenberg nicht mehr in eine Zeile passt, könntest du im Editor eine Zeile mit … Guten- beenden und mit berg verwenden … die neue Zeile beginnen. Jedoch würde der Satz anschließend bei vielen Lesern mit einer anderen Bildschirmgröße so aussehen: … Guten-berg verwenden … – die Worttrennung wäre also mitten in die Zeile gerutscht.

Weitere Textblöcke hinzufügen

Da ein Textblock nicht mehr als als 3 bis 5 Sätze (je nach Länge der einzelnen Sätze) enthalten sollte, unterteilst du einen „Themen-Abschnitt“ in mehrere Absätze. Nachdem dein erster Textblock fertig ist, kannst du mittels der Eingabe-Taste direkt den nächsten erstellen und weiterschreiben. Falls aber ein Textblock auf einen anderen Block folgt, hast du noch eine weitere Möglichkeit, diesen einzufügen:

1. Du klickst dem Cursor in den vorhergehenden Block,
2. anschließend auf das Drei-Punkte-Menü und dann
3. auf Davor / Danach einfügen.

In der neu angezeigten Zeile klickst du wie gewohnt wieder auf das Plus-Zeichen und wählst das Absatzzeichen ¶ aus.

Gestalten einzelner Textbereiche

Nachdem du Wörter / Sätze in das Feld eingeben hast, wird der Text so dargestellt, wie es dein Theme vorgibt bzw. wie du es in dessen Einstellungen festgelegt hast. Falls du eine besondere Schrift für deine Website verwendest, weicht die Darstellung im Editor von der auf der Website ab, da dort die Standardschrift von WordPress oder deines Systems verwendet wird.

Um weitere Anpassungen vorzunehmen, hast du zwei Möglichkeiten: Die über dem Block angezeigte Bearbeitungsleiste kennst du bereits aus meinem Gutenberg Tutorial Teil 3. Um die Optionen in dieser Leiste zu nutzen, klickst du in den Textblock und markierst ggf. den Text des Blocks bzw. einen Textbereich. Anschließend klickst du auf

• das Zeilen-Symbol: Gesamten Text links-, rechtsbündig oder zentriert ausrichten,
• B: Markierten Bereich fett darstellen,
• I: Markierten Bereich kursiv schreiben,
• Pfeil nach unten: Markierten Text durchstreichen, hoch stellen, etc.

Außerdem hast du die Möglichkeit, die Farbe einzelner oder mehrerer Wörter zu ändern oder den Text hervorzuheben. Um die Farbe zu wechseln, markierst du z. B. ein Wort,

1. klickst auf den Pfeil rechts,
2. wählst Hervorheben und dann eine der vorgegeben Farben aus
3. oder bestimmst über Individuelle Farbe eine beliebige andere.

Zur Anpassung des gesamten Texts eines Textblocks wie

• Schrift- und Hintergrundfarbe des Text-Blocks,
• Schriftgröße und Zeichenabstand,
• Text-Dekoration, etc.

verwendest du die entsprechenden Optionen in der rechten Seitenleiste (s. u.).

Farbiger Textblock

Während sich die zuvor beschriebenen Änderungen überwiegend nur auf einzelne Wörter oder Textpassagen bezogen, wirken sich die folgenden Optionen immer auf den gesamten Textblock aus. Dafür klickst du in einen Textblock und nutzt die Optionen in der rechten Seitenleiste, die in den neueren WordPress-Versionen von der auf der Abbildung oben dargestellten etwas abweicht. Als erstes erscheint nun links ein Zahnrad-Symbol, wo du unter Erweitert einen Anker oder eine CSS-Klasse eingaben kannst. Mehr dazu ist in meinem Gutenberg-Tutorial 3 Überschrift und Titelblock beschrieben.

Hinter dem rechten Symbol verbirgt sich das Menü für die eigentlichen Textanpassungen. Zunächst kannst du Schrift- und die Hintergrundfarbe des gesamten Blocks verändern. Dazu klickst du in das entsprechende Feld und nimmst die Anpassungen vor.

1. Hintergrund
2. auf eine vorgegebene Farbe oder
3. in das leere Feld darüber klicken,
4. durch Bewegen des Kreises im Auswahlfeld eine neue Farbe festlegen
5. bzw. den vorgegebenen Hexadezimal-Wert markieren
6. und deinen gewünschten Wert einkopieren^[1].

Leider funktioniert die manuelle Eingabe eines Hex-Codes [1] meistens nicht. Anschließend wechselt der Hintergrund des gesamten Blocks zur neuen Farbe.

Um die Textfarbe anzupassen, gehst du ebenfalls wie oben beschrieben vor. Nur nutzt du jetzt die Einstellungen für die Textfarbe. In beiden Fällen stellt ein Klick auf Löschen wieder den Ausgangszustand her.

Manchmal erscheint der Hinweis: Diese Farbkombination ist unter Umständen für manche Menschen schwer lesbar. Wähle eine hellere Hintergrundfarbe und/oder eine dunklere Textfarbe.

Da diese Einschätzung aber auch nicht immer zuverlässig ist, prüfe am besten selbst die Lesbarkeit. Wie deine Textfarbe auf hellem und dunklem Hintergrund wirkt, kannst du zum Beispiel auf der Webseite Color Picker testen.

Schriftgröße im Textblock anpassen

Unter den Farboptionen findest du die Einstellungen für die Schriftgröße. Einerseits sind die folgenden Größen bereits vorgegeben:

• S – Klein: 13 px,
• M – Mittel: 20 px,
• L – Groß: 36 px,
• XL – Riesig: 48 px

Andererseits hast du auch die Möglichkeit, nach einem Klick auf das Schieber-Symbol eine beliebige Schriftgröße in Pixel einzugeben. Allerdings solltest du keine zu große Schrift wählen. Denn auf kleineren Bildschirmen führt das dazu, dass eine Zeile u. U. nur noch ein Wort enthält. Oder der automatische Zeilenumbruch schneidet ein Wort an einer beliebigen Stelle durch. So könnte vom Wort Gutenberg in der ersten Zeile Gutenb stehen und die nächste Zeile würde dann mit erg beginnen.

Ein Klick auf Zurücksetzen stellt wieder die normale, vom Theme oder im Customizer eingestellte Schriftgröße her.

Weitere Anpassungsoption nutzt du, indem du neben Typografie auf das Drei-Punkte Menü klickst. Dort kannst du unter Design für die Schriftstärke fein bis fett wählen, den Zeichenabstand verändern, den Text unter- oder durchstreichen (Text-Dekoration), alle Anfangsbuchstaben groß oder alle Buchstaben groß / klein schreiben sowie einen großen Initialbuchstaben verwenden.

Um deine Änderungen rückgängig zu machen, entfernst du mit einem Klick entweder den Haken bei dem jeweiligen Werkzeug oder nutzt die Zurücksetzen-Option.

Verlinkung

Wenn du einen Link erstellen möchtest, markierst du wiederum ein oder mehrere Wörter und klickst dann auf das Link-Symbol. Anschließend öffnet sich unter oder über der markierten Stelle ein kleines Fenster.

1. Die vollständige / kopierte URL in das Feld eingeben / einsetzen und
2. die URL wird dir unter dem Eingabefeld angezeigt.
3. Zum Übernehmen die Eingabetaste drücken.
4. Um das Öffnen in neuem Tab öffnen / no-follow / Sponsored / about / mentions zu aktivieren,
5. klickst du wieder auf das Link-Symbol, dann
6. auf den Eingabe-Pfeil direkt neben der URL und
7. setzt einen Haken vor der gewünschten Option.

Nachdem der Link einmal gesetzt ist, kannst du ihn jederzeit nachträglich korrigieren.

1. Auf den Link klicken,
2. das Eingabefeld mit der bisherigen URL öffnet sich,
3. auf den Stift neben dem Link klicken,
4. alte URL markieren und löschen,
5. neue URL eintragen und
6. mittels der Eingabe-Taste übernehmen.

Wenn ein Link aktiv ist, erkennst du das, indem du auf den markierten Bereich klickst und das Link-Symbol dann schwarz hinterlegt ist. Um einen Link zu löschen, klickst du auf den Link und dann auf das dunkle Link-Symbol. Anschließend wird die Schaltfläche wieder hell und der Link ist verschwunden.

Text und Bild als Einheit

Um Text und Bild(er) zu kombinieren, hast du drei Optionen. Einerseits kannst du den Block Medien und Text auswählen, der es ermöglicht, links oder rechts einer Abbildung einen kurzen Text einzufügen (s. Gutenberg Tutorial 5 Bilder). Andererseits bietet sich für einen Text, der zwischen zwei Abbildungen oder links und rechts einer Abbildung angezeigt werden soll, das Spalten-Layout an (s. Gutenberg Tutorial 6 Layout Elemente).

Für die Einstellungen des Medien und Text Blocks stehen dir drei Bearbeitungsleisten zur Verfügung: Wenn du nur auf das Bild oder nur auf den Text klickst, erscheint darüber jeweils die dazu gehörige Bearbeitungsleiste. Wenn du den Block als Ganzes anpassen möchtest, klickst du auf das Symbol im Extra-Kästchen links von der Text-Bearbeitungsleiste. Außerdem nimmst du weitere Anpassungen noch über die rechte Seitenleiste vor.

Die dritte Option für die Bildung einer optischen Einheit von Bild und Text ist, den Text die Abbildung „umfließen“ zu lassen. Hierfür versiehst du zunächst einen ganz normalen Textblock mit Inhalt. Anschließend fügst du über diesem Textblock ein Bild ein, indem du auf

1. den Textblock klickst,
2. in der Bearbeitungsleiste darüber rechts auf die drei Punkte und
3. dann auf Davor einfügen.

Wähle nun den Bild-Block und in der angezeigten Maske aus der Mediathek die gewünschte Abbildung aus oder lade eine neue Abbildung hoch. Danach stellst du in der rechten Seitenleiste die Bildgröße nach Wunsch ein. Theoretisch kannst du die Größe auch manuell durch Verschieben des blauen Rahmens um das Bild anpassen, jedoch ist die „automatische“ die bessere Methode. Vergiss den ALT-Text nicht! Um Text und Bild zu vereinen, klickst du auf

1. das Bild,
2. in der darüber angezeigten Bearbeitungsleiste auf das Ausrichtungssymbol und
3. richtest das Bild per Klick auf das entsprechende Symbol links- oder rechtsbündig aus.

Der zuvor erstellte Textblock rutscht sozusagen nach oben und beginnt jetzt rechts (Bild linksbündig) oder links (Bild rechtsbündig) der Abbildung. Wenn der Text mehr Platz benötigt, als neben dem Bild zur Verfügung steht, wird er automatisch unterhalb der Bild-Text-Einheit fortgesetzt. Am Ende erhältst du einen Block, der die Abbildung sowie den Text daneben und unterhalb enthält.

Organisation der Textblöcke

Außer der relativ einfachen optischen Anpassung hat das Arbeiten mit Textblöcken noch weitere Vorteile. Denn der Gutenberg Editor vereinfacht das Bearbeiten des gesamten Beitrags. So kannst du einen Textblock beliebig verschieben.

1. In einen Block klicken,
2. in der Bearbeitungsleiste erscheinen zwei Pfeile,
3. mit einem Klick auf einen der Pfeile bewegt sich der aktuelle Block
4. über bzw. unter den darüber/darunter liegenden Block.

Eine weitere Möglichkeit des Verschiebens bietet das Hamburger-Menü links in der Kopfleiste des Editors. Unter Listenansicht siehst du alle Blöcke, die du verwendet hast und kannst diese verschieben, indem du auf einen Block klickst und diesen mit dem Cursor an eine andere Stelle bewegst. Auch das Sechs-Punkte-Symbol rechts in der Bearbeitungsleiste über dem Block bietet dir die Option des manuellen Verschiebens an.

Über das Drei-Punkte Menü rechts in dieser Leiste ist es genauso einfach weitere Aktionen auszuführen.

1. In den Block und anschließend
2. auf das Drei-Punkte-Menü in der Bearbeitungsleiste klicken:
3. Kopieren, um den Block an anderer Stelle wieder einzufügen oder extern zu speichern,
4. Duplizieren = unter dem aktuellen Block erscheint die Kopie dieses Blocks,
5. Stil kopieren oder einfügen
6. Mit andren Blöcken gruppieren,
7. den Block sperren, so dass er nicht mehr verändert werden kann,
8. in HTML umwandeln, um z. B. eigene Code-Anweisungen einzufügen – anschließend wieder zur normalen Darstellung zurückkehren.

Durch einen Klick auf die Schaltfläche Löschen verschwindet der aktuelle Textblock.

Somit ersparen dir diese Optionen beispielsweise das herkömmliche Kopieren / Ausschneiden und wieder Einsetzen von Textabschnitten. Durch das Duplizieren eines Blocks musst du die einmal vorgenommene Änderungen am Aussehen eines Textblocks auch nicht immer wieder neu einstellen.

CSS und HTML

Das Erweitert-Feld in der rechten Seitenleiste wurde oben bereits erwähnt. Um diese Option zu nutzen, sind zumindest Basis-Programmierkenntnisse erforderlich. Falls du beispielsweise has-border einsetzen möchtest, um einen Rand um das Textfeld zu gestalten, funktioniert das nur, wenn es auch eine CSS-Programmierung für border im Stylesheet gibt.

Auch wenn das der Fall ist, verändert sich jedoch in der Editor-Ansicht nichts. Um das Ergebnis zu sehen, klickst du auf Vorschau > Desktop (> in neuem Tab). Wenn die Verknüpfung mit deinem Stylesheet funktioniert, erscheint dort ein umrandeter Block.

Ein anderes Beispiel wäre die Klasse text-color. Nachdem du in den Block geklickt hast, trägst du unter Zusätzliche CSS-Klasse(n) „has-text-color“ ein. Eine andere Möglichkeit ist, das Drei-Punkte-Menü in der Bearbeitungsleiste des Blocks zu öffnen und auf Als HTML bearbeiten zu klicken.

1. Es erscheint der Code des jeweiligen Blocks:
2. Vor dem zu ändernden Teil des Texts trägst du den neuen HTML-Code ein (z. B. hinter <span style= fügst du „color:#Zahlencode;“> ein und beendest den Code mit </span> hinter dem betreffenden Textteil.
3. Über das Drei-Punkte-Menü auf visuell bearbeiten klicken = der Textblock kehrt wieder zum normalen Modus zurück und müsste nun die neue Farbe zeigen.

Des weiteren kannst du mit HTML ganz einfach einen Zeilenumbruch innerhalb eines Textblocks festlegen, indem du an der gewünschten Stelle im HTML-Modus folgendes einfügst:

• <br>: Neue Zeile
• <br><br>: Leerzeile plus neue Zeile

Anschließend beginnt der Folgesatz im selben Textblock immer in einer neuen Zeile – unabhängig von der Bildschirmgröße und ohne dass ein neuer Textblock eingefügt wird. Alternativ kannst du auch mit Shift+Enter auf deiner Tastatur das nächste Wort in einer neuen Zeile beginnen lassen (s. o.).

Fertige Texte einfügen

Insbesondere längere Texte musste du nicht direkt im den Gutenberg Editor schreiben. Denn du kannst Texte auch außerhalb des Gutenberg Editors vorformulieren und sie dann als „Ganzes“ einfügen.

1. (Externen) Text kopieren
2. Gutenberg Editor öffnen
3. Einen neuen Absatz-Block einfügen und
4. dort den kopierte Text einsetzen
5. Falls notwendig, den Text im Editor weiter bearbeiten.

Allerdings ist dabei zu beachten, dass Texte, die du mit Word oder vergleichbaren Programmen schreibst, immer formatiert (Absatz, Fettdruck etc.) sind. Da Texte im Internet jedoch auf HTML basieren, werden die Microsoft, Apple, etc. –Codes nicht verstanden. Denn diese Programme sind in einer anderen Sprache programmiert. Unter Umständen werden diese Codes beim Einsetzen auch im Gutenberg Editor eingefügt, lösen aber keine Veränderung aus, sondern sind nur unnötiger Ballast oder verursachen eine Fehlermeldung für diesen Block.

Entweder nutzet du z. B. TextEdit (Mac) oder Notepad++ (Windows) als Reintext-Editor. Oder du installierst einen Editor wie beispielsweise Sublime Text 3 (kostenpflichtig), Visual Studio Code oder Atom Code Editor auf deinem PC. Diese bieten Versionen für Linux, Mac OS und Windows an.

Im nächsten Teil meiner Gutenberg Tutorial-Reihe dreht sich alles um das Einfügen von Bildern.

WEITERE GUTENBERG-TUTORIALS

• Einführung
• Bedienfelder
• Überschriften
• Bilder, Cover, Galerie
• Layout Elemente, Listen, Zitate
• Spezialelemente und Widgets

© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.

Ergänzende Beiträge

Texte für Websites schreiben | 14 hilfreiche Tipps

WordPress Seiten und Beiträge | Tutorial Teil 8

Ranking von Websites | Informationen und 3 Testmethoden