# Landingpage erstellen in WordPress: Ein Praxisleitfaden

URL: https://noonwp.com/de/journal/landingpage-gestalten-wordpress
Type: blog
Locale: de
Published: 2026-10-27
Updated: 2026-10-28

---

> Praxisleitfaden für eine Landingpage in WordPress: eine Handlung, eine Graustufen-Skizze, ein geprüfter Hero, ehrlicher Beleg, schnelles Laden und ein RTL-sicheres Layout.

Landingpage erstellen heißt zuerst, eine Entscheidung zu treffen: Welche einzige Handlung soll der Besucher ausführen? Alles Weitere, vom Aufbau des Hero-Bereichs bis zur Farbe des Buttons, ergibt sich daraus. Skizzieren Sie die Abschnitte in Graustufen, schreiben Sie die Überschrift, bevor Sie einen Block anfassen, und streichen Sie alles, was dieser einen Handlung nicht dient. Der Rest dieses Folios zeigt, wie Sie das im Site-Editor von WordPress umsetzen und wo die Grenzen liegen.

## Warum braucht eine Landingpage ein anderes Briefing als die Startseite?

Eine Startseite bedient viele Besucher mit vielen Zielen. Eine Landingpage bedient einen Besucher mit einem einzigen Ziel, der meist über eine Anzeige, einen Newsletter oder ein Suchergebnis kommt. Dieser Unterschied verändert den gesamten Aufbau.

Die Navigation wird kleiner oder verschwindet ganz. Sekundäre Links fallen weg, und der Footer verliert seine Sitemap. In einem Block-Theme heißt das: eine eigene Vorlage, keine versteckte Menüleiste auf einer gemeinsam genutzten Vorlage. Legen Sie im Site-Editor eine leere Vorlage an, entfernen Sie den Header-Template-Part und behalten Sie nur das Logo und die Handlungsaufforderung.

Verzichten Sie außerdem darauf, den Hero-Bereich Ihrer Startseite wiederzuverwenden. Bei einem Kundenprojekt im vergangenen Frühjahr hat eine freiberufliche Kollegin den Cover-Block der Startseite für eine Webinar-Seite übernommen und das volle Menü stehen lassen. Die Besucher sind in den Blog abgewandert. Das Entfernen von sieben Menüpunkten war die günstigste Korrektur des ganzen Quartals.

## Was sollten Sie vor dem Editor skizzieren?

Zuerst auf Papier. Zeichnen Sie fünf oder sechs Rechtecke untereinander und benennen Sie jedes davon: Hero, Problem, Lösung, Beleg, Angebotsdetails, finale Handlungsaufforderung. Die meisten veröffentlichten Leitfäden, von HubSpot bis Unbounce, kommen auf eine ähnliche Abfolge, und sie hält, weil sie dem Denkweg eines skeptischen Lesers folgt.

![Hände skizzieren ein Landingpage-Layout in Graustufen auf kariertem Papier](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/0c95b2-i1.webp)

Arbeiten Sie in Graustufen. Farbe kaschiert eine schwache Hierarchie, eine graue Skizze legt sie offen. Wenn Sie bei Graustufen nicht erkennen, welches Rechteck das wichtigste ist, erkennt der Besucher es ebenfalls nicht.

Schreiben Sie danach die Worte: Überschrift, ein unterstützender Satz, die Beschriftung des Buttons. Entwerfen Sie das Layout mit echten Texten, denn ein Layout mit Blindtext bricht immer dann, wenn die echte Überschrift drei Zeilen braucht. Bei arabischen oder hebräischen Texten, die oft länger ausfallen als der lateinische Originalsatz, ist das keine Option, sondern Pflicht.

## Wie baut man einen Hero-Bereich, der zum Weiterlesen zwingt?

Der Hero-Bereich hat vier Aufgaben: das Ergebnis nennen, sagen, für wen die Seite ist, eine einzige Aktion anbieten und etwas zeigen, das die Behauptung glaubwürdig macht. Eine Überschrift, die ein Ergebnis benennt („Eine Kundenseite an einem Nachmittag live schalten“), schlägt eine Überschrift, die nur ein Feature benennt („Ein flexibler Seitenbaukasten“).

