Schritt für Schritt Anleitung zum Gutenberg Builder für WordPress

Schritt für Schritt Anleitung zum Gutenberg Builder für WordPress

Ich denke, Sie werden mir zustimmen, wenn ich sage: Dieses ganze Gutenberg-Geschäft ist verwirrend.


Erstens, ist der neue Blockeditor schwer zu bedienen oder was? Ich meine, Sie wissen nicht, wohin all Ihre Lieblingswerkzeuge gegangen sind. Jetzt haben Sie wahrscheinlich länger gebraucht, um einen Beitrag zu erstellen, richtig?

Vielleicht hat Ihnen das Hinzufügen eines Links (Partner oder auf andere Weise) eine verdammte Kurve geworfen, und Sie fühlten sich enttäuscht. Möglicherweise hatten Sie Probleme beim Hinzufügen eines Bildes neben Ihrem Text.

Vielleicht haben Sie versucht, mehrere Spalten hinzuzufügen, und die Dinge haben nicht wie erwartet funktioniert. Wenn dies nicht der Fall ist, können Sie Ihre PDF-Dateien möglicherweise nicht einfach hinzufügen, oder Sie sehen die gefürchtete Meldung “Update fehlgeschlagen”.

Mach dir keine Sorgen mehr. Ich war vor nicht allzu langer Zeit genau in Ihrer Position, aber jetzt finde ich Gutenberg aufregend. Es gibt eine Lernkurve, ja, aber am Ende des heutigen Beitrags werden Sie Gutenberg anders sehen.

Was ist der Gutenberg-Editor??

WordPress Gutenberg Editor

Sie sehen Gutenberg, den Standard-WordPress-Blockeditor

Wenn Sie WordPress 5.0 und höher verwenden, müssen Sie auf den neuen und glänzenden WordPress-Editor gestoßen sein, der als Gutenberg bekannt ist.

Und genau wie bei vielen anderen Benutzern möchten Sie den revolutionären Editor verwenden, aber Sie zögern, weil Gutenberg ist kompliziert.

Oder als Sie Gutenberg kennengelernt haben, haben verschiedene Dinge nicht funktioniert. Immerhin haben und machen Entwickler Themes und Plugins mit dem Blockeditor kompatibel.

Sie sind also schnell zum zurückgekehrt Klassischer Editor, was übrigens bei uns in Ordnung ist. Denken Sie daran, dass WordPress den Classic Editor nach 2022 nicht mehr unterstützt. Außerdem verpassen Sie alle zusätzlichen Extras, die Gutenberg anbietet.

In Bezug auf die Funktionalität machen der Classic Editor und Gutenberg dasselbe. Sie wissen, beide Tools helfen Ihnen beim Erstellen von Inhalten ohne Codierung.

Wir sind jedoch so an den alten WYSIWYG-Editor gewöhnt, dass wir die Anpassung an die neue Gutenberg-Benutzeroberfläche etwas fremd finden, wenn nicht sogar völlig verwirrend. Zumindest denke ich das.

Aber was genau ist Gutenberg??

Gutenberg ist der neue Standard-WordPress-Editor. Es ist anders als der herkömmliche Bild- / Texteditor. Gutenberg verwendet Inhaltsblöcke ähnlich wie viele moderne Seitenersteller.

Es wird mit intuitiveren Funktionen als der klassische Editor geliefert, sodass Sie Rich-Media-Inhalte im laufenden Betrieb erstellen können. Jetzt können Sie schnell außergewöhnliche Layouts erstellen, unabhängig davon, ob Sie mit WordPress-Posts oder -Seiten arbeiten.

Und mit ein paar Add-Ons kann Gutenberg mit etablierten WordPress-Seitenerstellern wie Brizy, Elementor und Divi konkurrieren.

Der einzige Nachteil ist, dass Seitenersteller häufig mehr Funktionen bieten, da sie hauptsächlich Seitenersteller sind! Gleichzeitig ist Gutenberg noch recht jung, und Sie können nur erwarten, dass der Blockeditor sprunghaft wächst.

