Den Block-Editor meistern

Der Block-Editor ist das primäre System zur Inhaltserstellung im modernen WordPress (*). Er bietet eine visuelle und flexible Möglichkeit, Seiten aufzubauen, Blogbeiträge zu schreiben und Inhalte zu gestalten – ohne umfangreiche technische Kenntnisse. Seit seiner Einführung hat er die Art, wie WordPress (*)-Nutzer mit ihren Websites arbeiten, grundlegend verändert.

Bevor der Block-Editor zum Standard wurde, nutzte WordPress (*) einen klassischen Texteditor, der ähnlich wie ein Textverarbeitungsprogramm funktionierte. Dieser war für einfache Artikel ausreichend, machte komplexere Layouts jedoch schwierig – oft waren zusätzliche Plugins oder manueller Code nötig. Der Block-Editor löste viele dieser Einschränkungen, indem er jedes Inhaltselement als eigenständigen Block behandelt.

Heute unterstützt der Block-Editor nicht nur Beiträge und Seiten, sondern über die vollständige Website-Bearbeitung (Full Site Editing) auch Vorlagen, Vorlagenteile, Navigationssysteme und ganze Website-Designs. Ihn effektiv zu nutzen ist eine der wichtigsten Fähigkeiten, die du als WordPress-Nutzer entwickeln kannst – ob für einen einfachen Blogbeitrag, eine professionelle Startseite, eine Produktpräsentation oder eine Landingpage.

Gutenberg – der Name hinter dem Block-Editor

Der Block-Editor ist in der WordPress-Community auch als Gutenberg bekannt – dem ursprünglichen Codenamen des Entwicklungsprojekts, benannt nach Johannes Gutenberg, dem Erfinder des Buchdrucks mit beweglichen Lettern. Offiziell heißt die Funktion im WordPress-Dashboard heute schlicht „Block-Editor“, während „Gutenberg“ gleichzeitig der Name des Entwicklungs-Plugins geblieben ist, über das neue Features vor der Aufnahme in den WordPress-Kern getestet werden.

Gutenberg wurde entwickelt, um das WordPress-Publishingerlebnis zu modernisieren: visueller, flexibler und intuitiver – und gleichzeitig die Abhängigkeit von benutzerdefiniertem Code und Page Buildern von Drittanbietern zu reduzieren. Der entscheidende Ansatz: Inhalte werden nicht als großer Textkörper behandelt, sondern in einzelne, unabhängig anpassbare Blöcke unterteilt. Eine der größten Stärken dabei ist Konsistenz – dieselbe Bearbeitungsumgebung gilt über alle Bereiche von WordPress hinweg, was das Lernen und die Übertragung auf neue Aufgaben erleichtert.

Wie Blöcke funktionieren

Blöcke sind die Bausteine jedes Inhalts in WordPress. Alles, was du einer Seite oder einem Beitrag hinzufügst, befindet sich innerhalb eines Blocks – selbst ein einzelner Absatz belegt seinen eigenen Block. Dieser Ansatz bietet enorme Flexibilität: Du kannst jeden Block verändern, verschieben oder entfernen, ohne den umgebenden Inhalt zu beeinflussen.

Eine typische Seite könnte zum Beispiel aus einem Überschriftenblock, einem Absatzblock, einem Bildblock, einem Spaltenblock mit weiteren Inhalten und einem Schaltflächenblock bestehen – jeder Block funktioniert unabhängig und trägt gleichzeitig zum Gesamtdesign bei.

Blockstruktur

Jeder Block enthält Inhalt, Einstellungen, Styling-Optionen und Positionierungssteuerung. Wenn du einen Block auswählst, zeigt WordPress die verfügbaren Anpassungsoptionen – in der Werkzeugleiste über dem Block und in der Einstellungs-Seitenleiste rechts. Diese Optionen variieren je nach Blocktyp.

Blöcke hinzufügen, verschieben und löschen

Blöcke fügst du am schnellsten über den Schrägstrich-Befehl ein: Tippe einfach / in einem leeren Block und gib dann den Namen des Blocks ein. WordPress zeigt passende Vorschläge – wähle den gewünschten Block aus und bestätige mit Enter. Das geht deutlich schneller als das Durchsuchen des Block-Einfügemenüs. Alternativ nutzt du die Plus-Schaltfläche im Editor.

