Gutenberg WordPress Block-Editor: Einfache Nutzung erklärt

Der Gutenberg-Editor ist der Standard-Block-Editor von WordPress und ermöglicht es Nutzern, Inhalte durch ein modulares System von Blöcken zu erstellen und zu gestalten. Dieser Blogbeitrag bietet eine umfassende Anleitung zur effektiven Nutzung des Gutenberg-Editors, von den Grundlagen bis hin zu fortgeschrittenen Techniken.

Wichtige Erkenntnisse

• Intuitive Blockstruktur: Der Gutenberg-Editor verwendet ein blockbasiertes System, das es ermöglicht, verschiedene Inhaltselemente wie Text, Bilder und Videos flexibel zu kombinieren.
• Vielfältige Blocktypen: Es stehen zahlreiche Blöcke für unterschiedliche Inhalte zur Verfügung, darunter Absätze, Überschriften, Bilder, Galerien und mehr.
• Einfache Anpassung: Jeder Block kann individuell formatiert und angepasst werden, um den gewünschten Stil und das Layout zu erreichen.
• Wiederverwendbare Blöcke: Häufig genutzte Blöcke können als Muster gespeichert und in verschiedenen Beiträgen oder Seiten wiederverwendet werden.
• Tastaturkürzel: Der Editor unterstützt zahlreiche Tastenkombinationen, die den Arbeitsfluss beschleunigen und die Effizienz steigern.
• Erweiterbarkeit: Durch Plugins können zusätzliche Blöcke und Funktionen hinzugefügt werden, um den Editor an spezifische Bedürfnisse anzupassen.

Einführung in den Gutenberg-Editor: Was ist der WordPress Block-Editor?

Der Gutenberg-Editor, auch bekannt als WordPress Block-Editor, wurde mit WordPress 5.0 eingeführt und ersetzt den klassischen Editor. Er ermöglicht eine modulare und visuelle Gestaltung von Inhalten durch die Verwendung von Blöcken.

Hauptmerkmale des Gutenberg-Editors

• Blöcke als Inhaltselemente: Jeder Inhalt, wie Absätze, Bilder oder Videos, wird als eigener Block behandelt, was eine flexible Anordnung und Bearbeitung ermöglicht.

• Einfache Bedienung: Blöcke können per Drag-and-Drop verschoben und individuell formatiert werden, ohne dass Programmierkenntnisse erforderlich sind.

• Erweiterbarkeit: Durch Plugins können zusätzliche Blöcke hinzugefügt werden, um den Funktionsumfang zu erweitern.

Der Gutenberg-Editor revolutioniert die Inhaltserstellung in WordPress, indem er eine benutzerfreundliche und flexible Plattform für die Gestaltung von Beiträgen und Seiten bietet.

Entfessele das Potenzial deiner Website mit Artifex Web – den Experten für Webdesign, SEO und Onlineshops. Kontaktiere uns: office@artifex-web.at.

Erste Schritte: Wie öffne und verwende ich den Gutenberg-Editor?

Um den Gutenberg-Editor in WordPress zu nutzen, gehen Sie wie folgt vor:

1. Anmeldung im WordPress-Dashboard: Melden Sie sich mit Ihren Zugangsdaten im Backend Ihrer WordPress-Website an.

2. Erstellen eines neuen Beitrags oder einer neuen Seite: Navigieren Sie im Dashboard zu "Beiträge" oder "Seiten" und klicken Sie auf "Erstellen", um einen neuen Beitrag oder eine neue Seite zu erstellen.

3. Öffnen des Gutenberg-Editors: Nach dem Klick auf "Erstellen" öffnet sich automatisch der Gutenberg-Editor, der den vorherigen TinyMCE-Editor ersetzt hat.

Grundlegende Funktionen des Gutenberg-Editors

• Blöcke hinzufügen: Klicken Sie auf das Plus-Symbol (+), um verschiedene Inhaltselemente wie Absätze, Überschriften, Bilder oder Listen als Blöcke hinzuzufügen.