Im heutigen Beitrag werden wir eine aufregende Zeit haben, einen WordPress-Beitrag mit dem Gutenberg-Editor zu erstellen. Ich möchte jedes kleine Detail und jede Funktion abdecken, damit Sie mit Gutenberg Inhalte wie die Profis erstellen können.

Sind Sie bereit? Wenn ja, erstellen wir diesen WordPress-Beitrag.

So erstellen Sie einen WordPress-Beitrag mit Gutenberg

Wenn Sie eine WordPress-Website betreiben, erstellen Sie wahrscheinlich mehr Beiträge als Seiten. Im folgenden Abschnitt erstellen wir einen WordPress-Beitrag in Gutenberg von Grund auf neu. Ich hoffe, Sie werden genauso viel Spaß haben wie ich beim Testen von Gutenberg.

Navigieren Sie zu Beiträge> Neu hinzufügen wie wir im Screenshot unten hervorheben.

einen neuen Beitrag in gutenberg erstellen

Dies führt Sie direkt zum unten gezeigten Gutenberg-Editor.

WordPress Gutenberg Editor

Ziemlich ordentlich, oder? Lassen Sie uns jetzt die Ärmel hochkrempeln und zur Sache kommen.

Hinzufügen eines Titels

Hinzufügen eines neuen Titels in Gutenberg

Sie können keinen Beitrag ohne festen Titel schreiben. Das Gute ist, dass Gutenberg es unglaublich einfach macht, einen Titel hinzuzufügen.

Der erste Block, den Sie sehen, ist der Titel oben im Dokument, wie im obigen Bild dargestellt. Geben Sie in den Block ein, um einen Titel für Ihren Beitrag zu erstellen. Einfach wie A, B, C..

Müssen Sie den Permalink bearbeiten? Das können Sie ganz einfach in der Titel Block durch Klicken auf die Bearbeiten Taste wie unten gezeigt.

Beitrag permalink in gutenberg bearbeiten

Nachdem Sie Ihren Titel hinzugefügt haben, drücken Sie die EINGEBEN Taste, um eine neue Zeile zu beginnen. Oh ja, Gutenberg behält die native Navigation bei, die Sie im klassischen WordPress-Editor geliebt haben.

Hinzufügen eines neuen Absatzes

neuer Absatzblock in gutenberg

Schlagen die EINGEBEN Schlüssel erstellt eine neue Absatz Block, wie oben gezeigt. Bevor Sie einen Text eingeben, bietet Ihnen der Block einige Optionen. Weitere Informationen finden Sie im nummerierten Bild unten.

neue Absatzblockoptionen gutenberg

Anmerkungen. Du kannst:

  1. Konvertieren Sie den neuen Absatzblock in einen anderen Block, z. B. Bild, Überschrift, Cover, Galerie, WooCommerce, Formular usw..
  2. Verwenden Sie die Verknüpfung, um den Absatzblock in einen Bildblock zu ändern
  3. Ändern Sie den Absatzblock in einen Überschriftenblock, d. H. H2, H3 und H4
  4. Verwandeln Sie den Absatzblock in einen Titelbildblock

Zur Veranschaulichung werde ich den ersten Absatz für die Nacheinführung reservieren. Sobald Sie Text hinzugefügt haben, wird eine Formatierungssymbolleiste angezeigt (siehe unten).

gutenberg Absatzformatierung Symbolleiste

Dank der Formatierungssymbolleiste können Sie:

  • Verdecken Sie den Absatz in einen Vers, ein Zitat, eine Überschrift, eine Liste, einen Code und einen vorformatierten Text
  • Fett gedruckt, Kursiv schreiben, durchgestrichen, und unterstreichen Inhalt
  • Richten Sie den Text links, rechts, zentrieren und ausrichten aus
  • Fügen Sie einen Link hinzu, der auch in einer neuen Registerkarte geöffnet werden kann
  • Fügen Sie ein Inline-Bild ein (ja, es existiert!)
  • Blockeinstellungen ausblenden
  • Dupliziere den Block
  • Fügen Sie einen Block vor oder nach dem aktuellen Block ein (in unserem Fall ist dies der erste Absatz, also fügen Sie vor, erst nachher nichts hinzu.) Sie können einen Titelbildblock vor dem ersten Absatz hinzufügen, wenn Sie dies wünschen, weil es so aussieht gut
  • Bearbeiten Sie den Block als HTML
  • Fügen Sie den aktuellen Block wiederverwendbaren Blöcken hinzu, damit Sie ihn in anderen Posts verwenden können
  • Entfernen Sie den Block vollständig

