Eine Landingpage zu erstellen, die Besucher*innen durch deinen Verkaufstrichter leitet und gleichzeitig deine Marke repräsentiert, ist ein kniffliger Balanceakt. In diesem Beitrag geben wir dir einen Crashkurs über die Anatomie einer erfolgreich konvertierenden Landingpage, einschließlich acht Design Best Practices. Das Entwerfen einer Landingpage kann sich oft wie eine knifflige Mischung aus Kunst und Wissenschaft anfühlen.
Du möchtest, dass die Seite die Marke sowohl in Grafik als auch in Text repräsentiert und gleichzeitig die Besucher weiter in den Verkaufstrichter führt. Das kann ein schwieriges Gleichgewicht sein.
Glücklicherweise gibt es einige Richtlinien, die du befolgen kannst, um die bestmögliche Landingpage zu entwerfen. Wenn du diesen Rahmen nutzt und dabei die Ästhetik deiner Kunden im Auge behältst, kannst du deinen Ruf als jemand festigen, der effektive Ergebnisse liefert. In diesem Artikel geben wir dir einen Crashkurs über die Anatomie einer Landingpage. Dann stellen wir dir acht Best Practices vor, wie du eine Landingpage gestalten, die erfolgreich konvertiert. Zum Schluss gehen wir auf einige häufige Fehler ein und wie du diese vermeiden kannst.
Los geht’s!
Eine Einführung in Landingpages (und warum du vielleicht eine erstellen solltest)
Die typische Website besteht aus einer Vielzahl von verschiedenen Seiten, die unterschiedliche Ziele und Inhaltstypen haben. Im Gegensatz dazu sind Landingpages mit einem klaren Fokus oder Ziel gestaltet und haben fast immer einen einzigen Call To Action (CTA).
Du kannst eine Vielzahl von unterschiedlichen Landingpages erstellen. Du kannst zum Beispiel auf eine bevorstehende Veranstaltung aufmerksam machen oder Informationen über ein neues Produkt bereitstellen. Am häufigsten werden Landingpages jedoch verwendet, um Konversionen in Marketing und Werbekampagnen, einschließlich E-Mail und Pay-per-Click (PPC)Kampagnen, zu fördern.
Anstatt Besucher auf eine allgemeine Seite auf deiner Website zu leiten, kannst du sie auf eine Landingpage führen, die speziell für eine bestimmte Kampagne angepasst ist. Diese Seite wird den Besucher zur Konvertierung ermutigen, indem sie ihn zu einer einzigen, überzeugenden CTA führt. Durch die Erstellung einer effektiven Marketing-Landingpage kannst du die Konversionsrate erhöhen und letztendlich eine erfolgreichere Kampagne erstellen.
Im Gegensatz zu den meisten Webseiten entmutigen Landingpages oft aktiv die Erkundung, um die Besucher zum CTA zu drängen. Aus diesem Grund blenden viele Landingpages das reguläre Menü der Website aus oder entfernen Links aus dem Kopf und Fußzeilenbereichen.
Die CTAs deiner Landingpage können entweder auf Lead Generierung oder auf die Förderung von Click Throughs ausgerichtet sein. Lead Generierung ist der Prozess, jemanden anzuziehen, der ein Interesse an deinen Produkten oder Dienstleistungen gezeigt hat, und ihn in den Verkaufstrichter zu führen.
CTAs zur Lead Generierung beinhalten oft, dass der Interessent seine Kontaktinformationen mit deinem Unternehmen teilt. An diesem Punkt wird der Interessent als qualifizierter Lead betrachtet. Ein CTA zur Lead Generierung könnte Besucher*innen ermutigen.
Das Ziel einer Click Through Kampagne ist es, Besucher zu ermutigen, sich mit deines CTA zu beschäftigen. Eine Click Through Landingpage könnte den Kunden dazu auffordern, eine Produktseite für weitere Informationen zu besuchen. Diese Art von Kampagne kann auch darin gipfeln, dass der Besucher seine Kontaktinformationen mitteilt, aber der nächste Schritt ist normalerweise, ihn dazu zu bringen, einen anderen Teil Ihrer Website zu besuchen.
Die Anatomie einer Landingpage
Bevor wir besprechen, wie eine Landingpage gestaltet wird, lass uns einen Blick auf die verschiedenen Komponenten werfen, die sie wahrscheinlich enthalten wird.
Elemente oberhalb des Falzes
Der Teil deiner Seite, der für einen Benutzer ohne Scrollen oder klicken sichtbar ist, wird als „Above the Fold“ bezeichnet (above the fold“ wörtlich aus dem Zeitungsdruck und Verlagswesen kommend „oberhalb des Falzes“). Da dies der erste Inhalt ist, den ein Besucher sieht, solltest du diesen wertvollen Bereich ausnutzen. Du wirst oft feststellen, dass der „Hero Abschnitt“ oberhalb der Falz platziert ist. Ein „Hero Section“ ist typischerweise ein großes Bannerbild am oberen Rand der Seite, obwohl es nicht auf statische Bilder beschränkt ist. Du kannst Animationen, Schieberegler oder auch nur auffällige Typografie verwenden.
Was auch immer du oberhalb des Falzes einfügst, sollte ein starkes Gefühl dafür vermitteln, was deine Landingpage anbietet. Dann kannst du detailliertere Informationen im „below the fold“ Inhalt der Seite bereitstellen.
Inhalt
Dein Inhalt macht wahrscheinlich den größten Teil deiner Landingpage aus. Der Inhalt wird verwendet, um deine Zielgruppe anzusprechen und sie zu überzeugen, auf dein Angebot einzugehen. Du kannst Beschreibungen der Merkmale und Vorteile deines Produkts oder deiner Dienstleistung sowie Preisangaben und andere Informationen enthalten. Die Landingpage von Wise (Unternehmen) bietet einen Rechner, mit dem du ausrechnen kannst, wie viel Geld du durch die Nutzung dieses Dienstes sparen wirst: Auch wenn der Inhalt sehr textlastig ist, solltest du daran denken, dass du auch andere Medien einbeziehen kannst. Du hast viele Freiheiten, was den Inhalt angeht, aber es gibt ein paar Elemente, die du nicht auslassen solltest.
Hier kannst du ein wenig auftrumpfen und dein Publikum wissen lassen, warum dein Angebot der Konkurrenz überlegen ist. Unilever fördert Richtlinien und Engagement für Sicherheit:
Social Proof ist eine weitere hilfreiche Art von Inhalten, die Glaubwürdigkeit und Vertrauen aufbauen können. Dieser soziale Inhalt kann verschiedene Formen annehmen, einschließlich positiver Bewertungen von Kunden oder Presseberichten von angesehenen Publikationen in deiner Nische.
Wenn du gerade erst anfängst, hast du vielleicht noch nicht viel an sozialem Beweis. Scheue dich nicht, nach Feedback von Nutzern zu fragen, damit du diesen Teil deiner Landingpage so schnell wie möglich ausbauen kannst.
Conversion Elemente
- Conversion Elemente spielen eine wesentliche Rolle bei der Umwandlung von Besuchern in Kunden. Die Art der Konversion, die du anstrebst, hängt vom Zweck deiner Landingpage ab.
- Wenn du eine E-Commerce Seite hast, hoffst du wahrscheinlich, ein Produkt zu verkaufen. Wenn du jedoch mit deiner Landingpage deine E-Mail Liste aufbauen willst, könnte eine erfolgreiche Conversion eine Newsletter Anmeldung sein.
- Unabhängig von der Art der Konversion, die du anstrebst, können starke Calls to Action (CTAs) dir helfen, dein Ziel zu erreichen. Ein CTA ist deine Gelegenheit, den Besucher aufzufordern, eine bestimmte Aktion auszuführen.
- Wenn du versuchst, eine E-Mail Liste aufzubauen, könnte deine CTA eine Schaltfläche sein, die die Benutzer*innen auffordert, sich jetzt anzumelden. Du kannst deine Schaltflächen auch ansprechender gestalten, indem du Wörter wie „kostenlos“ verwendest, wie es Slack hier tut: Auch wenn dies einfach klingt, wirst du wahrscheinlich viel Zeit damit verbringen, deine CTAs zu optimieren.
- Zusätzlich zu einem verlockenden Text solltest du auch die Platzierung und die Farben sorgfältig berücksichtigen.
Fußzeile
Viele Leute übersehen die Fußzeile, aber sie spielt eine sehr wichtige Rolle bei Konversionen. Du kannst zusätzliche Informationen und Formulare zur Lead Generierung für Newsletter Anmeldungen oder sogar Social Media Links einfügen.
Entwerfe einen Footer speziell für deine Landingpage und begrenze Menülinks, die die Nutzer davon wegführen. Wenn es keine Ablenkungen gibt, ist es wahrscheinlicher, dass die Besucher den CTA erfolgreich abschließen.
Entwerfen einer effektiven Landingpage – 8 Best Practices
Nachdem du nun die Bedeutung der verschiedenen Elemente verstanden hast, kannst du diese nutzen, um eine effektive Landingpage zu erstellen. Im Folgenden findest du acht Best Practices, die du dabei berücksichtigen solltest.
1. Halte deine Landingpage einfach
Minimalismus kann effektiv sein, wenn es um Webdesign geht. Ein einfaches Design kann helfen, deine Bilder und CTAs hervorzuheben.
Du musst kein Designexperte sein, um eine minimalistische Landingpage zu erstellen. Es gibt jedoch ein paar Prinzipien, die du beachten solltest.
- Erstens: Minimalismus kann effektiv sein, wenn es um Webdesign geht. Ein einfaches Design kann helfen, deine Bilder und CTAs hervorzuheben.
- Zweitens: Du musst kein Designexperte sein, um eine minimalistische Landingpage zu erstellen. Es gibt jedoch ein paar Prinzipien, die du beachten solltest.
- Drittens: Du solltest dich auch mit Flat Design auseinandersetzen, um deine Landingpage minimalistisch, aber dennoch funktional zu halten. Flat Design verwendet sichere, einfache Typografie, Raster-basierte Layouts und eine intuitive Oberfläche. Über Flat Design haben wir einen beitrag verfasse, diesen findest du hier.
- Viertens: Es ist jedoch möglich, dass du dein Design so stark vereinfachen, dass es schwer zu bedienen ist. Um das zu vermeiden, kannst du deine interaktiven Elemente ein wenig hervorheben, indem du einige Schattierungen hinzufügst.
- Fünftes: Symmetrie ist ein weiterer wichtiger Aspekt des minimalistischen Designs. Sie ist angenehm für das Auge und kann dabei helfen, deine Benutzer*innen dorthin zu führen, wo sie hinwollen. Mit dem Navigator von Elementor kannst du die Symmetrie auf deiner Landingpage beibehalten.
2. Zeige deinen Kunden, dass du vertrauenswürdig bist
Um das Vertrauen potenzieller Kunden zu gewinnen, solltest du Vertrauenssignale auf deiner Landingpage einbauen. Es ist zwar keine Überraschung, dass die meisten Kunden vor dem Kauf Online Bewertungen lesen, aber auch andere Elemente können dazu beitragen, Vertrauen zu schaffen.
Online Shopping ist mittlerweile alltäglich, aber die Leute sind immer noch vorsichtig, wenn sie bei einem unbekannten Unternehmen kaufen. Du kannst die Logos der von dir akzeptierten Zahlungsanbieter, wie z. B. PayPal, anzeigen, damit die Kunden wissen, dass ihre Daten geschützt sind.
Wenn du eine Geld-zurück-Garantie anbietest, solltest du dies an prominenter Stelle auf deiner Landingpage angeben.
Vertrauen zu gewinnen ist ein wichtiger Bereich, in dem Social Proof ins Spiel kommt. Du könntest Screenshots von positiven Diskussionen über dein Angebot sammeln, um sie in deine Landingpage Kopie aufzunehmen.
Um Bewertungen von Yelp und Google einfach hinzuzufügen, kannst du Ultimaten Add-ons für Elementor ausprobieren. Die Funktion „Business Reviews“ zieht Inhalte direkt von diesen Plattformen und fügt sie zu deiner Website hinzu.
3. Schreibe prägnante Überschriften
Das Web schätzt prägnante Texte, vor allem, weil Menschen dazu neigen, Webseiten zu überfliegen, anstatt sie gründlich zu lesen. Wenn du deine Überschriften kurz und prägnant hältst, kannst du den Nutzern helfen, die Informationen zu finden, an denen sie am meisten interessiert sind.
Klare Überschriften können auch die wichtigsten Vorteile zusammenfassen und hervorheben, wie Evernote zeigt:
Zusätzlich zu deinen Überschriften solltest du den Rest deiner Inhalte ebenso scannbar halten. Eine Möglichkeit, dies zu erreichen, besteht darin, häufige Zwischenüberschriften zu verwenden und deine Absätze kurzzuhalten.
Das Schreiben aussagekräftiger Überschriften erfordert etwas Übung. Wenn du nicht weiterkommst, kannst du eine Überschriftvorlage verwenden, um anzufangen.n.
4. Optimiere deine CTAs
CTAs sind eine Kombination aus Design und Text, daher gibt es viel Raum für Kreativität und Experimente. Sie sind ein entscheidender Teil deines Verkaufsprozesses, da sie dazu dienen, deine Zielgruppe zum Handeln aufzufordern.
Wenn du den Text für deine CTAs schreibst, versuche, so spezifisch wie möglich zu sein. Deine Nutzer*innen werden eher handeln, wenn sie wissen, worum du sie bittest.
Außerdem ist es klug, darauf zu achten, wo du deine CTAs platzierst. Wenn deine Landingpage lang ist, solltest du sie über den gesamten Inhalt verteilen, sodass sie immer an der richtigen Stelle platziert sind, wenn ein Nutzer sich entscheidet, eine Aktion durchzuführen.
Bei so vielen Möglichkeiten, die es beim CTA Design gibt, wirst du es wahrscheinlich nicht beim ersten Versuch perfekt hinbekommen. Vielleicht möchtest du A/B-Tests durchführen, um deine Landingpage CTAs zu optimieren.
5. Mache deine Landingpage fesselnd
Wenn deine Landingpage hauptsächlich aus Text besteht, besteht die Gefahr, dass die Aufmerksamkeit der Nutzer*innen beim Scannen abschweift. Um dies zu vermeiden, gibt es einige Strategien, die du anwenden könntest, um deine Landingpage so ansprechend wie möglich zu gestalten.
Eine Möglichkeit, den Betrachter*innen beim Scrollen durch dein Angebot zu halten, ist die Einbindung von Animationen. Du kannst dies nutzen, um die Aufmerksamkeit auf deine Hauptpunkte zu lenken, oder du kannst es subtil mit einem Parallaxen Effekt halten. Wenn du Bedenken wegen der Textmenge hast, die du benötigst, um dein Angebot zu erklären, solltest du dich vielleicht für eine reine Video-Landingpage entscheiden.
Wenn es um die Navigation auf deiner Landingpage geht, solltest du auch wenige oder keine Links einfügen, die wegführen. Bei diesen Links kann es sich um die Datenschutzerklärung, die Allgemeinen Geschäftsbedingungen oder sogar den Hauptlink von deinem Logo handeln. Besonders bei Kampagnen ist es üblich, dass das Hauptmenü von der Landingpage entfernt wird. Dies fördert das Engagement und hilft, die Ablenkung für Ihre potenziellen Kunden zu minimieren.
6. Formulare mit Blick auf die User Experience (UX) erstellen
User Experience (UX) umfasst alle Aspekte der Interaktion eines Benutzers mit einer Website. Sie ist eine wichtige Komponente des Webdesigns, da Besucher*innen, die von deiner Seite frustriert oder verwirrt sind, diese wahrscheinlich verlassen.
Während du UX Prinzipien auf deine Landingpage anwenden kannst, solltest du besonders auf deine Formulare achten. Formulare sind wichtig, um viele Arten von Konversionszeiten zu erreichen, daher solltest du das Ausfüllen Ihrer Formulare so reibungslos wie möglich gestalten.
Beginne damit, dein Formular einfach zu halten und nur die Informationen abzufragen, die du benötigst.
Du kannst auch die erforderlichen Felder auf ein Minimum beschränken. Dies ermöglicht es den Benutzern*innen, mehr Informationen anzugeben, wenn sie es wünschen, ohne sie dazu zu zwingen.
7. Verwende unbedingt kontrastierende Farben
Die Verwendung kontrastreicher Farben macht deine Landingpage nicht nur optisch interessant, sondern ist auch ein wesentlicher Bestandteil der Barrierefreiheit. Dies kann eine Herausforderung sein, wenn du Text über einem Bild einfügst.
Um sicherzustellen, dass es genug Kontrast zwischen deinen Farben gibt, versuche, deine Landingpage in Graustufen zu betrachten. Du kannst die Filtereffekte von Elementor verwenden, um dies auf einfache Weise zu tun.
8. Verwende lesbare Schriftarten
Typografie ist im Web entscheidend. Zusammen mit schlechtem Kontrast ist die Schriftgröße eine häufige Beschwerde unter den Nutzern*innen. Daher solltest du auf die Schriftarten achten, die du in deinen Inhalten sowie in Ihren CTAs verwendest.
- Bei der Auswahl der Schriftarten solltest du die folgenden Tipps beachten:Begrenze die Anzahl der verschiedenen Schriftarten, die du auf deiner Website und Landingpage verwendest.
- Wähle eine Schriftart, die sich an unterschiedliche Bildschirmgrößen anpassen kann.
- Vergrößere den Weißraum zwischen den Buchstaben, um die Lesbarkeit deiner Inhalte zu verbessern.
- Denke daran, dass Serifen Schriften gut für große Textabschnitte geeignet sind.
Du kannst mit Elementor sogar benutzerdefinierte Schriftarten verwenden, damit deine Landingpage lesbar ist, aber dennoch dem Markenauftritt entspricht. - Häufige Landingpage Fehler (und wie man sie vermeidet)
- Obwohl jede Landingpage ein wenig anders ist, gibt es einige häufige Fehler, die du kennen solltest, damit du sie nicht selbst begehst.
Niedrig aufgelöste Bilder
- Wenn du ein minimalistisches Design für deine Landingpage verwendest, werden deine Bilder wahrscheinlich viel Aufmerksamkeit auf sich ziehen, daher müssen sie so scharf wie möglich aussehen. Aus diesem Grund ist es wichtig, dass du qualitativ hochwertige Bilder verwendest und gegebenenfalls eine Bildbearbeitungssoftware wie Adobe Photoshop oder GIMP einsetzt.
- Große Bilddateien können sich jedoch negativ auf die Performance deiner WordPress Site auswirken. Dies kann sich katastrophal auf deine Konversionsraten auswirken. Walmart erlebte einen starken Rückgang der Konversionsraten, als die Ladezeiten seiner Seiten von einer auf vier Sekunden anstiegen. Hier kann es hilfreich sein, Tools zur Optimierung deiner Bilder zu verwenden, ohne die Qualität zu beeinträchtigen.
- Du kannst deine Bilder auch mit der TinyPNG Website oder dem WordPress-Plugin komprimieren. TinyPNG verringert selektiv die Anzahl der Farben innerhalb deines Bildes. Dies kann die Größe reduzieren und die Leistung deiner Landingpage steigern, ohne die Qualität des Bildes zu beeinträchtigen:
Es gibt auch viele zusätzliche Maßnahmen, die du ergreifen kannst, um die Leistung deiner Landingpage zu steigern, einschließlich Content Delivery Networks (CDNs) und Caching. Als zusätzlichen Bonus verbessern diese Techniken die Performance deiner gesamten Website und nicht nur die deiner Landingpages.
Cold OutreachBotschaften
Die Sprache auf einer Landingpage kann die Persönlichkeit einer Marke widerspiegeln. Wenn die Botschaften kalt oder flach sind, werden sie nicht viel dazu beitragen, Kunden zu locken. Versuche, die Sprache freundlich und einnehmend zu halten.
Die CTA von Constant Contact, wie hier zu sehen, ist recht einladend und erwähnt, dass kein Risiko oder eine Kreditkarte erforderlich ist. Die Seite betont auch, dass das Produkt einfach zu bedienen ist.
Defekte CTAs
Wenn ein CTA nicht richtig funktioniert, wirst du wahrscheinlich Leads verpassen. Selbst ein gut gestalteter CTA nützt dir nicht viel, wenn er nicht richtig funktioniert.
Wenn du deine CTAs einrichten, gibt es ein paar Dinge, auf die du achten solltest. Wenn du einen Lead Magneten anbietest, musst du sicherstellen, dass der Download richtig funktioniert. Falls das Angebot per E-Mail kommt, stelle sicher, dass deine Website E-Mails zuverlässig versendet. Ein*e Kunde*in, die*er eine versprochene Belohnung nicht erhält, wird wahrscheinlich einen schlechten Eindruck von deinem Unternehmen haben.
- Außerdem ist es wichtig, sicherzustellen, dass die Einträge im Kontaktformular an die richtige Person weitergeleitet werden. Dies ist besonders wichtig, wenn du eine Landingpage für eine*n Kunde*in entwirfst und diese Benachrichtigungen nicht selbst erhalten wirst.
- Schließlich solltest du sicherstellen, dass alle CTA Buttons klickbar sind und wie erwartet funktionieren. Eine Schaltfläche, auf die Benutzer nicht klicken können, ist verwirrend und kann die UX der Website beeinträchtigen.
- Der beste Weg, um sicherzustellen, dass deine CTAs funktioniert, ist sie selbst zu testen. Mache dir eine Liste aller CTAs, die du auf der Landingpage eingebaut hast, damit du beim Testen keine übersiehst.
Nicht scannbarer Text
Da Menschen dazu neigen, Inhalte im Internet zu überfliegen, solltest du deine Texte so einladend wie möglich gestalten. Große Textabschnitte können ein Ärgernis für die Augen sein und verhindern, dass die Benutzer deine Nachricht erhalten.
Um Text scannbar zu halten, versuche, deine Sätze und Absätze relativ kurzzuhalten. Du kannst auch häufige Überschriften und Zwischenüberschriften verwenden, um den Text weiter aufzulockern. Denke schließlich daran, dass Aufzählung-listen das Auge anziehen und leichter zu lesen sind.
Zeit für die Erstellung deiner Landing Page
Eine einfache, ansprechende und konvertierende Landingpage zu entwerfen, ist keine leichte Aufgabe. Bei so vielen einzelnen Abschnitten und potenziellen Fehlern kann man leicht von der Aufgabe überwältigt werden. Wenn du dich jedoch auf einen Teil nach dem anderen konzentrierst, wirst du feststellen, dass es nicht so schwierig ist, wie es zunächst scheint.
Viele der Landingpage Best Practices, die wir behandelt haben, betonen Klarheit und Benutzerfreundlichkeit. Letztendlich können ein einfaches Design, prägnante Inhalte und gut lesbare Schriftarten dazu beitragen, den Grundstein für eine erfolgreiche Seite zu legen.
Was macht deiner Meinung nach eine effektive Landingpage aus? Teile deine Gedanken mit uns in den Kommentaren unten!
Übersetzt von Nata Uchava
Von Website Freiburg
Quellen, unsere Websoftware Partner Elementor Pro:
www.elementor.com/blog/how-to-design-effective-landing-page/
