WordPress Editoren im Überblick

Der Gutenberg Editor gehört zu den Block-Editoren. Seit dem Jahr 2018 und ab WordPress Version 5.0 ist er standardmäßig in das CMS integriert – kostenfrei und ohne extra Plugin. Der Gutenberg Editor auf einen Blick:

• Unkompliziert: als Standard ab WordPress 5.0 integriert
• Umfassend: Textbearbeitung und Design in einem Editor
• Übersichtlich: Einteilung der Seite in einzelne Blöcke
• Intuitiv: schnelle Ergebnisse ohne Programmierkenntnisse

Das Hauptmerkmal des Gutenberg Editors ist die Unterteilung einer Seite in einzelne Blöcke. Dazu gehören unter anderem:

• Überschriften und Textfelder
• Bilder, Videos und Audioplayer
• Tabellen und Spalten
• Buttons
• Widgets und spezifische Theme-Elemente, zum Beispiel Beitragsformate wie speziell gekennzeichnete Zitate

Die Block-Funktion macht es einfach, die Inhalte der Seite optisch zu strukturieren und in ein stimmiges Gesamtbild zu bringen: So dient die Gutenberg-Ansicht im Backend als grobe Orientierung für das finale Design.

Gut zu wissen: Wie genau das Layout der Seite im Entwurfs-Modus aussieht, richtet sich nach dem gewählten WordPress Theme. Wer also optische Anpassungen vornehmen will, muss vom Block-Editor über das WordPress Dashboard in den Customizer wechseln: Dort wird die Website im Frontend-Design des Themes angezeigt – inklusive einer detaillierten Werkzeugleiste, um die einzelnen Blöcke zu stylen.

Der Gutenberg Editor von WordPress eignet sich für alle, die Inhalte im CMS ohne großen Aufwand in eine optische Struktur bringen möchten. Im Gegensatz zu einem Page Builder befinden sich die Design-Möglichkeiten allerdings auf einem Basis-Niveau. So sind für individuelle Wünsche weitere Plugins CSS- oder Programmierkenntnisse erforderlich.

Bis WordPress Version 5.0 war der Classic Editor der Standard, um Seiten und Beiträge zu erstellen. Das Backend erinnert an ein typisches Textverarbeitungsprogramm: Wie in einem Word-Dokument lassen sich Überschriften und Absätze an einem Stück schreiben. Die Werkzeugleiste bietet grundlegende Formatierungsmöglichkeiten. Dazu können Bilder und Medien über den Button „Dateien hinzufügen“ im Text platziert werden. Der Classic Editor auf einen Blick:

• Vertraut: Bearbeiten von Inhalten wie mit einem klassischen Textverarbeitungsprogramm
• Basic: Wenig Gestaltungsmöglichkeiten im Hinblick auf das Design
• Verfügbar: einfache Implementierung über kostenloses Plugin
• Schnell: geringer Aufwand beim Erstellen und kurze Ladezeiten

In Sachen Design ist der Classic Editor vollständig vom WordPress Theme abhängig – wer das Layout selbst gestalten möchte, benötigt grundlegendes technisches Verständnis. Deshalb eignet sich der klassische Editor vor allem für schlichte Websites, bei denen das regelmäßige Veröffentlichen von Texten oder Blogeinträgen im Fokus steht. Da der Code der Seite kaum Design-Informationen enthält, ist die Ladezeit der Website sehr kurz. Sie möchten lieber den Classic Editor anstatt des Block-Editors nutzen? Dann gehen Sie wie folgt vor:

1. Klicken Sie in der WordPress Startseite auf „Plugins“ 🡪 „Installieren“.
2. Suchen Sie nach dem „Classic Editor“ und klicken Sie auf „Jetzt installieren“.
3. Aktivieren Sie das Plugin.
4. Kontrollieren Sie unter „Einstellungen“ 🡪 „Schreiben“ den Punkt „Standard-Editor für alle Benutzer“: Hier muss der Classic Editor ausgewählt sein.

Tipp: Mit dem Plugin Advanced Editor Tools (früher: TinyMCE Advanced) lassen sich die Funktionen des Classic Editors erweitern. So können Sie zum Beispiel leichter Tabellen erstellen oder eine „Suchen und Ersetzen“-Funktion nutzen.

Die ersten Page Builder kamen 2012 als Theme-Plugins auf den Markt, um die Design-Optionen des Classic Editors zu erweitern. Heute finden sie vor allem bei optisch anspruchsvollen Seiten Anwendung. Zu den bekanntesten Page Buildern gehören Elementor (kostenfreie Basisversion verfügbar) sowie die kostenpflichtigen Plugins WPBakery und Divi. Page Builder auf einen Blick:

• Flexibel: großes Angebot an Page-Builder-Plugins wie Elementor oder WPBakery
• Direkt: Bearbeitungsmodus mit praktischer Frontend-Ansicht
• Detailliert: zahlreiche Design-Einstellungen möglich mit Feinjustierung in der Seitenleiste
• Bequem: einfache Handhabung der Blöcke per Drag and Drop

Ein Page Builder nutzt ähnlich wie der Gutenberg Editor ein Block-System, um die Inhalte einer Seite anzuordnen. Per Drag and Drop lassen sich Gestaltungs-Elemente direkt einfügen, beispielsweise: Textpassagen, Bilder und Videos.

Gut zu wissen: Das Backend von visuellen Page Buildern entspricht dem Frontend. Jede Änderung im Design wird so direkt beim Editieren der Inhalte sichtbar, was die Gestaltung der Seite erleichtert. Auch Format-Einstellungen für die mobile Ansicht der Seite lassen sich direkt im Editor vornehmen.

Beispiel: In einem Page Builder lässt sich die Anordnung von Text und Bild auf mobilen Endgeräten genauestens regeln. Während Textblock und Foto in der Desktop Ansicht problemlos nebeneinander passen, ist in der mobilen Ansicht aufgrund der geringeren Laufweite eine spezifische Anordnung notwendig. Über den Page Builder können Nutzende einstellen, ob das Bild oberhalb vom Text angezeigt werden soll oder umgekehrt – einige Elemente lassen sich mobil sogar komplett ausblenden.

Page Builder konzentrieren sich auf Punkte wie Layout und Optik und eignen sich für komplexe Landing Pages mit einem Fokus auf Design. Wer mit einem Page Builder arbeiten möchte, sollte im Umgang mit WordPress erste Erfahrungen und ein Gespür für Ästhetik mitbringen. Die vielen gestalterischen Details im Quellcode der Website führen zu einer hohen Anzahl an Skripten. Die Ladezeit der Website kann dadurch negativ beeinflusst werden.