Warning: Cannot modify header information - headers already sent by (output started at /www/htdocs/w0154565/goldmarie-grafikdesign.de/wp-content/plugins/w3-total-cache/DbCache_Wpdb.php:8) in /www/htdocs/w0154565/goldmarie-grafikdesign.de/wp-content/plugins/google-apps-login/core/core_google_apps_login.php on line 453
Landingpage gestalten: Design & Inhalte für eine Top-Conversion - Goldmarie

Landingpage gestalten: Design & Inhalte für eine Top-Conversion

Du möchtest ein Produkt verkaufen, ein Webinar oder einen Kurs vermarkten, ein Freebie oder ein Newsletter-Abo anbieten?

Mit einer Landingpage kannst du dieses Vorhaben ideal umsetzen und schnell erreichen.

Voraussetzung ist allerdgings, dass deine Landingage nutzerfreundlich gestaltet und inhaltlich überzeugend ist.

In dieser Anleitung erfährst du Step-by-Step, wie du eine erfolgreiche Landingpage gestaltest, die eine hohe Conversionrate mit sich bringt.

Eine Landingpage wird konzipiert um ein einziges Ziel zu erreichen. Sie umfasst also nicht wie eine Webseite mehrere Seiten mit verschiedenen Inhalten. Auf einer Landingpage dreht sich alles nur um ein einzelnes Thema. Es gibt keinerlei Ablenkung und der gesamte Inhalt wird auf einer Seite dargestellt.

Die Ziele können sein:

  • Verkauf von Produkten oder einer Leistung
  • Registrierung für einen Newsletter
  • Verkauf eines Kurses oder Seminars
  • Download eines Freebies, eines kostenlosen Angebots
  • Anmeldung zu einem Webinar
  • Registrierung für ein Tool oder einen Test-Zugang

Die Landingpage dient also der Vermarktung eines Produkts oder einer Leistung. Ganz egal ob du es kostenlos, kostenpflichtig oder im Gegenzug von Nutzerdaten anbietest.

Die Handlungsaufforderung, also Kauf- oder Anmeldefunktion – der so genannte Call-to-action – wird auf einer Landingpage deutlich hervorgehoben. Ziel ist es, so viele Besucher wie möglich zum Kauf oder zur Registrierung zu bewegen.

Warum brauchst du eine Landingpage?

Mit einer Landingpage kannst du fokussiert die Zielgruppe ansprechen, die an diesem einen Angebot interessiert ist.

Sie findet auf der Landingpage sofort was sie sucht. Auf einer Webseite müsste sie sich zunächst durch verschiedenste Inhalte klicken um ans Ziel zu gelangen. Wenn du eine Landingpage verlinkst, gelangen Interessierte direkt ans Ziel.

Alle Inhalte, die du auf die Landingpage packst, zahlen auf dieses eine Thema ein und damit kannst du sie zudem ideal für Suchmaschinen optimieren.

Und du kannst auch entsprechend gut ihre Ergebnisse messen.

Gestalte die Landingpage für deine Zielgruppe

Bevor du deine Landingpage gestaltest, muss dir klar sein, wer deine Käufer / Abonnenten sind und was sie wollen. Umso besser du ihre Wünsche und Erwartungen kennst, je zielgerichteter kannst du sie ansprechen.

Finde heraus, was sie wirklich wirklich wollen. Wenn du z. B. weißt, dass sie Hilfe bei der Gestaltung einer Landingpage benötigen, finde auch heraus, ob sie einen Artikel, ein Webinar oder einen Kurs bevorzugen.

Wenn du deine Zielgruppe genau studierst oder besser noch User Persona/s definierst, wird es dir leichter fallen, die Inhalte für deine Landingpage zusammenzustellen. Denn während du dich mit deiner Zielgruppe auseinandersetzt, wird dir klar, worauf sie wert legt und was sie überzeugt. Entsprechend kannst du die Inhalte für deine Landingpage formulieren.  

Was User Personas sind, was du mit ihrer Definition erreichst und wie du sie definierst, erfährst du hier. 

Für eine Top-Conversion: check vorab den Markt

Verschaffe dir auch einen Überblick, wie gefragt dein Thema ist und ob der Markt diesbezüglich schon gesättigt ist. 

Dieser Marktcheck ist auch wichtig, um herauszufinden mit welchem Keyword du die Landingpage für Suchmaschinen optimieren solltest. Denn du möchtest sicher, dass deine Landingpage gefunden wird, wenn ein potenzieller Kunde auf Google & Co. nach deinem Angebot sucht. Um das zu erreichen, sollte deine Landinpage idealerweise auf den ersten drei Plätzen unter den Suchmaschinenergebnissen bei Google erscheinen, wenn das Keyword eingegeben wurde (Anzeigen ausgenommen).

