Eine Landing Page soll User zu einer (Kauf-)Handlung animieren und/oder Leads für dein Unternehmen generieren. Wir zeigen dir auf, worauf du achten musst, damit dem Erfolg deiner Landing Page nichts im Wege steht.
Das Ziel einer Landing Page
Besucher:innen landen meist durch eine Google-Suche, Social Media oder andere Anzeigen auf eure Landing Pages. Das Ziel sollte sein, die Besucher:innen abzuholen und im besten Falle eine Conversion, wie z. B. den Kauf eines Produktes oder den Abschluss eines Vertrages zu erreichen. Im Fokus stehen also wertige Informationen und Call-to-Actions.
Der Aufbau
Ein unkomplizierter Aufbau eurer Landing Page ist sehr viel wichtiger, als das Design – das bestätigen Studien. Achte also bei dem Aufbau einer Landing Page darauf, dass sich die Zielgruppe schnell und einfach zurechtfindet.
Nutze in JUNE als Erstes immer eine Section und befülle diese mit Containern oder Grids.
Du kannst auch Content-Komponenten direkt in eine Section ziehen, jedoch hast du durch einen Container oder Grid mehr Anpassungsmöglichkeiten in Hinsicht von Abständen, Ausrichtung, Format, Hintergründe, Effekte, Rahmen und vieles mehr.
Die Struktur einer Website
1. Navigation / Header
In der Navigation werden meist das Unternehmenslogo, das Menü und ggf. weitere Informationen und Icons (Warenkorb, Suche, etc.) oder auch Call-to-Action Buttons (Kontakt, Anfrage, Kauf) aufgezeigt. Der Fokus sollte auf der Übersichtlichkeit liegen.
Um einen Header zu erstellen, folge den folgenden Schritten:
In JUNE wählst du für diesen Teil deiner Website die Navigations-Komponenten und befüllst diese mit Leben.
Navigiere in den Landing Page Editor, gehe über die linke Sidebar zu den Komponenten und füge die Navigations-Komponenten am Anfang deiner Website ein. Befülle die Section mit den Inhalten, die dein Header aufzeigen soll.
Nutze hierfür auch die anderen Navigations-Kompontenten Link und Dropdown:
Öffne in der rechten Sidebar die Ebenen (Layers) und gebe der Navigations-Section einen aussagekräftigen Namen, bevor du fortfährst. Das hilft dir später bei der Übersichtlichkeit. Doppelklicke hierfür auf den Namen der Section.
Klicke nun auf die Drei Punkte der Section und wähle Referenz erstellen.
Wenn du die Navigations-Section nun an einer Stelle deiner Website änderst, wird diese auf jeder (Sub)Page geändert, auf welcher sie eingebaut ist.
2. Landing Page Header (Hero)
Der Header beschreibt den oberen Teil deiner Website, welcher den ersten Eindruck bei deinen Usern hinterlässt. Hier sollte eine aussagekräftige H1-Headline, eine Call-to-Action und eine schöne und passende Bildwelt dargestellt werden. Diese Section erstellt du, wie jede andere Inhalts-Section auch. Viele Website-Anbieter setzen das Format des Heros auf 75 % oder 100 %, sodass die User zunächst nur den Hero sehen, wenn sie deine Website besuchen.
3. Inhalte
Nach dem Header-Bereich stehen dir alle Möglichkeiten offen. Was möchtest du kommunizieren? Was ist dein Ziel? Was kommt bei deiner Zielgruppe gut an? Mit diesen Fragen solltest du dich in jedem Fall beschäftigen und dementsprechend ein passendes Layout erstellen und mit relevanten Inhalten füllen.
Nutze alle verfügbaren Content-Komponenten, um deine Website mit deinen gewünschten Inhalten zu befüllen. Die Übersicht der Komponenten kannst du dir über die linke Sidebar > Komponenten anzeigen lassen.
Diese Elemente sind für den perfekten Landing Page-Inhalt ausschlaggebend:
Zeitgemäßes und thematisch passendes Design aufbauen
Übersichtlichen Aufbau wählen
Überzeugende Headlines wählen
Bilder, Videos und Illustrationen nutzen
Alleinstellungsmerkmale in den Fokus setzen
Positive Kundenstimmen hervorheben
Aussagekräftige und kurze Inhalte ausspielen
Auffällige Call-to-Action-Buttons nutzen, um Conversions zu erzielen
4. Formulare (Forms)
Formulare auf Landing Pages dienen dazu, dass deine Website-Besucher:innen ihre Informationen an dich übermitteln können – beispielsweise Kontaktdaten, E-Mail-Adressen, Feedback, Antworten auf Umfragen oder sogar Käufe. Formulare sind ein wesentliches Element von Landing Pages und spielen eine entscheidende Rolle bei der Lead-Generierung, der Kundengewinnung und der Interaktion mit Nutzer:innen.
Warum du Formulare verwenden solltest:
Lead-Generierung: Formulare sammeln Besucherinformationen, z. B. deren Namen, E-Mail-Adressen, Telefonnummern usw. und wandeln anonyme User in potenzielle Leads um.
Conversion-Möglichkeiten: Formulare bieten klare CTAs für Aktionen wie Abonnements, Angebotsanfragen, das Herunterladen von Inhalten oder den Kauf von Produkten.
Datenerfassung & Marktforschung: Formulare sammeln spezifische Daten über die Zielgruppe für Einblicke, Forschung, Personalisierung und die Verbesserung der Benutzerfreundlichkeit.
Kommunikation & Kundensupport: Stelle den direkten Kontakt für Anfragen, Support und Feedback her und verbessere so die Kundenbindung.
Personalisierung: Durch die Erfassung spezifischer Informationen über Formulare kannst du deine Marketingmaßnahmen und deine Kommunikation auf der Grundlage individueller Benutzerpräferenzen anpassen.
Datenorganisation & Automatisierung: Alle von deinen Usern eingegebenen Daten können im JUNE CRM (Customer Relationship Management) automatisch gespeichert, organisiert und für spätere Referenzen segmentiert werden. Diese Automatisierung rationalisiert die Datenverwaltung und erleichtert die Lead-Pflege und Folgeprozesse.
Messbare Metriken & Optimierung: Formulare bieten messbare Metriken, um die Leistung der Landing Page zu analysieren, verbesserungswürdige Bereiche zu identifizieren und die Nutzung zu optimieren.
Formulare in JUNE:
Ein Formular besteht immer aus einem Form Container, der bestimmt, wo die Daten gespeichert werden und wie das Formular generell aussehen und sich verhalten soll.
In den Form Container werden dann die unterschiedlichen Felder hinzugefügt, die in dem Formular abgefragt und gespeichert werden sollen. Für diese Felder gibt es unterschiedlichste Einstellungsmöglichkeiten, von einfachen Textfeldern, die bei Bedarf direkt validiert werden können (z. B. eine E-Mail-Adresse), zu Checkboxen, Dropdown in unterschiedlichen Varianten und Datei-Uploads.
Um das Formular zu vollenden und das Absenden der Informationen zu ermöglichen, muss zum Abschluss immer ein Submit Button hinzugefügt werden.
Um noch genauer zu erfahren, welche Schritte du vornehmen musst, damit die Daten, die du über ein Formular sammeln möchtest, in der richtigen Liste landen, folge diesem Artikel:
Formulare aufbauen ***coming soon***
Formular Beispiel für Buchungen:
Formular Beispiel für ein Gewinnspiel:
5. Slideshows
Mit Slideshows können platzsparend mehrere Grafiken als Bild-Diashow in deine Landing Page eingebaut werden.
Vorteile von Slideshows:
Visuelle Wirkung: Fesselnde und interaktive Anzeige von mehreren Bildern.
Geschichten erzählen: Vermittlung von Botschaften oder Erzählungen durch aufeinanderfolgende Bilder.
Optimierung des Platzes: Präsentiere mehrere Bilder auf engem Raum.
Hervorhebung von Variationen: Zeigen verschiedene Versionen oder Blickwinkel eines Produktes.
Verwendungsrichtlinien für Website-Redakteur:innen:
Wähle relevante und hochwertige Bilder aus.
Optimiere die Bildgrößen für die Leistung.
Passe die Übergänge an das Branding an.
Biete Benutzer:innen Kontrolle über Navigation und Interaktion.
Stelle sicher, dass die Bilder auf allen Geräten ansprechbar sind.
Füge Alt-Text für Barrierefreiheit hinzu.
Aktualisiere den Inhalt regelmäßig, um ihn frisch zu halten.
Slideshows in JUNE nutzen:
Gehe in deinen Landing Page Editor.
Erstelle eine Section und füge den Slideshow Container hinzu.
Ziehe nun die Slideshow Item Komponente in den Slideshow Container. Nutze so viele Slideshow Items, wie du Bilder hinzufügen möchtest.
Als letzten Schritt musst du nun, wie unten im Beispiel aufgezeigt, eine Image Komponente in das jeweilige Slideshow Item ziehen.
6. Interaktive Elemente (Tabs, Modale)
Tabs und Modals sind die zwei gängigsten interaktive Komponenten, die auf Websites verwendet werden, um die Benutzerfreundlichkeit zu verbessern und Inhalte effektiv zu organisieren. Im Folgenden findest du eine Beschreibung der beiden Komponenten:
Tabs (Registerkarten):
Tabs sind Navigationselemente, die den Inhalt in einzelne Abschnitte unterteilen, zwischen denen die Benutzer:innen wechseln können, ohne neue Seiten zu laden. Jeder Tab kann für eine bestimmte Kategorie oder ein bestimmtes Thema stehen und wenn man auf den jeweiligen Tab klickt, wird der entsprechende Inhalt angezeigt, während die anderen ausgeblendet werden.
Vorteile von Tabs:
Organisation des Inhalts: Tabs helfen dabei, Informationen zu kategorisieren und zu organisieren, insbesondere wenn es sich um mehrere Abschnitte oder Themen auf einer einzigen Seite handelt. Dies steigert auch die Benutzerfreundlichkeit.
Platzersparnis: Spare Platz, indem du Inhalte in kompakte Abschnitte zusammenfasst, so dass sich die Benutzer:innen auf die für sie relevanten Informationen konzentrieren können.
Tabs in JUNE nutzen:
Gehe in deinen Landing Page Editor.
Erstelle eine Section und füge den Tab Container hinzu.
Ziehe nun die Tab Item Komponente in den Tab Container. Nutze so viele Tab Items wie du möchtest.
Als letzten Schritt musst du nun, wie unten im Beispiel aufgezeigt, die gewünschten Inhaltskomponenten in einen Container in dem jeweiligen Tab Item ziehen.
Modale / Modalfenster (Intent Modal):
Modale, auch bekannt als modale Fenster/Modalfenster oder Pop-ups, sind temporäre Fenster, die den Hauptinhalt einer Webseite überlagern, um zusätzliche Informationen anzuzeigen oder Benutzerinteraktionen aufzufordern. Sie erscheinen in der Regel in der Mitte des Bildschirms und verdunkeln oder verwischen den Hintergrundinhalt, um die Aufmerksamkeit auf den Inhalt oder die Aktion des Modals zu lenken.
Vorteile von Modalen:
Gezielte Aufmerksamkeit: Modals ziehen die Aufmerksamkeit der Nutzer:innen auf sich, indem sie den Hauptinhalt überlagern und bestimmte Informationen oder Handlungsaufforderungen hervorheben.
Kontextbezogene Informationen: Modals bieten zusätzliche Details oder Erklärungen, ohne dass die aktuelle Seite verlassen werden muss, was das Verständnis der User verbessert.
Benutzeraktionen: Modale können die User zu bestimmten Aktionen auffordern, z. B. zum Ausfüllen eines Formulars, zum Bestätigen einer Entscheidung oder zum Anzeigen von Multimedia-Inhalten wie Videos oder Bildern.
Opt-in/Opt-out-Interaktionen: Modale werden häufig für Einwilligungsformulare, Cookie-Benachrichtigungen oder Newsletter-Abonnements verwendet und ermöglichen es den Usern, ihre Präferenzen einfach zu steuern, ohne die aktuelle Webseite zu verlassen.
Unterbrechung des Benutzerflusses: Modale können zwar effektiv sein, sollten aber ausgewogen eingesetzt werden, um den Fluss des Users nicht zu unterbrechen oder aufdringlich zu werden, damit eine positive Nutzererfahrung gewährleistet ist.
Modale in JUNE nutzen:
Gehe in deinen Landing Page Editor.
Erstelle ein Intent Modal und klicke in den links aufgezeigten Settings auf "Open Modal (for editing)", um dir das Modal anzeigen zu lassen und visuell darin arbeiten zu können.
Füge dem Intent Modal einen Container oder beispielsweise ein Grid hinzu. Befülle diese dann wie gewünscht mit weiteren Komponenten.
Modal Beispiel einen Newsletter Sign-up:
7. Footer
Ein Footer ist eine Section am Ende einer Website, der in der Regel Informationen über die Website wie ein umfassendes Menü, Verlinkung zu Impressum & Datenschutz, Urheberrechtshinweise und Kontaktinformationen beinhaltet. Er dient dazu, auf der Website zu navigieren und zusätzliche Ressourcen zu finden. Die Fußzeile ist in der Regel auf allen Seiten der Website gleich und kann durch Scrollen zum unteren Ende der Seite aufgerufen werden.
Um einen Footer zu erstellen, folge den folgenden Schritten:
Erstelle im Landing Page Editor eine Section am unteren Ende deiner Website. Befülle die Section mit den Inhalten, die dein Footer aufzeigen soll.
Öffne in der rechten Sidebar die Ebenen (Layers) und navigiere zu der Section, die du als Footer nutzen möchtest.
Gebe der Section einen aussagekräftigen Namen, bevor du fortfährst. Das hilft dir später bei der Übersichtlichkeit. Doppelklicke hierfür auf den Namen der Section.
Klicke nun auf die Drei Punkte der Section und wähle Referenz erstellen.
Wenn du die Section nun an einer Stelle änderst, wird diese auf jeder (Sub)Page geändert, auf welcher sie eingebaut ist.
Um den Footer auf einer (Sub)Page zu benutzen, folge den folgenden Schritten:
Navigiere in der linken Sidebar zu deinen Favoriten > Referenzen (obere Menüleiste).
Wähle den von dir als Referenz angelegte Footer-Section aus und ziehe sie ans Ende deiner (Sub)Page.