Sie können den Absatzblock mit den in der Option verfügbaren Optionen weiter anpassen Block Registerkarte im Seitenleistenmenü wie unten gezeigt.

gutenberg Seitenleistenoptionen für Absatzblock

Einige Anmerkungen zum obigen Bild:

  1. Wählen Sie das Block Klicken Sie hier, um alle Blockoptionen und -einstellungen anzuzeigen
  2. Wählen Sie die Schriftgröße und aktivieren Sie hier Drop Cap
  3. Fügen Sie Ihrem Absatz Hintergrundfarbe hinzu. Ich habe es zur Veranschaulichung auf Blau gesetzt. Sie können auch die Textfarbe anpassen. In beiden Fällen können Sie unbegrenzt benutzerdefinierte Farben hinzufügen
  4. Sie können hier eine benutzerdefinierte CSS-Klasse hinzufügen, dh Sie können Ihrem Block zusätzliche CSS-Stile hinzufügen
  5. Der blaue Hintergrund und die Drop Cap wurden bereits im Gutenberg-Editor angewendet

Die Registerkarte “Dokument” in der Seitenleiste

Es gibt eine weitere Registerkarte im Seitenleistenmenü. das Dokumentieren Registerkarte wie unten gezeigt.

Registerkarte

Hier die Hinweise zum obigen Bild:

  1. Klicken Sie hier, um zum zu wechseln Dokumentieren Tab
  2. Hier können Sie einen Beitrag planen und die Sichtbarkeit auf entweder einstellen Privat oder Öffentlichkeit, setze einen Beitrag auf Ausstehende Bewertung Status, wählen Sie das Post-Format und erstellen Sie einen Sticky-Post
  3. In diesem Abschnitt können Sie Ihren Permalink bearbeiten
  4. Hier können Sie neue Kategorien auswählen oder erstellen
  5. Fügen Sie Ihrem Beitrag Tags hinzu
  6. Stellen Sie das vorgestellte Bild ein
  7. Erstellen Sie einen manuellen Auszug
  8. Erlaube Kommentare, Pingbacks und Trackbacks

Wie Sie sehen können, haben Sie viele Möglichkeiten, einen Absatzblock (und den gesamten Beitrag) nach Ihren Wünschen zu gestalten. Übrigens, verschiedene Blöcke haben unterschiedliche Einstellungen, wie wir gleich erfahren werden.

Drücken Sie nach dem ersten Absatz die Taste EINGEBEN erneut drücken, um eine neue Zeile (oder einen neuen Absatzblock) zu erstellen. Fügen wir nun ein Bild unter dem ersten Absatz hinzu.

Hinzufügen von Bildern in Gutenberg

ein neues Bild in gutenberg hinzufügen

Man sagt, ein Bild sagt mehr als tausend Worte, und ein Blog-Beitrag ohne Bilder ist eintönig. Um mit Gutenberg ein Bild in Ihren WordPress-Beitrag einzufügen, haben Sie mehrere Möglichkeiten.

Wenn Sie die EINGEBEN Vor einigen Augenblicken haben Sie einen neuen Absatzblock ausgelöst. Da Gutenberg intuitiv ist, können Sie ein Bild hinzufügen, indem Sie auf die Plus- (+), Bild- oder Deckelsymbole klicken, wie im Bild unten hervorgehoben.

Hinzufügen eines neuen Bildes im Gutenberg-Editor

Ein paar Anmerkungen:

  1. Sie können ein Bild über die Pluszeichen (+) hinzufügen
  2. Hier können Sie ganz einfach ein Bild hinzufügen
  3. Mit dieser Option können Sie eine hinzufügen Startseite Bild (Diese sind normalerweise größer als andere Fotos. Außerdem können Sie Text auf Titelbildern hinzufügen, übrigens)