Blöcke verschiebst du entweder per Drag & Drop oder über die Pfeilschaltflächen in der Werkzeugleiste. Die Tastenkombination Strg+Alt+Shift+Pfeil (Windows) bzw. Cmd+Option+Shift+Pfeil (Mac) verschiebt den aktiven Block, ohne die Maus zu benötigen. Zum Löschen wählst du den Block aus, öffnest die Blockoptionen (drei Punkte in der Werkzeugleiste) und wählst „Löschen“ – der restliche Inhalt bleibt unberührt.

Die Editor-Oberfläche kennen

Bevor du tiefer in einzelne Blocks eintauchst, lohnt es sich, die Oberfläche des Block-Editors zu kennen. Sie besteht aus vier Bereichen:

• Editorbereich – die Mitte des Bildschirms, wo du Blöcke platzierst und Inhalte eingibst.
• Obere Werkzeugleiste – enthält u. a. den Block-Inserter (Plus), Rükgängig/Wiederherstellen, die Listenansicht, Vorschau und Veröffentlichen.
• Block-Werkzeugleiste – erscheint über dem gerade aktiven Block; bietet Ausrichtung, Formatierung, Transformation und blockspezifische Optionen.
• Einstellungs-Seitenleiste – rechts; zeigt Optionen für den aktiven Block (Typografie, Farben, Abstände) oder die gesamte Seite/den Beitrag.

Die Listenansicht

Die Listenansicht (Symbol mit drei Ebenen in der oberen Werkzeugleiste) ist eine sehr praktische Funktion. Sie zeigt dir eine strukturierte Übersicht aller Blöcke der aktuellen Seite oder des Beitrags – auch verschachtelte Blöcke innerhalb von Gruppen oder Spalten. So navigierst du schnell zu einem bestimmten Block, änderst die Reihenfolge per Drag & Drop und behältst den Überblick über komplexe Layouts. Besonders hilfreich wird sie, sobald eine Seite viele ineinander verschachtelte Blöcke enthält.

Wichtige Blöcke im Überblick

WordPress enthält Dutzende von Blöcken für unterschiedliche Inhaltszwecke. Die folgenden Abschnitte stellen die wichtigsten Kategorien vor – ihr Verständnis bildet die Grundlage für den sicheren Umgang mit dem Block-Editor.

Textblöcke

Textblöcke gehören zu den am häufigsten genutzten Elementen in WordPress. Sie geben Inhalten Struktur, Lesbarkeit und Organisation.

• Absatzblock – der Standard-Inhaltsblock für normalen Text. Unterstützt grundlegende Formatierung (Fett, Kursiv, Unterstrichen), Links, Textausrichtung und Farbe. Der weitaus größte Teil aller Artikelinhalte entsteht mit Absatzblöcken.
• Überschriftenblock – gliedert Inhalte in logische Abschnitte. Verfügbar in den Ebenen H1 bis H6, wobei H1 die Hauptseitenüberschrift ist und H2–H4 für Unterabschnitte genutzt werden. Eine korrekte Überschriftenhierarchie verbessert sowohl die Lesbarkeit als auch die Suchmaschinenoptimierung.
• Listenblock – erstellt Aufzählungslisten (Stichpunkte) oder nummerierte Listen. Verbessert die Inhaltsorganisation und erleichtert das schnelle Überfliegen von Informationen.
• Zitatblock – hebt wichtige Aussagen oder Zitate visuell hervor und trennt sie vom umliegenden Text.
• Hervorgehobenes Zitat – eine prominentere visuelle Darstellung als der Standardzitatblock, oft genutzt, um bemerkenswerte Ideen oder Kernaussagen hervorzuheben.
• Codeblock – zeigt Programmcode unter Beibehaltung aller Formatierungen an. Wichtig: WordPress interpretiert den Inhalt nicht als ausführbaren Code, sondern stellt ihn rein als Text dar.
• Vorformatierter Block – behält Leerzeichen und Zeilenumbrüche exakt so bei, wie sie eingegeben wurden. Nützlich für technische Anweisungen, Konfigurationsbeispiele und strukturierten Text.

Medienblöcke

Medienblöcke binden visuelle und multimediale Elemente in Inhalte ein und verbessern damit Interaktion und Nutzererlebnis.