Finde heraus, welches Keyword sich für deine Landingpage eignet.

Es sollte ein Keyword sein, nach dem deine User Persona/s suchen und das noch nicht zu stark besetzt ist.

Ich habe beispielsweise die Keywords gecheckt, bevor ich diesen Artikel geschrieben habe. Denn es gibt schon unzählige Artikel über Ladingpages. Sämtliche Coaches und Online-Marketer haben schon einen dazu veröffentlicht.

Bei meiner Recherche habe ich heraus gefunden, dass das Keyword ‚Landingpage erstellen‚ kaum zu toppen ist. Hiermit würde es mir nur schwerlich gelingen unter die Top 3 bei Google zu gelangen.

Das Keyword ‚Landinpage bauen‚ wird hingegen kaum von meinen Lesern verwendet. Deshalb macht es keinen Sinn, meinen Artikel dahingehend zu optimieren.

Landingpage gestalten‚ geben meine Leser bei Google ein und es besteht die Möglichkeit mit diesem Keyword unter die Top 3 zu kommen (vorausgesetzt ich schreibe einen mega Artikel, der etwas neues bringt < du musst dich schon ins Zeug legen, um ein gutes Ranking zu erreichen, wenn du Mitbewerber hast).

Es gibt verschiedene Tools, mit denen du herausfinden kannst, ob ein Keyword von deiner Zielgruppe verwendet wird und wie es mit deinen Chancen aussieht.

Mit diesen Tools kannst du Keyword-Ideen und den Schwierigkeitsgrad recherchieren:

https://trends.google.com/trends/
https://neilpatel.com/de/ubersuggest/
https://soovle.com/

Auch in SEO-Tools, wie Sistrix kannst du Keywordrecherche betreiben. Die Tools haben meist einen stolzen Preis, aber du kannst sie über mehrere Tage testen und so auch schon einiges herausfinden.

Landingpage gestalten: Google Trends
Bei Google Trends kannst du checken, wie hoch das Interesse an deinem Keyword ist. Das Interesse an dem Keyword ‚Landingpage‘ ist über die Jahre gewachsen und stagniert momentan ein wenig. Achte hier darauf, dass du Short Tail-Keywords eingibst, denn niedrige Ergebnisse werden hier nicht ausgespuckt.
Landingpage gestalten: Ubersuggest
Bei Ubersuggest erfährst du mehr Details: Das Keyword ‚Landingpage erstellen‘ hat ein niedriges Suchvolumen (wenn du hier ein Medium- oder Long Tail-Keyword checkst, kann das Suchvolumen durchaus niedrig sein). Wichtiger sind die nächsten Informationen: Die Konkurrenz nutzt dieses Keyword mittelmäßig viel. Umso höher dieser Wert ist, je mehr hast du zu kämpfen. An den beiden folgenden Werten für die bezahlte Suche erkennst du, dass das Keyword schon recht hart umworben wird.
Landingpage gestalten: Soolve
Soolve zeigt dir an, wie gefragt dein Keyword bei den hier angezeigten Anbieter ist. Zudem bekommst du Inspiration für ein mögliches Long Tail-Keyword.

Inhalte für deine Landingpage

Beantworte auf deiner Landingpage alle Fragen, die deine Zielgruppe haben könnte. Kommuniziere welche Lösung du anbietest, hebe die Benefits hervor, beschreibe dein Produkt / deine Leistung bestmöglich und bau Vertrauen auf. Hier ein paar Tipps und Anregungen zu den Inhalten:

Head- und Subline

Welches Problem löst du? Mit welcher Kernbotschaft kannst du deutlich machen, was du anbietest? Head- und Subline sollten wiedergeben, was es gibt und wozu das im Kern führt, bzw. was der größte Benefit für den User ist. Bring das knackig auf den Punkt.

Hero-Shot: Video, Foto oder Produkt-Bild

Bilder transportieren Botschaften schneller als Texte und Videos werden gerne angeklickt. Nutze die Möglichkeit und platziere je nach Angebot einen aussagekräftigen Hero-Shot.

Erkläre z. B. in einem Video dein Angebot und die damit verbundenen Benefits. Ein Video kann für eine längere Verweildauer der Besucher sorgen. Nutze die Möglichkeit in der Zeit Vertrauen aufzubauen.

