So verwenden Sie den WordPress-Block-Editor: Eine Anleitung für Anfänger

Der WordPress-Block-Editor kann beim ersten Öffnen verwirrend wirken. Das Layout ist anders, alles funktioniert in Blöcken, und Anfänger benötigen unter Umständen mehr Zeit als erwartet, um die grundlegenden Optionen zu finden.

Der Block-Editor ist jedoch standardmäßig WordPress-Installationen

Sobald Sie also wissen, wie Blöcke funktionieren, können Sie Seiten schneller erstellen, Inhalte einfacher formatieren und Ihre Layouts besser kontrollieren als je zuvor im klassischen Editor.

Der Block-Editor ist intuitiv und flexibel gestaltet und ermöglicht es Benutzern, Blöcke per Drag & Drop an die gewünschte Stelle zu ziehen. Mit etwas Übung können Sie Seiten in nur wenigen Minuten erstellen und anpassen.

TL;DR

• Der WordPress-Editor, auch bekannt als Gutenberg , ersetzte den klassischen Editor in WordPress 5.0 und ermöglicht es, Inhalte mithilfe einzelner Blöcke zu erstellen.

• Jedes Element auf Ihrer Seite, einschließlich Text, Bilder, Schaltflächen und Layouts, befindet sich in einem eigenen Block mit eigenen Einstellungen.

• Farben, Abstände, Typografie und Ausrichtung können Sie direkt im Block-Einstellungsfeld ohne jegliche Programmierung anpassen.

• Blockmuster bieten Ihnen vorgefertigte Layouts als Ausgangspunkt, während wiederverwendbare Blöcke es Ihnen ermöglichen, Ihre eigenen Elemente zu speichern und auf Ihrer gesamten Website wiederzuverwenden.

Was ist der WordPress-Block-Editor?

Der Block-Editor, auch bekannt als Gutenberg, ist der Standard-Inhaltseditor in WordPress. Er ersetzte den klassischen Editor in WordPress 5.0 im Dezember 2018.

Statt eines einzigen Textfelds erstellen Sie Inhalte mithilfe einzelner Blöcke. Jeder Absatz, jedes Bild, jede Überschrift, jede Schaltfläche und jedes Video erhält einen eigenen Block, den Sie unabhängig verschieben, formatieren und anpassen können.

WordPress ist auf ein blockbasiertes System umgestiegen, sodass Sie mehr Kontrolle über Ihre Seitenlayouts haben, ohne einen separaten Seiteneditor oder benutzerdefinierten Code zu benötigen.

WordPress-Block-Editor vs. Klassischer Editor

Der klassische Editor bot ein einfaches Textfeld mit begrenzten Formatierungsoptionen. Um mehr als nur Standardtext und Bilder zu erstellen, mussten zusätzliche Plugins installiert oder technische Kenntnisse eingesetzt werden.

Mit dem Block-Editor erhält jedes Element einen eigenen Block mit individuellen Einstellungen. Sie können Inhalte verschieben, Spaltenlayouts erstellen, Schaltflächen hinzufügen, Medien einbetten und Abstände anpassen – alles ohne eine einzige Zeile Code zu schreiben.

WordPress entwickelt den klassischen Editor nicht mehr aktiv weiter. Durch den Wechsel zum Block-Editor erhalten Sie Zugriff auf alle aktuellen Funktionen von WordPress, einschließlich der vollständigen Website-Bearbeitung, Blockmuster und wiederverwendbarer Blöcke.

Wie navigiert man durch die Benutzeroberfläche des Blockeditors?

Beim ersten Öffnen des Blockeditors kann es so aussehen, als ob viel auf dem Bildschirm passiert. Es gibt jedoch drei Hauptbereiche, die Sie kennen sollten. Sobald Sie diese verstanden haben, wird die Navigation im Editor deutlich einfacher.

• Obere Symbolleiste: Die obere Symbolleiste befindet sich am oberen Bildschirmrand. Verwenden Sie sie, um Blöcke hinzuzufügen, Fehler rückgängig zu machen, eine Inhaltsvorschau anzuzeigen und auf Ihre Veröffentlichungseinstellungen zuzugreifen.

• Einstellungsfeld: Das Einstellungsfeld befindet sich auf der rechten Seite Ihres Bildschirms. Es zeigt die Blockeinstellungen an, wenn Sie einen Block anklicken, und wechselt zu Ihren Beitragseinstellungen wie Kategorien, Schlagwörter und Beitragsbild, wenn nichts ausgewählt ist. Hier können Sie auf den Tab „Block“ zugreifen und die Einstellungen für den ausgewählten Block konfigurieren.

