Viele WordPress-Nutzer installieren sofort einen Page Builder — dabei bietet der native Gutenberg-Editor seit Version 5.0 alles, was für professionelle Seiten nötig ist. In diesem Tutorial zeigen wir dir, wie du ohne zusätzliche Plugins eine vollständige Seite erstellst. Und wie KI Tools wie anipage.io diesen Prozess auf wenige Minuten reduzieren.
Was ist der Gutenberg-Editor?
Gutenberg ist der seit WordPress 5.0 (Dezember 2018) integrierte Block-Editor und löste den klassischen TinyMCE-Editor ab. Das Grundkonzept ist einfach: Jedes Element einer Seite — ein Absatz, ein Bild, eine Überschrift, eine Schaltfläche — ist ein eigenständiger Block. Diese Blöcke lassen sich frei anordnen, duplizieren und einzeln gestalten. Gutenberg speichert Inhalte als HTML-Kommentare mit eingebetteten Attributen, was eine saubere, portierbare Struktur ergibt. Seit seiner Einführung hat Gutenberg enorme Fortschritte gemacht: Full Site Editing (FSE), Site Editor, Block Patterns und globale Stile sind heute fester Bestandteil des Editors. Für viele Anwendungsfälle ist kein zusätzlicher Page Builder mehr nötig.
Welche Blöcke brauchst du für eine Landing Page?
Hero-Bereich (Cover-Block)
Der Cover-Block ist der wichtigste Block für Hero-Sektionen. Er erlaubt ein Hintergrundbild oder eine Hintergrundfarbe mit überlagerten Textelementen. Du kannst Mindesthöhe, Ausrichtung und Overlayfarbe direkt im Block-Inspector einstellen. Kombiniere den Cover-Block mit einem Heading-Block (H1) und einem Paragraph-Block für Subline sowie einem Buttons-Block für den CTA.
Feature-Abschnitte (Columns-Block)
Der Columns-Block unterteilt den Content in 2 bis 6 gleichmäßige oder individuell breite Spalten. Für Feature-Abschnitte empfiehlt sich ein 3-Spalten-Layout, in dem jede Spalte ein Icon (Image-Block), eine Überschrift (Heading H3) und einen kurzen Text (Paragraph) enthält. Nutze Gruppen-Blöcke innerhalb der Spalten für konsistente Innenabstände. Mit dem Group-Block als Container kannst du Hintergrundfarbe und Padding für den gesamten Abschnitt setzen.
Call-to-Action (Buttons-Block)
Der Buttons-Block erlaubt mehrere Buttons nebeneinander mit individueller Farbe, Rahmenstil und Ausrichtung. Für einen klassischen CTA-Bereich kombiniere einen Heading-Block, einen Paragraph-Block und einen Buttons-Block innerhalb eines Group-Blocks mit dunkler Hintergrundfarbe. Gutenberg bietet seit Version 6.x auch Button-Varianten (gefüllt, umrandet, ghost) direkt in den Block-Einstellungen.
Schritt-für-Schritt: Seite mit Gutenberg erstellen
Beginne mit einer neuen leeren Seite unter Seiten → Neu hinzufügen. Stelle sicher, dass das Template auf "Blanko" oder "Ohne Kopf-/Fußzeile" gesetzt ist, um maximale Gestaltungsfreiheit zu haben. Füge als ersten Block einen Cover-Block ein und lade dein Hero-Bild hoch. Klicke auf das Plus-Symbol, um innerhalb des Cover-Blocks einen Heading-Block (H1) und einen Paragraph-Block hinzuzufügen. Für den Features-Abschnitt füge einen Group-Block außerhalb des Cover-Blocks ein, setze Hintergrundfarbe und Padding, und platziere darin einen Columns-Block mit drei Spalten. Wiederhole dieses Muster für alle Sektionen: Testimonials (Quote-Block oder Table), Preise (manuell mit Spalten), FAQ (Details-Block ab WP 6.5). Unter Auftreten → Globale Stile definierst du Primärfarbe, Schriftfamilien und Basisabstände für die gesamte Seite. Speichere regelmäßig und nutze die Vorschau-Funktion, um das Layout auf verschiedenen Bildschirmgrößen zu prüfen.
Grenzen des nativen Editors
Gutenberg ist für Standard-Layouts ideal, stößt aber bei bestimmten Anforderungen an Grenzen. Komplexe Animationen (Scroll-Trigger, Parallax, Entrance-Animationen) sind nativ nicht verfügbar — dafür braucht man zusätzliche Plugins oder Custom CSS. Spezielle Widgets wie Countdown-Timer, Flip-Cards oder interaktive Karten fehlen im Kern-Editor. Das Styling ist zwar flexibel, aber weniger visuell als in Elementor oder Divi — wer kein Gefühl für CSS-Werte hat, findet einen dedizierten Page Builder eventuell intuitiver. Außerdem fehlt Gutenberg ein vollständiger Responsive-Editor: Du kannst Mobile-Breakpoints nicht direkt im Editor steuern, sondern nur über CSS-Klassen oder Theme-Einstellungen. Für Agenturen, die sehr individuelle Designs umsetzen, bleibt ein Page Builder oft die praktischere Wahl.
Wie KI die Gutenberg-Erstellung automatisiert
anipage.io generiert vollständiges Gutenberg-Block-Markup direkt aus einer Textbeschreibung. Du gibst an, was auf der Seite stehen soll — Produkt, Zielgruppe, gewünschte Sektionen — und die KI produziert ein fertiges WordPress-Importpaket (ZIP-Datei). Diese ZIP-Datei importierst du unter Werkzeuge → Importieren → WordPress direkt in deine Installation. Alle Blöcke, Farben, Texte und Bilder (via GPT Image generiert) sind sofort vorhanden. Der Prozess dauert weniger als 5 Minuten gegenüber mehreren Stunden beim manuellen Aufbau. Besonders nützlich: anipage.io erzeugt semantisch korrektes Gutenberg-Markup mit sauberem H1/H2/H3-Gerüst und responsiver Spaltenstruktur — direkt SEO-konform ohne Nacharbeit.