Wenn du kein Video verwenden magst: Gibt es ein Bild von dir bei der Arbeit (z. B. eine Coachingsituation, wenn du ein Coaching über die Landingpage anbietest). Zeig idealerweise welchen großen Vorteil die Kunden aus deinem Angebot mitnehmen oder was du anbietest! Wenn du ein Produkt anbietest,  sind Produkt-Bilder eine wichtige Entscheidungshilfe.

Details zu deinem Angebot

Für wen ist dein Angebot bestimmt? Welche weiteren Ergebnisse bringt dein Angebot mit sich? Welchen Gewinn erzielt der User, wenn er dein Produkt erwirbt oder deine Leistung bucht?
Was beinhaltet dein Angebot im Einzelnen (z. B. Lessons, Kursinhalte, Freebie- oder E-Book-Inhalte, Produkteigenschaften…)? Gibt es Voraussetzungen, die man mitbringen sollte (Nutzungsbedingungen)?

Weitere Bilder / Symbole

Kannst du durch weitere Bilder oder Symbole die Benefits oder Inhalte deines Angebotes kommunizieren?

Autoren-Info

Oute dich als Autor mit einem Bild und einer kurzen Info zu dir. Erzähl den Lesern, warum du die/der Richtige für das Produkt oder die Leistung bist. Das schafft Vertrauen.

Gibt es zudem relevante Infos zu dir und deinem Werdegang?

Social Proof

 Wie kannst du zusätzlich Vertrauen aufbauen?  

 

  • Kannst du Kunden-Feedback auf deiner Landingpage zeigen? Frag deine Kunden nach Feeback und bitte sie dieses veröffentlichen zu dürfen. Idealerweise mit Bild, das stärkt nochmal die Glaubwürdigkeit. Wenn du keine Bilder verwenden kannst, weil deine Kunden z. B. anonym bleiben müssen/wollen, sind Feedbacks auch ohne Bilder gut. 
  • Bist du bekannt aus den Medien, hat eine Zeitung oder das Fernsehen schonmal über dich berichtet? Dann bilde die Logos ab. 
  • Gibt es schon unzählige Downloads oder Buchungen deines Angebotes, die du nennen könntest? Dann kommuniziere das.

Zusammenfassung Angebot, Preis, Preistabelle

Platziere am Ende deiner Landingpage nochmal eine Zusammenfassung deines Angebotes, mit erneuter Registrier- oder Kaufaufforderung.

Wenn du ein Produkt oder eine Leistung zum Verkauf anbietest, stell auch den Preis deutlich und transparent dar. Ggf. kannst du hier auch eine Preistabelle vorsehen, wenn du mehrere Optionen anbieten möchtest.

Gibt es eine Geld-Zurück-Garantie, die du zudem erwähnen solltest?

Beispielhafter Aufbau einer Landingpage:

Landingpage gestalten: Wireframe
So kann der Aufbau einer Landingpage aussehen, die Inhalte variieren natürlich je nach Angebot.

10 Gestaltungs-Tipps für deine Landingpage

Nutze dein Markendesign (Logo, Farben und Schriften), passe es aber ggf. an. Wichtig ist, dass du eine nutzerfreundliche Seite gestaltest, die vor allem deine User Personas anspricht.

Es geht bei der Gestaltung der Landingpage nicht um deinen persönlichen Geschmack. Frag dich immerzu, ob Inhalt und Gestaltung deinen User Personas gefallen. 

Mache A/B-Tests, wenn du dir unsicher bist. Lege die Landingpage zweimal an und verändere in der zweiten Variante Text und / oder Gestaltung. Veröffentliche und verlinke beide Landingpages und prüfe, welche die höhere Conversionrate erzielt. 

1/ Das Wichtigste gehört ins obere Drittel (Hero Section)

Im oberen Drittel deiner Landingpage – dem sofort sichtbaren Bereich – solltest du anhand von Text und Bild Aufmerksamkeit und Interesse wecken. Mach deutlich, welchen größten Benefit / welche Lösung du auf dieser Seite anbietest.

Wichtig ist, dass der User hier sofort findet, was er erwartet. Die Inhalte müssen also auf das Thema einzahlen, anhand dessen du deine Landingpage beworben hast.

Auch der Call-to-Action, die Handlungsaufforderung, sollte im oberen Drittel das erste Mal zu sehen sein. Gestalte ihn auffällig! Nutze z. B. eine Farbe, die heraussticht. Mehr zum Thema Farbgestaltung im Web, findest du hier.

Landingpage gestalten: Hero Section
Kommuniziere im oberen Drittel den wichtigsten Benefit / die Lösung des Problems und platziere hier auch das erste Mal die Handlungsaufforderung.

2/ Nutze Logo und Bilder in einer guten Auflösung

