So verwenden Sie den Gutenberg-Editor (Die vollständige Anleitung)

Das Gutenberg-Editor hat den alten Klassiker ersetzt WordPress Editor und ist auf dem Standard- WordPress Editor.

Wenn Sie Artikel auf Websites wie Medium.comMöglicherweise haben Sie bereits eine ähnliche Erfahrung wie mit Gutenberg gemacht. Der Gutenberg-Editor ist jedoch deutlich umfangreicher und verfügt über verschiedene Blöcke.

Gutenberg ist aktuell nur ein Editor, mit dem Sie Ihre Blogbeiträge erstellen können. Er soll jedoch zu einer Komplettlösung für die Erstellung Ihrer gesamten Website ausgebaut werden, was den Einstieg für Neulinge deutlich erleichtert. WordPress Benutzer.

Da der neue Editor hauptsächlich auf seinen Blöcken basiert, ist der unabhängige WordPress Theme- und Plugin-Entwickler können ganz einfach eigene Blöcke erstellen, um das Gesamterlebnis zu erweitern. 

In diesem Artikel werden wir uns den neuen Gutenberg-Editor genauer ansehen und dabei lernen, ihn optimal zu nutzen.

Alles, was Sie über den Gutenberg-Editor wissen müssen

---

Was ist der Gutenberg-Editor?

Gutenberg ist der Name, der dem neuen WordPress Der Editor, mit dem Sie bald Ihre Blogbeiträge erstellen werden.

Der Gutenberg-Editor ist benannt nach Johannes Gutenberg, der vor 500 Jahren die Druckerpresse erfand. 

Die klassische WordPress Der Editor, den Sie aktuell verwenden, ist einfach gehalten und besteht aus einem Titel- und einem Beschreibungsfeld sowie den dazugehörigen Werkzeugen, mit denen Sie Ihren Beiträgen verschiedene Elemente hinzufügen können. 

Mit der Einführung des Gutenberg-Editors wird sich dieses System grundlegend ändern. 

Nun müssen Sie verschiedene Blöcke einfügen, um Ihre Blogbeiträge zu erstellen. Sie haben bereits eine Reihe verschiedener Blöcke mit dem Gutenberg-Editor erstellt, die wir später im Beitrag sehen werden.

Der neue Herausgeber wird voraussichtlich Teil  WordPress Kern bis Ende 2018.

Wie bereits erwähnt, können Sie es verwenden, indem Sie das Plugin jetzt installieren. 

Über 600 Benutzer verwenden den Gutenberg-Editor bereits zum Testen oder auf aktiven Websites. 

Erste Schritte mit Gutenberg 

Da Gutenberg Teil davon sein wird WordPress Software. Es ist besser, frühzeitig damit anzufangen, damit man sich an den Editor gewöhnt, bevor er verpflichtend wird.

Wir haben den Gutenberg-Editor verwendet auf BeginDot in den letzten Tagen. Es hat sicherlich mehrere Vorteile gleichzeitig, aber es bedarf noch vieler Verbesserungen, was zu erwarten ist, da es sich derzeit noch in der Entwicklung befindet.

Um mit dem Editor zu beginnen, gehen Sie zu WordPress Dashboard >> Plugins >> Neu hinzufügen 

Dort sehen Sie die Gutenberg-Plugin-Option. Installieren und aktivieren Sie das Plugin einfach.

Bevor Sie mit dem Schreiben neuer Inhalte mit dem Gutenberg-Editor auf Ihrer Site beginnen, haben Sie die Möglichkeit, den Editor direkt auf Ihrem Dashboard zu testen.

Nach der Aktivierung des Plugins sehen Sie die Gutenberg-Option auf Ihrem WordPress Instrumententafel.

Look & Feel des Editors

So sieht der Gutenberg-Editor aus, wenn Sie mit der Erstellung Ihres Blogbeitrags beginnen.