• Bildblock – fügt einzelne Bilder ein. Du kannst Bilder vom Computer hochladen, aus der Medienbibliothek wählen oder per externer URL einbinden. Wichtige Einstellungen: Alternativtext (für Barrierefreiheit und SEO), Bildunterschrift, Ausrichtung und Abmessungen.
• Galerieblock – zeigt mehrere Bilder in einem strukturierten Rasterlayout. Ideal für Portfolios, Produktpräsentationen, Eventfotografie oder Reise-Websites.
• Cover-Block – kombiniert ein Bild oder Video mit überlagerten Inhalten wie Überschriften, Absatztexten oder Schaltflächen. Häufig für Hero-Bereiche am oberen Seitenrand eingesetzt.
• Audioblock – bettet eine Audiodatei direkt in die Seite ein. Besucher können den Ton abspielen, ohne die Website verlassen zu müssen.
• Videoblock – unterstützt selbstgehostete Videodateien. Du lädst die Videodatei hoch und zeigst sie direkt auf der Seite an. Für externe Videos von YouTube oder Vimeo nutzt du stattdessen den Einbettungsblock.
• Medien- und Text-Block – kombiniert ein Bild oder Video mit schriftlichem Inhalt in einem nebeneinanderliegenden Layout. Häufig für Produktbeschreibungen, Serviceerläuterungen und Funktionshighlights eingesetzt.

Design- und Layout-Blöcke

Diese Blöcke geben dir strukturelle Kontrolle über die Platzierung und das Erscheinungsbild von Inhalten.

• Schaltflächenblock – erstellt klickbare Schaltflächen mit Handlungsaufforderungen wie „Kontakt aufnehmen“, „Mehr erfahren“ oder „Jetzt herunterladen“. Anpassbar in Farbe, Größe, Ausrichtung und Eckenradius.
• Trennblock – erzeugt eine visuelle Trennlinie zwischen Abschnitten und verbessert die Inhaltsorganisation.
• Abstandsblock – erzeugt definierten Leerraum zwischen Elementen. Angemessene Abstände verbessern die visuelle Balance und reduzieren Unordnung.
• Gruppenblock – fasst mehrere Blöcke zu einem einzigen Abschnitt zusammen. Gruppierte Blöcke teilen sich Hintergrundfarbe, Innenabstand und Layouteinstellungen. Sehr nützlich, um ganze Seitenbereiche als Einheit zu behandeln.
• Zeilenblock – ordnet Inhalte horizontal nebeneinander an. Hilfreich für Funktionslisten, Teamabschnitte oder Schaltflächengruppen.
• Stapelblock – organisiert Inhalte vertikal mit gleichmäßigem Abstand. Erzeugt saubere, übersichtliche Layouts.
• Spaltenblock – unterteilt den Inhalt in mehrere vertikale Abschnitte (typisch: 2, 3 oder 4 Spalten). Eingesetzt für Servicevergleiche, Funktionsdarstellungen, Teammitgliederprofile und rasterbasierte Layouts. In jede Spalte kannst du beliebige andere Blöcke einfügen.

Schritt für Schritt: Ein mehrspaltiges Layout erstellen

1. Eine Seite oder einen Beitrag im Editor öffnen.
2. Per / + „Spalten“ einen Spaltenblock einfügen.
3. Die gewünschte Spaltenstruktur auswählen (z. B. zwei oder drei Spalten).
4. In jede Spalte Inhalte einfügen (Text, Bilder, Schaltflächen etc.).
5. Abstand und Ausrichtung anpassen.
6. In der Vorschau auf Mobil-Darstellung prüfen.
7. Speichern.

Externe Inhalte einbetten

Der Block-Editor unterstützt das Einbetten von Inhalten externer Plattformen direkt in Seiten und Beiträge. Das erspart das Herunterladen und Hochladen von Dateien und hält Inhalte automatisch aktuell. Typische eingebettete Inhalte sind YouTube-Videos, Vimeo-Clips, Social-Media-Beiträge, Google Maps, Dokumente und Präsentationen.

Du fügst externe Inhalte am einfachsten so ein: Kopiere die URL des Inhalts, füge sie direkt in den Editor ein und drücke Enter. WordPress erkennt unterstützte Plattformen automatisch und wandelt die URL in eine eingebettete Vorschau um. Alternativ nutzt du gezielt den Einbettungsblock und gibst die URL manuell ein. Das Ergebnis prüfst du dann in der Vorschau, bevor du speicherst.

Blockeinstellungen und Optionen

Jeder Block enthält Einstellungen, die Aussehen und Funktionalität steuern. Diese Optionen anzupassen gehört zu den grundlegenden Fähigkeiten im Umgang mit dem Block-Editor.

Werkzeugleiste und Seitenleiste