Setze Bilder vor dem Upload ins Format der Abbildungsgröße. Dein Bild sollte also nur so groß sein, wie es im Web max. erscheint. Denn Bilder (JPG- und PNG-Dateien), die im Web stark vergrößert oder verkleinert dargestellt werden, wirken unscharf.
Komprimiere die Bilder beim Abspeichern nicht zu stark. Beim JPG ist eine Qualität von 10 bzw. 80% ideal. Diese qualitative Komprimierung ist für unser menschliches Auge nicht sichtbar.

Für das Logo setzt du idealerweise eine SVG-Datei ein, diese sind ohne Qualitätsverlust unendlich skalierbar.

Landingpage gestalten: Scharfe Logos & Bilder
Achte auf eine gute Qualität von Logos und Bildern.

3/ Berücksichtige Kontraste

Achte auf gut lesbare Texte und Inhalte! Sorge also dafür, dass du Text auf einen kontrastreichen Hintergrund setzt. Nutze für Texte also nicht zu helle Farben auf weißen Grund oder zu dunkle Farben auf dunklem Grund.

Wenn du Text auf ein Bild setzt, achte darauf, dass er sich deutlich abhebt. Wenn dir das nicht gelingt, weil das Bild zu unruhig ist, leg eine leicht transparente oder farblich kontrastreiche Fläche unter den Text.  

Landingpage gestalten: Kontraste beachten
Der Text rechts im Beispiel ist nur schwer lesbar, hier fehlt es an Kontrast.

4/ Strukturiere Texte

Strukturiere deinen Text und beachte eine visuelle Hierarchie. Dann findet der Leser auch beim flüchtigen Scannen deiner Texte, die Informationen, die er sucht.
Nutze nach Möglichkeit Zwischenheadlines für wesentliche Infos und hebe einzelne Knackpunkte in Bullets hervor. Lies hier, was du bei der Typografie im Web beachten solltest. 

Landingpage gestalten: Text-Struktur beachten
Bei der Textwüste links hat man nur wenig Lust einzusteigen. Den rechten Text kann man wunderbar erfassen und ggf. auch überfliegen.

5/ Wähle gut lesbare Schriften

Achte auf Schriften, die am Bildschirm gut lesbar sind. Zu feine Schriften können im Monitorlicht wegbrechen und zu fancige Schriften sind oft schlecht lesbar. Hier erfährst du, wie du passende Schriften fürs Web findest und kombinierst.

Landingpage gestalten: Gut lesbare Schriften
Beide Schriften funktionieren im Web nicht gut. So schön Schreib- und Scriptschriften sein können, sie sind oft schlecht lesbar.

6/ Beachte eine ideale Schriftgröße und Zeilenlänge

Schriften werden im Web heute größer gesetzt. Die richtige Schriftgröße ist von der Schrift abhängig, da die Anatomie von Schriften sehr unterschiedlich ist. Je nach Schrift kann die Schriftgröße also sehr unterschiedlich wirken.

Am besten probierst du am Monitor aus, welche Schriftgrößen für dein Schriftbild ideal sind und definiere sie: ‚Body, H1, H2, H3…‘ und setze sie dann konsequent auf deiner Page ein.

Denke dabei an die Hierarchie, zeig also deutlich was Über-, Zwischenüberschrift und Body ist.

Auch die Zeilenlänge in der Desktop-Ansicht beeinflusst die Lesbarkeit.

Zu kurze Zeilen stören
den Leserhythmus,
zu lange Textzeilen erschweren ebenfalls den Lesekomfort. In der Desktop-Version hält eine Zeilenlänge von 60-80 Zeichen deine Leser bei Laune.

Noch mehr Infos zu guter Lesbarkeit im Web, findest du hier. 

Landingpage gestalten: Zeichengroesse & Zeilenlaenge
Die ideale Zeichengröße und -länge fördert die Leselust. Hier wurde eine H2 mit einer Größe von 32px und eine Body mit 20px definiert. Behalte diese Definition auf der gesamten Page bei. Wenn du also eine weitere H2 einsetzt, hat sie die gleiche Größe.
Die Zeilenlänge beträgt im Beispiel max. 76 Zeichen.

7/ Berücksichtige Weißräume

Mit Weißräumen verbesserst du die Übersicht und verleihst den Inhalten mehr Bedeutung. Denn Weißräume lenken die Aufmerksamkeit auf die angrenzenden Inhalte. 

Damit sind nicht zwingend weiße Fläche gemeint, sie können auch farbig sein. Wichtig ist, dass in diesen Bereichen nichts passiert: es sich also um einen inhaltsleerer Bereich handelt. 

