Textblock und Textgestaltung | Gutenberg Tutorial Teil 4

Aktualisiert am 07-01-2020, von Ellena

Sowohl Seiten als auch Beiträge bestehen größtenteils aus Text. Im Gutenberg Editor fügen Sie für jeden Absatz einen Textblock ein. Anschließend gibt zahlreiche Möglichkeiten, den Text jedes Blocks auch ohne eigene Codes zu gestalten.

Textblock einfügen

Eigentlich ist ein Textblock nichts anderes als ein Absatz Ihres Beitragstextes. Wenn Sie einen neuen Beitrag beginnen, befindet sich unter dem Titel bereits ein leeres Feld mit der Aufforderung: Schreib etwas oder tippe „/“ zur Blockauswahl (s. Abb. 11 unten). Dahinter sehen Sie ein (+) zur Auswahl anderer Blöcke.

Falls Ihr Beitrag direkt mit einem Textblock beginnen soll, schreiben Sie einfach Ihren 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 (vom Theme bestimmten) Abstand zum vorhergehenden. Falls in einem Textblock ein Satz in einer neuen Zeile beginnen soll, können Sie das nur über die Eingabe eines HTML-Codes tun. Wie das funktioniert beschreibe ich am Ende dieses Tutorials.

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 Ihnen aber auch bewusst sein, dass der Zeilenumbruch variabel ist. Da Sie (hoffentlich) ein mobilfreundliches Theme verwenden, 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önnten Sie 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.

Betätigen Sie am Ende eines Satzes nicht die Eingabe-Taste, um den nächsten Satz in einer neuen Zeile zu beginnen!Auch wenn es vielleicht Ihrem „Schönheitsempfinden“ widerstrebt, verabschieden Sie sich von Randausgleich und Worttrennung.

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, unterteilen Sie einen „Themen-Abschnitt“ in mehrere Absätze. Nachdem Ihr erster Textblock fertig ist, können Sie mittels der Eingabe-Taste direkt den nächsten erstellen und weiterschreiben. Falls aber ein Textblock auf einen anderen Block folgt, haben Sie noch weitere Möglichkeiten, diesen einzufügen:

  1. Sie fahren mit dem Cursor über den vorhergehenden Block
  2. und klicken auf das nun sichtbar + = die Optionen-Liste poppt auf,
  3. auf das Absatzzeichen ¶ klicken (s. Abb. 11 oben).

Außerdem können Sie in einen Block und anschließend auf das Drei-Punkte-Menü in der Bearbeitungsleiste oberhalb klicken. Dort haben Sie die Option einen Block oberhalb oder unterhalb des aktuellen einzufügen (s. Abb. 12 rechts unten).

Textblock Gutenberg
Grafik: eb (Logo: Gutenberg)

Gestalten einzelner Textbereiche

Nachdem Sie Wörter / Sätze in das Feld eingeben haben, können Sie einige Anpassungen vornehmen. Die über dem Feld angezeigte Bearbeitungsleiste kennen Sie bereits aus meinem Gutenberg Tutorial Teil 3. Um die Optionen in dieser Leiste zu nutzen, klicken Sie in den Textblock und markieren ggfs. den Text des Blocks bzw. einen Textbereich. Anschließend klicken Sie auf

  • das Zeilen-Symbol: Gesamten Text links-, rechtsbündig oder zentriert ausrichten,
  • B: Fett gedruckter Text,
  • I: Kursiver Text oder
  • Pfeil nach unten: Text durchstreichen (s. Abb. 12 oben)

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

  1. klicken auf das unterstrichene A in der Bearbeitungsleiste
  2. und wählen eine der vorgegeben Farben aus
  3. oder bestimmen über Individuelle Farbe eine beliebige andere.

Zur Hervorhebung eines Worts oder mehrerer Wörter, beginnst Sie wie oben beschrieben, klicken dann jedoch auf

  1. den Schalter neben Highlight Text = der Text wird mit einem Violett-Ton hinterlegt.
  2. Erneut den Text markieren,
  3. auf das A klicken
  4. und die Farbe entsprechend anpassen.

Zur Anpassung des gesamten Texts eines Textblocks und/oder des Hintergrunds des Textblocks verwenden Sie die entsprechenden Optionen in der Seitenleiste (s. u.).

Falls die Farbe genau dem für Ihre Website erstellten Farbschema entsprechen soll, geben Sie am besten den jeweiligen Hex-Code bei „Individuelle Farbe“ ein. Denn leider funktioniert die freie Farbwahl bei der „Text Color“ bzw. „Highlight Text“ Option (noch) nicht ganz optimal.

Verlinkung