Die Werkzeugleiste über dem aktiven Block bietet Ausrichtungsoptionen, Positionierung, Transformation in andere Blocktypen und blockspezifische Formatierungsoptionen. Die Einstellungs-Seitenleiste rechts geht tiefer und erlaubt Typografie, Farben, Abmessungen, Rahmen und Abstände zu konfigurieren – genau die Optionen, die für den jeweiligen Blocktyp verfügbar sind.

Blocktransformationen

Viele Blöcke lassen sich direkt in andere Blocktypen umwandeln, ohne den Inhalt neu erstellen zu müssen. Ein Absatzblock kann z. B. in eine Überschrift umgewandelt werden, eine Liste in einen Zitatblock, eine Gruppe in eine Zeile. Du findest diese Option in der Werkzeugleiste unter dem Blocktyp-Symbol ganz links.

Erweiterte Einstellungen

Im Bereich „Erweitert“ der Einstellungs-Seitenleiste findest du zusätzliche Optionen wie benutzerdefinierte CSS-Klassen, HTML-Anker und Sichtbarkeitseinstellungen. HTML-Anker sind besonders nützlich: Sie vergeben einem Block einen Bezeichner, auf den du von anderen Seiten aus direkt verlinken kannst – also ein sogenannter Tiefenlink zu einem bestimmten Seitenabschnitt. Seit WordPress 6.8 kannst du über „Zusätzliches CSS“ auch direkt pro Block-Instanz individuelle CSS-Regeln hinterlegen, ohne dafür die globalen Stile oder eine eigene CSS-Datei bearbeiten zu müssen.

Blockmuster verwenden

Blockmuster sind vordefinierte Gruppen von Blöcken, die du mit wenigen Klicks in eine Seite einfügen kannst. Sie helfen dir, Seiten schneller zu erstellen und dabei professionelle Designstandards einzuhalten. Typische Muster sind Hero-Bereiche, Testimonials, Preistabellen, Kontaktbereiche und Teamprofile.

Für Einsteiger bieten Muster einen enormen Vorteil: Du kannst anspruchsvolle Layouts einfügen und dann einfach die Platzhaltinhalte durch deine eigenen ersetzen – ohne jedes Design-Element selbst aufbauen zu müssen. Das spart Zeit und hilft dir gleichzeitig, durch Analyse vorhandener Muster selbst dazuzulernen.

Schritt für Schritt: Ein Muster einfügen

1. Eine Seite öffnen.
2. Den Block-Inserter (Plus-Symbol) öffnen.
3. Den Reiter „Muster“ wählen.
4. Verfügbare Kategorien durchsuchen.
5. Ein Muster auswählen und einfügen.
6. Platzhalterinhalte durch eigene Inhalte ersetzen.
7. Speichern.

Synchronisierte Muster

Synchronisierte Muster erweitern das Grundkonzept. Ein synchronisiertes Muster bleibt über alle Stellen, an denen es verwendet wird, verknüpft: Änderst du eine Instanz, aktualisieren sich automatisch alle anderen. Das ist ideal für Elemente wie Werbebanner, Kontaktinformationen, Call-to-Action-Bereiche oder Anmeldeformulare – alles, das website-weit konsistent bleiben soll.

Nicht-synchronisierte Muster werden dagegen als eigenständige Kopien eingefügt, die du auf jeder Seite unabhängig anpassen kannst. Die Wahl hängt davon ab, ob du Konsistenz oder Flexibilität priorisierst.

Schritt für Schritt: Ein synchronisiertes Muster erstellen

1. Ein Block-Layout im Editor aufbauen.
2. Alle zugehörigen Blöcke auswählen (Shift + Klick oder über die Listenansicht).
3. Blockoptionen öffnen (drei Punkte in der Werkzeugleiste).
4. „Als Muster erstellen“ wählen.
5. Einen beschreibenden Namen vergeben.
6. Festlegen, ob das Muster synchronisiert sein soll.
7. Speichern – das Muster steht nun über den Block-Inserter zur Verfügung.

Strategien für wiederverwendbare Inhalte

Effizientes Content (*)-Management geht über das Erstellen einzelner Seiten hinaus. Erfolgreiche Website-Betreiber entwickeln Systeme zur Wiederverwendung und Pflege von Inhalten – das spart langfristig viel Zeit und sorgt für ein konsistenteres Nutzererlebnis.

Viele Websites nutzen bestimmte Abschnitte immer wieder: Kontaktbereiche, Erfahrungsberichte, Autoreninfos, Werbeangebote. Statt diese jedes Mal neu zu bauen, speicherst du sie als Muster – am besten als synchronisierte Muster, wenn sie überall gleich aussehen sollen. Eine gut gepflegte Musterbibliothek mit klaren, beschreibenden Namen verbessert Konsistenz, Produktivität und Skalierbarkeit deiner Website erheblich.