Landingpage gestalten: Weissraeume
Berücksichtige einheitliche Abstände zwischen den einzelnen Bereichen und Weißräume für mehr Übersichtlichkeit.

8/ Vermeide Ablenkung

Verzichte auf deiner Landingpage auf die Navigation, die die Besucher von der Seite wegführen kann und auch auf Buttons (z. B. zu den sozialen Netzwerken). Der User sollte nur eine Handlung ausführen können und zwar die, die du für die Seite vorgesehen hast.
Landingpage: Navigation entfernen
Lass alle Elemente weg, die von deiner Landingpage wegführen.

9/ Sorge für eine kurze Ladezeit

Seiten, die lange laden, verschrecken Nutzer, denn unsere Frustgrenze ist im Web sehr niedrig und wir haben grundsätzlich zu wenig Zeit. Zudem werden sie von Google im Ranking abgestraft.

Du sparst viel Ladezeit, wenn du Bilder, wie weiter oben schon beschrieben, nur in dem benötigten Abbildungs-Format hochlädtst und sie ein wenig komprimierst. Beim kaum sichtbaren Komprimieren helfen dir auch Tools, wie z. B.: Tiny PNG.

Binde Videos von extern ein. Lade sie also bei Vimeo oder Youtube hoch und bette sie anhand des Links auf deiner Webseite ein. Auch das spart Ladezeit.

10/ Achte auf eine responsive Gestaltung

Optimiere deine Landingpage für sämtliche Endgeräte, sobald die Gestaltung deiner Seite steht und alle Inhalte eingebunden sind. Immer öfter nutzen wir zum Surfen das Smartphone. Stell also sicher, dass deine Landingpage auch dort gut lesbar und handlebar ist. 

Landingpage gestalten: Responsive Design
Optimiere deine Seite für sämtliche Endgeräte. 

Womit baust du eine Landingpage?

In vielen Artikeln zum Thema „Landingpage gestalten“ werden dir Tools empfohlen, mit denen du Landingpages erstellen kannst, z. B. Leadpages oder Optimizepress.
Dort gibt es verschiedene Templates, die du einfach befüllen kannst. Doch zum einen kostet dich das monatl. eine Gebühr und zum anderen kannst du das Design nur bedingt deinem übrigen Webauftritt anpassen.

Wenn du mit WordPress und Themes wie z. B. Divi oder Avada arbeitest, brauchst du kein Tool. Du baust die Landingpages ganz einfach mit dem Builder, mit dem du deine gesamte Webseite gebaut hast. So sparst du zusätzliche Kosten und das Design ist einheitlich.

Sichere dich rechtlich ab

Sieh auf deiner Landingpage eine Verlinkung zum Impressum und zur Datenschutzerklärung vor. Die Links kannst du z. B. in den Footer packen.

Sorg dafür, dass du deine Produkte / Leistung DSGVO-konform anbietest.

Denk bei kostenpflichtigen Angeboten auch an AGB und Widerrufsbelehrung und lass dich im Zweifel beraten. Sabrina Keese-Haufs von lawlikes ist beispielsweise eine tolle Rechtsberaterin, wenn es ums Online-Business geht. Du findest sie auch bei Facebook. 

Bewirb deine Landingpage

All die Tipps nutzen wenig, wenn deine Landingpage nicht gesehen wird. Deshalb sind neben überzeugenden Inhalten und einer nutzerfreundlichen Gestaltung auch weitere Maßnahmen wichtig:

  • Erfüll die Erwartungshaltung deiner Zielgruppe – liefer ein Angebot, das sie sich wünscht und bewirb es entsprechend
  • Teil deine Landingpage, mach deine Fans und Follower darauf aufmerksam – hier erfährst du, wie du Vorschaubild und Text für ein Posting in Facebook individualisieren kannst
  • Streu dein Angebot über deinen Newsletter
  • Optimiere deine Landingpage, wie weiter oben beschrieben für Suchmaschinen
  • Nimm Geld in die Hand und bewerbe sie
  • Zeig dich da draußen und bewirb dein Angebot bestmöglich, z. B. über Videos und Live-Schaltungen in den sozialen Netzwerken

Denn ohne Reichweite wird auch eine top umgesetzte Landingpage nicht gut konvertieren.

Happy working!
Goldmarie a.k.a. Su

 

Su Wiemer
Hola! Als Designerin helfe ich Small-Business-Ownern einen Top-Online-Auftritt zu gestalten. Ich unterstütze dich klare Strukturen zu schaffen und ein nutzerfreundliches Design zu entwickeln, das deine Besucher begeistert. Hier erfährst du mehr über mich. Happy day! Goldmarie a.k.a. Su

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.