Wenn Sie einen Link erstellen möchten, markieren Sie wiederum ein oder mehrere Wörter und klicken 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,
  2. rechts auf den Pfeil nach unten klicken,
  3. ggfs. in neuem Tab öffnen / no-follow / Sponsored aktivieren
  4. auf den Eingabe-Pfeil direkt neben der URL klicken! = die Verlinkung wird übernommen.

Wenn Sie einen internen Link zu einem anderen Beitrag Ihrer Website setzen möchten, brauchen Sie nur den (Anfang des) Titel(s) eintippen. Anschließend erscheint eine Liste mit Ihren Beiträgen und Seiten. Dann klicken Sie auf den gewünschten Beitrag und speichern ihn (s. o.).

Nachdem der Link einmal gesetzt ist, können Sie ihn jederzeit nachträglich korrigieren.

  1. auf den Link klicken,
  2. ein Eingabefeld mit dem alten öffnet sich,
  3. auf den Stift neben dem Link klicken
  4. alte URL markieren und löschen
  5. neue URL eintragen
  6. mittels des Eingabe-Pfeils übernehmen.

Um einen Link zu löschen, klicken Sie auf den Link. In der Bearbeitungsleiste ist die Link-Option dunkel hinterlegt. Nachdem Sie auf diese Option geklicken haben, wird die Schaltfläche wieder hell und der Link ist verschwunden.

Schriftgröße im Textblock anpassen

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. Für diese klicken Sie in einen Textblock und nutzen die Optionen in der rechten Seitenleiste. Als erstes zu den Text-Einstellungen.

Zunächst können Sie den Text Ihres Blocks mit einem großen Initialbuchstaben beginnen lassen. Da dieser jedoch im Vergleich zur normalen Schriftgröße sehr groß ist, wäre dies gut zu überlegen (s. Abb. 13 oben). Außerdem haben Sie die Möglichkeit, die Schriftgröße des gesamten Texts zu ändern. Im Gutenberg Editor sind einige Schriftgrößen bereits voreingestellt (s. Abb. 13 links unten):

Darüber hinaus geben Sie unter Benutzerdefiniert jede beliebige Schriftgröße in Pixeln ein.

  1. Schriftgröße
  2. Benutzerdefiniert
  3. die Pfeile nutzen = nach oben größer / nach unten kleiner
  4. oder Sie klicken in das Zahlenfeld
  5. markieren und löschen die Zahl
  6. und geben den neuen Pixel-Wert ein.

Das letztgenannte Verfahren können Sie auch noch anwenden, wenn Sie zunächst eine feste Größe festgelegt haben. Ein Klick auf Zurücksetzen stellt wieder die normale Schriftgröße her.

Allerdings sollten Sie 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 ein Wort an einer beliebigen Stelle durchschneidet. So könnte vom Wort Gutenberg in der ersten Zeile Gutenb stehen. Und die nächste Zeile würde dann mit erg beginnen.

Die Schriftgröße des Fließtexts sollte nicht (durchgehend) größer als die Überschriften sein. Außerdem eignet sich sehr große Schrift nicht für längere Sätze / Wörter.

Farbiger Textblock

Wenn sich ein Textblock von den übrigen abheben soll, bietet sich die Verwendung einer Hintergrundfarbe an. Auch hierfür klicken Sie zunächst in den Block.

  1. Farbeinstellungen
  2. Hintergrund
  3. auf eine vorgegebene Farbe klicken oder
  4. Individuelle Farbe
  5. durch Bewegen des Kreises im Auswahlfeld und/oder auf der darunter befindlichen Leiste neue Farbe festlegen
  6. bzw. den vorgegebenen Hexadezimal-Wert markieren
  7. und Ihren gewünschten Wert eingeben.

Anschließend wechselt der Hintergrund des gesamten Blocks zur neuen Farbe.

Zwar passt der Gutenberg Editor nach dem Ändern der Hintergrundfarbe die Textfarbe manchmal automatisch an. Aber nicht immer, sondern es erscheint nur ein Hinweis (Abb. 15):

„Diese Farbkombination ist unter Umständen für manche Menschen schwer lesbar. Wähle eine hellere (dunklere) Hintergrundfarbe und/oder eine dunklere (hellere) Textfarbe.“

Da diese Einschätzung aber auch nicht immer zuverlässig ist, prüfen Sie am besten selbst die Lesbarkeit. Um die Textfarbe anzupassen, gehen Sie ebenfalls wie oben beschrieben vor. Nur nutzen Sie jetzt die Einstellungen für die Textfarbe. In beiden Fällen stellt ein Klick auf Löschen wieder den Ausgangszustand her (s. Abb. 14).