Muster und Vorlagen ergänzen sich dabei sehr gut: Vorlagen liefern die strukturelle Grundlage für Seitentypen, Muster fügen wiederkehrende Inhaltsabschnitte hinzu. Zusammen entsteht ein hocheffizienter Workflow für die Inhaltserstellung – besonders wertvoll, je mehr deine Website wächst.

Tastenkombinationen und Produktivitätstipps

Mit wachsender Erfahrung können Tastenkombinationen deine Effizienz deutlich verbessern. Du musst nicht alle auf einmal lernen – fange mit fünf bis sieben an, die du am häufigsten brauchst, und erweitere dein Repertoire nach und nach. Die vollständige Liste aller Shortcuts zeigt dir der Block-Editor selbst jederzeit an: Drücke dafür Shift + Alt + H (Windows) bzw. Ctrl + Option + H (Mac).

Aktion	Windows / Linux	Mac
Speichern	Strg + S	Cmd + S
Rückgängig	Strg + Z	Cmd + Z
Wiederherstellen	Strg + Y oder Strg+Shift+Z	Cmd + Shift + Z
Kopieren	Strg + C	Cmd + C
Ausschneiden	Strg + X	Cmd + X
Einfügen	Strg + V	Cmd + V
Ohne Formatierung einf.	Strg + Shift + V	Cmd + Shift + V
Fett	Strg + B	Cmd + B
Kursiv	Strg + I	Cmd + I
Unterstreichen	Strg + U	Cmd + U
Link einfügen	Strg + K	Cmd + K
Block duplizieren	Strg + Alt + D	Cmd + Option + D
Block nach oben/unten	Strg+Alt+Shift+Pfeil	Cmd+Option+Shift+Pfeil
Alle Shortcuts anzeigen	Shift + Alt + H	Ctrl + Option + H

Besonders nützliche Shortcuts im Alltag

• / (Schrägstrich) – das Blocksuchmenü öffnen. Du gibst den Schrägstrich in einem leeren Block oder nach einem Zeilenumbruch ein und tippst dann den Blocknamen – der schnellste Weg, um neue Blöcke einzufügen.
• Strg/Cmd + Shift + V – Text ohne Formatierung einfügen. Besonders nützlich, wenn du Text aus Word, einem Browser oder einer anderen Quelle kopierst und unerwünschte Formatierungen loswerden willst.
• Strg/Cmd + K – Link einfügen oder die Befehlspalette öffnen. In WordPress 7.0 wurde Strg+K stark ausgebaut: Über die Befehlspalette kannst du von jeder Stelle im Editor aus schnell suchen, navigieren und Aktionen ausführen, ohne Seiten wechseln zu müssen.
• Strg/Cmd + Alt + D – den aktiven Block duplizieren. Spart Zeit, wenn du ähnliche Blöcke mehrfach brauchst.
• Esc – den aktiven Block abwählen oder aus dem Texteingabemodus in den Block-Auswahlmodus wechseln.

Best Practices für mehr Produktivität

• Lerne die häufig genutzten Blöcke gründlich kennen, bevor du seltene erkundest.
• Nutze den Schrägstrich-Befehl statt des Menüs für das Einfügen neuer Blöcke.
• Nutze synchronisierte Muster für alle Inhalte, die website-weit konsistent sein sollen.
• Nutze die Listenansicht bei komplexen Layouts mit vielen verschachtelten Blöcken.
• Speichere regelmäßig – Strg/Cmd + S ist schnell und zur Gewohnheit leicht zu machen.
• Lerne schrittweise: Fünf Shortcuts, die du wirklich nutzt, sind wertvoller als zwanzig, die du kennst aber vergisst.

Wenn du diese Gewohnheiten entwickelst, erstellst du professionelle WordPress-Inhalte schneller, konsistenter und mit weniger Aufwand – egal ob ein einzelner Blogbeitrag oder eine komplexe Unternehmenswebsite.

---

(*) Hinweis: Hinter einigen Links stehen Affiliate-Programme. Für Sie bleibt der Preis exakt derselbe, wir erhalten jedoch eine kleine Provision, die wir direkt in unsere kommenden Recherchen investieren. Vielen Dank, dass Sie unsere Arbeit auf diese Weise unterstützen!

Views: 0