Klicken Sie auf eines der Pluszeichen (+). Klicken Sie anschließend auf Bild Registerkarte, wie unten gezeigt.

Bilder in gutenberg hinzufügen

Klicken Sie auf die Bild Registerkarte lädt die Bild Block im Screenshot unten gezeigt.

gutenberg bildblock

Das Bild Mit block können Sie ein Bild hochladen oder eines von einer URL oder der Medienbibliothek hinzufügen. Dabei können Sie Alternativtext (wichtig für SEO), Beschriftung und Beschreibung über die Medienbildschirmeinstellungen oder über hinzufügen Block Seitenleiste wie in den folgenden Bildern gezeigt.

Die üblichen Medieneinstellungen…

WordPress-Medieneinstellungen

…und der Bild Blockeinstellungen.

gutenberg image block einstellungen

Lernst du heute hier etwas? Hoffentlich. Lass uns weitermachen.

Nach dem Hinzufügen Ihres Bildes fügt Gutenberg einen neuen Absatzblock direkt darunter hinzu. Sie können hinzufügen, was Sie wollen, aber zu Illustrationszwecken habe ich Text und dann eine Schaltfläche darunter hinzugefügt.

Hinzufügen von herunterladbaren Dateien, z. PDF, Bilder, Videos usw.

Gutenberg macht es unglaublich einfach, herunterladbare Dateien zu Ihrem WordPress-Beitrag oder Ihrer WordPress-Seite hinzuzufügen.

In einem neuen Absatz Block, klicken Sie auf das Pluszeichen (+) und navigieren Sie zu Gemeinsame Blöcke und traf die Datei Registerkarte, wie wir unten hervorheben.

Hinzufügen von herunterladbaren Dateien in gutenberg

Dadurch wird der folgende Block gestartet:

gutenberg Dateiblock

Von dem Datei Block können Sie eine neue Datei hochladen oder eine aus Ihrer Medienbibliothek hinzufügen. Nach dem Hinzufügen Ihrer Datei fügt Gutenberg eine süße hinzu Herunterladen Schaltfläche automatisch wie im Bild unten zu sehen.

Datei in gutenberg hinzufügen

Sie können mit den Optionen herumspielen. Zum Beispiel können Sie die “bearbeiten / löschenKostenlose Gutenberg PDF ChecklisteTitel sowie die Herunterladen Taste. Sie können dem Block eine CSS-Klasse hinzufügen und sie nach Ihren Wünschen formatieren.

Ein Zitat in Gutenberg hinzufügen

Fügen wir als Nächstes ein Zitat hinzu, da sie charmant und eingängig sind und Ihnen helfen, den Punkt nach Hause zu bringen. Klicken Sie in einer neuen Zeile auf das Pluszeichen (+) und navigieren Sie zu Gemeinsame Blöcke und traf die Zitat Registerkarte wie unten gezeigt.

Zitate in gutenberg hinzufügen

Dadurch wird die Zitat Blockieren Sie Ihren Beitrag, wie wir im folgenden Screenshot hervorheben.

gutenberg Zitat Block Einstellungen

Beachten Sie die Einstellungen für den Anführungszeichenblock in der rechten Seitenleiste oben?

Geben Sie in den Block ein, um Ihr Angebot hinzuzufügen. Hier ist mein Ergebnis.

gutenberg Zitat

Sieht unglaublich aus, richtig?

Medieneinbettungen in Gutenberg hinzufügen

Gutenberg enthält mehrere Blöcke zum Einbetten von Videos und anderen Medien von über 30 Websites wie YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare usw..

Um Inhalte einzubetten, klicken Sie auf das Pluszeichen (+) und navigieren Sie zu Einbettungen, und wählen Sie die Website. Zum Beispiel wollte ich YouTube, wie unten gezeigt.

gutenberg youtube einbetten

Kopieren Sie als Nächstes die YouTube-Video-URL und klicken Sie auf Einbetten Schaltfläche wie im Bild unten gezeigt.

gutenberg youtube einbettungsblock