• Block-Einfügefunktion: Die Block-Einfügefunktion ist die blaue Plus-Schaltfläche oben links. Klicken Sie darauf, um die Suchleiste zu verwenden und schnell Blöcke zu finden und einzufügen, nach Kategorien zu durchsuchen oder gespeicherte, wiederverwendbare Blöcke aufzurufen.

Sie können auch die Listenansicht verwenden, um Ihre Layouts effektiver zu verwalten und zu organisieren.

Verfügbare Blockarten

Der Block-Editor ordnet alles in fünf Kategorien. Jede Kategorie gruppiert Blöcke nach ihrer Funktion, sodass Sie beim Erstellen Ihrer Seiten und Beiträge schnell und einfach genau das finden, was Sie benötigen.

Die Standardblöcke decken ein breites Spektrum an Inhaltstypen ab und ermöglichen es den Benutzern, medienreiche Seiten mit Bildern, Videos, Galerien und mehr zu erstellen.

Hier ist der Inhalt der einzelnen Abschnitte:

• Textblöcke: Absätze, Überschriften, Listen, Zitate, Code-Snippets und Tabellen. Alles, was Sie auf Ihrer Seite schreiben, gehört in diese Kategorie.

• Medienblöcke: Bilder, Videos, Audiodateien, Bildergalerien und herunterladbare Dateien. Sie können verschiedene Blöcke, darunter Bildergalerien, verwenden, um visuell ansprechende Inhalte und multimediale Seiten zu erstellen.

• Designbausteine: Spalten, Schaltflächen, Gruppen, Trennlinien und Abstandshalter. Sie können mehrere Bausteine ​​und andere Bausteine ​​kombinieren, um komplexe Layouts zu erstellen und die Darstellung von Inhalten zu steuern.

• Widget-Blöcke: Suchleisten, Archivlisten, Kategorielisten, neueste Beiträge und Kalender. Dies sind funktionale Elemente, die Ihren Seiten einen Mehrwert verleihen.

• Einbettungsblöcke: YouTube, Vimeo, Spotify, Twitter und Dutzende weiterer Plattformen. Mit dem Block-Editor können Nutzer Inhalte von Drittanbietern wie YouTube und Vimeo ganz einfach und ohne Programmierung direkt in ihre Seiten einbetten.

Häufig verwendete WordPress-Blöcke für Anfänger

Als Anfänger müssen Sie nicht alle Blöcke auf einmal lernen. Dies sind die Blöcke, die Sie auf fast jeder Seite und in jedem Beitrag verwenden werden.

Absatz- und Überschriftenblöcke

Der Absatzblock ist der grundlegendste Block im Editor. Jedes Mal, wenn Sie mit dem Tippen beginnen, verwenden Sie einen. Sie können Schriftgröße, Textfarbe und Ausrichtung direkt über die Block-Symbolleiste ändern, ohne Code bearbeiten zu müssen.

Überschriftenblöcke arbeiten mit Absatzblöcken zusammen, um Ihrem Inhalt Struktur zu verleihen. Sie können je nach gewünschter Seitenstruktur zwischen H1 und H6 wählen.

Die korrekte Verwendung von Überschriftenebenen hilft Suchmaschinen außerdem, Ihre Inhalte zu verstehen, was für die Suchmaschinenoptimierung (SEO) .

Bild- und Medienblöcke

Im Bildblock können Sie Bilder direkt aus Ihrer Mediathek oder von einer URL hochladen. Sobald das Bild platziert ist, können Sie es links-, rechts- oder zentriert ausrichten, die Größe anpassen und Alternativtext für Suchmaschinenoptimierung und Barrierefreiheit hinzufügen.

Bei mehreren Bildern werden diese im Galerieblock übersichtlich in einem Rasterlayout angezeigt. Sie können die Anzahl der Spalten, die Bildgrößen und die Anzeige von Bildunterschriften unter jedem Bild festlegen.

Schaltflächen- und Linkblöcke

Mit dem Button-Block können Sie ohne Designkenntnisse an beliebiger Stelle auf Ihrer Seite Call-to-Action

Für Inline-Links markieren Sie einfach Ihren Text in einem Absatzblock und klicken auf das Link-Symbol in der Symbolleiste. Kein Code, keine Plugins – einfach ein sauberer Hyperlink, der in Sekundenschnelle hinzugefügt wird.

Listen- und Zitatblöcke

