Textblock und Textgestaltung | Gutenberg Tutorial Teil 4

Textblock Gutenberg
Aktualisiert am 07-01-2020

Sowohl Seiten als auch Beiträge bestehen größtenteils aus Text. Im Gutenberg Editor fügst du 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 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 (s. Abb. 11 unten). Davor siehst du ein + zur Auswahl anderer Blöcke sowie die Shortcuts für Bild, Überschrift (H) und Galerie. 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.

1. TIPP:

Betätige am Ende eines Satzes nicht die Eingabe-Taste, um den nächsten Satz in einer neuen Zeile zu beginnen!

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, kannst du das nur über die Eingabe eines HTML-Codes tun. Wie das funktioniert beschreibe 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 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 sind es dagegen deutlich weniger.

2. TIPP:

Auch wenn es vielleicht deinem „Schönheitsempfinden“ widerstrebt, verabschiede dich von Randausgleich und Worttrennung.

Denn hierfür gilt dasselbe wie für den Zeilenumbruch. Ein Randausgleich 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. Außerdem wird er im Gutenberg Editor auch gar nicht angeboten.

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 zweite Zeile beginnen. Jedoch würde der Satz anschließend bei den meisten Lesern so aussehen:
… Guten-berg verwenden … – sich die Worttrennung also mitten in einer Zeile befinden.

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 deinen Beitrag in mehrere Absätze. Nachdem dein erster Block 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 weitere Möglichkeiten, diesen einzufügen:

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

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

Gestalten einzelner Textbereiche

Nachdem du Wörter / Sätze in das Feld eingeben hast, kannst du einige Anpassungen vornehmen. Die über dem Feld angezeigte Bearbeitungsleiste kennst du bereits aus meinem Gutenberg Tutorial Teil 3. Um die Optionen in dieser Leiste zu nutzen, markierst du den Text des Blocks bzw. einen Textbereich. Anschließend klickst du 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 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 das unterstrichene A in der Bearbeitungsleiste
  2. und wählst eine der vorgegeben Farben aus
  3. oder bestimmst über Individuelle Farbe eine beliebige andere.
Zur Hervorhebung des Worts, beginnst du wie oben beschrieben, klickst dann jedoch auf
  1. den Schalter neben Highlight Text
  2. = der Text wird mit einem Violett-Ton hinterlegt.
  3. Erneut den Text markieren,
  4. auf das A klicken
  5. und die Farbe entsprechend anpassen.

Jedoch ist diese Methode eigentlich nur zur Bearbeitung einzelner Wörter oder Textstellen geeignet. Zur Anpassung des gesamten Texts eines Textblocks und/oder dessen Hintergrunds verwendest du die entsprechenden Optionen in der Seitenleiste (s. u.).

3. TIPP:

Falls die Farbe genau dem für deine Webseite erstellten Farbschema entsprechen soll, gibst du 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 so optimal.

Verlinkung

Wenn du einen Link erstellen möchtest, markierst du 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,
  2. rechts auf den Pfeil nach unten klicken,
  3. ggfs. in neuem Tab öffnen aktivieren
  4. auf den Eingabe-Pfeil direkt neben der URL klicken!
  5. = die Verlinkung wird übernommen.

Wenn du einen internen Link zu einem deiner anderen Beiträge setzen möchtest, brauchst du nur den (Anfang des) Titel(s) eintippen. Anschließend erscheint eine Liste mit deinen Beiträgen. Dann klickst du auf den gewünschten Beitrag und speicherst ihn (s. o.). Nachdem der Link einmal gesetzt ist, kannst du ihn jederzeit nachträglich korrigieren.

  1. auf den Link klicken,
  2. ein Fenster 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, klickst du auf den Link. In der Bearbeitungsleiste ist die Link-Option dunkel hinterlegt. Nachdem du auf diese Option geklickt hast, 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 klickst du in einen Textblock und nutzt die Optionen in der rechten Seitenleiste. Als erstes zu den Text-Einstellungen.