Sobald Sie die Einbetten Schaltfläche, Gutenberg verdeckt den Link automatisch in ein Video, wie wir unten hervorheben.

eingebettetes youtube video in gutenberg

Reibungsloses Segeln. Fügen wir nun eine eigenständige Schaltfläche hinzu, mit der Sie einen Aufruf zum Handeln (Call to Action, CTA) erstellen können..

So fügen Sie eine Schaltfläche in Gutenberg hinzu

Es sollte Ihnen an dieser Stelle nicht schwer fallen, Blöcke hinzuzufügen. Klicken Sie einfach auf das Pluszeichen (+) und wählen Sie Ihren Block aus. Einfacher geht es nicht.

Wie fügen wir eine Schaltfläche hinzu??

Klicken Sie in einer neuen Zeile (oder einem neuen Block) auf das Pluszeichen (+) und navigieren Sie zu Layoutelemente und klicken Sie auf Taste Registerkarte wie unten gezeigt.

Schaltflächen im gutenberg editor hinzufügen

Dies führt Sie zum Taste blockieren, wie wir unten detailliert beschreiben.

Schaltflächen im gutenberg editor hinzufügen

Wie Sie aus dem obigen Bild sehen können, können Sie den Schaltflächentext bearbeiten und einen Link hinzufügen. Darüber hinaus können Sie die Schaltfläche über das Seitenleistenmenü rechts auf dem Bildschirm anpassen.

Nach ein paar Klicks habe ich Folgendes.

gutenberg button beispiel

Übrigens, wenn Sie schwer lesbare Farbkombinationen auf Ihren Tasten verwenden, Gutenberg wird Sie umgehend informieren. Wie schön?

So fügen Sie Spalten in Gutenberg hinzu

Fügen wir mit einer schönen Schaltfläche einige Spalten hinzu. Ich werde zwei Spalten hinzufügen, also folge sorgfältig.

Hier ist was zu tun ist. Klicken Sie auf das Pluszeichen (+) und navigieren Sie zu Layoutelemente und klicken Sie auf Säulen Registerkarte wie im Bild unten zu sehen.

Spalten Registerkarte Gutenberg Editor

Gutenberg fügt standardmäßig zwei Spalten hinzu. Sehen Sie sich das Bild unten an und denken Sie daran, dass ich den Spalten bereits Inhalte hinzugefügt habe.

Gutenberg-Spalten im WordPress-Editor

Was mich bringt:

Gutenberg Säulen Frontend

Nicht schlecht für ein paar Sekunden Arbeit. Aber vielleicht möchten Sie keine Spalten erstellen. Vielleicht möchten Sie ein Bild neben einem Text anzeigen.

Gibt es dafür einen Block? Ja da ist!

So fügen Sie ein Bild neben Text in Gutenberg hinzu

Möchten Sie ein Bild neben einem Text hinzufügen? Wenn ja, werden Sie den folgenden Abschnitt lieben.

Klicken Sie wie gewohnt auf das Pluszeichen (+) und navigieren Sie zu Layoutelemente und klicken Sie auf Medien & Text Wie nachfolgend dargestellt.

Medien und Text Gutenberg Block

Sie sollten das sehen Medien & Text Block, wie unten gezeigt.

Medien- und Textblock in Gutenberg

Laden Sie als Nächstes Ihr Bild / Video / Medium hoch oder fügen Sie eines aus der Medienbibliothek hinzu. Fügen Sie danach Ihren Text neben dem Medium hinzu, wie in der Abbildung unten gezeigt.

Ich habe mit dem herumgespielt Medien & Text Block, und ich kam mit dem folgenden. Wohlgemerkt; Ich habe es auch geschafft, dort einen Knopf zu drücken ��

Medien- und Textblock in voller Aktion

Oh, das ist das Backend! Lassen Sie mich Ihnen das Frontend zeigen. Hier:

Medientextblock in Gutenberg

Sieht sehr professionell aus, oder? Sie können sich sicher vorstellen, wie viel Sie mit dem Gutenberg-Editor erreichen können.

Gutenberg-Blöcke von Drittanbietern