Der Listenblock erstellt mit einem Klick Aufzählungs- oder nummerierte Listen. Sie können zwischen verschiedenen Listenstilen wechseln, Elemente einrücken, um verschachtelte Listen zu erstellen, und den Text innerhalb jedes Listenelements formatieren, genau wie in einem Absatzblock.

Der Zitatblock hebt wichtige Aussagen oder Zitate in Ihrem Text hervor. Er verleiht einem Textabschnitt visuelle Betonung und lässt ihn sich so vom Rest der Seite abheben.

Nutzen Sie es für Erfahrungsberichte, Kernaussagen oder alles, worauf die Leser aufmerksam machen sollen.

Wie fügt man Blöcke hinzu, verschiebt sie und löscht sie?

Jede Aktion im Gutenberg-Editor lässt sich auf drei Dinge : Blöcke hinzufügen, verschieben und entfernen. Hier erfahren Sie, wie die einzelnen Schritte funktionieren.

Hinzufügen von Blöcken im WordPress-Editor

Sie können Ihrer Seite oder Ihrem Beitrag auf drei Arten einen Block hinzufügen. Sie können einen neuen Block hinzufügen, indem Sie auf die Schaltfläche „Neuen Block hinzufügen“ klicken oder den Slash-Befehl verwenden (geben Sie / gefolgt vom Blocknamen ein):

• Block-Einfügefunktion: Klicken Sie auf die blaue Plus-Schaltfläche oben links, um die Block-Einfügefunktion zu öffnen. Hier können Sie nach beliebigen Blöcken suchen oder diese durchstöbern sowie die Blockmusterbibliothek mit vorgefertigten Blockmustern und Layouts erkunden, die Sie einfügen und anpassen können.

• Inline-Einfügung: Bewegen Sie den Mauszeiger zwischen vorhandene Blöcke auf Ihrer Seite und klicken Sie auf die kleine Plus-Schaltfläche, die zwischen ihnen erscheint.

• Schrägstrich-Befehl: Klicken Sie auf einen leeren Absatzblock und geben Sie dann einen Schrägstrich (/) gefolgt vom Blocknamen ein. So fügen Sie im Handumdrehen einen neuen Block hinzu.

Blöcke in Gutenberg verschieben und neu anordnen

Es gibt drei Möglichkeiten, einen Block an eine neue Position auf Ihrer Seite zu verschieben:

• Pfeiltasten: Jeder Block verfügt über zwei Pfeiltasten in seiner Werkzeugleiste. Verwenden Sie diese, um den Block jeweils um eine Position nach oben oder unten zu bewegen.

• Sie den Griff mit den sechs Punkten auf der linken Seite des Blocks und ziehen Sie ihn an eine beliebige Stelle auf Ihrer Seite.

• Dokumentübersicht: Öffnen Sie das Dokumentübersichtsfenster über die obere Symbolleiste, um alle Ihre Blöcke in der richtigen Reihenfolge anzuzeigen, und ziehen Sie sie von dort an die gewünschte Stelle.

Löschen und Entfernen von Blöcken in WordPress

Das Entfernen einer Blockierung dauert nur wenige Sekunden:

• Drei-Punkte-Menü: Wählen Sie den Block aus, klicken Sie auf das Drei-Punkte-Menü in der Block-Symbolleiste und wählen Sie „Löschen“.

• Tastenkombination: Markieren Sie den Block und drücken Sie die Rücktaste oder die Entf-Taste auf Ihrer Tastatur, um ihn sofort zu entfernen.

• Einen Fehler rückgängig machen: Drücken Sie Strg+Z unter Windows oder Befehl+Z unter Mac, um einen versehentlich gelöschten Block wiederherzustellen.

Anpassen von Blöcken ohne Programmierung

Sie benötigen keine Programmierkenntnisse, um das Aussehen Ihrer Blöcke anzupassen. Jeder Block im WordPress-Editor verfügt über ein eigenes Einstellungsfeld auf der rechten Seite Ihres Bildschirms.

Wählen Sie einen beliebigen Block aus, und die Seitenleiste aktualisiert sich sofort, um Ihnen genau anzuzeigen, was Sie an diesem Block ändern können.

Folgendes können Sie direkt über das Block-Einstellungsfeld steuern:

• Texteinstellungen: Passen Sie Schriftgröße, Schriftstärke, Zeilenhöhe und Buchstabenabstand an Ihren Inhaltsstil an.

• Farboptionen: Ändern Sie die Textfarbe und die Hintergrundfarbe eines beliebigen Blocks mithilfe der Farbauswahl oder durch Eingabe eines Hexadezimalcodes.