• Blöcke bearbeiten: Jeder Block verfügt über eigene Einstellungen, die im rechten Seitenbereich angepasst werden können.

• Blöcke verschieben: Mit den Pfeilsymbolen an der linken Seite eines Blocks können Sie diesen nach oben oder unten verschieben.

• Blöcke entfernen: Klicken Sie auf die drei Punkte oben rechts im Block und wählen Sie "Block entfernen", um einen Block zu löschen.

Der Gutenberg-Editor bietet eine flexible und benutzerfreundliche Möglichkeit, Inhalte in WordPress zu erstellen und zu bearbeiten.

Blöcke hinzufügen und verwalten: So gestalten Sie Ihre Inhalte effektiv

Der Gutenberg-Editor von WordPress ermöglicht es Ihnen, Inhalte durch die Verwendung von Blöcken flexibel und effizient zu gestalten. Jedes Element, sei es Text, Bild oder Video, wird als separater Block behandelt, was eine präzise Kontrolle über das Layout und Design Ihrer Beiträge und Seiten erlaubt.

Blöcke hinzufügen

Um einen neuen Block einzufügen, klicken Sie auf das Plus-Symbol (+) in der oberen linken Ecke des Editors oder innerhalb des Inhaltsbereichs. Es öffnet sich eine Auswahl der verfügbaren Blöcke, kategorisiert nach Typen wie Text, Medien, Design und mehr. Sie können den gewünschten Block auswählen oder den Namen des Blocks direkt eingeben, um ihn schneller zu finden.

Blöcke verwalten

Jeder Block verfügt über eine eigene Werkzeugleiste mit spezifischen Optionen. Beispielsweise können Sie bei einem Absatzblock Textformatierungen wie Fett- oder Kursivschrift anwenden, Links einfügen oder die Textausrichtung ändern. Zusätzlich können Sie Blöcke duplizieren, löschen oder ihre Position durch Ziehen und Ablegen anpassen.

Wiederverwendbare Blöcke

Eine besonders nützliche Funktion des Gutenberg-Editors sind die wiederverwendbaren Blöcke. Wenn Sie einen Block erstellt und angepasst haben und diesen in derselben Form mehrfach verwenden möchten, können Sie ihn als wiederverwendbaren Block speichern. Dazu klicken Sie auf die drei Punkte in der Werkzeugleiste des Blocks und wählen "Zu wiederverwendbaren Blöcken hinzufügen". Geben Sie dem Block einen Namen und speichern Sie ihn. Anschließend können Sie diesen Block jederzeit über die Blockauswahl einfügen.

Durch die effektive Nutzung und Verwaltung von Blöcken im Gutenberg-Editor können Sie Ihre Inhalte strukturiert und ansprechend gestalten, was zu einer verbesserten Benutzererfahrung auf Ihrer Website führt.

Fortgeschrittene Techniken: Wiederverwendbare Blöcke und Muster erstellen

Der Gutenberg-Editor von WordPress bietet fortgeschrittene Funktionen wie wiederverwendbare Blöcke und Muster, die den Erstellungsprozess von Inhalten effizienter gestalten.

Wiederverwendbare Blöcke:

Ein wiederverwendbarer Block ist ein gespeicherter Block oder eine Gruppe von Blöcken, die in verschiedenen Beiträgen oder Seiten eingefügt werden können. Änderungen an einem wiederverwendbaren Block wirken sich auf alle Instanzen dieses Blocks aus.

Erstellung eines wiederverwendbaren Blocks:

1. Erstellen oder wählen Sie den gewünschten Block im Editor aus.
2. Klicken Sie auf das Drei-Punkte-Menü in der Block-Toolbar.
3. Wählen Sie "In wiederverwendbaren Block umwandeln".
4. Geben Sie einen eindeutigen Namen für den Block ein und speichern Sie ihn.

Einfügen eines wiederverwendbaren Blocks:

1. Klicken Sie auf das Plus-Symbol, um einen neuen Block hinzuzufügen.
2. Wechseln Sie zum Tab "Wiederverwendbar".
3. Wählen Sie den gewünschten wiederverwendbaren Block aus der Liste aus.

