Landingpage-Aufbau-Simulator: Hero, Bild und CTA visuell planen

Was Sie mit dem Simulator erkennen können

• 1
  Desktop und Smartphone vergleichen Sehen Sie denselben Startbereich in zwei unterschiedlich breiten, schematischen Ansichten.
• 2
  Die Reihenfolge der Inhalte prüfen Vergleichen Sie, ob Überschrift, Nutzenargument, Bildfläche und CTA in Ihrer gewählten Anordnung sinnvoll aufeinander folgen.
• 3
  Den ersten sichtbaren Bereich einschätzen Eine Markierung zeigt, wo das beispielhafte Sichtfeld ohne Scrollen endet. Sie ist ein Planungsmaßstab und keine feste Grenze für alle Geräte.

So verwenden Sie den Landingpage-Startbereich-Simulator

1. 1
   Layout wählen Vergleichen Sie einen geteilten Hero-Bereich, eine zentrierte Anordnung und Text auf einer Bildfläche.
2. 2
   CTA-Position festlegen Platzieren Sie die Handlungsaufforderung direkt nach dem Nutzenargument oder erst nach Bildfläche und Vertrauenssignal.
3. 3
   Kurze Texte ausprobieren Ändern Sie auf Wunsch Überschrift, Nutzenargument und CTA-Text. Vergleichen Sie anschließend beide Vorschauen und die Auswertung.

Startbereich gestalten

Die vorausgefüllten Texte bilden eine fiktive B2B-Landingpage ab. Sie können sofort mit dem Beispiel beginnen; es sind keine Datei-Uploads oder Zugangsdaten erforderlich.

Mit aktiviertem JavaScript passen sich die Vorschauen beim Ändern der Auswahl oder Texte an. Ohne JavaScript bleiben die folgenden Beispielansichten, Erklärungen und die Beispielauswertung lesbar.

Beispielvorschau: ein Hero-Bereich auf zwei Bildschirmgrößen

Die folgenden Ansichten zeigen zunächst „Text links, Bild rechts“ mit einem CTA direkt nach dem Nutzenargument. Die gestrichelte Markierung steht für die beispielhafte Grenze des ersten sichtbaren Bereichs. Browserleisten, Zoom, Schriftgrößen und tatsächliche Gerätehöhen können diese Grenze verändern.

Die Vorschau verwendet eine abstrakte Bildfläche und eine Muster-Landingpage. Sie stellt keine echte Website, kein bestimmtes Smartphone und keine garantierte Darstellung in einem Browser dar.

Auswertung der Beispielkonfiguration

Diese statische Beispielauswertung bezieht sich auf das vorausgewählte geteilte Layout und den CTA direkt nach dem Nutzenargument. Nach einer Änderung der Eingaben kann die Auswertung im Browser angepasst werden.

• ✓
  Desktop: Kernaussage und CTA Im Ausgangsbeispiel stehen Überschrift, Nutzenargument und „Beratung anfragen“ im Textbereich vor der Bildfläche und innerhalb der dargestellten Erstansicht.
• ✓
  Smartphone: Reihenfolge der Inhalte Im Ausgangsbeispiel folgt der CTA unmittelbar auf das Nutzenargument. Die Bildfläche steht darunter, sodass Besucher die Handlung vor der Grafik sehen können.
• i
  Einordnung der Faltlinie Die Markierung zeigt nur das Sichtfeld der beiden Musteransichten. Auf echten Geräten können verfügbare Höhe, Schrift und Browserleisten abweichen.

Wie Sie den Startbereich beurteilen sollten

„Above the Fold“ bezeichnet den Bereich, den jemand vor dem ersten Scrollen sieht. Es gibt dafür keine einheitliche Pixelhöhe. Auf Smartphones können eine längere Überschrift, große Navigation oder eine vorangestellte Bildfläche den CTA nach unten verschieben.

Ein CTA muss nicht auf jeder Landingpage zwingend vor der Faltlinie stehen. Entscheidend ist, dass Besucher das Angebot verstehen und einen passenden nächsten Schritt finden. Der Simulator macht Platz und Reihenfolge sichtbar; er kann weder Klickverhalten noch Conversion-Raten vorhersagen.

Bei einem Layout mit Text auf einer Bildfläche sollten Sie einen echten Entwurf außerdem auf Textkontrast und Lesbarkeit prüfen. Dafür können Sie den Markenfarben- und CTA-Kontrast-Checker verwenden.

Häufige Fragen zum Landingpage-Startbereich