• Abstandssteuerung: Passen Sie Innen- und Außenabstände um Ihren Block an, um zu steuern, wie viel Platz sich über, unter und um Ihren Inhalt herum befindet.

• Ausrichtungseinstellungen: Richten Sie Ihren Block je nach Layoutanforderungen links, mittig, rechts oder auf volle Breite aus.

• Wiederverwendbare Muster: Speichern Sie beliebige Blöcke oder Blockgruppen als wiederverwendbares Muster. Nutzen Sie es auf mehreren Seiten und in mehreren Beiträgen, ohne es jedes Mal neu erstellen zu müssen.

Verwendung von Blockmustern und wiederverwendbaren Blöcken

Blockmuster und wiederverwendbare Blöcke sparen Ihnen beide Zeit beim Erstellen von Seiten, funktionieren aber unterschiedlich. Hier erfahren Sie, was die einzelnen Elemente bewirken.

Blockmuster sind vorgefertigte Layouts, die im WordPress-Editor integriert sind. Sie finden sie im Block-Inserter unter dem Reiter „Muster“. Außerdem können Sie auf die offizielle Blockmusterbibliothek von WordPress.org .

Suchen Sie sich eine Vorlage aus, fügen Sie sie auf Ihrer Seite ein, ersetzen Sie die Inhalte durch Ihre eigenen – fertig. Kein Erstellen von Grund auf nötig.

Wiederverwendbare Blöcke heißen jetzt synchronisierte Muster. Mit diesen können Sie eigene Inhalte erstellen und speichern, die Sie dann in allen Blöcken Ihrer Website wiederverwenden können.

Sobald ein synchronisiertes Muster gespeichert ist, kann es in jede beliebige Seite oder jeden beliebigen Beitrag eingefügt werden. Wenn Sie es bearbeiten, wird die Änderung automatisch überall dort übernommen, wo es erscheint.

Ideal für Dinge wie Handlungsaufforderungen, Kontaktdaten oder Haftungsausschlüsse, die Sie wiederholt verwenden.

Häufige Fehler, die Anfänger bei der Verwendung des Blockeditors machen

Die meisten Anfänger stoßen bei der ersten Verwendung des Blockeditors auf dieselben Probleme. Hier erfahren Sie, worauf Sie achten sollten:

• Übermäßiger Blockgebrauch: Nicht alles benötigt einen eigenen Block. Zu viele separate Blöcke für kleine Inhaltsabschnitte erschweren die Seitenverwaltung und verlangsamen den Bearbeitungsprozess.

• Ignorieren der Überschriftenstruktur: Viele Anfänger wählen Überschriftengrößen eher nach Aussehen als nach Bedeutung. Überschriftenebenen zeigen Suchmaschinen, wie Ihr Inhalt strukturiert ist. Das Überspringen von H2 und H4 oder die mehrfache Verwendung von H1 schadet Ihrer Suchmaschinenoptimierung.

• Die Seitenleisteneinstellungen werden nicht verwendet: Im Einstellungsbereich des Blocks finden die meisten Anpassungen statt. Wer diesen Bereich überspringt, verpasst die bereits integrierten Optionen für Typografie, Farben und Abstände.

• Layout versehentlich beschädigen: Blöcke lassen sich zwar einfach mit dem Ziehpunkt verschieben, aber wenn man einen Block an der falschen Stelle ablegt, kann das das Layout durcheinanderbringen. Drücken Sie Strg+Z unter Windows oder Befehl+Z auf dem Mac, um die Aktion rückgängig zu machen und das Layout schnell wiederherzustellen.

Abschluss

Der Gutenberg-Editor wirkt beim ersten Öffnen einschüchternd. Jedes Element ist ein Block, die Benutzeroberfläche ist neu, und es erfordert etwas Eingewöhnungszeit, die grundlegenden Optionen zu finden.

Sobald Sie die Funktionsweise von Blöcken verstanden haben, wird das Erstellen von Seiten und Inhalten schneller und flexibler. Sie haben die Kontrolle über Ihre Layouts, können Ihre Inhalte individuell anpassen und Ihre gesamte Website verwalten, ohne eine einzige Zeile Code schreiben zu müssen.

Beginnen Sie mit den Blöcken, die Sie am häufigsten verwenden. Machen Sie sich mit dem Einstellungsmenü vertraut. Sparen Sie Zeit mit Mustern und wiederverwendbaren Blöcken. Je öfter Sie den Editor nutzen, desto intuitiver wird er Ihnen.

Häufig gestellte Fragen zum WP Block Editor