Die Benutzeroberfläche ist übersichtlich und ablenkungsfrei. Sie können nun die benötigten Blöcke zu Ihrem Beitrag hinzufügen.

Wie Sie im obigen Bild sehen, haben Sie nun die Möglichkeit, den Titel Ihres Beitrags hinzuzufügen, und anschließend steht Ihnen eine leere Leinwand zur Verfügung, auf der Sie beliebige Blöcke einfügen können.

Nachdem Sie den Titel Ihres Beitrags hinzugefügt haben, gehen Sie zum Inhaltsbereich, um einen Block hinzuzufügen. Sie sehen die + Plus Zeichen, mit dem Sie Ihrer Seite einen Block hinzufügen können.

Sie haben auch die Möglichkeit, den Block in der oberen linken Ecke der Seite hinzuzufügen. 

Rechte Leiste

Die Einzelheiten im thDie rechte Leiste des Editors ändert sich je nach dem aktuell bearbeiteten Block. Wenn Sie ein Bild bearbeiten, werden Ihnen in der rechten Leiste die Optionen für das Bild angezeigt, wie z. B. Alternativtext, Bildgröße usw.

Wenn Sie mit der Bearbeitung eines Textblocks beginnen, ändert sich dieser entsprechend. 

Visueller Editor und Code-Editor

Wie im klassischen Editor gab es auch im Gutenberg-Editor die Möglichkeit, zwischen visueller Ansicht und Code-Editor zu wechseln. Zusätzlich bietet der Gutenberg-Editor die Option, den Code-Editor bei Bedarf zu nutzen. 

Ausgewähltes Bild für The Post

Wie im alten Editor haben Sie auch hier die Möglichkeit, die Kategorie Ihres Blogbeitrags auszuwählen, Schlagwörter hinzuzufügen und ein Beitragsbild in der rechten Leiste unter dem Reiter „Dokumente“ einzufügen. 

Option „Wiederholen“ und „Rückgängig“

Hier ist eine praktische Möglichkeit, in Ihrem Artikel vor- und zurückzublättern. Der Gutenberg-Editor bietet Ihnen oben links in der Bearbeitungsoberfläche eine einfache Funktion zum Wiederherstellen und Rückgängigmachen. 

Mit diesen beiden Symbolen können Sie Ihre letzte Aktion rückgängig machen und wiederholen. 

Schnelle Statistiken

Dies ist eine sehr nützliche Funktion des Gutenberg-Editors. Während Sie Ihren Text verfassen, können Sie einfach klicken und die Wortanzahl auf der Seite, die Anzahl der verwendeten Blöcke, die Anzahl der Überschriften, Absätze usw. überprüfen. 

Die Gutenberg-Blöcke

Im Gutenberg-Editor dreht sich alles um die Blöcke. Das sind also die Balken, aus denen man das Haus baut.

Beim Erstellen Ihrer Blogbeiträge steht Ihnen nach dem Hinzufügen des Titels die gesamte Arbeitsfläche zur Verfügung, um verschiedene Blöcke hinzuzufügen.

Sie werden verschiedene Gruppen sehen, die für die Blöcke erstellt wurden, wie z. B. die am häufigsten verwendeten Blöcke, allgemeine Blöcke, Inline-Elemente, Formatierungen, Layout-Elemente, Widgets usw.

Schauen wir uns die einzelnen Gruppen einzeln an.

Die am häufigsten verwendeten Blöcke sind natürlich diejenigen, die beim Erstellen eines Blogbeitrags am häufigsten verwendet werden, wie zum Beispiel Überschrift, Bild, Absatz usw. 

Die gemeinsamen Blöcke enthalten auch einige ähnliche Blöcke.

Falls die standardmäßigen Gutenberg-Blöcke für Ihre Website nicht ausreichen, stehen Ihnen mehrere neue Gutenberg-Block-Plugins zur Verfügung.

Blöcke formatieren

