Der Block-Editor in WordPress ist das Standardwerkzeug, das wir jetzt zum Schreiben von Inhalten und Bearbeiten von Websites verwenden. Er wurde 2019 eingeführt und ist liebevoll als "Gutenberg" bekannt. Dieser neue Editor ersetzt den alten klassischen Editor, der vor ihm kam. Der Block-Editor ist außerordentlich einfach und intuitiv zu bedienen und eignet sich für die Erstellung von Inhalten und die Bearbeitung von WordPress-Websites.
Was ist der Unterschied zwischen dem Block-Editor (Gutenberg) und dem klassischen Editor?
Bevor wir in den Block-Editor eintauchen, lassen Sie uns die Unterschiede zwischen dem Gutenberg-Block-Editor und dem alten klassischen Editor vergleichen und verstehen.Der klassische Editor in WordPress ist unten dargestellt:
Er verfügt über ein Texteditor-Feld mit einigen grundlegenden Formatierungsoptionen. Der Block-Editor in WordPress ist unten abgebildet:
Wie Sie sehen können, handelt es sich um zwei völlig unterschiedliche Editoren für die Erstellung von Inhalten in WordPress. Der alte klassische Editor ist ein Texteditor mit Formatierungsschaltflächen ähnlich wie Microsoft Word. Der neue Editor verwendet einen anderen Ansatz namens "Blöcke" (daher der Name "Block-Editor").
Blöcke sind Inhaltselemente, die zu Bearbeitungsbildschirmen hinzugefügt werden können, um Layouts zu erstellen. Jedes Element, das zu einem Beitrag oder einer Seite hinzugefügt wird, ist ein Block. Blöcke können zum Beispiel für Absätze, Bilder, Videos, Galerien, Audio, Listen und mehr hinzugefügt werden. Alle gängigen Inhaltselemente verfügen über Blöcke, und weitere können durch WordPress-Plugins hinzugefügt werden.
Was sind die Vorteile des WordPress-Blockeditors gegenüber dem klassischen Editor?
Der WordPress-Blockeditor bietet eine einfache Möglichkeit, verschiedene Arten von Inhalten zu Beiträgen und Seiten hinzuzufügen. Wenn Sie zum Beispiel mit dem klassischen Editor Tabellen zu Inhalten hinzufügen wollten, war bisher ein separates Tabellen-Plugin erforderlich. Mit dem Block-Editor können Sie einfach einen Tabellenblock hinzufügen, die Spalten und Zeilen auswählen und mit dem Hinzufügen von Inhalten beginnen.
Inhaltselemente können nach oben und unten verschoben und als einzelne Blöcke bearbeitet werden, und Rich-Media-Inhalte lassen sich mühelos erstellen. Das Beste von allem ist, dass der WordPress-Block-Editor einfach zu bedienen und zu erlernen ist. Dies ist ein großer Vorteil für alle WordPress-Anfänger, die gerade ihren ersten Blog starten oder eine DIY-Geschäftswebsite erstellen.
Sehen wir uns also an, wie man den WordPress-Blockeditor nutzt, um großartige Inhalte wie ein Profi zu erstellen.
Gutenberg verwenden - WordPress Block Editor
Der Block-Editor ist intuitiv und flexibel gestaltet. Er sieht zwar anders aus als der alte WordPress-Editor, kann aber immer noch alles, was Sie mit dem klassischen Editor tun können.
Erstellen eines neuen Blogeintrags oder einer Seite mit dem Block-Editor
Erstellen Sie wie gewohnt einen neuen Blogbeitrag oder eine neue Seite. Klicken Sie einfach auf den WordPress-Administrator im FensterBeiträge " Neuen Beitrag hinzufügenMenü. Wenn Sie eine Seite erstellen möchten, gehen Sie zu Seite"Neu hinzufügenMenü.
Dadurch wird der Blockeditor gestartet.
So fügen Sie einen Block im Block-Editor hinzu
Der erste Block eines jeden Beitrags oder einer Seite ist der Titel. Sie können mit der Maus unter den Titel gehen oder die Tabulatortaste auf Ihrer Tastatur drücken, um den Cursor nach unten zu bewegen und mit dem Schreiben zu beginnen.
Standardmäßig ist der nächste Block ein Absatzblock, damit der Benutzer mit dem Schreiben beginnen kann. Wenn Sie jedoch andere Arten von Inhalten hinzufügen möchten, ist das ganz einfach. Klicken Sie einfach auf die Schaltfläche "Neuen Block hinzufügen" [+] in der oberen linken Ecke des Editors, oder klicken Sie auf diese Schaltfläche unter oder rechts neben einem vorhandenen Block, um einen neuen Inhaltsblock hinzuzufügen.
Wenn Sie auf diese Schaltfläche klicken, wird das Menü Block hinzufügen mit einer Suchleiste oben und häufig verwendeten Blöcken unten angezeigt. Sie können auf die Registerkarten klicken, um die Blockkategorien zu durchsuchen, oder ein Stichwort eingeben, um schnell nach einem bestimmten Block zu suchen.
Wenn Sie nicht mit der Maus auf die Schaltflächen klicken wollen, können Sie auch Tastaturkürzel verwenden. Geben Sie zunächst / ein, um nach einem Block zu suchen, und drücken Sie dann die Eingabetaste auf Ihrer Tastatur, um ihn einzufügen.
Verwendung von Blöcken im neuen Editor
Jeder Block hat seine eigene Symbolleiste, die oben im Block angezeigt wird. Die Schaltflächen in der Symbolleiste ändern sich je nach dem Block, den Sie gerade bearbeiten. Im Screenshot unten entwickeln wir beispielsweise einen Absatzblock, der grundlegende Formatierungsschaltflächen wie Textausrichtung, Fett- und Kursivdruck, Link einfügen und weitere Optionen im Drei-Punkte-Menü anzeigt.
Zusätzlich zur Symbolleiste kann jeder Block seine eigenen Blockeinstellungen haben, die in der rechten Spalte des Bearbeitungsbildschirms angezeigt werden. Diese Einstellungen variieren je nach dem zu bearbeitenden Block. Im Block Absatz können Sie zum Beispiel den Text, den Hintergrund, die Farbe des Links und das Layout bearbeiten.
Es ist möglich, Blöcke nach oben und unten zu verschieben und sie neu anzuordnen. Wenn Sie diesen Vorgang durchführen möchten, klicken Sie einfach auf Ziehen und Ablegen oder auf die Schaltflächen Nach oben und Nach unten in der Blocksymbolleiste.
Blöcke nach Gruppen und Spalten ordnen
Der Block-Editor verfügt auch über praktische Werkzeuge zur Verwaltung und Organisation Ihres Inhaltslayouts. Sie können mehrere Blöcke auswählen, indem Sie auf sie klicken, während Sie die Umschalttaste auf Ihrer Tastatur gedrückt halten.
Klicken Sie anschließend auf die Schaltfläche Blocktyp in der Symbolleiste, um den ausgewählten Block in eine Gruppe oder Spalte umzuwandeln. Auf die gesamte Gruppe von Blöcken können dann Formatvorlagen angewendet werden, z. B. zum Ändern der Ausrichtung oder des Abstands.
Der Blockeditor kann auch leere Gruppen- oder Spaltenblöcke hinzufügen. Sie können später mit anderen Blöcken gefüllt werden.
Jede Art von Block kann nach Bedarf zu jeder Spalte hinzugefügt werden. So können Sie schöne Layouts für verschiedene Spalten erstellen.
Bewahren und Wiederverwenden von Blöcken in Gutenberg
Der größte Vorteil der Verwendung von Blöcken ist, dass sie gespeichert und wiederverwendet werden können. Dies ist besonders nützlich für Website-Betreiber und Blogger, die häufig bestimmte Inhalte zu ihren Beiträgen oder Seiten hinzufügen müssen. Klicken Sie einfach auf die Menüschaltfläche in der oberen rechten Ecke der Symbolleiste eines jeden Blocks. Wählen Sie die Option "Muster erstellen" aus dem Menü.
Achtung!Sie können auch ganze Gruppen und Spalten als wiederverwendbare Blöcke speichern. Auf diese Weise können Sie ganze Abschnitte speichern und schnell wiederverwenden, wenn Sie sie später benötigen. Um einen wiederverwendbaren Block zu speichern, klicken Sie einfach auf die entsprechende Option, woraufhin sich ein Fenster öffnet. In diesem Fenster müssen Sie dem Block einen Namen geben, damit Sie ihn später leicht wiederfinden können, wenn Sie ihn brauchen. Außerdem können Sie eine Kategorie zum Speichern des Blocks wählen. Auf diese Weise können Sie diese wiederverwendbaren Blöcke übersichtlicher verwalten.
Klicken Sie anschließend auf die Schaltfläche Erstellen, um Ihr Muster zu speichern. WordPress wird Ihr Muster und alle darin enthaltenen Blöcke speichern. Um Ihr Muster wiederzuverwenden, bearbeiten Sie einfach den Beitrag oder die Seite, zu der Sie es hinzufügen möchten. Klicken Sie dann auf die Schaltfläche [+] Block hinzufügen oder verwenden Sie das Tastaturkürzel /. Sie können das Muster finden, indem Sie den von Ihnen angegebenen Namen eintippen.
Die Musterfunktion erleichtert es Website-Besitzern, ihren Seitenlayouts einige gemeinsame Elemente hinzuzufügen, z. B. einprägsame Banner, Schaltflächen zum Teilen von sozialen Medien, Werbebanner und mehr. Das WordPress-Theme oder -Plugin, für das Sie sich entscheiden, enthält möglicherweise bereits einige Muster, oder Sie können in der WordPress-Blockmusterbibliothek nach Mustern suchen, die von anderen freigegeben wurden, und sehen, ob Ihnen welche gefallen.
Veröffentlichung und Verwaltung von Optionen im Gutenberg-Block-Editor
Jeder WordPress-Beitrag enthält eine Vielzahl von Metadaten. Dazu gehören Informationen wie das Datum des Beitrags, Kategorien und Tags, vorgestellte Bilder und mehr. Alle diese Optionen sind übersichtlich in der rechten Spalte des Editor-Bildschirms angeordnet.
Plug-in-Optionen in Gutenberg
WordPress-Plugins können ihre Einstellungen mithilfe der Block-Editor-API in Bearbeitungsbildschirme integrieren. Einige beliebte Plugins verfügen über ihre eigenen Blöcke. Zum Beispiel.WPForms, das beste WordPress-Formularerstellungs-Plugin, um Formulare mit Hilfe von Blöcken zu Ihrem Inhalt hinzuzufügen.
Auch andere WordPress-Plugins können ihre Einstellungen dem Block-Editor-Bildschirm hinzufügen. Zum Beispiel, die folgendenAlles-in-einem SEO für WordPressWie kann man die Bearbeitung von SEO-Einstellungen am unteren Rand des Blockeditors ermöglichen?
Wenn Sie WooCommerce zum Betreiben eines Online-Shops verwenden, werden Sie feststellen, dass auch WooCommerce über eigene Blöcke verfügt. Mit diesen Blöcken können Sie Produkte zu beliebigen WordPress-Beiträgen und -Seiten hinzufügen.
Hinzufügen einiger allgemeiner Blöcke zum Blockeditor
Grundsätzlich ist der Block-Editor leistungsfähig und kann die Aufgaben des alten klassischen Editors vollständig übernehmen. Und nicht nur das: Mit ihm wird Ihre Arbeit schneller und reibungsloser. Was noch beeindruckender ist, ist die Tatsache, dass er noch mehr neue Funktionen bietet, wie z. B. reichhaltige No-Code-Optionen zur einfachen Gestaltung von Inhalten. Hier finden Sie einige gängige Blöcke, mit denen Sie ihn ganz einfach verwenden können.
1 Bilder in den WordPress-Block-Editor einfügen
Der WordPress-Block-Editor verfügt über einen gebrauchsfertigen Bildblock. Fügen Sie einfach den Block hinzu und laden Sie dann die Bilddatei hoch oder wählen Sie sie aus der Mediathek aus.
Es ist auch möglich, Bilder von Ihrem Computer zu ziehen und abzulegen, und der Editor erstellt automatisch Bildblöcke. Nach dem Hinzufügen eines Bildes werden die Blockeinstellungen angezeigt, in denen Sie Metadaten zum Bild hinzufügen können, z. B. alternativen Text, Größe der Bildauflösung und einen Link zum Bild.
2. das Hinzufügen von Links im Block-Editor
Der Blockeditor verfügt über mehrere Blöcke, in die Sie Text einfügen können. Der am häufigsten verwendete Block ist der Absatzblock, der in der Symbolleiste eine Schaltfläche Link einfügen hat. Alle anderen häufig verwendeten Textblöcke haben ebenfalls eine Schaltfläche "Link" in der Symbolleiste.
Links können auch mit der Tastenkombination Command + K auf einem Mac oder CTRL + K auf einem Windows-Computer eingefügt werden.
3. eine Fotogalerie zu Gutenberg hinzufügen
Der Galerie-Block funktioniert ähnlich wie der Bild-Block. Fügen Sie ihn hinzu und laden Sie dann eine Bilddatei hoch oder wählen Sie sie aus.
4. die Verwendung von Gutenberg zum Hinzufügen von Shortcodes zu WordPress-Beiträgen
Alle im klassischen Editor verwendeten Shortcodes funktionieren auch im Block-Editor perfekt. Sie können direkt in Absatzblöcke eingefügt werden, oder Sie können spezielle Shortcode-Blöcke für diesen Zweck verwenden.
Erkunden Sie andere Inhaltsblöcke im Blockeditor
Der Gutenberg-Editor verspricht, einige seit langem bestehende Probleme mit der Benutzerfreundlichkeit von WordPress durch die Einführung einiger neuer Blöcke zu lösen.
1. neben einem Text in WordPress Bilder einfügen
Mit älteren Editoren war es vielen Benutzern nicht möglich, Bilder neben dem Text zu platzieren. Jetzt ist es jedoch möglich, diesen Schritt mit Medien- und Textblöcken durchzuführen.
Dieser einfache Block besteht aus zwei nebeneinander angeordneten Blöcken, die es Ihnen ermöglichen, auf einfache Weise Bilder mit etwas Text daneben einzufügen.
2) Hinzufügen von Schaltflächen zu WordPress-Beiträgen und -Seiten
Das Hinzufügen von Schaltflächen zu Blogbeiträgen oder Seiten war in früheren Editoren ein echtes Problem. Sie mussten möglicherweise ein spezielles Plugin finden, um den Shortcode für die Schaltfläche zu generieren, oder einfach in den HTML-Modus wechseln, um den Code manuell zu schreiben. Glücklicherweise verfügt der Gutenberg-Editor über einen integrierten Schaltflächenblock, mit dem Sie jedem Beitrag oder jeder Seite einfach und schnell Schaltflächen hinzufügen können, sodass Sie sich darüber keine Gedanken mehr machen müssen!
Sie können Links zu Schaltflächen hinzufügen, Farben ändern und vieles mehr.
3. schöne Titelbilder zu Blogbeiträgen und Landing Pages hinzufügen
Eine weitere großartige Funktion ist der Cover-Block. Er ermöglicht es Ihnen, Beiträgen und Seiten auf einfache Weise ein Titelbild oder ein Hintergrund-Cover mit Farben hinzuzufügen. Das Titelbild ist in der Regel breiter und wird oft als Dekoration für einen neuen Teil der Seite oder den Anfang einer Geschichte verwendet. Es sieht besonders schön aus und hilft Ihnen außerdem, auffällige Inhaltslayouts zu erstellen.
Es ist einfach zu bedienen: Fügen Sie einfach einen Titelblock hinzu und laden Sie Ihr Lieblingsbild hoch. Es gibt auch die Möglichkeit, dem Cover eine Overlay-Farbe hinzuzufügen oder es auf ein festes Hintergrundbild zu setzen, so dass die Nutzer einen super coolen Parallax-Effekt erzeugen können, wenn sie auf der Seite nach unten scrollen.
4. die Erstellung von Tabellen in Artikeln
Das Hinzufügen von Tabellen zu WordPress-Beiträgen ist im klassischen Editor keine leichte Aufgabe. Man muss sie mit Hilfe eines Plugins erstellen oder seinen eigenen CSS- und HTML-Code schreiben. Aber hier kommt die gute Nachricht: Der Block-Editor hat jetzt einen Standard-Tabellenblock eingebaut, mit dem sich Tabellen einfach und schnell zu Beiträgen und Seiten hinzufügen lassen. Fügen Sie einfach diesen Block hinzu, wählen Sie die Anzahl der Spalten und Zeilen aus, die Sie einfügen möchten, und schon sind Sie fertig!
Sie können nun damit beginnen, Daten in die Tabellenzeilen einzufügen. Bei Bedarf können Sie jederzeit weitere Zeilen und Spalten hinzufügen, und es sind zwei grundlegende Stiloptionen verfügbar.
5. mehrspaltige Inhalte erstellen
Der klassische Editor ist wirklich nicht sehr leistungsfähig, wenn es um die Erstellung mehrspaltiger Inhalte geht, was vielen Leuten Kopfzerbrechen bereitet. Es ist gut, dass der Block-Editor uns die Spaltenblock-Funktion bietet, mit der wir durch einfaches Hinzufügen zwei Spalten mit Absatzblöcken erhalten können, was unsere Inhaltspräsentation abwechslungsreicher und flexibler macht.
Dieser Spaltenblock ist sehr flexibel. Sie können bis zu 6 Spalten in einer Reihe hinzufügen und sogar andere Blöcke in jeder Spalte verwenden.
Zusätzliche Tipps für den professionellen Einsatz von Gutenberg
Vielleicht machen Sie sich Sorgen, dass das Hinzufügen und Bearbeiten von Blöcken mit dem Block-Editor mehr Zeit in Anspruch nimmt als das eigentliche Erstellen von Inhalten. Aber keine Sorge, der Blockeditor ist superschnell. Mit ein wenig Einarbeitung ist es ein Leichtes, alle Arten von Blöcken ohne viel Nachdenken hinzuzufügen. Ich bin sicher, dass Sie bald feststellen werden, dass die Verwendung des Blockeditors Ihren Arbeitsablauf schneller und reibungsloser macht.
Hier finden Sie einige zusätzliche Tipps für fortgeschrittene Benutzer, damit Sie den WordPress-Block-Editor schneller nutzen können.
1. die Symbolleiste des Blocks nach oben verschieben
Auf dem Screenshot oben haben Sie vielleicht bemerkt, dass sich am oberen Rand eines jeden Blocks eine Symbolleiste befindet. Sie können diese Symbolleiste an den oberen Rand des Editors verschieben. Klicken Sie einfach auf die Schaltfläche mit den drei Punkten in der oberen rechten Ecke des Bildschirms und wählen Sie die Option "Obere Symbolleiste".
2. die Tastaturkürzel verwenden
Gutenberg bietet eine Reihe praktischer Abkürzungen, die Ihren Arbeitsablauf beschleunigen und erleichtern. Die erste ist /. Geben Sie einfach / ein, beginnen Sie mit der Eingabe, und der Editor zeigt Ihnen passende Blöcke an, die sofort hinzugefügt werden können. Für weitere Tastenkombinationen klicken Sie auf das Drei-Punkte-Menü in der oberen rechten Ecke des Bildschirms und wählen Sie Tastaturkürzel.
Hier erscheint ein Pop-up-Fenster mit einer Liste aller Tastenkombinationen, die Sie verwenden können. Diese Liste enthält unterschiedliche Tastenkombinationen für Windows- und Mac-Benutzer.
3 Ziehen und Ablegen von Medien zur automatischen Erstellung von Medienblöcken
Mit Gutenberg können Sie Dateien per Drag & Drop an eine beliebige Stelle auf dem Bildschirm ziehen und es wird automatisch ein Block für Sie erstellt. Zum Beispiel kann eine einzelne Bild- oder Videodatei platziert werden, und der Block wird für Sie erstellt. Oder es können mehrere Bilddateien gelöscht werden, um einen Galerieblock zu erstellen.
4 Fügen Sie YouTube, Twitter, Vimeo und andere eingebettete Inhalte hinzu.
Mit dem Block-Editor können Sie Inhalte von Drittanbietern einfacher in Ihre WordPress-Inhalte einbetten. Alle beliebten Dienste von Drittanbietern verfügen über Blöcke.
Kopieren Sie einfach die Einbettungs-URL und fügen Sie sie ein, und es wird automatisch ein Block für Sie erstellt. Wenn Sie zum Beispiel eine YouTube-Video-URL hinzufügen, wird automatisch ein YouTube-Einbettungsblock erstellt und das Video angezeigt.
Die Standard-Einbettungsoptionen gelten nicht für Facebook- und Instagram-Einbettungen, aber dafür gibt es eine Umgehung, die ich Ihnen später erläutern werde.
Hinzufügen weiterer Blöcke zum Gutenberg-Block-Editor in WordPress
Entwickler von Block-Editoren in WordPress können ihre eigenen Blöcke erstellen. Es gibt einige hervorragende WordPress-Plugins, die Block-Bundles für neue Redakteure anbieten.
Hier sind einige davon:
1. spektra WordPress Gutenberg-Block
Spectra WordPress Gutenberg-Blöckeist eine Blockbibliothek, die viele fortgeschrittene Blöcke enthält, um dem Inhalt weitere Gestaltungselemente hinzuzufügen.
Spectra von Popular Astra WordPress Themeswurde von einem Team von Entwicklern erstellt, die Ihnen helfen können, schöne Designs zu erstellen, ohne Code schreiben zu müssen.
PublishPress-Blöckeist eine weitere leistungsstarke Blockbibliothek mit zusätzlichen Blöcken zur Erweiterung des Gutenberg-Blockeditors. Es enthält schöne Layout-Optionen, Schieberegler, Schaltflächen, Symbole, Bildergalerie, Karten, Registerkarten, Empfehlungen, Akkordeons (Akkordeons) und mehr.
3. stapelbar - Gutenberg-Blöcke
Stapelbar - Gutenberg-Blöckeist eine Sammlung wunderschön gestalteter Gutenberg-Blöcke, die Sie auf Ihrer Website verwenden können. Sie enthält Blöcke für Container, Posts, Feature Grids, Akkordeons, Bildboxen, Icon-Listen, Call-to-Action-Sätze und mehr.
Hoffentlich hilft Ihnen dieses Gutenberg-Tutorial dabei, den WordPress-Block-Editor zu nutzen.
