So baust du eine Landing Page bei Squarespace
Du bist schon etwas eingelesen in das Thema “Online verkaufen” und willst deine ersten Landing Pages erstellen? Dann hast du genau auf den richtigen Artikel geklickt.
Hier zeige ich dir:
was Landing Pages sind und was ihren Inhalt ausmacht
Beispiele für Landing Pages von Squarespace (nämlich meine!)
wie du deine eigene Landing Page für deine Squarespace-Website baust
Los geht’s!
Inhaltsverzeichnis:
👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
Was ist eine Landing Page und wozu braucht man sie?
Der Name ist Programm: Eine Landing Page ist eine Seite, auf der die Leute landen - sie sind also gelandet und sollen im Normalfall etwas tun.
Und zwar: Eine Sache.
Der Unterschied zu fast allen anderen Seiten deiner Website ist dabei der Folgende: Es gibt kein Menü und keine Navigation. Und: Es gibt wie gesagt nur EINEN Call-to-Action (Handlungsaufruf).
Typischerweise ist eine Landing Page dazu da, Leute am Ende einer von dir strategisch geplanten Website-Reise aufzufangen - und sie gezielt zu einem Ziel hin zu leiten, das du dir vorher überlegt hast.
EIN Ziel ist dabei das Haupt-Stichwort - und ein Call-to-Action bedeutet, dass man wirklich nur von der Seite wegkommt, wenn man den von dir festgelegten Schritt weitergeht. (Außer natürlich, man klickt im Browser auf “Zurück”)
Das ist auch der Grund, warum du das Menü gerne verstecken möchtest. Weil du nämlich nicht willst, dass dein Websitebesucher “abgelenkt” wird und auf die Idee kommt, irgendwo anders hinzugehen. Denn er soll, wenn er sich irgendwohin bewegt, genau den Schritt gehen, den du vorgibst.
Beispiele für Landing Pages
Je nachdem, welche Quellen du dir ansiehst, kannst du ganz verschiedene Zwecke und Beispiele für Landing Pages finden. Da wird auch teilweise ganz schön viel vermischt, sodass es schwierig ist, den Überblick zu bewahren.
Landing Pages können nämlich ziemlich verschieden aussehen. Das kann so etwas sein wie:
Eine Anmelde-Seite, die nur dafür da ist, dass die Leute sich für einen Emailkurs eintragen (ein Beispiel von mir ist hier)
Eine Angebotsseite, auf der alle Buttons nur zur Bezahlseite EINES Angebotes führen (auch Sales Page genannt)
Eine SEO-optimierte Seite, auf der du all deine Inhalte zu einem bestimmten Thema bündelst (oft auch Microsites genannt - wobei unter diesem Begriff vor allem die gemeint sind, welche eine eigene Domain haben) und dann zu etwas (einem Angebot u.Ä.) leitest
Eine für sich stehende Seite, auf der du eine Geschichte erzählst und mit einem gewissen Handlungsaufruf abschließt
Ich baue zum Beispiel manchmal Seiten, die auf ein bestimmtes Thema optimiert sind und dann zu einem bestimmten Gratis-Freebie führen.
👉 Wenn du Squarespace selbst testen willst, bekommst du hier mit dem Code VICTORIA10 nach der gratis Testphase einen Rabatt von 10% auf dein erstes Jahr. (Das ist natürlich ein Werbelink.)
Tipp: Ganz neu richten wir für dich als Blogleser alternativ sogar einen special 20%-Rabatt ein. → Bekommst du hier.
So baust du eine Landing Page bei Squarespace
Auch wenn es dir von anderer Seite anders gesagt wird: Du kannst statt Tools wie Lead Pages oder Clickfunnels auch einfach deine eigene Squarespace-Website verwenden.
Du brauchst dazu das Business-Abo von Squarespace, da du seitenspezifisches CSS verwendest (Wenn du keine Ahnung hast, was CSS ist, lies dir zuerst kurz diesen Basic-Artikel von mir zu CSS durch.)
Zunächst baust du deine Seite wie eine normale Seite, inklusive aller Bilder und Handlungsaufrufe.
Dann fehlt nur noch, dass du das Menü und den Header verstecken musst.
Menü, Logo und Header bei Squarespace verstecken
Für eine Landing Page gehst du bei Squarespace unter “Seiten” rechts neben dem Seitennamen auf das Rädchen.
Dann wählst du ERWEITERT aus:
Und gibst das Folgende ein:
<style> .header {
display: none !important;
} </style>
Damit wird der gesamte Header versteckt. Wenn du oben ein Logo haben willst, kannst du es einfach manuell einfügen - oder auch ein komplett anderes Header-Design nehmen.
Je nachdem, welche Version du hast, kann es sein, dass du den Punkt vor “header” weglassen musst.
Wenn du auch die Fußzeile (=den Footer) ausblenden willst, nimm statt des Codes oben diesen Code:
<style> .header, footer {
display: none !important;
} </style>
Wichtig!
Wenn du die Fußzeile ausblendest, vergiss nicht, manuell Links zu Impressum und Datenschutzerklärung zu setzen.
Auch gut: Popups und Mitteilungsleiste deaktivieren
Wenn du eine Landing Page hast, möchtest du normalerweise nicht, dass Popups aufpoppen. Denn meist weist man ja mit dem Popup gerade zur Landing Page!
Um die Popups und Mitteilungsleiste zu deaktivieren, füge dem Code von oben auch das hier hinzu:
.sqs-popup-overlay {display: none!important;}
.sqs-announcement-bar { display: none; }
Wichtig: Das muss innerhalb von <style> und </style> stehen.
Wie immer gilt: Testen, bevor du das in die Öffentlichkeit raus lässt.
Zack, fertig!
So einfach geht es, deine eigene Landing Page mit Squarespace zu bauen.
Bevor dieser Artikel vorbei ist, hast du vielleicht noch die Frage: Warum nehmen andere Leute teure Tools für ihre Landing Pages? Sehr gute Frage! Schließlich sind Anbieter von Landing Pages wie Clickfunnels, OptimizePress, Lead Pages oder Unbounce gar nicht so günstig.
Der Unterschied liegt vor allem darin, dass du viel mehr Funktionen und Analytics hast als bei Squarespace. Denn die oben genannten Tools sind vor allem spezialisierte Tools - und Squarespace ja ein Allround-Websitesystem. Wenn du also genau die Absprungraten und Klicks bis ins kleinste Detail aufgeschlüsselt in deinen Analytics willst (ohne das selbst bei Google Analytics einzustellen), kann es sich lohnen, dir solche Tools mal anzugucken.
Viel Spaß dabei und frohes Squarespacen!
Diese Squarespace-Artikel könnten ebenfalls interessant für dich sein:
