Ab WordPress 5.0 steht den Benutzern dieses CMS-Systems ein neuer Editor zur Erstellung von Webinhalten zur Verfügung. Beim Erstellen einer Site verwendet diese das sogenannte Blöcke. Einzelne Blöcke können bearbeitet werden. Im folgenden Tutorial werden wir darüber sprechen, wie Sie den Gutenberg-Editor verwenden, um Website-Inhalte zu erstellen.
Was ist Gutenberg?
Gutenberg ist der neue Standardeditor für WordPress . Es funktioniert nach einem anderen Prinzip als der bisher verwendete TinyMCE-Editor. Es bietet ein ganz neues Webdesign-Erlebnis, indem Blöcke mithilfe von Blöcken erstellt werden. In einzelnen Blöcken kann mit Text wie in einem Texteditor gearbeitet werden.
Blöcke können auf der Seite nach den spezifischen Vorstellungen des Benutzers verschoben und gruppiert werden. Dank Gutenberg hat der Nutzer die Möglichkeit, das Aussehen und das Layout der Seite besser anzupassen.
Was ist ein Block?
Blöcke sind Inhalte auf einer Seite . Sie können einen Block für Text, Widgets, Bilder, Videos, Zitate und dergleichen erstellen. Es ist möglich, mit jedem Block weiterzuarbeiten. Der Vorteil beim Erstellen einer Website ist die Drag-and-Drop- Funktion, mit der Blöcke einfach verschoben werden können.
So erstellen Sie eine Seite im Gutenberg-Editor
Um eine neue Seite zu erstellen, gehen Sie in der Seitenverwaltung auf Seiten ›Neu hinzufügen. Die folgende Seite wird geöffnet:
Schreiben Sie einen Titel in den angezeigten Block. Sie finden auch die Möglichkeit, den Site-Service zu bearbeiten . Sie können den Slug jederzeit bearbeiten, indem Sie auf den Titel klicken. Klicken Sie einfach auf die Schaltfläche Bearbeiten neben der Seiten-URL.
Blöcke erstellen
Nachdem Sie den Titel eingegeben haben, können Sie dem voreingestellten Texteingabeblock weiteren Text hinzufügen oder Ihren eigenen Block einfügen. Klicken Sie dazu auf das Plus-Symbol:
. Hier können Sie die Art des Inhalts auswählen, den Sie hinzufügen möchten.
In meinem Beispiel habe ich mich dafür entschieden, einen Absatz hinzuzufügen. Im Absatzblock finden Sie Schriftoptionen, Ausrichtung und ein Symbol zum Einfügen eines Links. Am Ende der Blockbearbeitungssymbolleiste finden Sie eine Schaltfläche für weitere Bearbeitungsoptionen
. Sie können damit beispielsweise Blockeinstellungen ausblenden, duplizieren, als HTML bearbeiten, zu wiederverwendbaren Blöcken hinzufügen und einen Block entfernen.
Auf der rechten Seite des Bildschirms finden Sie weitere Optionen für den Text . Schriftarteinstellungen sind verfügbar. Sie können eine Schriftgröße aus mehreren voreingestellten Optionen auswählen oder eine eigene festlegen. Sie können auch eine Hintergrundfarbe oder Textfarbe auswählen oder Ihre eigenen erweiterten Anpassungen vornehmen.
Die Möglichkeiten zum Bearbeiten von Blöcken direkt über dem Block sowie im rechten Teil des Bildschirms unterscheiden sich je nach Blocktyp.
Blocktyp ändern
Sie können den Blocktyp jederzeit während der Erstellung der Seite ändern. Klicken Sie dazu auf die erste Schaltfläche über dem aktiven Block. Hier wird immer das Zeichen für den aktiven Blocktyp angezeigt. Nach dem Anklicken erscheint eine Liste mit Blöcken, aus der Sie auswählen können.
Blocktypen
Beim Erstellen von Seiten stehen verschiedene Arten von Blöcken zur Verfügung. Sie sind in einer übersichtlichen Liste angeordnet, die in mehrere Teile gegliedert ist:
Am häufigsten verwendet – Hier werden die am häufigsten verwendeten Blocktypen wie Absatz, Bild, Galerie und dergleichen angezeigt.
Direkte Elemente – Es gibt einen Block für Direktbilder.
Allgemeine Blöcke – Hier finden Sie Blöcke für Bilder, Videos, Dateien, Listen, Zitate und andere häufig verwendete Teile der Seite.
Formatierung – ermöglicht Ihnen das Hinzufügen von formatierten Inhalten wie Tabellen, Code, benutzerdefiniertem HTML, aber auch einem Block in einem klassischen WordPress-Texteditor.
Layoutelemente – Hier finden Sie Blöcke für Seitenumbrüche, Schaltflächen, Spalten oder einen Block mit vorgefertigtem Layout für Medien und Text.
Widgets – Dank der verfügbaren Optionen können Sie Shortcodes, Kategorien, eine Liste der letzten Kommentare und dergleichen hinzufügen.
Eingebettet – Ermöglicht das Einbetten externer Inhalte wie YouTube, Twitter, Instagram, Facebook und andere Inhalte.
So erstellen Sie ein grundlegendes Layout auf einer Seite
Beginnen wir mit einer einfachen Seite. Es reicht aus, wenn es einen Titel, einen Text, ein Bild, eine Aufzählungsliste und eine Bildergalerie enthält.
Text hinzufügen
Beginnen Sie nach Eingabe des Titels einfach mit dem Schreiben im voreingestellten Block. Gutenberg erstellt für jeden Absatz einen eigenen Block. Sie müssen es nicht jedes Mal zur Seite hinzufügen. Alles, was Sie tun müssen, ist die Eingabetaste zu drücken. Der neue Absatzblock wird von selbst erstellt.
Bild hinzufügen
Um ein Bild hinzuzufügen, wählen Sie den entsprechenden Block aus der Blockliste aus. Die Liste der Blöcke wird angezeigt, indem Sie auf das Plussymbol oben links auf dem Bildschirm klicken. Sie können ein Bild aus der Medienbibliothek auswählen oder auf die Seite hochladen.
Es erscheint im Seitenlayout, sobald es hochgeladen wurde. Stellen Sie im rechten Teil des Bildschirms die Bildgröße ein, geben Sie den Alternativtext ein oder fügen Sie einen Link ein.
Aufzählungsliste hinzufügen
Wählen Sie den entsprechenden Block aus der Liste aus. Beim Bearbeiten von Text haben Sie außerdem die Möglichkeit, eine nummerierte Liste auszuwählen, einen Link einzufügen usw.
Bildergalerie hinzufügen
Wählen Sie einen Block für die Galerie aus der Liste der Blöcke aus. Dann lade die Bilder hoch. Im Galerieblock können Sie die Ausrichtung anpassen, ein Bild einfügen oder entfernen. Im rechten Teil des Bildschirms finden Sie Funktionen zum Einstellen der Spaltenanzahl und zum Zuschneiden von Bildern in der Galerie.
So verschieben Sie Blöcke
Einzelne Blöcke können auf der Seite verschoben werden. Die erforderlichen Schaltflächen erscheinen, wenn Sie mit der Maus über den Block fahren, den Sie verschieben möchten. Es gibt zwei Aufwärts- und Abwärtspfeile zum Bewegen. Diese verschieben den ausgewählten Block immer um eine Position nach oben oder nach unten. Zwischen den Pfeilen findest du ein Icon für die Drag & Drop Funktion
. Wenn Sie die Maus darüber bewegen, erscheint eine Hand, mit der Sie einfach den Block halten und an die gewünschte Stelle verschieben können.
So verwenden Sie erstellte Blöcke wieder
Wenn Sie einen Block erstellt haben, den Sie später wieder verwenden möchten, klicken Sie auf das Symbol Weitere Optionen. Sie finden es im Funktionsmenü oben im Block. Wählen Sie hier Zu wiederverwendbaren Blöcken hinzufügen.
Auf diese Weise haben Sie jedes Mal, wenn Sie einen neuen Beitrag erstellen, Zugriff auf die erstellten Blöcke. Gespeicherte Blöcke erscheinen in der Liste der Blocktypen unter Wiederverwendbar . Sie können auch verwaltet werden. Sie können sie wieder in einen normalen Block umwandeln oder aus dem Menü entfernen.
Zusatzfunktionen
Es gibt mehrere weitere praktische Funktionen zum Erstellen von Seiten oder Artikeln. Schauen wir uns zunächst die Schaltflächen oben auf der Seite an.
Das erste der Icons habe ich bereits erwähnt. Wird verwendet, um einer Seite einen Block hinzuzufügen.
Die Rückwärts- und Vorwärtspfeile müssen nicht dargestellt werden – sie bringen Sie einen Schritt vorwärts oder rückwärts.
i – hier sehen Sie die Struktur des Inhalts.
Eine interessante Funktion bietet die letzte Tastenblock -Navigation . Neben der Anzeige der Reihenfolge der einzelnen Blöcke dient es auch dazu, schnell zum ausgewählten Block zu springen.
Weitere Funktionen finden Sie auf der rechten Seite der Seite. Einige kennen Sie vielleicht schon aus früheren Arbeiten mit WordPress. Andere sind neu.
Dokument – Ermöglicht Ihnen den Zugriff auf Dokumenteinstellungen wie das Bearbeiten der Seiten-URL, das Hinzufügen eines Illustrationsbilds und das Aktivieren von Kommentaren. Die Zuweisung von Kategorien und Tags ist auch auf der Posting-Seite verfügbar. Sie können auch Text für die Zusammenfassung hinzufügen.
Block – Einige Funktionen dieser Schaltfläche habe ich bereits im Abschnitt Erstellen von Blöcken erwähnt. Sie unterscheiden sich je nach gewähltem Blocktyp.
Vorschau – Die Vorschau-Schaltfläche zeigt eine Live-Vorschau der Seite oder des Beitrags an.
Veröffentlichen – Verwenden Sie diese Schaltfläche, um die Seite zu veröffentlichen. Wenn Sie eine vorhandene Seite bearbeiten, wird anstelle der Schaltfläche Veröffentlichen eine Schaltfläche Aktualisieren angezeigt.
Permalink – Bearbeiten Sie hier den Textteil der URL.
Seiteneigenschaften – Wird verwendet, um Seitenvorlagen šablóny und eine übergeordnete Seite zuzuweisen.
Weitere Tools und Optionen anzeigen – die letzte Schaltfläche in der oberen rechten Ecke der Seite ist Weitere Tools und Optionen anzeigen . Hier sind einige Funktionen wie der Spotlight-Modus, damit Sie sich beim Erstellen einer Seite auf den Inhalt eines bestimmten Blocks konzentrieren können.
Sie finden auch den Wechsel zwischen dem visuellen Editor und dem Code-Editor sowie den Vollbildmodus. Darüber hinaus finden Sie Tastaturkürzel, die Möglichkeit, wiederverwendbare Blöcke zu verwalten, und andere Optionen zur Seiteneinrichtung.
Fortgeschrittene Tipps
Ich werde auch einige erweiterte Editorfunktionen erwähnen:
Schnelle Blockerstellung
Damit Sie nicht immer nach einem bestimmten Block in der Liste suchen müssen, können Sie sich die Arbeit erleichtern. Sie müssen lediglich einen Schrägstrich und die ersten Buchstaben des Blocknamens in den voreingestellten Block eingeben :
/názov bloku
Sobald Sie mit der Eingabe beginnen, sehen Sie eine Liste mit passenden Optionen.
Bearbeiten des Quellcodes
Sie können den Quellcode einer Seite bei jedem Schritt ihrer Erstellung bearbeiten. Sie können dies tun, indem Sie auf das Symbol klicken . Suchen Sie hier nach der Code-Editor-Option.
Vollbildmodus aktivieren
Im Gutenberg-Editor können Sie ohne unnötige Ablenkung arbeiten, indem Sie das Seitenmenü anbieten. Scrollen Sie nach oben rechts auf der Seite und klicken Sie auf . Hier finden Sie die Funktion Vollbildmodus. Sie können auch den Spotlight-Modus auswählen, um sich noch besser auf einen bestimmten Block zu konzentrieren.
Verwenden von Tastenkombinationen
Mit Gutenberg können Sie zusätzlich zu den üblichen Tastenkombinationen viele spezielle Tastenkombinationen verwenden. Beispielsweise:
- Sidebar-Einstellungen ein- oder ausblenden Strg + Umschalt +
- Machen Sie Ihre letzten Änderungen rückgängig Strg + Z
- Rückgängig gemachte Änderungen erneut vornehmen Strg + Umschalt + Z
Verwenden Sie Strg + Umschalt + H, um eine Liste mit Verknüpfungen zu öffnen.
Optionen mit Plugins erweitern
Um Ihre Gestaltungsmöglichkeiten zu erweitern, installieren Sie eines der Gutenberg-Plugins. Das Stackable-Plugin bietet beispielsweise eine Sammlung vorgefertigter Blöcke. Sie erstellen interessante Hauptseiten. Otter Blocks ist auch ein großartiges Plugin. Erstellen Sie Blöcke wie Preise, Google Maps und mehr.
Hier sind einige Antworten auf häufig gestellte Fragen
Was ist, wenn ich Gutenberg nicht verwenden möchte?
Einige Benutzer fragen, ob WordPress es Ihnen erlaubt, den vorherigen TinyMCE-Editor zu verwenden. Ja, es ist möglich. Gutenberg kann in diesem Fall deaktiviert werden. Alles, was Sie tun müssen, ist das WordPress- Plugin Classic Editor zu installieren.
Wird sich der alte Inhalt ändern?
Alle Inhalte, die Sie bereits auf der Website haben, bleiben unverändert. Gutenberg platziert eine bestimmte Seite oder einen bestimmten Artikel in einem Block. Gutenberg steht dafür zur Verfügung sogenannt klassischer Block. Dadurch können Sie mit dem Originalinhalt wie im klassischen TinyMCE-Editor arbeiten.
Sie können den Originalinhalt einfach in einem klassischen Block bearbeiten oder in Blöcke umwandeln . Die gewünschte Funktion finden Sie unter dem Symbol Weitere Optionen . Sie können mit den Inhalten auch so arbeiten, als ob Sie sie in einem Blockeditor erstellt hätten.