Es gibt ein paar nützliche Blöcke unter dem Formatierung Gruppe. Wie zum Beispiel die Folgende

• Klassischer Editor: Wenn Sie die alte klassische Editor-Symbolleiste zum Bearbeiten benötigen, finden Sie sie hier
• Benutzerdefiniertes HTML: Die Option zum Hinzufügen von benutzerdefiniertem HTML
• Code hinzufügen: Fügen Sie Ihren Tutorial-Posts Code hinzu
• Fügen Sie eine Tabelle hinzu: Dies ist eine sehr nützliche Ergänzung zu WordPress Editor; jetzt benötigen Sie kein Plugin mehr, um Ihren Beiträgen eine Tabelle hinzuzufügen.

Einbettungen

Mit dem Aufkommen von Multimedia-Inhalten und viralen Inhalten hat die Bedeutung der Einbettungsfunktion zugenommen.

Content-Produzenten nutzen heutzutage sehr regelmäßig Inhalte von Twitter, Instagram und YouTube.

Der Gutenberg-Editor macht es Benutzern kinderleicht, Inhalte von einer Reihe beliebter Plattformen problemlos einzubetten.

Layoutbezogene Blöcke

Die Layoutblöcke sind für die Benutzer sehr nützlich. Sie benötigen kein Shortcode-Plugin mehr, um Ihrem Beitrag Schaltflächen hinzuzufügen, da Sie die integrierte Option zum Hinzufügen einer Schaltfläche haben.

Es stehen zahlreiche nützliche Layout-Designoptionen zur Auswahl. 

Erstellen eines Beitrags mit dem Gutenberg-Editor

Nachdem Sie nun mit der Gutenberg-Oberfläche vertraut sind, erstellen wir mit dem Editor einen Blogbeitrag.

Wir werden versuchen, die am häufigsten verwendeten Blöcke durchzugehen und mit ihnen Inhalte zu erstellen.

Um einen Blogbeitrag zu erstellen, gehen Sie wie beim alten Editor auf die Option „Neuer Beitrag“.

Schritt 1. Titel und Absätze

Gib deinem Beitrag einen Titel und beginne mit dem Schreiben. Um den Inhalt hinzuzufügen, musst du nichts weiter tun; klicke einfach auf die Arbeitsfläche und leg los.

Schritt 2. Hinzufügen eines Bildes

Neben dem Text Ihres Blogbeitrags ist das Bild oder die Bilder, die Ihren Inhalt untermauern, das zweitwichtigste Element Ihres Blogbeitrags.

Sie können auf die Schaltfläche + plus Melden Sie sich an und fügen Sie einen Bildblock hinzu, um das Bild Ihrer Wahl hinzuzufügen. 

Im Gutenberg-Editor stehen Ihnen verschiedene Optionen für Bilder zur Verfügung, die Sie je nach Bedarf nutzen können.

• Einfacher Bildblock
• Bild- und Textblock (zu finden unter Layoutblöcken)
• Titelbild

Da wir gerade über die normalen Blogbeitragsbilder sprechen, verwenden wir doch eines für diesen Beitrag. 

Schritt 3. Fügen Sie ein Video hinzu

Wie bereits im Abschnitt „Blöcke“ erläutert, verfügt der Gutenberg-Editor über eine umfassende Liste mit Einbettungsoptionen.

Sie können also nicht nur YouTube-Videos, sondern auch Inhalte von verschiedenen anderen Diensten einbetten, um Ihren Blogbeitrag optisch aufzuwerten.

So fügen Sie Ihrem Blogbeitrag ein Video hinzu

Klicken Sie auf das Plus-Symbol und gehen Sie zum Einbetten-Bereich. Wählen Sie dort YouTube aus, fügen Sie die Video-URL hinzu – fertig.

Schritt 4. Hinzufügen einer Call-to-Action-Schaltfläche

Sobald Sie den Gutenberg-Editor verwenden, benötigen Sie kein Button-Shortcode-Plugin mehr.