Zunächst kannst du den Text deines 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 hast du 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 gibst du unter Benutzerdefiniert jede beliebige Schriftgröße in Pixeln ein.

  1. Schriftgröße
  2. Benutzerdefiniert
  3. rechts davon die Pfeile nutzen
  4. = nach oben größer / nach unten kleiner
  5. oder du klickst in das Zahlenfeld
  6. markierst oder löschst die Zahl
  7. und gibst den neuen Pixel-Wert ein.

Das letztgenannte Verfahren kannst du jedoch auch anwenden, wenn du zunächst auf eine feste Größe klickst. Anschließend passt du sie dann noch manuell an. Ein Klick auf Zurücksetzen stellt wieder die normale Schriftgröße her.

4. TIPP:

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.

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.

Farbiger Textblock

Wenn sich ein Textblock von den übrigen abheben soll, bietet sich die Verwendung einer Hintergrundfarbe an. Auch hierfür klickst du 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 deinen gewünschten Wert eingeben.

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

5. TIPP:

Achte darauf, dass der Text nach Änderung des Hintergrunds und/oder der Textfarbe lesbar bleibt.

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üfst du am besten selbst die Lesbarkeit. 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 (s. Abb. 14).

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 eines Beitrags. So kannst du kannst einen Textblock beliebig verschieben.

  1. In einen Block klicken
  2. an der linken Seite erscheinen zwei Pfeile und eine gepunktete Schaltfläche
  3. Mit einem Klick auf einen der Pfeile bewegt sich der aktuelle Block …
  4. über bzw. unter den darüber/darunter liegenden Block

Wenn du mit dem Cursor die mittlere Schaltfläche festhältst, kannst du den Block an jede beliebige Stelle deines Beitrags bewegen. 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
  4. = unter dem aktuellen Block erscheint die Kopie dieses Blocks.
Oder:
  1. auf die Schaltfläche Block entfernen klicken
  2. = der aktuelle Textblock verschwindet.

Somit ersparen dir diese Optionen das herkömmliche Kopieren / Ausschneiden und wieder Einsetzen von Textabschnitten (s. Abb. 16). Außerdem brauchst du einmal vorgenommene Änderungen an einem Textblock nicht wieder neu einzustellen. Sondern du duplizierst ihn einfach, markierst den Text und tippst einen neuen ein.

Alle Abbildungen Tutorial Download

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

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 du in den Block geklickt hast, trägst du unter Erweitert has-text-color ein (s. Abb. 17). Anschließend öffnest du das Drei-Punkte-Menü in der Bearbeitungsleiste des Blocks

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

Auch wenn du deinen Text mittels eines eigenen HTML-Codes modifizieren möchtest, stellst du die Blockansicht auf HTML um. Einerseits kannst du hier sowohl für den gesamten Textabschnitt als auch für einzelne Bereiche die unterschiedlichsten Veränderungen vornehmen. Andererseits muss auch hier eine Grundprogrammierung im Stylesheet vorhanden sein.

Falls du innerhalb eines Textblocks einen Zeilenumbruch festlegen möchtest, fügst du an der gewünschten Stelle im HTML-Modus folgendes ein:

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

Fertige Texte einfügen

Insbesondere längere Texte musst du nicht direkt im den Gutenberg Editor schreiben. Denn du kannst sie auch „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 weiterbearbeiten

Allerdings ist dabei zu beachten, dass Texte, die du mit Word oder vergleichbaren Programmen schreibst, 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.

6. TIPP:

Zum Schreiben von Texten, die vom PC in den Gutenberg Editor übertragen werden sollen, einen (Rein-)Text-Editor benutzen. Nicht Word, Pages, o .ä.

Entweder verwendest du z. B. TextEdit auf Macs oder Notepad++ für Windows. Oder du lädst 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.

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

Von Ellena © Grafiken: eb (Logos: WordPress / Gutenberg)


Weitere Gutenberg Tutorials

1: Einführung
2: Bedienfelder
3: Überschriften
5: Bilder, Cover, Galerie
6: Layout Elemente, Listen, Zitate
7: Spezialelemente und Widgets

android apple apps bloggen browser cloud dsl-wlan e-mail foto google internetsicherheit ios macOS messenger microsoft mobilfunk onlinedienste recht seo social tutorials updates windows wordpress

Schreibe einen Kommentar