Im Gutenberg-Editor bauen Sie den Hero aus einem Cover-Block, der eine Gruppe enthält. So begrenzen Sie die Inhaltsbreite unabhängig vom Hintergrund. Stellen Sie die Gruppe auf eine Inhaltsbreite von etwa 640 bis 720 Pixeln ein, und fügen Sie einen Überschriften-Block, einen Absatz und genau einen Buttons-Block mit einem einzigen Button hinzu. Ein Button. Zwei Buttons bedeuten zwei Entscheidungen, und die zweite ist meist die, die angeklickt wird.

![Laptop mit einem Landingpage-Hero und einem einzigen orangefarbenen Button](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/60199e-i2.webp)

Achten Sie auf ein ehrliches Begleitbild. Ein echter Screenshot des Produkts schlägt ein dekoratives Foto. Wenn Sie nur abstrakte Motive haben, setzen Sie sie dezenter ein und lassen Sie die Überschrift die Seite tragen. Verzichten Sie im Hero auf Karussells: Sie verstecken die Botschaft auf Folien, die die meisten Besucher nie sehen.

Randbemerkung: Dieses Layout funktioniert ab WordPress 6.5, wo sich Cover-Block und Gruppen-Einschränkungen im Site-Editor vorhersehbar verhalten.

## Wie viel Beleg braucht die Seite, und wo gehört er hin?

Der Beleg beantwortet die Frage, die der Hero aufwirft: Kann ich das glauben? Platzieren Sie ihn direkt unter dem Hero und nicht ganz unten, wo nur der entschlossene Leser ankommt.

Guter Beleg ist konkret. Ein namentlich genannter Kunde mit einem gemessenen Ergebnis ist mehr wert als fünf allgemeine Sterne. Eine Logoleiste hilft, wenn die Logos für Ihre Zielgruppe erkennbar sind, und ein einzelnes Zitat mit echtem Namen und echter Rolle schlägt einen Slider mit anonymen Stimmen.

Seien Sie vorsichtig mit Zahlen, die Sie nicht belegen können. Manche populären Leitfäden nennen Konversionsraten, die kein Analysetool so messen würde. Wenn Sie eine Zahl nennen, sagen Sie, woher sie stammt und wann sie gemessen wurde, oder lassen Sie sie weg. Ihr eigenes Vorher-nachher auf Ihrer Seite ist glaubwürdiger als jede geliehene Statistik.

## Welche Layoutregeln zählen auf dem Smartphone am meisten?

Ein großer Teil des Traffics aus Anzeigen und sozialen Netzwerken landet auf dem Telefon. Gestalten Sie deshalb zuerst die mobile Ansicht und erweitern Sie sie danach. Nutzen Sie eine einzige Spalte, halten Sie die Zeilenlänge kurz und machen Sie die Handlungsaufforderung mit dem Daumen erreichbar.

![Smartphone mit einer einspaltigen mobilen Landingpage und großem Button](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/eee983-i3.webp)

Drei Regeln verhindern den größten Schaden. Tippflächen sollten mindestens 24 x 24 CSS-Pixel groß sein, das ist das Minimum der WCAG 2.2 auf Stufe AA, für den Hauptbutton besser deutlich mehr. Der Fließtext muss ohne Zoomen lesbar sein. Und wiederholen Sie die Handlungsaufforderung nach dem Belegabschnitt, damit niemand nach oben scrollen muss, um sie zu finden.

