Landingpage-Design
Landingpage-Design heißt, einer Seite genau eine Aufgabe zu geben: eine Überschrift, die das Versprechen der Anzeige aufgreift, Belege neben einem einzigen Button und ein kurzes Formular, das auf dem Smartphone schnell lädt. Unten finden Sie die Bausteine, acht Regeln, drei Beispiele und einen kostenlosen Weg, eine solche Seite zu bauen.
Ratgeber geprüft am 13. Oktober 2026 · Mobirise-Team
Der Aufbau einer Landingpage
Eine Landingpage ist die Seite, auf der jemand aus einer bestimmten Anzeige, E-Mail, einem Beitrag oder einem QR-Code ankommt, und sie soll genau eine Handlung auslösen. Sechs Bausteine tragen sie, meist in dieser Reihenfolge.
Eine Überschrift, die das Versprechen aufgreift
Übernehmen Sie die Worte der Anzeige oder Nachricht, über die der Besucher gekommen ist. Bietet die Anzeige ein kostenloses Angebot für eine Dachreparatur, sagt die Überschrift genau das – nicht Ihr Firmenmotto.
Eine Zeile dazu, für wen es gedacht ist
Eine Unterüberschrift aus einem oder zwei Sätzen: für wen das Angebot passt, was die Leute bekommen und wie schnell. Substantive und Zahlen leisten mehr als Adjektive; „ein Festpreis bis morgen“ sagt dem Leser mehr als „schneller, freundlicher Service“.
Ein Bild von der echten Sache
Das Produkt, der Raum, das Team oder das Ergebnis. Gestellte Stockfotos machen die Seite nur schwerer, nicht informativer. Prüfen Sie, wie das Bild auf einem schmalen Bildschirm zugeschnitten wird.
Ein einziger Call-to-Action
Ein einzelner Button mit einem Verb und einem Ergebnis, in der einzigen kräftigen Farbe der Seite. Wiederholen Sie ihn weiter unten für alle, die bis zum Ende lesen, fügen Sie aber nie ein zweites, konkurrierendes Ziel hinzu.
Belege direkt an der Entscheidung
Bewertungen mit Namen, Bewertungen samt Anzahl, Kundenlogos, die Sie verwenden dürfen, Zertifikate. Platzieren Sie sie neben dem Button, wo Zweifel entstehen, statt als Haufen am Seitenende.
Erst Antworten, dann das Formular
Wie es funktioniert, was es kostet und was nach dem Klick passiert. Danach das Formular: nur die Felder, die der nächste Schritt braucht, und ein Satz dazu, was der Besucher bekommt und wann.
Bewährte Regeln für das Landingpage-Design
Jede lässt sich auf der fertigen Seite in ein bis zwei Minuten prüfen. Wo eine Regel eine Zahl nennt, stammt sie aus einem benannten öffentlichen Standard.
Entfernen Sie die Ausgänge
Verzichten Sie auf das Hauptmenü, Blog-Links und Social-Media-Symbole. Jeder zusätzliche Link ist ein Ausweg vor der Handlung. Ein Logo, eine Kontaktzeile und rechtliche Links im Footer genügen.
Bleiben Sie bei der Quelle
Behalten Sie Wortlaut, Angebot und Optik der Anzeige bei. Google Ads wertet die Landingpage-Erfahrung, also wie relevant und nützlich die Seite für alle ist, die geklickt haben, als einen von drei Bestandteilen des Qualitätsfaktors.
Bringen Sie das Wesentliche auf einen Bildschirm
Auf dem Smartphone sollten Überschrift, Unterüberschrift und Button ohne Scrollen sichtbar sein. Schiebt das Bild den Button nach unten, verkleinern Sie das Bild, nicht den Text.
Nennen Sie das Ergebnis auf dem Button
„Angebot anfordern“, „Besuch buchen“, „Preisliste zusenden“. Beschriftungen wie „Absenden“ oder „Mehr erfahren“ beschreiben den Klick statt dessen, was der Besucher bekommt.
Fragen Sie weniger ab
Für den Erstkontakt reichen meist ein Name plus E-Mail-Adresse oder Telefonnummer. Jedes weitere Feld braucht einen Grund, den Sie erklären könnten; Qualifizierungsfragen können bis zum Gespräch warten.
Erfüllen Sie die Geschwindigkeitswerte von Google
Core Web Vitals stufen eine Seite als gut ein, wenn ihr größtes Element innerhalb von 2,5 Sekunden angezeigt wird, eine Eingabe innerhalb von 200 ms eine Reaktion erhält und die Layoutverschiebung bei höchstens 0,1 liegt, jeweils im 75. Perzentil der Besuche.
Bestehen Sie die Grundlagen der Barrierefreiheit
WCAG 2.2 verlangt auf Stufe AA einen Textkontrast von mindestens 4,5:1 (bei großer Schrift 3:1) und Tippziele von mindestens 24 × 24 CSS-Pixeln. Geben Sie jedem Formularfeld eine sichtbare Beschriftung, nicht nur einen Platzhaltertext.
Testen Sie eine Änderung nach der anderen
Ein A/B-Test vergleicht zwei Versionen, die sich in einem Punkt unterscheiden, und braucht pro Version genug Besuche und Conversions, um den Zufall auszuschließen. Bei einer kleinen Kampagne lernt man oft mehr, wenn man ein paar Menschen beim Benutzen der Seite beobachtet.
Landingpage-Design-Beispiele aus drei Mobirise-Themes
Die drei Desktop-Screenshots unter der Überschrift dieses Ratgebers zeigen den ersten Bildschirm von Mobirise-Theme-Demos: eine Ehrenamtsorganisation (HumanityM5), eine Marke für Nahrungsergänzungsmittel (EvolveM5) und eine Klinik (SpecialtyM5). Es sind Demos, keine Kampagnenseiten; deshalb hier, was der erste Bildschirm jeweils gut macht und was Sie ändern sollten, bevor Sie für Traffic bezahlen.
Ehrenamtsorganisation
Alles ist zentriert: eine große Überschrift, ein Satz über das Anliegen und ein dunkler Button auf einem verblassten Foto ausgestreckter Hände, das die Schrift lesbar lässt. Für eine Kampagne zur Gewinnung von Freiwilligen ersetzen Sie die Beschriftung „About Organization“ durch „Jetzt ehrenamtlich mitmachen“ und nennen die nächste Veranstaltung.
Marke für Nahrungsergänzungsmittel
Eine Nahaufnahme grüner Blätter über die volle Breite stimmt ein, bevor jemand ein Wort liest. Der Produktname steht in sehr großer weißer Schrift, dazu unten links eine kurze Beschreibung und unten rechts ein Button „About supplement“. Für eine Anzeige gehört der Nutzen in die Überschrift statt der Kategorie, und in der Nähe des Buttons sollten eine Bewertung oder ein Zertifikat stehen.
Klinik
Ein geteilter Hero-Bereich: links eine Serifen-Überschrift und drei Zeilen über erfahrene Ärzte, Diagnostik und patientenzentrierte Betreuung, rechts das Foto eines hellen Klinik-Innenraums. Ein echter Raum schafft mehr Vertrauen als eine Illustration. Für eine Buchungskampagne sollte der Hauptbutton „Termin vereinbaren“ lauten, mit der Telefonnummer daneben.
Was alle drei ändern würden
Jede Demo hat ein vollständiges Menü (Home, About, Events oder Pricing), wie es sich für eine normale Website gehört. Für eine Kampagne würden Sie es löschen, eine Handlung behalten und weiter unten Belege und ein kurzes Formular ergänzen. Da jede Seite ein Stapel aus Blöcken ist, ist das eine Bearbeitung, kein Redesign.
So bauen Sie eine Landingpage in Mobirise
Ein Editor baut Landingpages und komplette Websites, im Browser oder in der heruntergeladenen App. Vier Schritte führen eine Seite zu einer Live-Adresse.
Einen ersten Entwurf holen
Sagen Sie der KI in ein bis zwei Zeilen in Ihrer eigenen Sprache, was Sie anbieten und wen Sie ansprechen, oder geben Sie ihr stattdessen eine gezeichnete Skizze oder einen Screenshot. Der KI-Website-Generator liefert vier Designs mit Texten und Bildern, meist in unter einer Minute; Regenerate bietet weitere Varianten, ohne einen Versuch zu verbrauchen. Oder öffnen Sie ein Theme und fügen Blöcke von Hand hinzu.
Auf ein Ziel kürzen
Bringen Sie Blöcke per Drag-and-Drop in die richtige Reihenfolge, löschen Sie die, die der Handlung nicht dienen, und lassen Sie das Menü weg. Mit Clone Block wiederholen Sie den Call-to-Action weiter unten, und über die H-Tag-Auswahl jedes Titels sorgen Sie dafür, dass die Seite nur eine H1 hat. Texte und Bilder bearbeiten Sie direkt an Ort und Stelle; die Parameter jedes Blocks steuern Abstände, Hintergrund, Spalten und sichtbare Elemente.
Formular und Extras hinzufügen
Form Builder erstellt das Lead-Formular, Popup Builder fügt ein Popup hinzu, und Chat Button öffnet ein Gespräch in WhatsApp, Telegram, Messenger und anderen Apps. Alle drei gehören zu KIT, BASE und GROW, den kostenpflichtigen Plänen.
Auf dem Smartphone prüfen, dann veröffentlichen
Sehen Sie sich die Vorschau in Smartphone-, Tablet- und Desktop-Breite an; Bilder werden automatisch zu WebP. Veröffentlichen Sie auf einer mobirisesite.com-Adresse mit HTTPS oder auf einer eigenen Domain (Pläne BASE und GROW). In jedem Plan, auch in FREE, kann die Desktop-App die Seite außerdem per FTP oder FTPES hochladen, auf GitHub Pages veröffentlichen oder in einen lokalen Ordner schreiben.
Mobirise hat kein integriertes A/B-Testing. Um zwei Versionen zu vergleichen, veröffentlichen Sie jede unter einer eigenen Adresse, schicken die Hälfte Ihrer Anzeigen an jede und vergleichen die Ergebnisse in Ihrem Werbekonto oder in Ihrer Webanalyse. Das Bearbeiten funktioniert auch ohne Verbindung in der Offline-Desktop-App; Veröffentlichen und KI brauchen Internet.
Welcher Landingpage-Baukasten zur Aufgabe passt
Spezialisierte Landingpage-Plattformen sind auf Tests und Anzeigen-Traffic ausgelegt. Allgemeine Website-Baukästen kosten weniger und lassen eine Seite zu einer Website wachsen. Unsere Empfehlungen, auch dort, wo wir uns selbst nicht wählen würden:
- Viele Varianten bei bezahltem Traffic
- Unbounce oder Instapage. Beide bieten A/B-Tests in ihren mittleren Plänen; Instapage testet serverseitig und bietet Personalisierung.
- A/B-Tests mit kleinerem Budget
- Leadpages, wo das Testen im Plan Grow beginnt.
- Eine einfache Seite für sehr wenig Geld
- Carrd: ein kostenloser Plan und kostenpflichtige Pläne mit Jahrespreis.
- Eine kostenlose Seite, die Sie als Dateien behalten
- Mobirise: Die Desktop-App kostet nichts, exportiert HTML und veröffentlicht auf jedem Hosting.
- Ein KI-Design, bevor Sie zahlen
- 8B AI: Das Gestalten kostet nichts, für die Veröffentlichung braucht es den Plan Pro.
- Eine Seite, die zur kompletten Website wird
- Mobirise oder ein anderer Website-Baukasten, denn spätere Seiten liegen im selben Projekt.
- Wo Mobirise Schwächen hat
- Kein integriertes A/B-Testing; Formulare und Popups gibt es nur mit kostenpflichtigen Erweiterungen; kein eigenes Layout für Smartphones; kostenlose Websites tragen das Mobirise-Branding.
Sechs Landingpage-Baukästen im Vergleich
Mobirise verliert in der Zeile A/B-Testing; die spezialisierten Plattformen verlieren beim Behalten Ihrer Dateien und bei der Offline-Arbeit. Achten Sie in der Preiszeile auf die Abrechnungsbasis: monatlich oder jährlich.
| Mobirise | Unbounce | Leadpages | 8B AI | Carrd | Instapage | |
|---|---|---|---|---|---|---|
| Geeignet für | Landingpages und ganze Websites aus responsiven Blöcken, mit Dateien, die Sie behalten | Marketer und Agenturen, die Kampagnenseiten betreiben | Kleine Unternehmen, die Landingpages, Websites und Blogs veröffentlichen | Ein komplettes KI-Website-Design kostenlos ausprobieren, später veröffentlichen | Einfache einseitige Websites und Profile | Werbekampagnen im großen Maßstab, mit Personalisierung |
| A/B-Testing | Nein, nicht integriert | Ja, unbegrenzt, ab dem Plan Experiment | Ja, ab dem Plan Grow | Nicht angegeben | Nicht angegeben | Ja, serverseitig, ab dem Plan Optimize |
| Formulare | Erweiterung Form Builder, in KIT, BASE und GROW | Lead-Gen-Formulare in jedem Plan; mehrstufige Formulare ab Build | Formulare und Webhooks in jedem Plan | Kontakt- und Lead-Formulare, kostenlos und in Pro | Ab Pro Standard; erweiterte Formulare in Pro Plus | Formular-Builder in jedem Plan; mehrstufige Formulare ab Optimize |
| KI-Unterstützung | Vier Designs pro Generierung, ausgehend von getipptem Text, einer Skizze oder einem Screenshot; 3 kostenlose Generierungen pro Monat | KI-Texterstellung ab Build; KI-Traffic-Optimierung im Plan Optimize | KI-Seitenerstellung in jedem Plan | Erzeugt ein komplettes Design aus einem einzigen Satz; KI-Änderungen per Chat in Pro | Nicht angegeben | KI-Texte für Überschriften, Absätze und Buttons |
| Kostenloser Plan | Ja: die Desktop-App mit mehr als 200 Blöcken, unbegrenzt viele Websites auf jedem Server, dazu 3 kostenlose Online-Websites auf einer Mobirise-Subdomain; kostenlose Websites tragen Branding | Nein; 14 Tage Testphase ohne Karte, währenddessen keine eigene Domain | Nein; 7 Tage Testphase, Karte erforderlich | Nur Gestalten; keine Veröffentlichung | Ja, bis zu 3 Websites mit dem Branding „Made with Carrd“ | Nein; 14 Tage Testphase, Karte erforderlich |
| Günstigster kostenpflichtiger Plan | 149 $ pro Jahr für KIT: Desktop-App, alle Erweiterungen, kein Branding. 199 $ pro Jahr für BASE, das eigene Domains auf Mobirise-Hosting ergänzt | Starter, 22 $ pro Monat bei jährlicher Abrechnung (29 $ monatlich): 5 Seiten, Traffic bis 500 | Pro, 29 $ pro Monat; bei jährlicher Zahlung 20 % Ersparnis | 9 $ pro Monat für Pro, jährlich abgerechnet, mit Hosting und eigener Domain | 9 $ pro Jahr für Pro Lite (nur Carrd-Adresse); 19 $ pro Jahr für Pro Standard, das eigene Domains und Formulare ergänzt | Create, 79 $ pro Monat bei jährlicher Abrechnung (99 $ monatlich): 15.000 eindeutige Besucher pro Monat |
| Code-Export | Ja: reine HTML-, CSS- und JS-Dateien, kostenlos aus der Desktop-App; der Export aus der Browser-Version erfordert BASE oder GROW | Nein; Seiten lassen sich nur als .unbounce-Dateien für Unbounce herunterladen | Classic Builder: eine HTML-Datei, die die Seite von Leadpages lädt; eine statische Kopie wird nicht unterstützt | Vollständiger HTML-Export in Pro | Pro Plus (49 $ pro Jahr): HTML, CSS und JS in einer ZIP-Datei; Formulare funktionieren dann nicht mehr | Nicht angegeben |
| Offline nutzbar | Ja, in der Desktop-App (Windows, macOS, Linux) | Nein, nur im Browser | Nein, nur im Browser | Nein, nur im Browser | Nein, nur im Browser | Nein, nur im Browser |
Abgerufen am 13. Oktober 2026 von den Preisseiten und Support-Artikeln aller Anbieter. Preise in US-Dollar; „bei jährlicher Abrechnung“ ist das Monatsäquivalent einer einzelnen Jahreszahlung, während Mobirise und Carrd einen Jahrespreis nennen. Die Dollar-Beträge von Leadpages stammen aus dem FAQ auf dessen Preisseite. Ältere Testberichte nennen oft frühere Pläne, und Preise ändern sich; bestätigen Sie sie daher vor dem Kauf auf der jeweiligen Website.
Checkliste vor dem Start einer Landingpage
Gehen Sie diese Liste auf dem Smartphone durch, mit mobilen Daten statt mit dem WLAN im Büro, bevor der erste bezahlte Klick eintrifft, und senden Sie selbst einen Testeintrag über das Formular.
Beheben Sie jeden nicht bestandenen Punkt, bevor Sie Geld für Traffic ausgeben: Bezahlte Klicks auf ein defektes Formular sind hier der teuerste Fehler. Für eine einseitige Website statt einer Kampagnenseite überspringen Sie den ersten Punkt und das Einzelziel.
- Übereinstimmung mit der Quelle. Die Überschrift nutzt die Worte der Anzeige, der E-Mail oder des Beitrags.
- Erster Bildschirm. Überschrift, Unterüberschrift und Button sind auf dem Smartphone ohne Scrollen sichtbar.
- Ein Ziel. Das Menü und themenfremde Links sind entfernt; jeder wiederholte Button führt zur selben Handlung.
- Button-Text. Er nennt, was der Besucher bekommt.
- Belege. Sie stehen nahe am Button, und jedes Zitat trägt einen Namen.
- Formular. Nur die Felder, die der nächste Schritt braucht, jedes mit sichtbarer Beschriftung.
- Testeintrag. Er landet im richtigen Postfach, und die Dankesnachricht sagt, wie es weitergeht.
- Kontrast und Tippgröße. Der Text erreicht 4,5:1, und Buttons lassen sich gut mit dem Daumen treffen.
- Geschwindigkeit. Die Seite besteht die Core Web Vitals in PageSpeed Insights.
- Suchmaschinen-Grundlagen. Seitentitel und Beschreibung nennen das Angebot, und es gibt eine H1.
- Footer. Die Links zu Datenschutzerklärung und Kontakt funktionieren.
- Tracking. Eine Conversion wird in Ihrer Webanalyse oder in Ihrem Werbekonto gezählt.
FAQ zum Landingpage-Design
Was ist Landingpage-Design?
Gemeint ist, eine Seite um eine einzige Handlung für Besucher aus einer bestimmten Quelle zu planen: einer Anzeige, einer E-Mail, einem Beitrag oder einem QR-Code. Es umfasst Überschrift, Layout, Belege, Formular und Geschwindigkeit, und das Ergebnis misst sich an einer einzigen Zahl, dem Anteil der Besucher, die handeln.
Was macht eine gute Landingpage aus?
Ein Versprechen, das zur Herkunft des Besuchers passt, eine Handlung, Belege neben dieser Handlung und ein kurzes Formular. Sie muss außerdem schnell laden und sich auf dem Smartphone gut lesen lassen, denn Kampagnen-Traffic kommt oft von dort.
Wie gestalte ich eine Landingpage Schritt für Schritt?
Notieren Sie die eine Handlung, die Sie wollen, und woher der Traffic kommt. Formulieren Sie die Überschrift aus den Worten der Quelle, sammeln Sie die Belege, die Sie zeigen können, und skizzieren Sie die Reihenfolge der sechs Bausteine. Bauen Sie die Seite dann aus Blöcken oder einem KI-Entwurf und probieren Sie sie vor dem Start auf dem Smartphone aus.
Ist eine einseitige Website dasselbe wie eine Landingpage?
Nicht ganz. Eine einseitige Website bringt eine ganze kleine Website auf eine scrollende Seite, meist mit einem Menü, das zu den Abschnitten springt, und dient mehreren Zwecken. Eine Landingpage hat ein einziges Ziel, entsteht meist für eine Kampagne und kann Teil einer größeren Website sein.
Sollte eine Landingpage ein Navigationsmenü haben?
Meist nicht: Jeder Menülink ist ein Weg, die Seite vor der Handlung zu verlassen. Behalten Sie Logo, Kontaktzeile und rechtliche Links; auf einer langen Seite ersetzt ein Button, der zum Formular springt, das Menü.
Wie lang sollte eine Landingpage sein?
So lang, wie die Fragen des Besuchers es verlangen. Ein kostenloser Download braucht ein bis zwei Bildschirme; eine teure Dienstleistung braucht Preise, Ablauf, Belege und Antworten und fällt daher länger aus. Wiederholen Sie denselben Button an natürlichen Haltepunkten.
Welcher Landingpage-Baukasten ist der beste?
Das hängt von der Aufgabe ab. Für ständige A/B-Tests bei bezahltem Traffic sind Unbounce, Instapage und Leadpages ausgelegt. Carrd ist eine günstige Wahl für eine einzelne einfache Seite. Mobirise eignet sich für eine kostenlose Seite, die Sie überall hosten und später zu einer kompletten Website ausbauen können, hat aber kein integriertes A/B-Testing.
Kann ich eine Landingpage kostenlos erstellen?
Ja. Die herunterladbare App von Mobirise ist kostenlos, enthält mehr als 200 Blöcke und kann die Seite auf Ihren eigenen Server hochladen. Online umfasst der kostenlose Plan 3 Websites auf einer mobirisesite.com-Adresse sowie 3 KI-Generierungen pro Monat, mit einem Mobirise-Badge auf jeder Website. Form Builder und Popup Builder erfordern einen kostenpflichtigen Plan ab 149 $ pro Jahr.
Kann KI eine Landingpage gestalten?
Ja. In Mobirise beschreiben Sie das Angebot und die Zielgruppe, wählen dann aus vier KI-Designs und verfeinern eines im Chat mit der KI oder durch Bearbeiten der Blöcke. Eine einzelne Generierung liefert eine Seite oder eine grobe Fassung der ganzen Website. Ihre echten Preise, Fakten und Fotos kommen weiterhin von Ihnen.
Unterstützt Mobirise A/B-Testing?
Nein, es gibt kein integriertes A/B-Testing. Sie können zwei Versionen unter verschiedenen Adressen veröffentlichen, die Hälfte Ihres Anzeigen-Traffics an jede senden und die Ergebnisse in Ihrem Werbekonto oder in Ihrer Webanalyse vergleichen.
Bauen Sie Ihre erste Landingpage
Beginnen Sie online mit einem KI-Entwurf oder legen Sie die Seite Block für Block in der kostenlosen App auf einem Windows-, Mac- oder Linux-Rechner an und veröffentlichen Sie sie dann dort, wo Ihre Kampagne es braucht.