Muster (Block Patterns):

Muster sind vordefinierte Blocklayouts, die als Vorlage für bestimmte Inhaltsstrukturen dienen. Sie ermöglichen es, komplexe Layouts schnell zu erstellen und anzupassen.

Verwendung von Mustern:

1. Klicken Sie auf das Plus-Symbol, um einen neuen Block hinzuzufügen.
2. Wechseln Sie zum Tab "Muster".
3. Durchsuchen Sie die verfügbaren Kategorien und wählen Sie ein Muster aus.
4. Fügen Sie das Muster in Ihren Beitrag oder Ihre Seite ein und passen Sie den Inhalt nach Bedarf an.

Durch die Nutzung von wiederverwendbaren Blöcken und Mustern können Sie konsistente Designs beibehalten und den Arbeitsaufwand bei der Inhaltserstellung reduzieren.

Entwickle deine Online-Präsenz mit Artifex Web – Meister des Webdesigns, SEO und E-Commerce. Kontakt: office@artifex-web.at.

Produktivität steigern: Nützliche Tastaturkürzel im Gutenberg-Editor

Um Ihre Produktivität im Gutenberg-Editor von WordPress zu steigern, können Sie verschiedene Tastaturkürzel nutzen, die häufige Aktionen beschleunigen und den Arbeitsfluss verbessern.

Allgemeine Tastenkombinationen

• Zwischen visuellem Editor und Code-Editor wechseln: Strg + Shift + Alt + M
• Vollbildmodus umschalten: Strg + Shift + Alt + F
• Einstellungsleiste ein- oder ausblenden: Strg + Shift + ,
• Änderungen speichern: Strg + S
• Letzte Änderung rückgängig machen: Strg + Z
• Letztes Rückgängigmachen wiederholen: Strg + Shift + Z

Blockbezogene Tastenkombinationen

• Neuen Block hinzufügen: Enter
• Neuen Block über dem aktuellen einfügen: Strg + Alt + T
• Neuen Block unter dem aktuellen einfügen: Strg + Alt + Y
• Ausgewählten Block duplizieren: Strg + Shift + D
• Ausgewählten Block löschen: Shift + Alt + Z
• Blocktyp ändern: /

Textformatierung

• Fett formatieren: Strg + B
• Kursiv formatieren: Strg + I
• Unterstreichen: Strg + U
• Link hinzufügen: Strg + K
• Link entfernen: Strg + Shift + K

Diese Tastenkombinationen helfen Ihnen, effizienter im Gutenberg-Editor zu arbeiten und Ihren Workflow zu optimieren. Eine vollständige Liste der verfügbaren Tastaturkürzel finden Sie in der offiziellen WordPress-Dokumentation.

Lass uns gemeinsam dein digitales Meisterwerk erschaffen – starte jetzt mit Artifex Web und kontaktiere uns unter office@artifex-web.at.

Erweiterungen und Plugins: Den Gutenberg-Editor anpassen und erweitern

Der Gutenberg-Editor von WordPress lässt sich durch verschiedene Plugins erweitern, die zusätzliche Blöcke und Funktionen bereitstellen. Diese Erweiterungen ermöglichen es, den Editor individuell anzupassen und die Gestaltungsmöglichkeiten erheblich zu erweitern.

Beliebte Erweiterungs-Plugins für den Gutenberg-Editor

• Spectra – WordPress Gutenberg Blocks: Dieses Plugin erweitert den Editor um über 30 zusätzliche Blöcke, darunter Info-Boxen, Multi-Button-Blöcke und Preislisten. Es ermöglicht auch das Hinzufügen von Animationen ohne Programmierkenntnisse und unterstützt dynamische Inhalte.

• GenerateBlocks: Von den Entwicklern des GeneratePress-Themes bereitgestellt, bietet dieses Plugin sechs flexible Blöcke wie Container, Headline und Grid. Es eignet sich besonders für die Erstellung von Landing-Pages und verbessert das Content-Design von Blogartikeln, ohne die Ladezeiten negativ zu beeinflussen.