Achten Sie darauf, dass der Text nach Änderung des Hintergrunds und/oder der Textfarbe lesbar bleibt, sich die Schrift also deutlich von Hintergrund abhebt.

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 können Sie 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.

Des weiteren ist es genauso einfach einen Textblock zu kopieren oder zu löschen.

  1. In den Block und anschließend
  2. auf das Drei-Punkte-Menü in der Bearbeitungsleiste klicken
  3. Duplizieren = unter dem aktuellen Block erscheint die Kopie dieses Blocks.

Oder: Auf die Schaltfläche Block entfernen klicken = der aktuelle Textblock verschwindet.

Somit ersparen Ihnen diese Optionen das herkömmliche Kopieren / Ausschneiden und wieder Einsetzen von Textabschnitten (s. Abb. 16). Außerdem brauchen Sie einmal vorgenommene Änderungen am Aussehen eines Textblocks nicht wieder neu einzustellen. Sondern Sie duplizieren ihn einfach, markieren den Text und tippen einen neuen ein.

CSS und HTML

Unten auf der Seitenleiste befindet sich noch ein weiteres Feld – Erweitert. Um diese Option zu nutzen, sind zumindest Basis-Programmierkenntnisse erforderlich. Falls Sie beispielsweise has-border einsetzen möchten, um einen Rand um das Textfeld zu gestalten, funktioniert das nur, wenn es auch eine CSS-Programmierung für border im Stylesheet gibt.

Ein Stylesheet oder Cascading Style Sheet ist eine Formatvorlage. Diese bestimmt die Darstellung der einzelnen Elemente deiner Webseite. Dementsprechend bringt jedes Theme ein eigenes Stylesheet mit. Darüber hinaus ermöglichen es viele auch im Customizer zusätzliche CSS-Codes zu programmieren.

Beispielsweise gibt es die Klasse text-color. Nachdem Sie in den Block geklickt haben, tragen Sie unter Erweiterthas-text-color“ ein (s. Abb. 17). Anschließend öffnen Sie das Drei-Punkte-Menü in der Bearbeitungsleiste des Blocks

  1. Als HTML bearbeiten
  2. Sie sehen den Code für diesen Block
  3. hinter style=“ fügen Sie color:#Zahlencode;“ ein = die Schrift wechselt die Farbe
  4. auf visuell bearbeiten klicken = der Textblock kehrt wieder zum normalen Modus zurück.

Auch wenn Sie einen Text mittels eines eigenen HTML-Codes modifizieren möchten, stellen Sie die Blockansicht auf HTML um. Einerseits können Sie hier sowohl für den gesamten Textabschnitt „style“ die unterschiedlichsten Veränderungen vornehmen. Andererseits müssen auch hier eine Grundprogrammierung im Stylesheet vorhanden sein.

Etwas unabhängiger sind Sie, wenn Sie HTML-Codes verwenden, die auch nur einzelne Wörter umschließen können.

Beispielsweise können Sie mit HTML einen Zeilenumbruch innerhalb eines Textblocks festlegen, indem Sie an der gewünschten Stelle im HTML-Modus folgendes einfügen:

  • <br>: Neue Zeile
  • <br><br>: Leerzeile + 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.

Alle Abbildungen ansehen »

Fertige Texte einfügen

Insbesondere längere Texte müssen Sie nicht direkt im den Gutenberg Editor schreiben. Denn Sie können Texte auch außerhalb des Gutenberg Editors schreiben und sie dann „als Ganzes“ einfügen.

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

Allerdings ist dabei zu beachten, dass Texte, die Sie mit Word oder vergleichbaren Programmen schreiben, automatisch 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. Zwar bleiben die Codes auch im Gutenberg Editor erhalten, lösen aber keine Veränderung aus, sondern sind nur unnötiger Ballast.

Zum Schreiben von Texten, die vom PC in den Gutenberg Editor übertragen werden sollen, verwenden Sie einen „Reintext-/HTML- Editor“ und nicht Word, Pages, o .ä.

Entweder nutzen Sie z. B. TextEdit (Mac) oder Notepad++ (Windows) als Reintext-Editor. Oder Sie laden einen Editor wie beispielsweise Sublime Text 3 (kostenpflichtig), Visual Studio Code oder Atom Code Editor herunter. Diese bieten Versionen für Linux, Mac OS und Windows an.

Tutorial herunterladen »

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

Weitere Gutenberg Tutorials

Fragen oder Anmerkungen » Kontakt

Mehr zum Thema

Websites
Farben für Websites – Farbkonzept erstellen
WordPress
WordPress – Was sind Seiten, was Beiträge?