WordPress-Entwickler möchten Themen und Plugins mit dem Gutenberg-Editor kompatibel machen. Einige Beispiele sind WooCommerce, Jetpack und Yoast SEO.

Zum Beispiel können Sie Ihrem WordPress-Beitrag WooCommerce-Blöcke hinzufügen. Zunächst müssen Sie WooCommerce installieren und aktivieren.

Klicken Sie anschließend in einer neuen Zeile auf das Pluszeichen (+) und navigieren Sie zu WooCommerce und wählen Sie den gewünschten Block aus, wie unten gezeigt.

woocommerce gutenberg blockiert

Weißt du was das heißt? Dies bedeutet, dass Sie in wenigen Minuten Rich Media und großartige Beiträge und Seiten erstellen können.

Andere bemerkenswerte Blöcke

Wir haben bereits mehr als 2.000 Wörter und wenn wir so weitermachen, werden wir am Ende ein ganzes eBook schreiben. Mein Gebet ist, dass Sie Gutenberg jetzt ohne Schluckauf benutzen können.

Hier ist eine Liste der anderen verfügbaren Blöcke.

  • Widgets – Sie können Inhalte aus Ihren Widgets zu Blog-Posts hinzufügen
  • Shortcodes – Sie können weiterhin native WordPress-Shortcodes verwenden
  • Klassisch – Ein großartiger Block, der Ihren alten Inhalt enthält
  • Mehr – Der Block war früher als der bekannt Weiterlesen Etikett
  • Seitenumbruch, Trennzeichen, Abstandshalter
  • Benutzerdefiniertes HTML, Pullquote, Tabelle
  • Galerie und HTML5 Audio / Video
  • Und vieles mehr, abhängig von den verwendeten Themen und Plugins

Beiseite: Das Erstellen einer WordPress-Seite ähnelt dem Erstellen eines Beitrags, abgesehen von einigen Minuten Unterschieden, daher werden wir uns heute nicht damit befassen.

Schnelle Gutenberg Hacks & Tastaturkürzel

Gutenberg enthält einige Hacks und Tastaturkürzel, die es noch einfacher machen. Wenn Sie beispielsweise “/” in einen Absatzblock eingeben, wird eine Liste der Blöcke angezeigt.

Sie können sogar einen bestimmten Block auswählen, indem Sie den Titel des Blocks nach dem Backslash (/) eingeben. Wenn Sie beispielsweise “/ image” eingeben, wird der Bildblock unter anderen bildbezogenen Blöcken angezeigt. Siehe Bild unten für weitere Details.

Abkürzung für Gutenberg-Spiel

Tastatürkürzel: Um alle verfügbaren Verknüpfungen anzuzeigen, drücken Sie UMSCHALT + ALT + H. in Windows und OPT + STRG + H. in Mac.

Oben im Dokument können Sie die Dokumentstruktur anzeigen, indem Sie auf das Symbol (i) klicken (siehe Abbildung unten).

gutenberg dokumentenstruktur

Nett. Außergewöhnlich glatt.

Übrigens, der Fehler „Update fehlgeschlagen“ tritt normalerweise aufgrund einer wackeligen Internetverbindung auf ��


Gutenberg ist zwischen Ihnen und mir ein fantastischer Inhaltseditor. Vorausgesetzt, Sie sind bereit, die Seile zu lernen. Sie können viel aus dem WordPress-Editor der Zukunft ernten.

Gutenberg ist noch relativ jung, und Sie können erwarten, dass es in Bezug auf Benutzerfreundlichkeit und Funktionalität wächst. Es wird eine ernsthafte Kraft sein, mit der man in den kommenden Tagen rechnen muss. Seitenersteller sollten besser aufpassen, sonst geht ihnen das Geschäft aus ��

Wir hoffen, dass Ihnen unsere Schritt-für-Schritt-Anleitung zum Gutenberg-Editor dabei geholfen hat, die Dinge ins rechte Licht zu rücken. Wir glauben, dass Sie jetzt den Blockeditor verwenden können, um Inhalte wie ein Profi zu erstellen.

Bitte teilen Sie Ihre Bedenken, Gedanken und Fragen im Kommentarbereich unten mit.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map