Der Editor kommt mit seine Eigener Button-Block. Sie können den Button hinzufügen und ihn nach Ihren Wünschen gestalten.

Schritt 5. Hinzufügen einer Hintergrundfarbe zum Text

Gutenberg bietet Ihnen die Möglichkeit, eine Hintergrund Fügen Sie Ihrem Text eine Farbe hinzu, falls Sie Text im Beitrag hervorheben möchten. 

Der Vorgang ist ganz einfach: Sie müssen nur den Text auswählen, den Sie hervorheben möchten, und dann erscheinen die Farboptionen in der rechten Leiste. Wählen Sie die Hintergrundfarbe und die Textfarbe aus, und fertig. 

So können Sie den Text in Ihrem Blogbeitrag hervorheben, um ihn interaktiver und ansprechender zu gestalten. Außerdem können Sie so die Aufmerksamkeit Ihrer Leser auf die wichtigen Abschnitte Ihres Blogbeitrags lenken.

Kompatibilitätsprobleme

Die Einführung des Gutenberg-Editors ist eine große Veränderung, und es wird einige Zeit dauern, bis sich alles andere darum herum eingespielt hat. 

Viele WordPress Themes und Plugins sind noch nicht mit dem Editor kompatibel. 

Wir haben beispielsweise ein Plugin verwendet, um nofollow der ausgehende Link, und er scheint mit dem neuen Editor nicht zu funktionieren.

Ebenso viele Shortcode Plugins wird nicht funktionieren, da Gutenberg eine eigene Shortcode-Option mitbringt.

Die Kompatibilitätsprobleme sind jedoch nur vorübergehend, da die Themes und Plugins entsprechend den Anforderungen des Gutenberg-Editors aktualisiert werden; dann sollte alles in Ordnung sein.

Wir haben einen Artikel über die am besten Gutenberg bereit WordPress ThemenSie können jedes beliebige Design aus dieser Liste auswählen. 

Gutenberg ist in vielerlei Hinsicht großartig, aber es bedarf auch in vielen Bereichen der Verbesserung.

Da wir Gutenberg bereits auf unserer Website einsetzen, haben wir bereits Erfahrung mit dem Editor.

Hier ist eine Liste der Dinge, die uns am Editor gefallen und der Dinge, die uns Probleme bereiten.

Vorteile von Gutenberg

• Der Editor ist recht einfach und leicht zu verwenden.
• Es ist umfassend in Bezug auf die verfügbaren Optionen
• Es sind keine technischen Kenntnisse erforderlich, um eine Schaltfläche hinzuzufügen oder Inhalte hervorzuheben
• Ein neuer Benutzer wird in der Lage sein, einen toll aussehenden Artikel mit einer ansprechenden Präsentation zu erstellen.
• Moderne Layoutoptionen, nicht mehr nur einfacher einspaltiger Inhalt.
• Die Benutzeroberfläche ist übersichtlich und ablenkungsfrei.
• Funktioniert einwandfrei auf Mobilgeräten 

Nachteile von Gutenberg

• Es besteht die Möglichkeit, den Link in einem neu Fenster, aber keine Option zum Hinzufügen eines nofollow Etikett
• Obwohl es an vielen Stellen Diskussionen gibt, gibt es noch keine dedizierte Unterstützung
• Die Kompatibilität von Plugins und Themes kann ein großes Problem sein
• Viele wichtige Plugins funktionieren derzeit nicht richtig

Schlusswort

Ich hoffe, dieser Artikel hilft Ihnen, den Gutenberg-Editor besser zu verstehen. Da wir uns – genau wie Sie – mit dem Editor auseinandersetzen, lassen Sie uns darüber diskutieren, um diesen Leitfaden noch umfassender zu gestalten.

Vergessen Sie also nicht, im Kommentarfeld unten einen Kommentar oder ein Anliegen hinzuzufügen.