WordPress Gutenberg Editor: Ganz einfach ansprechende Webseite erstellen
Mit der Veröffentlichung des Gutenberg Editor hat WordPress Ende 2018 einen grossen Schritt nach vorne gemacht. Der neue auch als Block Editor bezeichnete Gutenberg Editor war erforderlich geworden, weil der bis dahin benutzte TinyMCE Editor für die Erstellung ansprechender Webseiten ohne Programmierkenntnisse nicht mehr zeitgemäss gewesen ist.
Viele WordPress User haben den alten Editor dennoch geliebt. Ganz einfach, weil sie daran gewöhnt waren. In diesem WordPress Tutorial zeigen wir dir, wie du den Gutenberg Editor schon nach einer kurzen Einarbeitungszeit effektiv für die Erstellung und Gestaltung deiner Webseiten nutzen kannst. Auch für den Gutenberg Editor brauchst du keine HTML- oder CSS-Kenntnisse.
Was ist der WordPress Gutenberg Editor?
Der Gutenberg-WordPress-Editor ist ein Seiten-Editor, der den TinyMCE (WYSIWYG) Editor von WordPress als Standard-Editor für die Erstellung von Beiträgen und Seiten abgelöst hat. Mit dem Gutenberg Editor werden die unterschiedlichsten Inhaltstypen wie Absätze, Überschriften, Listen, Bilder, Galerien und vieles mehr als unabhängige Blöcke behandelt.
Bereits vor der Veröffentlichung wurde behauptet, dass der Gutenberg Editor die Art und Weise, wie Beiträge, Seiten und so ziemlich alles andere auf einer Webseite erstellt wird, radikal verändern würde. Veröffentlicht wurde der Editor schliesslich am 27. November 2018 als Teil von WordPress 5.0. Tatsächlich ist die Funktionsweise des Editors der von PageBuildern wie beispielsweise Elementor sehr ähnlich. Eine wirkliche Revolution ist der Gutenberg Editor daher mit Sicherheit nicht. Aber er ist im Vergleich zum Vorgänger ein Riesenschritt in die Zukunft.
Wie funktioniert der Gutenberg Editor?
Der Gutenberg Editor unterteilt den gesamten Inhalt von Seiten und Beiträgen in einzelne Blöcke. Um alle Inhaltstypen darstellen zu können, bringt Gutenberg zahlreiche verschiedene Arten von Blöcken von Haus aus mit. Diese Blöcke kannst du dir anschauen, wenn du auf das Plus-Symbol in der oberen linken Ecke der Seite klickst.
Du gibst beim Gutenberg Editor nicht einfach irgendwo einen Text ein und fügst ein Bild hinzu. Bei diesem Editor füllst du die einzelnen Blocks mit Inhalten und positionierst diesen Block so wie du es dir vorstellst auf deiner Webseite oder deinem Beitrag.
Bevor du beginnst, Inhalte einzufügen, musst du einen Block auswählen. Ein einfacher Absatz- oder Bildblock ermöglicht es dir, deiner Seite Text oder Medien hinzuzufügen. Wenn du es brauchst, kannst du aber auch Listen, Galerien oder Tabellen einfügen. Die vom Gutenberg Editor verwendeten Blöcke sind im Wesentlichen einzelne Seitenelemente, die als in sich geschlossene Blöcke konfiguriert sind.
Du kannst einen einzelnen Block aus einer Liste auswählen, ihn auf deine Seite ziehen, dem Block Inhalte hinzufügen und ihn nach Belieben gestalten. Für jeden Inhalt benötigst du einen eigenen Block, den du auswählst und ganz einfach in die Seite an beliebiger Stelle einfügen kannst. Auf der rechten Seite im Gutenberg Editor befindet sich eine Seitenleiste. In dieser Seitenleiste stellt dir der Editor verschiedene Formatierungs- und Stiloptionen für jeden einzelnen Block bereit.
Wenn du beispielsweise einen neuen Text-Abschnitt in einem neuen Block hinzugefügt hast, kannst du den Block mit verschiedenen Optionen an deine Webseite anpassen. Du kannst den Block auch bei Bedarf nach oben oder unten verschieben und so neu nach deinen Vorstellungen auf der Seite anordnen. Auch die Grösse und Ausrichtung kannst du ändern und weitere Anpassungen vornehmen.
Mit dem Gutenberg Editor ist es ganz einfach, eine Webseite zu erstellen. Anstatt wie bisher Inhalte in einen Editor zu schreiben oder einzufügen und mit HTML anzupassen, kannst du jetzt einfach einen Block auswählen, ihn auf deine Seite ziehen, Inhalte hinzufügen und den Block an das Design anpassen.
WordPress enthält bei der Auslieferung bereits eine Vielzahl von Blöcken für den Gutenberg Editor. Aber auch Drittentwickler haben eigene Blöcke entwickelt, die du über Plugins installieren kannst. Allen Blöcken gemeinsam ist, dass sie eine aussergewöhnlich einfache Möglichkeit bieten, Seiten und Beiträge zu erstellen, ohne, dass du über HTML oder Css Kenntnisse verfügen musst.
Auch tiefgreifende Kenntnisse des WordPress CMS sind nicht erforderlich. Mit dem Gutenberg-Editor können auch Anfänger sehr schnell ansprechende Webseiten und Beiträge erstellen. Für Profis sind der Funktionsumfang und die Gestaltungsmöglichkeiten an der ein oder anderen Stelle vielleicht noch nicht ausreichend.
Wir empfehlen dir, den Gutenberg Editor selbst einmal über eine längere Zeit auszuprobieren, um ein Gefühl dafür zu bekommen, was mit diesem Editor möglich ist. Du wirst schnell lernen, wie der Editor funktioniert.
Was sind die Vorteile des Gutenberg Editors gegenüber dem alten WordPress Editor?
Mit den Gutenberg Editors kannst du deine Beiträge und Seiten sehr schnell und effizient gestalten. Der alte schon in den 2000er Jahren eingeführte TinyMCE Editor von WordPress war mehr oder weniger nur ein Text-Editor. Es gibt daher im TinyMCE Editor zahlreiche Möglichkeiten, den Text zu formatieren und zu gestalten, aber auch nicht viel mehr.
Der Gutenberg Editor bietet durch den modularen Aufbau jedoch wesentlich mehr Flexibilität bei der Gestaltung einer Website oder eines Beitrages. Und das Beste daran ist, dass du keine tiefgreifenden HTML- oder Css-Kenntnisse benötigst, um mit dem Gutenberg Editor ansprechende Ergebnisse zu erzielen.
Das Besondere am Gutenberg Editor ist, dass der klassische Content Bereich des TinyMCE Editors durch Blöcke, die jeweils ein spezifisches Element eines Beitrags oder einer Seite enthalten, ersetzt wird. Beim Gutenberg Editor stehen dir Blöcke zum Einfügen von Bildern, Absätzen, Tabellen, Galerien oder auch einfachen Buttons und vielem mehr zur Verfügung.
Diese Blöcke kannst du so, wie du es brauchst, im Inhaltsbereich positionieren. Dadurch hast du eine bisher unerreichte Flexibilität bei der Erstellung von Beiträgen und dem Design des Layouts deiner Webseite. Sehr praktisch ist das + Icon. Ein Klick auf dieses Icon genügt, um einen weiteren Inhaltsbereich, sprich Block hinzuzufügen.
Wir können festhalten, dass die Seiten- und Beitragserstellung mit dem Gutenberg Editor fast zum Kinderspiel wird. Eine lange Lernkurve ist nicht erforderlich, um den Editor perfekt zu beherrschen.
Gutenberg Editor vs. Pagebuilder Plugins
Den klassischen WordPress Editor TinyMCE gibt es schon lange. Fast ebenso lange existieren bereits zahlreiche sogenannte Page Builder Plugins, die dir dabei helfen, ansprechende Webseiten zu erstellen. Bekannte Beispiele sind der WPBakery Page Builder mit über 4,3 Millionen Nutzern, Elementor und der Visual Composer Website Builder.
Page Builder Plugins bringen in der Regel eine Vielzahl vorbereiteter Layouts, fast unzählige Funktionen und Gestaltungsmöglichkeiten mit sich. Der Gutenberg Editor ist direkter Konkurrent dieser bewährten und beliebten Plugins. Gegenüber Page Builder Plugins bietet der WordPress Block Editor schon jetzt einige Vorteile.
Hierzu gehören beispielsweise, dass der Editor als hauseigene Entwicklung perfekt zu WordPress passt und du keine Kompatibilitätsprobleme befürchten musst. Bei verschiedenen Page Builder Plugins kommt es immer wieder zu Problemen mit der Kompatibilität. Nicht selten funktionieren mit diesen Plugins erstellte Seiten nicht einwandfrei oder überhaupt nicht.
Der vom Gutenberg Editor erzeugte Code ist sauber und sehr schlank. In aller Regel werden daher mit dem Gutenberg Editor erstellte Designs schneller geladen, als die gleichen Designs, die mit einem Pagebuilder generiert wurden.
Der grosse Nachteil des Gutenberg Editors im Vergleich zu Page Builder Plugins ist, dass der Block Editor keine so ausgefeilte visuelle Bearbeitungsmöglichkeit bietet. Er bietet zwar mehr und bessere Möglichkeiten als der klassische TinyMCE Editor, ist aber noch nicht so ausgefeilt wie ein Page Builder. Mit einem Pagebuilder Plugin stehen dir bis heute flexiblere Layout und Design-Optionen für die Gestaltung deiner Webseite zum Beiträge zur Verfügung.
Seit der ersten Veröffentlichung mit WordPress 5.0 hat sich der Gutenberg Editor enorm weiterentwickelt. Wir können dir nur empfehlen, dich mit diesem immer mächtiger werdenden Tool auseinanderzusetzen und auszuprobieren. Page Builder Plugins werden wahrscheinlich immer ihre Berechtigung haben, jedoch ist es durchaus zu empfehlen die Funktionen des Gutenberg Editors zu kennen.
Funktionen des Gutenberg Editors
Eine der grössten Umstellungen in WordPress der vergangenen Jahre war die Einführung des neuen Gutenberg Editors im Jahr 2018. Die Ablösung für den TinyMCE Editor, dem viele WordPress User mit einer Hassliebe verbunden waren, hat verschiedene neue Funktionen mitgebracht.
Diese Funktionen erleichtern dir heute die Arbeit. Sie beschleunigen die Erstellung von ansprechenden Webseiten und Blogbeiträgen enorm. Mittlerweile hat sich die Blockstruktur, die der Gutenberg Editor verwendet, für die Erstellung von Webseiten allgemein bewährt.
Die Verwendung von Blöcken für verschiedene Inhalte hat sich weitestgehend etabliert. In den folgenden Abschnitten unseres WordPress Tutorials stellen wir dir die wichtigsten Funktionen des Gutenberg Editors etwas näher vor. Und wir zeigen dir, welche Vorteile du durch diese Funktionen hast.
Blöcke – zentrales Element des Gutenberg Editor
Die wichtigste Funktion und Neuerung gegenüber dem TinyMCE Editor ist die Verwendung von Blöcken für das Erstellen einer Webseite oder eines Blogbeitrags. Mithilfe vielfältiger vorgegebener Blöcke kannst du im Gutenberg Editor Seiten und Blogposts viel schneller erstellen als früher.
Oft war bei der Verwendung des TinyMCE Editors ein individueller Programmcode oder ein Plugin von Drittanbietern erforderlich, um die gleiche Funktion zu erreichen, wie es jetzt die Blöcke des Gutenberg Editors ermöglichen. Heute erledigst du die meisten Aufgaben bei der Gestaltung ganz einfach per Drag-and-Drop. Es gibt vorkonfigurierte Blöcke für Überschriften, Absätze, Zitate, Bilder oder auch externe Medien.
Dynamische Bearbeitungswerkzeuge des Gutenberg Editors
Ebenfalls nützlich und eine durchdachte Funktion sind die dynamischen Toolbars, mit denen du die Inhalte der Blöcke auf deiner Seite individuell anpassen kannst. Für jedes Element auf deiner Seite bietet dir der Gutenberg Editor eine massgeschneiderte und individuelle Bearbeitungsoberfläche.
Hier liegt ein grosser Unterschied zu anderen Editoren. Die meisten Editoren bieten dir nur staatliche Menüpunkte für die Bearbeitung an.
What you see is what you get – mehr Überblick bei der Gestaltung
Dank der Funktion WYSIWYG (What you see is what you get – auf Deutsch etwa: was du siehst, bekommst du) hast du beim Erstellen einer Webseite oder eines Beitrages immer den perfekten Überblick und kannst im Voraus sehen, wie dein fertiggestelltes Werk den Besuchern präsentiert wird. Änderungen, die du vornimmst, kannst du sofort und in Echtzeit begutachten.
Das bei anderen Editoren erforderliche und lästige Hin- und Herspringen zwischen dem Bearbeitungs- und einem Vorschaufenster entfällt beim Gutenberg Editor vollkommen. Dadurch sparst du sehr viel Zeit bei der Entwicklung einer Seite.
Dank der WYSIWYG Funktion ist die Entwicklung einer Seite wesentlich intuitiver und schneller. Nicht zuletzt benötigst du beim Gutenberg Editor zum Erstellen einer Webseite oder eines Beitrages keine HTML- oder Css-Kenntnisse.
Eine ebenfalls hilfreiche Funktion ist die Anzeige der Gliederung deines Beitrages. Die Hierarchie der Seite wird exakt wiedergegeben. Titel, Multimedia-Inhalte, Zitate und alle anderen Seiten-Elemente werden dargestellt. Der Gutenberg Editor zeigt dir, wie viele Wörter dein Beitrag enthält.
Innerhalb dieser Darstellung kannst du auf jeden Eintrag klicken. Jeder Eintrag ist ein klickbarer Link, der vom System automatisch generiert wird. Mit einem Klick auf einen Eintrag gelangst du sofort zum entsprechenden Abschnitt. Das beschleunigt die Bearbeitung noch einmal erheblich.
Buttons, Tabellen und Spalten
In der Vergangenheit musstest du, um eine Tabelle in WordPress einzufügen und darzustellen, HTML-Code eingeben oder ein Plugin verwenden. Dies ist beim Gutenberg Editor nicht mehr erforderlich. Mit wenigen Klicks kannst du in jede deiner Seiten eine angepasste Tabelle einfügen.
Auch die Generierung von mehreren Spalten ist beim Gutenberg Editor mithilfe von Blöcken einfach möglich. Die Erstellung von Spalten mit Blöcken ist wesentlich komfortabler, schneller und präziser, als die Verwendung von Plugins oder die Eingabe von HTML-Code.
Einen CTA-Button fügst du ebenfalls ganz einfach mit einem Block ein. Der Gutenberg Editor bietet dir einen speziellen Block für die Einbindung von Buttons an. Wähle die gewünschte Variante aus, platziere sie in deiner Webseite und füge anschliessend den gewünschten Text und einen Link hinzu. Fertig. Die Farbe des Buttons kannst du praktisch frei wählen.
Blöcke bearbeiten
Die Inhaltsblöcke im Gutenberg Editor sind keine starren Konstrukte. Du kannst einige der verschiedenen Blöcke zumindest in gewissen Grenzen bearbeiten oder sie sogar in einen anderen Typ umwandeln. Wie das funktioniert, zeigen wir dir im folgenden Teil unseres WordPress Tutorials.
Umwandlung von Blöcken
Falls erforderlich, den kannst du im Gutenberg Editor Blöcke umwandeln und ihnen so andere Eigenschaften verleihen. Allerdings beschränkt sich diese Möglichkeit auf die Umwandlung eines Blogs in einen ähnlichen oder eine nahe verwandte Blockart. Beispielsweise ist es möglich, einen normalen Absatz mit einem Klick in eine Liste, eine Überschrift oder auch ein Zitat umzuwandeln.
Um einen Block in einen anderen umzuwandeln, klickst du auf das Menüfeld ganz links aussen am oberen Rand des Blocks. Mit dem Klick öffnet sich ein Untermenü mit den Auswahlmöglichkeiten. Je nachdem, welchen Blocktyp du in einen anderen umwandeln möchtest, werden die hier 3 oder auch mehr Zielblöcke für die Umwandlung angezeigt.
Blöcke als HTML bearbeiten
Manchmal ist es sinnvoll, wenn man den HTML-Code eines Blocks direkt bearbeiten kann. Um den HTML-Code anzuzeigen und zu bearbeiten, musst du das erweiterte Menü für den Block aufrufen. Bei jedem Block sind die 3 übereinanderliegenden Punkte ganz rechts, das letzte Icon am oberen Rand. Hinter diesen 3 Punkten verbirgt sich das erweiterte Menü für den Block.
Wenn du auf die drei Punkte klickst, öffnet sich dieses Menü. Etwa in der Mitte an siebter Stelle findest du den Menüpunkt »Als HTML bearbeiten«. Wenn du diesen Menüpunkt anklickst, wird der HTML-Quellcode des Blocks angezeigt und kann bearbeitet werden.
An dieser Stelle müssen wir dich jedoch vorwarnen. Bearbeite den HTML-Code eines Blocks nur dann, wenn du dir ganz sicher bist, was du tust. Machst du an dieser Stelle einen Fehler, kann es passieren, dass der Block nicht mehr verwendbar ist.
Medien im Gutenberg Editor hinzufügen
Wir finden, das Hinzufügen von Medien ist im Gutenberg Editor ebenfalls sehr gut gelöst. Hierfür stehen dir verschiedene Blöcke zur Verfügung. Zum Einfügen von Bildern, Videos und anderen Medien gibt es im Gutenberg Editor jeweils eigene, vorkonfigurierte Blöcke. Die folgenden Blocktypen kannst du verwenden:
- Medien & Textblock
- Datei Block
- Bild Block
- Galerie Block
- Audio Block
- Cover Block
- Video Block
In folgenden Abschnitten dieses WordPress Tutorials für den Gutenberg Editor zeigen wir dir, wofür du die einzelnen Medien Blöcke verwenden kannst.
Medien & Textblock
Der Medien & Textblock des Gutenberg Editor ist gewissermassen ein Zwitter. Er ermöglicht dir die Positionierung und Gestaltung sowohl von Medien als auch von Texten nebeneinander in einem Block. Daher steht dieser Block an erster Stelle zu unserer Liste mit Medien Blöcken.
Sehr häufig sieht man auf Webseiten, dass ein zweispaltiges Layout benutzt wird, um ein Bild oder ein Video neben einem Text wiederzugeben. Der Medien & Textblock des Gutenberg Editors erleichtert dir die Erstellung von Webseiten mit einem zweispaltigen Layout erheblich.
Mit diesem Block kannst du auf einfache Weise ohne HTML und Css Kenntnisse, Text und Medieninhalten nebeneinander darstellen. Dabei spielt es keine Rolle, ob der Medieninhalt links oder rechts vom Text angezeigt werden soll. Um die Anordnung zu ändern, genügt ein Mausklick auf das entsprechende Blocksymbol in der Symbolleiste.
Der Inhalt der Textspalte im Medien & Textblock ist nicht allein auf Text beschränkt. Es können auch verschiedene andere Blöcke wie beispielsweise ein Absatz, Überschriften, Listen und ein Schaltflächen Block eingefügt werden.
Wenn du den Inhalt des Medien & Textblocks bestimmt hast, bietet dir der Editor verschiedene Einstellungsmöglichkeiten. So kannst du festlegen, dass der Inhalt gestapelt dargestellt wird, falls die Seite mit einem mobilen Gerät mit einem kleineren Display aufgerufen wird. Ebenso kannst du bestimmen, dass der Textinhalt über dem Medieninhalt und umgekehrt dargestellt wird.
Den Medien & Textblocks kannst du genau so konfigurieren, wie es für das Layout und die Erscheinung deiner Webseite am besten funktioniert. Der Gutenberg Block für Text & Medien bietet viele interessante Optionen für die Gestaltung des Inhaltes deiner Webseite. Wir können dir empfehlen, diesen Block und die Möglichkeiten, die er dir bietet, näher in Augenschein zu nehmen.
Datei Block
Wenn du eine PDF-Datei oder ein Word-Dokument hochgeladen hast, dann kannst du mithilfe des Datei Blocks einen Text mit einer Schaltfläche einfügen. Mit dieser Schaltfläche kann die Datei von Besuchern deiner Seite geladen werden. Sobald du den Datei Block in eine Seite eingefügt hast, kannst du die Schaltfläche »Hochladen« nutzen, um eine neue Datei in deine Medienbibliothek zu laden und dann in den Block einzufügen.
Mit einem Klick auf die Schaltfläche »Medienbibliothek« kannst du dir den Inhalt deiner Bibliothek anzeigen lassen und eine bereits vorhandene Datei aussuchen, um sie in den Datei Block einzufügen. Nach dem Einfügen einer Datei in den Datei Block stehen dir weitere Einstellungsoptionen zur Verfügung.
Du kannst beispielsweise auswählen, ob du einen Link direkt zur Mediendatei selbst, oder einen Link zu der separaten WordPress Anhangseite für diese Datei erstellen möchtest. Du kannst festlegen, dass nach einem Klick auf den Link eine neue Registerkarte geöffnet wird oder eine Schaltfläche zum Herunterladen der Datei mit dem entsprechenden Link angezeigt wird.
Den Text der Schaltfläche kannst du bequem ändern. Hierzu musst du nur auf die Schaltfläche klicken und anschliessend einen neuen Text einfügen.
Bild Block
Bilder sind die wohl am häufigsten in Webseiten eingesetzten Medien. Zum Einfügen von Bildern steht dir im Gutenberg Editor ein spezieller Bild Block zur Verfügung. Wenn du den Bildblog in deine Seite eingefügt hast, klickst du auf die Schaltfläche »Hochladen« oder die Schaltfläche »Mediathek«, um ein Bild einzufügen.
Wenn du auf Hochladen klickst, kannst du ein Bild von deinem Rechner in die Seite einfügen. Wenn du auf Mediathek klickst, werden dir alle in der Mediathek zur Verfügung stehenden Bilder angezeigt, aus denen du eins auswählen kannst, dass in den Bild Block eingefügt wird.
Eine weitere Möglichkeit zum Einfügen eines Bildes in den Bild Block ist die Schaltfläche von »URL einfügen«. Klickst du auf diese Schaltfläche, kannst du anschliessend die URL, unter der das Bild gespeichert ist, eingeben. Beim Aufruf der Seite wird das Bild von dieser Quelle eingefügt.
Wenn du per Drag’n’Drop ein Bild auf den Bild Block ziehst, wird das Bild vom Gutenberg Editor automatisch in die Medienbibliothek hochgeladen und anschliessend in den Bild Block eingefügt.
Wenn das Bild eingefügt wurde, kannst du einen Link hinzufügen. Klicke dazu in der Block-Symbolleiste auf die Schaltfläche »Link einfügen«. Du hast die Möglichkeit, das Bild mit der Mediendatei in der Mediathek selbst zu verlinken. Du kannst aber auch einen Link zu einer WordPress Anhangseite erstellen oder eine benutzerdefinierte URL eingeben.
Im Gutenberg Editor kannst du zu jedem Bild einen Alt-Text hinzufügen. Dieser Text wird angezeigt, wenn die Wiedergabe von Bildern im Browser eines Besuchers unterdrückt wurde. Der Alt-Text informiert dann über den Bildinhalt.
Die Bildgrösse kann nach Einfügen in den Bild Block ebenfalls angepasst werden. Es sind sowohl die exakte Vorgabe der Pixelbreite deiner Bilder als auch die prozentuale Grössenänderung (zum Beispiel 50, 75 und 100 %) möglich. Über das Dropdown-Feld »Bildgrösse« kannst du WordPress Standardgrössen für deine Bilder auswählen. Du musst jedoch bedenken, dass die Wiedergabe der Bilder je nach verwendetem Theme unterschiedlich ausfallen kann.
Eine weitere Möglichkeit, die Bildgrösse anzupassen, ist das Ziehen an den sogenannten Ziehpunkten. Dazu zu musst du deinen Mauszeiger auf einen der blauen Punkte am Bildrand positionieren. Nach einem Klick auf einen dieser Punkte kannst du den Punkt verschieben und so die Bildgrösse beliebig anpassen. Eine grundlegende Bildbearbeitung ist auch über die Funktionen »Zuschneiden« in der Block-Symbolleiste möglich. Weitere Bearbeitungsmöglichkeiten bieten die Menüpunkte »Bild vergrössern«, »Seitenverhältnis ändern« und »Bild drehen«.
Wenn du die Grösse eines Bildes für deine Webseite verändern möchtest, dann solltest du Bilder, wenn möglich, immer nur verkleinern und nicht vergrössern. Wenn du ein Bild mit einer nicht ausreichenden Auflösung vergrösserst, wird das Bild pixelig und zunehmend unscharf. Mithilfe eines Duotone-Filters kannst du Licht und Schatten deiner Bilder beeinflussen und verändern.
Du siehst, mit dem Bildblock des Gutenberg Editors eröffnen sich zahlreiche Bildbearbeitungs-Möglichkeiten. Da Bilder für viele Webseiten ein sehr wichtiges Inhaltselement sind, solltest du dich mit diesen Funktionen ausführlich befassen und die ein oder andere Einstellung ausprobieren. Ändern kannst du sie immer noch.
Galerie Block
Je nach Thema der Webseite bietet eine Galerie die Möglichkeit, viele Informationen und Eindrücke durch Bilder zu transportieren. Der Galerie Block erleichtert des Gutenberg Editors macht das Einfügen einer Bildergalerie sehr einfach und komfortabel.
Der Galerie Block wird wie alle anderen Blöcke in eine Seite eingefügt. Wenn du anschliessend auf die Schaltfläche »Hinzufügen« in der Block-Symbolleiste klickst, kannst du die gewünschten Bilder zum Galerie Block hinzufügen. Nach einem Klick auf »Hinzufügen« kannst du mit der Option »Medienbibliothek« die Medienbibliothek deiner Webseite öffnen und daraus die Bilder auswählen.
Natürlich ist es auch möglich, mit Drag’n’Drop neue Bilder in die Medienbibliothek zu ziehen und sie anschliessend in den Galerie-Block einzufügen. Mit der Option »Hochladen« kannst du deinen Computer durchsuchen und Bilder auswählen, die hochgeladen werden sollen und per Drag’n’Drop ganz einfach in den Galerie-Block ziehen.
Wenn du alle gewünschten Bilder in den Galerie-Block geladen hast, stehen dir weitere Optionen für die Gestaltung zur Verfügung. Du kannst beispielsweise die Anzahl der Spalten vorgeben oder festlegen, dass die Thumbnails deiner Galeriebilder so beschnitten werden, dass sie im Galerie Block gleichmässig ausgerichtet werden können.
Jedes Galeriebild kannst du mit einer Beschriftung versehen. Auch die gesamte Galerie kannst du beschriften. Hierfür ist das Feld »Galeriebeschriftung« vorgesehen. Wie diese Beschriftung in der fertigen Webseite angezeigt wird, ist abhängig vom Theme, das du verwendest. Durch einen Klick auf ein einzelnes Bild stehen dir weitere Optionen zur Verfügung.
Du kannst das angeklickte Bild zuschneiden und einen Link hinzufügen. Im Galerie Block des Gutenberg Editors kannst du auch einzelne Bilder ersetzen. Ganz einfach, indem du auf die Schaltfläche »Ersetzen« in der Symbolleiste klickst. Diese Symbolleisten wird er nach der Bildauswahl angezeigt.
Audio Block
Wenn du einen Audioplayer zum Abspielen von Musik aus verschiedenen Quellen in deine Seiten einfügen möchtest, dann ist der Audio Block des Gutenberg Editors genau richtig. Der Audio Block ist einfach nutzbar und ermöglicht dir auf unkomplizierte Weise das Einfügen eines Audio Players in deine Webseite.
Sobald du den Audio Block des Gutenberg Editors in deine Seite eingefügt hast, klickst du auf die Schaltfläche »Hochladen«, oder auf die Schaltfläche »Medienbibliothek«. Wenn du auf »Hochladen klickst«, kannst du eine Audiodatei von deinem Computer in die Medienbibliothek hochladen und in den Audio Block einfügen. Die zweite Möglichkeit ist ein Klick auf die Schaltfläche Medienbibliothek.
Nach einem Klick auf diese Schaltfläche wird dir der Inhalt deiner Medienbibliothek angezeigt. Du kannst dann eine vorhandene Datei auswählen und in den Audio Block einfügen. Wenn du die Schaltfläche »Von URL einfügen« anklickst, kannst du eine Audiodatei einfügen, die unter einer anderen URL als die deiner Webseite gespeichert ist.
Nicht zuletzt kannst du beim Gutenberg beim Audio Block auch eine Datei per Drag & Drop in den Block ziehen. Die Datei wird dann automatisch hochgeladen, in der Medienbibliothek gespeichert und in den Block eingefügt.
Der Audio Block des Gutenberg Editors bietet dir verschiedene Einstellmöglichkeiten. Wenn sich eine Audiodatei in deinem Audio Block befindest, kannst du über die Einstellungs-Seitenleiste weitere Optionen auswählen. Du kannst den Player beispielsweise auf »Autoplay« stellen, damit er automatisch mit dem Abspielen der Datei beginnt, wenn die Seite aufgerufen und geöffnet wird. Eine weitere Möglichkeit ist die Funktion »Loop«. Wenn du diese Option gewählt hast, wird die Audiodatei in einer Endlosschleife abgespielt.
Cover Block
Manchmal ist es sinnvoll, ein Bild mit einem Text zu ergänzen oder das Bild mit einem farbigen Overlay in den Hintergrund zu rücken. Beim Gutenberg Editor kannst du beides mit dem Cover Block erledigen. Viele verwenden den Cover Block wegen dieser Möglichkeiten gerne als Element für den Seitenkopf.
Füge den Cover Block an der gewünschten Stelle in deine Seite ein und klicke entweder und auf die Schaltfläche »Hochladen« oder auf die Schaltfläche »Mediathek«. Wenn du auf Hochladen klickst, kannst du ein Video oder ein Bild in deine Mediathek hochladen und nach dem Hochladen in den Cover Block einfügen. Bei einem Klick auf Mediathek werden dir alle verfügbaren Videos und Fotos in der Mediathek deiner Webseite angezeigt.
Um Text einem Bild oder einem Video in Cover Block hinzuzufügen, musst du in den angezeigten Platzhalter schreiben. Der Platzhalter im Cover Block ist ein Standardabsatz Block. Der Platz reicht für eine Textzeile. Wenn du mehr Textzeilen einfügen möchtest, dann kannst du weitere Blöcke vor oder nach dem Standardabsatz Block einfügen.
Weitere Gestaltungsmöglichkeiten sind die Festlegung des Cover Block Inhaltes als Hintergrund. Wenn du diese Option wählst, dann wird das Bild oder auch das Video im Cover Blog als Hintergrundbild oder Hintergrundvideo festgelegt. Das bedeutet, wenn ein Besucher auf der Seite nach unten scrollt, gleitet der Seiteninhalt über das Bild oder Video. In diesem Fall werden weder das Bild noch das Video bewegt.
Wenn du die Hintergrundoption nicht ausgewählt hast, dann werden Videos oder Bilder zusammen mit dem übrigen Inhalt der Seite beim Scrollen ganz normal verschoben. Eine weitere interessante Option ist die sogenannte Brennpunktauswahl. Mit dieser Option kannst du sowohl die Ausrichtung des Bildes als auch die Position des sogenannten Hauptfokus-Punktes entsprechend deinen Vorstellungen verändern. Es kann jedoch sein, dass du abhängig von der Grösse des Bildes trotz anderer Einstellungen keine Veränderungen und keinen Unterschied sehen wirst.
Weitere Gestaltungsoptionen sind die Überlagerungs-Farbe und der Farbverlauf. Diese Optionen kannst du per Mausklick auswählen und mithilfe eines Schiebereglers die Deckkraft der ausgewählten Farben entsprechend den eigenen Vorstellungen verändern. Diese Funktion ist manchmal hilfreich, um die Lesbarkeit von Texten zu verbessern.
Video Block
Es gibt immer mehr Webseiten, die mithilfe von bewegten Bildern Informationen vermitteln und versuchen, die Besucher möglichst lange auf der Seite zu halten. Der Gutenberg Editor bietet dir einen Video Block, mit dem du Videos aus unterschiedlichen Quellen in deiner Webseite einbinden kannst.
Wenn du den Video Block an der gewünschte Stelle in deine Seite eingefügt hast, kannst du ein neues Video hochladen, es in deiner Mediathek speichern und dann in den Video Block einfügen. Ebenso kannst du in der Mediathek verfügbare Videos nutzen. Und wenn das Video unter einer anderen URL zu finden ist, dann kannst du diese Webadresse eintragen, damit das Video beim Aufruf der Seite geladen wird.
Und natürlich kannst du ähnlich wie bei einem Bild oder Galerie Block ein Video auch per Drag’n’Drop in den Video Block ziehen. WordPress speichert das Video dann automatisch in der Medienbibliothek, bevor es in den Block eingefügt wird. Nachdem du den Video Block mit Video eingerichtet hast, kannst du noch Beschriftungen hinzufügen.
Hierfür steht dir ein eigener Abschnitt zur Verfügung. In der Seitenleiste bietet dir die Editor weitere Einstellungsmöglichkeiten für den Video Block. Autoplay und das endlose Abspielen in einer Schleife kannst du hier einstellen, oder das Video stumm schalten. Und natürlich kannst du auch die Steuerelemente für jedes Video ausblenden.
Falls dein Video kein eigenes Vorschaubild hat, ist hier der Ort, an dem du ein separates sogenanntes Posterbild, das beim Aufruf der Seite angezeigt wird, festzulegen.
Hinweis: Der Video Block des Gutenberg Editor ist nicht dafür vorgesehen, YouTube oder Vimeo Videos in eine Seite einzufügen. Für die Einbettung von YouTube und Vimeo Videos stehen dir eigene Blöcke zur Verfügung.
Sehr schön gelöst ist die automatische Umschaltung des Editors. Das heisst, wenn du versuchst ein YouTube oder Vimeo Video mithilfe des Video Blocks einzufügen, wird der Block automatisch in einen Vimeo-Embedded-Block oder einen YouTube-Embedded-Block umgewandelt.
Ähnlich reagiert der Editor, wenn du versuchst, eine VideoPress URL einzufügen. Bei diesem Versuch wird der Block automatisch in einen VideoPress-Embedded-Block umgewandelt. Dies ist im Prinzip kein Problem. Du musst wissen und im Hinterkopf behalten, dass dir nach einer solchen Umwandlung nicht die gleichen Einstellungsoptionen zur Verfügung stehen, wie du sie hast, wenn du direkt einen Vimeo Block oder YouTube Block verwendest.
Erweiterte Einstellungen beim Gutenberg Editor
Die Möglichkeiten, die dir der Gutenberg Editor für die Änderungen bei den Einstellungen bietet, findest du nach einem Klick auf das Zahnrad im oberen rechten Menü. Mit einem Klick auf das Zahnrad kannst du die rechte Seitenleiste ein- und ausblenden.
Ganz unten in dieser Seitenleiste findest du den Menüpunkt »Voreinstellungen«. Wenn du auf diesen Menüpunkt klickst, öffnet sich im Gutenberg Editor ein Pop-up-Fenster mit den Reitern Allgemein, Design, Blöcke und Bedienfelder. Hinter diesen Reitern findest du die jeweiligen Einstellungsmöglichkeiten für diese Bereiche.
Beispielsweise kannst du, um die Bearbeitungsoberfläche übersichtlicher zu gestalten, hier die Benutzeroberfläche reduzieren und vieles mehr. Probiere aus, was dir gefällt.
Einbetten von Inhalten
Mit WordPress ist es sehr einfach, externe Inhalte in deine eigene Webseite einzufügen. Du musst die Inhalte dazu nicht dann mal bei dir auf deinem Webspace speichern. Du kannst sie ganz einfach mithilfe des Gutenberg Editors in jede beliebige Seite deiner Website einbetten.
Es wird immer wieder Gelegenheiten geben, wenn denen es sinnvoll ist, ein Video in deiner Webseite einzubinden. Beispielsweise, wenn du ein eigenes Werbevideo oder ein Video mit einem Tutorial veröffentlicht hast. Dann wirst du dieses Video optimalerweise auf YouTube veröffentlichen und anschliessend in deine Webseite einbinden.
Das Einbinden hat den Vorteil, dass du das Video nicht komprimieren musst. Über die Verbindung zu deiner Webseite erreichst du aber, dass mehr Menschen dein Video sehen werden. Auf deiner Webseite selbst sorgt ein gut gemachtes und interessantes Video dafür, dass die Besucher länger auf deiner Webseite bleiben.
WordPress, das heisst, der Gutenberg Editor bietet dir eine sehr einfache Möglichkeit, ein YouTube-Video auf deiner Website einzubetten. Kopiere zunächst die vollständige Adresse des Videos, wenn du es in YouTube geöffnet hast. Die Adresse steht oben in der Adresszeile.
Öffne dann den Gutenberg Editor und die Seite, in die du das Video einbetten möchtest. Klicke auf das Plus und wähle »YouTube«. Jetzt kannst du die kopierte URL einfügen. Das Video erscheint nach kurzer Zeit im Block auf deine Seite. Damit hast du das YouTube-Video in deine Webseite eingebettet.
Auf die gleiche Art und Weise kannst du auch andere Inhalt in jede deiner Webseiten einbetten. WordPress kann unterschiedliche Inhaltstypen erkennen und für die Wiedergabe den passenden Blog selbstständig auswählen.
Permalink (URL) ändern
WordPress generiert Permalinks automatisch. Wenn du einen Beitrag erstellt hast, vergibt WordPress einen Permalink, anhand bestimmter Kriterien. Immer mit einbezogen wird der Titel der Seite oder des Beitrags. Diesen Permalink kannst du sofort, wenn du den Beitrag erstellst hast oder zu jedem beliebigen späteren Zeitpunkt ändern.
Um die Permalinks im Gutenberg-Editor zu ändern, wechselst du nach rechts in die Seitenspalte des Editors. Den Permalink findest du als zweiten oder, je nachdem welches Plugin du installiert hast, auch als dritten Eintrag in der rechten Spalte des Editors. Klicke auf den Pfeil nach unten, um alle Infos zum Permalink anzuzeigen. Unter »URL Titelform« siehst du ein Feld. In diesem Feld siehst du den von WordPress generierten Permalink. Hier kannst du deinen eigenen Permalink eingeben.
Wichtig: Bitte achte darauf, dass du vorher unter Einstellungen -> Permalinks “Beitragsname” ausgewählt hast.
Den automatisch generierten Link kannst du einfach überschreiben. Achte bei der Vergabe des Links darauf, dass er selbstredend ist und dem Besucher sowie Suchmaschinen auf den ersten Blick verrät, was der Inhalt des Beitrages ist. Unter dem Feld »URL Titelform« hat WordPress einen Link zu einer Seite mit mehr Informationen über Permalinks eingefügt.
Diese Infoseite ist für WordPress-Neulinge interessant und eine gute Informationsquelle. Wenn du deinen neuen Permalink eingetragen hast, musst du ihn speichern. Nachdem Speichern wird dir der neue Permalink angezeigt. Über diesen Link kannst du die Seite aufrufen.
Nach dem Speichern deiner Änderungen zeigte WordPress auch einen Link mit dem Namen «Beitrag ansehen». Diesen Link kannst du alternativ nutzen, um dir den Beitrag im Browser anzusehen.
Weiterleitung nach der Permalink Änderung einrichten
Was ist eine Weiterleitung und wann ist sie unverzichtbar? Eine Weiterleitung sorgt dafür, dass die Besucher deiner Webseite und hierzu gehören auch die Suchmaschinen, nicht ins Leere laufen, wenn Sie eine veraltete Verlinkung nutzen. Das heisst, mit einer Weiterleitung kannst du verhindern, dass eine 404 Fehlermeldung bei den Besuchern im Browser erscheint.
Wenn du beim Aufbau einer neuen Website die Permalinks für Beiträge nach deinen Vorstellungen änderst, dann ist keine Weiterleitung erforderlich. Die alten Links hat aller Wahrscheinlichkeit nach noch niemand gespeichert und benutzt. Wenn du jedoch bei einer seit längerer Zeit aktiven Webseite Permalinks änderst, solltest du unbedingt eine Weiterleitung einrichten.
Beispielsweise, wenn du dir überlegt hast, die Links für eine bestimmte Produktgruppe generell zu ändern. Viele deiner Kunden und Interessenten haben dann die alten Links irgendwo im Browser gespeichert und werden fehlgeleitet. Und fehlerhafte Verlinkungen sind nicht nur bei menschlichen Besuchern, sondern auch bei Suchmaschinen nicht gerne gesehen. Sie verschlechtern die Usability deiner Webseite und dies führt oft zu einem schlechteren Ranking in den Suchergebnissen bei Google & Co.
Tools für die Einrichtung von Weiterleitungen
Wie für fast alles bei WordPress gibt es auch für die Einrichtung von Weiterleitungen, den sogenannten »Redirections« entsprechende Plugins. Ein empfehlenswertes heisst auch »Redirection«. Um dieses Tools zu installieren, klickst du am linken Rand auf den Menüpunkt »Plugins > Installieren«.
Anschliessend gibst du den Suchbegriff »Redirection« ein, damit das Plugin gesucht und angezeigt wird. Installiere das Plugin und aktiviere es. Anschliessend folgst du den Anweisungen, um eine oder mehrere Weiterleitungen einzurichten.
Quelle: https://wordpress.org/plugins/redirection/
Wortanzahl sowie H Überschriften anzeigen lassen
Beim klassischen WordPress Editor wurden die Informationen zur Wortzahl unten links am Rand des Editors angezeigt. Viele vermissen heute bei der ersten Benutzung des Gutenberg Editor die Angaben an dieser Stelle. Sind aber nicht weg, sie sind nur nach oben gewandert.
Wenn du die Wortzahl erfahren möchtest, findest du sie beim Gutenberg Editor oben links in der Leiste. Klicke hier auf das runde i-Icon. Anschliessend wird dir eine Übersicht über die inhaltliche Struktur der Seite angezeigt. Hier siehst du, wie viele Wörter, Absätze und Blöcke der Inhalt hat. Ebenso siehst du hier, welche Überschriften in welcher Hierarchie verwendet werden.
Sinnvolle Funktion: Wenn du auf eine Überschrift klickst, wirst du unmittelbar zur betreffenden Stelle im Inhalt geleitet. Diese Funktion ist sehr praktisch, um schnell im umfangreichen Beiträgen oder Seiten zu navigieren.
Allgemeine Einstellungen der Seite
Wenn du eine Seite oder einen Beitrag zur Bearbeitung geöffnet hast, dann siehst du auf der rechten Seite des Gutenberg Editors eine Sidebar. Ganz am oberen Rand dieser Sidebar siehst du die beiden Reiter »Dokument« und »Block«. Allgemeine Einstellungen an deiner Seite kannst du im Bereich »Dokument« vornehmen.
Unter dem Reiter »Dokument« findest du Angaben zum Status und zur Sichtbarkeit der Seite. Hier siehst du, ob die Seite öffentlich ist und wann sie veröffentlicht wurde. Auch der Name des Autors wird hier festgehalten. Nicht zuletzt kannst du hier festlegen, ob dieser Beitrag oder diese Seite auf der Startseite gehalten werden soll. Gegebenenfalls werden in der Sidebar auch weitere Plugins, die du installiert hast, einschliesslich der Bearbeitungsmöglichkeiten angezeigt.
Etwas darunter findest du eine Auflistung der Kategorien und durch ein Häkchen gekennzeichnet, zu welcher Kategorie die Seite gehört. Darunter folgt eine Auflistung der Schlagwörter und die Anzeige des Beitragsbildes, falls eines vorhanden ist.
Gutenberg Editor abschalten: so gehts
Es soll immer wieder vorkommen, dass einzelne Nutzer keinen Gefallen daran finden, wie der Gutenberg Editor arbeitet und Seiten gestaltet. Wenn du den Editor für dich ausprobiert hast, und du letztendlich keinen Gefallen an der Art und Weise findest, wie dieser Editor funktioniert, ist es problemlos möglich, den Editor zu deaktivieren und wieder den alten WordPress Editor zu nutzen.
Plugins mit anderen Editoren oder PageBuildern kannst du ebenfalls problemlos verwenden, auch wenn du einmal den Gutenberg Editor genutzt hast. Du hast drei Möglichkeiten, den Gutenberg Editor für deine WordPress-Installation zu deaktivieren. Diese drei Möglichkeiten sind:
- die Installation des Classic Editor WordPress-Plugin
- die Installation des Disable Gutenberg WordPress-Plugin
- den Gutenberg Editor mit Code deaktivieren
Die beiden Plugins Classic Editor WordPress und Disable Gutenberg WordPress installierst du wie jedes andere Plugin und kannst anschliessend den Gutenberg Editor deaktivieren. Das zweite Plugin ermöglicht es dir auswählen, für welchen Nutzer der Gutenberg Editor deaktiviert werden soll.
Für die dritte Methode, den Gutenberg Editor mit Code zu deaktivieren, benötigst du Kenntnisse in der Programmiersprache PHP. Wenn du diese Kenntnisse nicht hast, dann können wir dir von dieser Methode nur abraten. Bei einem Fehler kann deine Webseite beschädigt werden.
Fazit zum Gutenberg Editor
Den Gutenberg Editor für WordPress kannst du schon nach einer kurzen Einarbeitungszeit sehr effektiv und produktiv für die Erstellung deiner WordPress Seiten und Beiträge verwenden. Am besten lernst du den Editor und seine Funktionen kennen, wenn du ihn ausprobierst.
Insgesamt ist der Block Editor für WordPress sehr übersichtlich, aber noch nicht so umfangreich wie verschiedene PageBuilder Plugins. An den Elementor PageBuilder, den WPBakery Page Builder oder den Visual Composer Website Builder reicht das WordPress eigene Tool noch nicht heran. Dennoch bietet der WordPress Gutenberg Editor für Anfänger und für Profis einen gut sortierten Werkzeugkasten, mit dem sich auch anspruchsvolle Projekte realisieren lassen.
Wir finden, der Gutenberg Editor hat sich in den wenigen Jahren seiner Existenz zu einem mehr als brauchbaren Tool für die Erstellung von WordPress Seiten und Blogbeiträgen entwickelt.
FAQ Gutenberg Editor
Was ist der Gutenberg Editor?
Der Gutenberg Editor und wurde im Jahr 2018 eingeführt, um den alten TinyMCE Editor von WordPress durch einen modernen Block Editor für das Erstellen von Seiten und Beiträgen in WordPress zu vereinfachen.
Welche Vorteile bietet der WordPress Gutenberg Editor?
Der Gutenberg Editor ist benutzerfreundlich und intuitiv verwendbar. Das blockbasierte System bietet eine hohe Flexibilität und ist einfach ohne HTML oder Css Kenntnisse nutzbar.
Wo finde ich den Gutenberg Editor?
Ab der WordPress Version 5.0 oder höher wird der Gutenberg Editor automatisch installiert. Sobald eine Seite oder ein Beitrag für die Bearbeitung geöffnet wird, wird auch der Gutenberg Editor geöffnet.
Wie aktiviere ich den Gutenberg Editor?
Eine separate Aktivierung des Gutenberg Editor es ist ab WordPress 5.0 nicht erforderlich. Ab dieser WordPress Version wird der Editor standardmässig installiert und steht zur Verfügung, sobald eine Seite oder ein Beitrag zur Bearbeitung geöffnet werden.
Was sind die Blöcke im Gutenberg-Editor von WordPress?
Die Blöcke sind Inhaltselemente für deine WordPress Seite oder deinen Blog. Rund 40 verschiedene Blöcke für unterschiedliche Inhalte wie Bilder, Text, Absätze, Titel oder Videos stehen aktuell zur Verfügung.