• Kadence Blocks: Mit 23 zusätzlichen Blöcken erweitert dieses Plugin den Editor um Funktionen wie verschiedene Spalten-Layouts, Galerien und Buttons. Es bietet zudem über 1.500 integrierte SVG-Icons und ermöglicht umfangreiche Designanpassungen.

• Stackable: Dieses Plugin fügt dem Editor eine Vielzahl an Blöcken hinzu, darunter Icon-Listen, Feature-Grids und Call-to-Action-Elemente. Es ermöglicht individuelle Anpassungen wie Hintergrundänderungen, Textgrößenanpassungen und Animationen.

• CoBlocks: CoBlocks bietet eine Sammlung von Blöcken für den Seitenaufbau, darunter Zeilen- und Spaltenblöcke für dynamische Layouts. Es ermöglicht die Erstellung von ansprechenden und interaktiven Inhalten.

Die Auswahl des passenden Plugins hängt von den individuellen Anforderungen und dem gewünschten Funktionsumfang ab. Es empfiehlt sich, verschiedene Erweiterungen auszuprobieren, um die optimale Lösung für die eigenen Bedürfnisse zu finden.

FAQ – Häufig gestellte Fragen

Wie aktiviere ich den Gutenberg-Editor in WordPress?

Der Gutenberg-Editor ist seit WordPress-Version 5.0 standardmäßig aktiviert und ersetzt den klassischen Editor. Wenn Sie eine WordPress-Version 5.0 oder höher verwenden, ist der Gutenberg-Editor bereits aktiv und erfordert keine zusätzliche Aktivierung.

Sollten Sie eine ältere WordPress-Version nutzen, können Sie den Gutenberg-Editor als Plugin installieren. Dazu gehen Sie in Ihrem WordPress-Dashboard zu "Plugins" > "Installieren", suchen nach "Gutenberg" und klicken auf "Jetzt installieren" und anschließend auf "Aktivieren".

Nach der Aktivierung können Sie den Gutenberg-Editor verwenden, indem Sie einen neuen Beitrag oder eine neue Seite erstellen oder einen bestehenden Beitrag zur Bearbeitung öffnen.

Kann ich den klassischen Editor weiterhin verwenden?

Ja, Sie können den klassischen Editor weiterhin verwenden, indem Sie das offizielle "Classic Editor"-Plugin installieren und aktivieren. Dieses Plugin ersetzt den neuen Block-Editor vollständig und stellt die gewohnte Bearbeitungsoberfläche wieder her. Ursprünglich war die Unterstützung des Classic Editor-Plugins bis mindestens 2024 vorgesehen. Da es jedoch weiterhin auf über 5 Millionen WordPress-Installationen aktiv ist, wurde die Unterstützung verlängert. Bitte beachten Sie, dass der Wechsel zwischen den Editoren zu Kompatibilitätsproblemen führen kann, da der Block-Editor nicht vollständig abwärtskompatibel zum klassischen Editor ist.

Wie füge ich benutzerdefinierte Blöcke hinzu?

Das Hinzufügen benutzerdefinierter Blöcke in WordPress ermöglicht es Ihnen, den Gutenberg-Editor an Ihre spezifischen Bedürfnisse anzupassen. Es gibt verschiedene Methoden, um eigene Blöcke zu erstellen:

1. Verwendung von Plugins:

• Block Designer: Dieses Plugin erlaubt es Ihnen, individuelle Blöcke für den Gutenberg-Editor zu gestalten, ohne Programmierkenntnisse. Sie können verschiedene HTML-Elemente und Stile kombinieren, um maßgeschneiderte Blöcke zu erstellen.

• Genesis Custom Blocks: Mit diesem Plugin können Sie eigene Blöcke erstellen, indem Sie HTML und CSS verwenden. Es bietet eine benutzerfreundliche Oberfläche zur Definition von Blockfeldern und -layouts.

2. Manuelle Erstellung mit Code:

