In diesem Artikel zeige ich dir, wie du Landingpages mit Hilfe der Shop-Theme-Funktion erstellen kannst. Wir bearbeiten hierzu beispielhaft gemeinsam einen etwas komplexeren UseCase.
Eine Landingpage (Landeseite) ist eine Webseite, auf die ein potenzieller Kunde gezielt über Werbeanzeigen (Facebook Ads, Google Ads etc.) oder andere Verlinkungen auf eine Webseite geleitet wird. Die Webseite hat die Zielsetzung, den potenziellen Kunden zu einer bestimmten Handlung zu bewegen, beispielsweise ein Produkt zu kaufen oder sich zu einem Webinar anzumelden. der Fokus liegt also bei einer Landingpage auf der Produktpräsentation und auf einer Handlungsaufforderung, auch call to action (CTA) genannt, beispielsweise zum Kauf des Produktes, zum Eintragen in deine Mailingliste oder zur Anmeldung für ein Webinar.
Hierzu kannst du die Möglichkeiten der Shop-Themes nutzen.
UseCase
Du hast eine Werbeanzeige bei Facebook geschaltet, um deinen Premiumkurs (Produkt A) zu verkaufen. Interessenten, die auf deine Anzeige klicken, sollen auf eine Landingpage geleitet werden, auf der du das Produkt anpreist und zum Kaufen aufforderst (CTA). Auf der Landingpage soll es entsprechend eine Möglichkeit geben, per Mausklick zur Bezahlseite des Produktes zu gelangen.
Überblick über diesen Artikel
- Shop-Theme für deine Landing-Pages erstellen
- Das Shop-Theme für Landing-Pages einrichten
- Kopfbereich ausblenden (Meine Empfehlung)
- Fußbereich bearbeiten
- Pflichtangaben (Impressum etc.) lieber im Kopfbereich oder im Fußbereich?
- Landing-Page für dein Produkt anlegen
- Landing-Page bearbeiten
- Verlinkung zur Bezahlseite
- Erreichbarkeit deiner Landingpage
Schritt-für-Schritt-Anleitung
Shop-Theme für deine Landing-Pages erstellen
Du kannst in deinem Account beliebig viele Shop-Themes erstellen. Ich empfehle dir, für deine Landingpages ein eigenes Shop-Theme zu erstellen. So hast du alle Landingpages übersichtlich in einem Theme und kannst sie schnell duplizieren und anpassen.
- Geh zur Übersicht der Shop-Themes und klicke oben rechts auf “Erstellen”
- Erstelle nun ein Shop-Theme und gib ihm eine eindeutige Bezeichnung wie beispielsweise “Landingpages-DeinName”
Eine ausführliche Anleitung zum Erstellen eines Shop-Themes findest du in einem eigenen Hilfeartikel.
Das Shop-Theme für Landing-Pages einrichten
Nachdem du ein neues Shop-Theme als dein Landingpage-Theme angelegt hast, kannst du damit beginnen, beliebig viele Landingpages in diesem Theme anzulegen.
- Geh zur Übersicht der Shop-Themes
- Ganz rechts in der Zeile deines Landingpage-Themes klickst du jetzt auf die drei Punkte und dann auf den Bleistift
Anschließend kommst du in die Bearbeitungsansicht des Themes. Hier bearbeiten wir nun zuerst den Kopfbereich (Header) und den Fußbereich (Footer) des Themes als Grundeinstellung für deine Landingpages.
Kopfbereich ausblenden (Meine Empfehlung)
- Setze in den Einstellungen des Kopfbereichs deines Themes ganz rechts bei “Ausblenden” ein Häkchen.
- Damit wird der Kopfbereich auf allen Seiten, die du in diesem Theme erstellst, ausgeblendet.
- Bei Bedarf kannst du auf einzelnen Seiten später einen Kopfbereich wieder ergänzen.
Hinweis / Tipp
Warum blenden wir in unserem Beispiel den Kopfbereich aus?
Landingpages konzentrieren sich vollkommen auf das angepriesene Produkt und enthalten daher in der Regel so wenig Ablenkungen wie möglich. Deshalb ist es bei Landingpages im Gegensatz zu einem Shop-Theme oder einer Shop-Seite ratsam, auf Header und Menü zu verzichten, da ein Menü immer zum Klicken und Umschauen auffordert. Die Seitenbesucher der Landingpage sollen aber ausschließlich dem CTA folgen, in unserem Beispiel also auf den Kaufen-Button klicken. Deshalb erstellen wir im Beispiel eine Landingpage ohne Header. Den Footer hingegen brauchst du, um den gesetzlichen Anforderungen deiner Impressumspflicht inklusive Datenschutzbestimmungen gerecht zu werden.
Natürlich kannst du den Kopfbereich auch nutzen, wenn du beispielsweise dort einen Link zum Impressum hinterlegen möchtest und lieber auf den Footer verzichtest oder wenn du aus einem anderen Grund einen Header auf deiner Landingpage haben möchtest.
Eine ausführliche Anleitung zur Bearbeitung des Kopfbereichs eines Shop-Themes findest du in einem eigenen Hilfeartikel.
Fußbereich bearbeiten
- Bleibe in der Bearbeitungsansicht, nachdem du den Kopfbereich ausgeblendet hast und scrolle weiter runter
- Klicke auf den Bleistift ganz rechts und bearbeite jetzt den Fußbereich und achte auf die gesetzlich vorgeschriebenen Verlinkungen zu Impressum, Datenschutzbestimmungen etc.
- Alternativ kannst du diese Angaben, wie oben erwähnt, auch im Header unterbringen
Zum Bearbeiten des Fußbereichs (Footers) findest du einen eigenen ausführlichen Hilfeartikel.
Hinweis / Tipp
Pflichtangaben (Impressum etc.) lieber im Kopfbereich oder im Fußbereich?
Aus der Praxis heraus empfehle ich dir, alle Inhalte, die deinen Kunden von deiner Handlungsaufforderung (CTA) ablenken können, ganz weit unten und damit deutlich nach oder hinter deinem CTA zu platzieren. Es liegt in der menschlichen Psyche, neugierig zu sein und informativen Signalen hinterher zu gehen. Menüpunkte im Kopfbereich laden daher zum Klicken ein, auch bei so “langweiligen” Inhalten wie Impressumangaben. Halte also deinen Kunden lieber im Bann deiner Produktpräsentation, damit er deiner Handlungsaufforderung (Produktkauf, Listeneintrag, Webinaranmeldung etc.) folgt.
Landing-Page für dein Produkt anlegen
Jetzt zeige ich dir, wie du eine oder mehrere Landingpages in deinem speziell dafür erstellten Shop-Theme anlegst.
- Bleibe in der Bearbeitungsansicht des erstellten Themes. Dort findest du im mittleren Bereich die bereits voreingestellten Seiten “Main” und “Products page”
- Unter den bereits vorhandenen Seiten des Themes findest du eine Eingabemaske zum Erstellen neuer Seiten des Themes (1)
- In der linken Spalte legst du den Namen der Landingpage fest, in unserem Beispiel habe ich den Namen “Landingpage Produkt A” gewählt
- In der rechten Spalte gibst du eine URL-Erweiterung ein, die du unabhängig vom Namen deiner Landingpage festlegen kannst
- Klicke anschließend auf die Schaltfläche “Speichern” (2)
Landing-Page bearbeiten
Im nächsten Schritt bearbeitest du die neu erstellte Seite (Landingpage Produkt A) deines Shop-Themes.
- Bleibe hierzu in der Bearbeitungsansicht des erstellten Shop-Themes
- Klicke in der Zeile der von dir erstellten Seite (in unserem Beispiel “Landingpage Produkt A”) auf den Bleistift ganz rechts
Du kommst als nächstes in die Bearbeitungsansicht der von dir erstellten Seite und kannst deine Landingpage mit dem elopage-Builder gestalten.
-
Du kannst deine Landingpage mit dem elopage-Builder auf vielfältige Art und Weise gestalten.
Folgende Blöcke sind möglich:
- Text
- Bild
- Video
- Download-Dateien
- Testimonials - hinterlege Testimonials deiner Kunden
- Beliebte Produkte - lasse ausgewählte Produkte anzeigen (zum Kauf)
- Teammitglieder - stelle dein Team vor
- Header & Menü
- Banner
- Fußbereich
- Produkte
Verlinkung zur Bezahlseite
Sollen die Besucher deiner Landingpage als nächstes auf die Bezahlseite deines Produktes geleitet werden, ist es wichtig, eine auffälligen Handlungsaufforderung (CTA) zu platzieren, beispielsweise einen Button oder eine Produktabbildung zum Draufklicken. Hierzu kannst du alle Varianten von Verlinkungen benutzen, also beispielsweise
- Produktbadges
- Produktabbildungen
- Buttons
- Bilder
- Videos mit Verlinkungen
- Textverlinkungen
Ich zeige dir hier zwei Beispiele:
- Verwendung der Option “Beliebte Produkte”
- Verlinkung eines eingefügten Verkaufen-Buttons
Beispiel 1 - Verwendung der Option “Beliebte Produkte”
Du möchtest die Besucher deine Landingpage über die Option “Beliebte Produkte” zur Bezahlseite des angepriesenen Produktes leiten. Du hast bereits ein Video in die Landingpage eingefügt und forderst darin zum Kaufen auf (CTA). Unter dem Video soll das angepriesene Produkt als “Beliebtes Produkt” eingefügt werden.
Füge hierzu unter deinem Video mit deinem elopage-Builder einen neuen Block ein und wähle hierbei die Option “Beliebte Produkte”.
Als nächstes wird die Vorschau eines Produktkarusells abgebildet, das aus drei Produkten besteht. Du kannst sowohl die Anzahl der tatsächlich abgebildeten Produkte beeinflussen als auch die dort gezeigten Produkte.
Mit einem Klick auf den Bleistift rechts oben in dem eingefügten Block “Beliebte Produkte” kommst du in die Bearbeitungsansicht und kannst dort verschiedene Einstellungen vornehmen sowie Produkte auswählen.
Du kommst als nächstes in die Bearbeitungsansicht des eingefügten Blocks “Beliebte Produkte” und kannst im oberen Bereich zahlreiche Einstellungen zum Hintergrund, zu Farben und Schriftauszeichnungen vornehmen. Richte hier die optische Darstellung des gesamten Blocks “Beliebte Produkte” nach deinen Wünschen ein.
Anschließend scrollst du weiter herunter und kommst zur Übersicht deiner Produkte. Hier wählst du das Produkt, das auf deiner Landingpage angepriesen wird. Du kannst auch mehr als ein Produkt auswählen. Das kann bei einer Landingpage sinnvoll sein, wenn du mehr als eine Produktvariante bewirbst.
Setze in der Zeile des ausgewählten Produkts ganz links ein Häkchen und bestätige deine Auswahl, nachdem du auch alle Einstellungen zu Farben und Schriftauszeichnungen im oberen Bereich vorgenommen hast, durch einen Klick auf die Schaltfläche ”Speichern” ganz unten rechts.
Nach dem Speichern kommst du zur Bearbeitungsansicht der Landingpage zurück und das ausgewählte Produkt wird inklusive “Jetzt kaufen” - Button abgebildet.
Mit einem Klick auf “Jetzt kaufen” wird dein Kunde direkt auf die Bezahlseite geleitet und kann das Produkt bestellen.
Voraussetzungen
Die Option “Beliebte Produkte” kannst du nur dann verwenden, wenn das Produkt, das du verkaufen möchtest, NICHT auf “privat” gesetzt ist. Solltest du ein Produkt auswählen und einfügen, dass du selbst auf “privat” gesetzt hast, weil du vermeiden willst, dass es auf deiner Shop-Seite bei all deinen Produkten zu sehen ist, dann wird das Produkt nach dem Speichern NICHT auf deiner Landingpage angezeigt!
Warum ist das so und wie kannst du es lösen?
Du hast grundsätzlich die Möglichkeit, deine Produkte für Kunden und Suchmaschinen unsichtbar zu machen. Das ist dann vorteilhaft, wenn du vermeiden möchtest, dass jemand zufällig oder durch Suche (Google) dein Produkt findet. Wenn du beispielsweise ein Coaching-Produkt gezielt an bestimmte potenzielle Kunden verkaufen willst oder zu bestimmten Zeitpunkten im Webinar launchst, kann es von Vorteil sein, das Produkt nur zu einem bestimmten Zeitpunkt anzubieten (Verknappung). Dann stellst du es auf “privat”. Das legst du im Produkt selbst fest.
Du kannst in diesem Fall das Produkt NICHT mehr als “Beliebtes Produkt” einstellen. Dennoch kannst du die Besucher deiner Landingpage zur Bezahlseite des angepriesenen Produktes leiten. Hierzu hinterlegst du einen Link zur Bezahlseite hinter einem beliebigen Inhalt deiner Landingpage (Button, Bild, Text etc.). Ich zeige dir das im zweiten Beispiel.
Beispiel 2 - Verlinkung eines eingefügten Buttons
Du willst die Besucher deine Landingpage über einen auffälligen Button “Jetzt kaufen” zur Bezahlseite des angepriesenen Produktes leiten. Du hast bereits ein Video in die Landingpage eingefügt und forderst darin zum Kaufen auf (CTA). Unter dem Video soll der Button eingefügt werden.
Folgendermaßen solltest du vorgehen:
- Kopiere zuerst den Link der Bezahlseite des Produktes in die Zwischenablage deines PCs
- Füge dann auf der von dir erstellten Landingpage mit deinem elopage-Builder einen neuen Block ein und wähle hierbei die Option “Text”
- Füge in das Textfeld einen Button ein, den du vorher mit einem Grafikprogramm erstellt hast oder bereits hochgeladen hast (Der befindet sich dann in deiner Mediathek)
- Speichere deine Eingaben ab.
Diese Schritte gehen wir jetzt gemeinsam ausführlich durch.
So findest du den Link der Bezahlseite
Den Link zur Bezahlseite des Produktes findest du, indem du das betreffende Produkt in der Übersicht aller Produkte anklickst.
Mit einem Klick auf das Dokumentensymbol ganz rechts kopierst du den Link der Bezahlseite in die Zwischenablage deines PCs und kannst ihn wie oben beschrieben mit deinem Verkaufen-Button verknüpfen.
So fügst du einen Textblock mit einem verlinkten Button auf deiner Landingpage ein
Nachdem du den Link der Bezahlseite deines Produktes kopiert hast, gehst du zurück in die Bearbeitungsansicht deiner Landingpage und fügst einen neuen Block “Text” ein. In unserem Beispiel platziere ich den Textblock unter dem CTA-Video.
Mit einem Klick auf den Bleistift rechts oben kommst du in die Bearbeitungsansicht des eingefügten Blocks.
Du kommst jetzt in die Bearbeitungsansicht des eingefügten Blocks “Text” und kannst zahlreiche Inhalte einfügen, beispielsweise Text, Bilder, Videos. In unserem Beispiel fügen wir einen Button “Jetzt kaufen” ein. Einen solchen Button kannst du mit jedem einfachen Grafikprogramm selbst erstellen, beispielsweise mit Paint, und als Bilddatei (.jpg oder .png) auf deinem PC abspeichern.
Mit einem Klick auf das Bildsymbol kannst du dein Bild (im Beispiel den Button) entweder aus der Mediathek deines Accounts auswählen oder von deinem PC hochladen.
Füge deinen vorbereiteten Button in das Textfeld ein. Anschließend kannst du die Größe des Buttons durch ziehen an den Ecken (1) anpassen und mit der Verlinkung des Buttons weitermachen. Hierzu bitte auf das Verlinkungssymbol klicken (2).
Gib anschließend den Link der Bezahlseite des Produktes ein (1) und bestätige das Einfügen mit einem Klick auf “Insert” (2). Beende die Eingabe schließlich mit eine Klick auf die Schaltfläche “Speichern” (3) rechts unten.
Anschließend wird der verlinkte Button auf deiner Landingpage angezeigt, in unserem Beispiel unterhalb des Videos.
Erreichbarkeit deiner Landingpage
Schließlich musst du deine Landingpage deinen Kunden noch zugänglich machen. Typischerweise wirst du Interessenten über einen E-Mail-Link oder über eine Werbeanzeige zu deiner Landingpage weiterleiten. Du brauchst also den korrekten Link deiner Landingpage und hier ist Sorgfalt geboten, denn du arbeitest mit einem eigenen Shop-Theme, das du für deine Landingpages eingerichtet hast.
Die URL deiner Landingpage findest du in der Bearbeitungsansicht des erstellten Themes.
Auf der Übersichtsseite aller Shop-Themes findest du jeweils in den Vorschaulinks der Themes die individuelle Shop-Theme-ID.
Jetzt musst du beide zusammenfügen. In unserem Beispiel sieht das so aus:
URL der erstellten Landingpage: https://elopage.com/s/deinname/landing-a
Individuelle ID des ShopThemes “Landingpages”: ?shop_theme_id=169XX
Füge beide zu zusammen und hinterlege diesen Link in deiner Werbeanzeige oder E-Mail: https://elopage.com/s/deinname/landing-a?shop_theme_id=169XX
Hinweis / Tipp
Teste die zusammengesetzte URL, bevor du sie in einer Werbeanzeige oder in einer anderen Verlinkung nutzt um sicherzustellen, dass dir auch beim Zusammenfügen kein fehler unterlaufen ist. Kopiere sie hierzu einfach in die Adresszeile deines Browsers.
Über den Autor
Dieser Hilfeartikel ist geschrieben von unserem Certified Partner Ingo Simon, der elopage für sein Business nutzt und somit aus der Praxis für die Praxis schreibt.
Ingo unterstützt euch auch in der Facebook-Community bei Fragen aus der Praxis.