Im Block-Theme regeln Sie den Abstand über die Abstandsskala in der theme.json und nicht über individuelles Padding in jedem Block. Die [Referenz zur theme.json in der WordPress-Dokumentation](https://developer.wordpress.org/themes/advanced-topics/theme-json/) beschreibt die Presets. Wer sie nutzt, hält den Rhythmus auf Mobil und Desktop konsistent, ohne ein Stylesheet voller Überschreibungen.

## Was hat Geschwindigkeit mit Design zu tun?

Alles. Eine Landingpage, die exzellent aussieht und langsam lädt, verliert den Besucher, bevor die Überschrift erscheint. Google bewertet einen Largest Contentful Paint von 2,5 Sekunden oder weniger als gut, und auf einer Landingpage ist das größte Element fast immer das Hero-Bild oder die Überschrift. Wie dieser Wert gemessen wird, erklärt die [Erläuterung zu LCP bei web.dev](https://web.dev/articles/lcp).

Daraus folgen praktische Konsequenzen. Komprimieren Sie das Hero-Bild und liefern Sie es als WebP aus. Laden Sie das Hero-Bild nicht verzögert, denn es ist das Element, das zuerst erscheinen soll. Beschränken Sie Webfonts auf eine Familie, idealerweise eine variable Schrift, selbst gehostet mit einer sinnvollen Ersatzschrift. Entfernen Sie Slider, automatisch startende Videos und Chat-Widgets von Drittanbietern aus dem ersten Bildschirm.

Hier verlieren WordPress-Landingpages oft gegen gehostete Baukästen. Eine Seite aus einem schweren Mehrzweck-Theme kann Hunderte Kilobyte ungenutztes CSS ausliefern. Ein schlankes Block-Theme mit eigener Vorlage liefert deutlich weniger, und dieser Unterschied zeigt sich direkt im LCP.

## Wie gehen Sie mit Kontrast, Barrierefreiheit und RTL um?

Barrierefreiheit ist eine Gestaltungsvorgabe und kein Audit am Ende. Das Erfolgskriterium der WCAG 2.2 für Kontrast verlangt mindestens 4,5:1 zwischen normalem Text und Hintergrund. Die [Erläuterung des Kriteriums zum minimalen Kontrast beim W3C](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) zeigt, wie Sie das prüfen. Eine helle graue Bildunterschrift auf weißer Karte fällt durch, und ebenso viele pastellfarbene Buttons mit weißer Beschriftung.

Prüfen Sie zuerst den Button. Er ist das Element, für das die ganze Seite existiert, und oft der Bereich mit dem schwächsten Kontrast, weil er nach der Markenfarbe und nicht nach Lesbarkeit gewählt wurde.

![Zwei Monitore mit einem Layout von links nach rechts und seiner gespiegelten Version](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-10/58b0a1-i4.webp)

Bei zweisprachigen Seiten oder bei arabischen und hebräischen Zielgruppen bedeutet Spiegeln mehr, als die Seite umzudrehen. Richtungsangaben wie Pfeile auf dem Button müssen mitgedreht werden. Abstände sollten logische Eigenschaften nutzen, also Anfang und Ende statt links und rechts. Schriften müssen in der Größe der Überschrift getestet werden, denn viele lateinische Display-Schriften haben kein arabisches Pendant, und die Ersatzschrift verändert das visuelle Gewicht.

Testen Sie die RTL-Ansicht auf einem echten Gerät mit echten Texten. Eine gespiegelte Seite, die mit Platzhaltertext gut aussieht, kann brechen, sobald die echte arabische Überschrift anders umbricht.

## Welche Werkzeuge taugen für eine WordPress-Landingpage, und wie testen Sie danach?

Sie haben drei ehrliche Optionen. Sie bauen die Seite nativ im Site-Editor mit Mustern. Das ergibt die schlankste Seite und die meiste Kontrolle, verlangt aber am meisten von Ihnen. Oder Sie nutzen einen visuellen Baukasten wie Divi, der die Gestaltung beschleunigt und dafür etwas Seitengewicht kostet. Oder Sie lassen einen KI-Baukasten einen ersten Entwurf erstellen und bauen die wichtigen Teile danach von Hand neu.

Misstrauen Sie jedem Werkzeug, das aus einem Prompt eine fertige, konvertierende Seite verspricht. Die generierte Struktur ist ein brauchbarer Ausgangspunkt für die Reihenfolge der Abschnitte und die Platzhaltertexte. Als endgültiges Design taugt sie selten, und der Markup muss oft bereinigt werden, bevor ein Kunde ihn pflegen kann.

Liegt die Seite außerhalb von WordPress, ist ein gehosteter Baukasten wie Framer oder Webflow eine legitime Wahl für eine Kampagne, die sechs Wochen läuft und dann verschwindet. Entscheiden Sie nach der Lebensdauer der Seite und danach, wer sie bearbeitet, nicht nach der Demo.

Der Start ist der Beginn der Messung. Richten Sie ein Konversionsereignis ein, verbinden Sie es mit Ihrer Analyse und prüfen Sie, dass Formularabsendungen tatsächlich erfasst werden, bevor Sie Traffic schicken. Eine Seite, die ihre Ergebnisse nicht melden kann, lässt sich nicht verbessern.

Ändern Sie jeweils nur eine Sache. Zuerst die Überschrift, weil sie die größte Wirkung hat, dann die Beschriftung des Buttons, dann die Reihenfolge der Belege. Lassen Sie jeden Test lange genug laufen, um eine aussagekräftige Zahl an Konversionen zu sammeln, und brechen Sie nicht beim ersten vielversprechenden Tag ab. Bei kleiner Reichweite kann ein Test Wochen dauern, und das ist in Ordnung. Geduld schlägt einen falschen Gewinner.

Zwei Aufgaben werden leicht vergessen. Existiert die Seite nur für bezahlte Kampagnen, entscheiden Sie, ob sie indexiert werden soll, denn eine dünne Doppelung Ihres Angebots kann mit Ihrer Hauptseite konkurrieren. Und sammelt das Formular personenbezogene Daten, ergänzen Sie vor dem Start den Einwilligungstext, den Ihre Region verlangt, nicht erst nach der ersten Beschwerde.

Öffnen Sie diese Woche eine leere Vorlage im Site-Editor und bauen Sie nur den Hero, mit echten Texten und einem einzigen Button. Prüfen Sie ihn auf dem Telefon und messen Sie den LCP. Speichern Sie daraus ein Muster, damit die nächste Kundenseite mit einem geprüften Abschnitt beginnt statt mit einer leeren Fläche.

## FAQ

### Wie lang sollte eine Landingpage sein?

So lang, wie es dauert, die Zweifel des Besuchers zu beantworten, und nicht länger. Ein einfaches Angebot kommt mit Hero, Beleg und Button in unter 600 Wörtern aus. Ein teureres oder unbekanntes Angebot braucht mehr Erklärung, wobei die Handlungsaufforderung nach jedem großen Abschnitt wiederholt wird.

### Welche Bestandteile braucht eine Landingpage unbedingt?

Eine Überschrift, die das Ergebnis nennt, eine unterstützende Zeile, die sagt, für wen die Seite ist, eine einzige Handlungsaufforderung, einen Beleg wie einen namentlich genannten Kundenbericht oder ein gemessenes Ergebnis und eine kurze Erklärung des Angebots. Navigation und sekundäre Links sollten entfernt oder reduziert werden.

### Lässt sich in WordPress eine gute Landingpage ohne Seitenbaukasten gestalten?

Ja. Ein Block-Theme mit eigener Vorlage, ein Cover-Block als Hero und Muster für wiederkehrende Abschnitte ergeben eine schnelle, wartbare Seite. Ein visueller Baukasten beschleunigt die Gestaltung, liefert aber meist mehr CSS und Markup aus.

### Sollte eine Landingpage ein Navigationsmenü haben?

Meist nicht. Ein Menü bietet Ausgänge, die mit Ihrem einzigen Ziel konkurrieren. Behalten Sie Logo und die wichtigste Handlungsaufforderung und verschieben Sie rechtliche Links in einen schlichten Footer.

### Wie schnell sollte eine Landingpage laden?

Richten Sie einen Largest Contentful Paint von 2,5 Sekunden oder weniger an, was Google als gut einstuft. Komprimieren und laden Sie das Hero-Bild vorab, verzögern Sie es nicht, und halten Sie den ersten Bildschirm frei von Slidern und Widgets von Drittanbietern.

### Wie gestaltet man eine Landingpage für Sprachen, die von rechts nach links geschrieben werden?

Spiegeln Sie das Layout mit logischen CSS-Eigenschaften, drehen Sie richtungsabhängige Symbole um, testen Sie Schriften in Überschriftengröße und prüfen Sie die Seite mit echten arabischen oder hebräischen Texten auf dem Telefon. Textlänge und Umbruch unterscheiden sich von der lateinischen Fassung.