Für Entwickler, die tiefergehende Anpassungen vornehmen möchten, bietet WordPress die Möglichkeit, eigene Blöcke durch Programmierung zu erstellen:

• @wordpress/create-block: Dieses offizielle Tool von WordPress ermöglicht es, ein Block-Plugin mit einer modernen Entwicklungsumgebung zu erstellen. Es generiert die notwendigen Dateien und Konfigurationen für einen neuen Block.

• Block Lab: Ein weiteres Plugin, das es ermöglicht, eigene Blöcke zu erstellen, indem man PHP-Kenntnisse nutzt. Es bietet eine einfache Möglichkeit, benutzerdefinierte Blöcke zu definieren und zu gestalten.

Die Wahl der Methode hängt von Ihren technischen Fähigkeiten und Anforderungen ab. Für Einsteiger sind Plugins wie Block Designer oder Genesis Custom Blocks empfehlenswert, während erfahrene Entwickler die manuelle Erstellung bevorzugen könnten.

Gibt es eine Möglichkeit, den Gutenberg-Editor zu deaktivieren?

Ja, es gibt mehrere Möglichkeiten, den Gutenberg-Editor in WordPress zu deaktivieren:

1. Verwendung des Classic Editor Plugins: Dieses offizielle Plugin stellt den klassischen Editor wieder her und deaktiviert Gutenberg. Nach der Installation und Aktivierung kannst du in den Einstellungen festlegen, ob der klassische Editor standardmäßig verwendet werden soll.

2. Einsatz des Disable Gutenberg Plugins: Dieses Plugin ermöglicht es, Gutenberg vollständig oder selektiv für bestimmte Beiträge, Seiten, Benutzerrollen oder Inhaltstypen zu deaktivieren. Es bietet zudem Optionen zum Ausblenden von Gutenberg-bezogenen Hinweisen und Menüpunkten.

3. Deaktivierung durch Code: Wenn du Gutenberg ohne Plugin deaktivieren möchtest, kannst du folgenden Code in die functions.php deines Themes einfügen:

   add_filter('use_block_editor_for_post', '__return_false');
   

   Dieser Code deaktiviert den Block-Editor für Beiträge und Seiten.

Bitte beachte, dass Änderungen an der functions.php vorsichtig vorgenommen werden sollten, um Fehler zu vermeiden.

Welche Vorteile bietet der Gutenberg-Editor gegenüber dem klassischen Editor?

Der Gutenberg-Editor bietet gegenüber dem klassischen Editor mehrere Vorteile:

• Blockbasierte Struktur: Inhalte werden in einzelne Blöcke unterteilt, die flexibel angeordnet und gestaltet werden können. Dies ermöglicht eine intuitive Erstellung komplexer Layouts ohne Programmierkenntnisse.

• Erweiterte Anpassungsmöglichkeiten: Jeder Block kann individuell formatiert werden, einschließlich Schriftarten, Farben und Hintergründen, was eine größere Designfreiheit bietet.

• Benutzerfreundliche Oberfläche: Die intuitive Benutzeroberfläche erleichtert das Hinzufügen und Anpassen von Inhalten, auch für Anfänger.

• Wiederverwendbare Blöcke: Häufig genutzte Inhalte können als wiederverwendbare Blöcke gespeichert und auf verschiedenen Seiten eingesetzt werden, was den Arbeitsaufwand reduziert.

• Verbesserte Medienverwaltung: Das Einfügen und Anordnen von Bildern und Videos ist einfacher und flexibler, wodurch ansprechendere Inhalte erstellt werden können.

• Mobilfreundlichkeit: Der Editor ist für die Bearbeitung auf mobilen Geräten optimiert, sodass Inhalte auch unterwegs problemlos erstellt und bearbeitet werden können.

• Zukunftssicherheit: Als Standard-Editor von WordPress wird Gutenberg kontinuierlich weiterentwickelt und bleibt mit zukünftigen WordPress-Versionen kompatibel.

Diese Vorteile machen den Gutenberg-Editor zu einer leistungsstarken und flexiblen Alternative zum klassischen Editor.