Landing Pages spielen im Online Marketing eine wichtige Rolle. Wie schön, dass es heute eine Menge Tools gibt, mit denen du schöne und professionelle Landing Pages ohne Programmierkenntnisse gestalten kannst.
Hier lernst du, was eine Landing Page ist und wofür du sie brauchst.
Heute zeige ich dir, wie du mit dem WordPress Page Builder Elementor wirklich schöne Landing Pages erstellst …oder Über mich-Seiten oder Produktseiten. Du entscheidest. Das Plugin lässt dich Seiten völlig frei gestalten – mit vielen Elementen und noch mehr Gestaltungsmöglichkeiten.
Eines noch vorab: Elementor ist ein kostenloses Plugin, benötigt für bestimmte Funktionen aber die kostenpflichtige Pro-Version (ca. 38€ pro Jahr), so auch für die Erstellung von Formularen. Wenn du bereit bist, in Sachen Design und Gestaltbarkeit ein paar Abstriche beim Formular zu machen, reicht aber die kostenlose Version aus. Dazu erkläre ich dir später mehr. Fangen wir erst einmal beim Anfang an.
Inhaltsverzeichnis:
- Schritt-für-Schritt Anleitung
- 3 Tipps für gute und professionelle Landing Pages
- Landing Page Templates von Elementor
Schritt-für-Schritt-Anleitung:
1. Installiere das Plugin
Bevor wir mit deiner Landing Page beginnen können, brauchst du natürlich das Plugin Elementor. Wenn du dieses bereits installiert und aktiviert hast, kannst du diesen Teil überspringen.
- Suche das Elementor-Plugin und installiere es (optional: Lade die zip-Datei für das Elementor Pro Plugin hoch und installiere es).
- Aktiviere das Plugin.
2. Lege ein Template an
Ich empfehle dir, deine Landing Page zunächst als Template vorzubereiten. So musst du keine Änderungen an bestehenden Seiten vornehmen und kannst deine Seite in Ruhe gestalten.
Templates sind Vorlagen, die du immer wieder verwenden kannst. So kannst du später auch schnell und einfach weitere Landing Pages gestalten und musst nicht immer von vorn beginnen.
So legst du ein Template an:
- Fahre mit der Maus über den neuen Elementor-Menüpunkt links in deinem WordPress-Menü. Klicke auf „Meine Templates“.
- Klicke oben auf den „Neu hinzufügen“-Button.
- Wähle im Drop-down die Option „Seite“ und gib deiner Vorlage einen Namen, z.B. „Freebie Landing Page“.
- Klicke auf Template erstellen.
- Wenn du ein neues Template anlegst, ist als Layout-Option „Standard-Template“ ausgewählt. Wenn du dieses ändern möchtest, klicke unten links auf „Speichern“, dann auf das Hamburger-Menü links oben und dann auf „Elementor verlassen“. (Hinweis: Um Verwirrung zu vermeiden, beziehe ich mich auf die WordPress Template Option immer mit dem Begriff „Layout“.)
- Wähle rechts unter „Template“ dein Layout aus. Du kannst hier zunächst nur 3 Optionen wählen:
- Standard-Template: Du kannst hier nur den üblichen Inhaltsbereich deiner Seite bearbeiten. Also das, wo bei einem Blogartikel dein Text landet.
- Elementor Canvas: Du startest hier mit einer komplett weißen Seite. Keine Menü, kein Footer, nichts. Als Landing Page für Downloads gut geeignet, hier lenkt nichts vom Ziel der Seite – der Conversion – ab.
- Elementor Volle Breite: Enthält den Kopf-Bereich deines Themes, ist nach links und rechts aber nicht eingeschränkt (es gibt also beispielsweise keine Sidebar)
- Wähle rechts unter „Template“ dein Layout aus. Du kannst hier zunächst nur 3 Optionen wählen:
- Hast du dein Layout gewählt, kann es mit dem Gestalten losgehen. (Klicke wieder auf „Mit Elementor bearbeiten“, wenn du dein Layout geändert hast und noch in der WordPress-Ansicht bist.)
Übrigens: Noch mehr praktische Tools wie Elementor findest du hier.
2. Wähle dein Design
Elementor bietet dir eine große Zahl an vorgefertigten Designs an – von einzelnen Elementen über größere Bausteine („Blöcke“) bis hin zu ganzen Seiten-Designs. Du kannst natürlich auch ohne Vorlage starten und dein Design völlig frei gestalten.
Arbeite mit Blöcken, ganzen Seiten-Vorlagen und eigenen Templates.Wenn du nun deine Elementor-Seite gestalten willst, siehst du zunächst eine Fläche, die einen grau-gestrichelten Rahmen hat. Dort sind zwei Buttons. Der blaue +-Button fügt eine neue Sektion hinzu – sprich: einen Abschnitt. Mit dem grauen Button mit dem Ordner Symbol kannst du auf die vorgefertigten Designs, die Blöcke sowie deine eigenen Vorlagen zugreifen.
Links siehst du die Übersicht mit den verfügbaren Elementen. Diese positionierst du per Drag & Drop: Ziehe ein Element dahin, wo es hin soll und lass die Maustaste los.
Wichtig: Die Elemente nehmen nicht automatisch das Design deiner Seite an. Du musst diese entsprechend gestalten. Dabei geht es vor allem um Schriftarten und -größen, Zeilenabstände sowie Farben.
Um herauszufinden, welche davon dein Theme nutzt, kannst du deiner Seite „unter die Haube schauen“.
Und so geht’s:
- Öffne eine beliebige Seite deiner Webseite / deines Blogs, die die entsprechenden Elemente enthält, im Browser und drücke F12. Diese Taste öffnet in den meisten Browsern die Console. In Safari musst du dafür die Entwicklertools über die Einstellungen aktivieren. (So geht’s.)
- Wähle dann oben das Icon mit dem Viereck und dem Pfeil aus und klicke auf das Element auf deiner Seite, das du untersuchen möchtest.
- Du siehst dann rechts in der Console die entsprechenden Eigenschaft als HTML-Code angezeigt. Aber keine Angst, das sieht nur im ersten Moment kompliziert aus.
- Die Angaben, die wir suchen, stehen hinter roten, englischen Begriffen, wie z.B. font-family (=Schriftart), font-size (=Schriftgröße), font-weight (=Schriftauszeichung, also die Dicke) sowie line-height (=Zeilenhöhe). Die Schriftfarbe finden wir hinter dem Wort color, sie ist im hexadezimal numerischen System darstellt – einem HTML Farbcode mit einer # und 6 Ziffern. Diesen Code kannst du direkt in das entsprechende Feld im Elementor kopieren.
Tipp: Mit der Pro-Version (die mit 38€ im Jahr durchaus als günstig bezeichnet werden kann) stehen dir nicht nur mehr Elemente und mehr vorgefertigte Designs zur Verfügung, sondern du kannst auch globale Elemente definieren. Damit gibst du einem Element das Aussehen, was deinem Theme entspricht bzw. dir gefällt und speicherst es übergreifend ab. Du kannst damit deine designten Elemente immer wieder in deine Seite ziehen und nur noch die Inhalte anpassen. Das spart unglaublich viel Zeit. Alternativ kannst du auch Elemente duplizieren (das geht jedoch nicht seitenübergreifend – einmal pro Seite musst du also jedes Element gestalten) oder als Template speichern (das ist in der Praxis jedoch etwas aufwändiger).
Gestalte deine Seiten responsiv
Es ist wichtig, auch die Ansichten für Tablets und Smartphones anzupassen. Seiten die mit Elementor gebaut wurden, sind grundlegend responsiv, das heißt, Texte und Bilder werden an den entsprechenden Bildschirm angepasst. Aber je nachdem wie du Abstände oder Größen eingestellt hast, gibt es noch einiges zu optimieren.
Achte hier bei den verschiedenen Eigenschaften deiner Elemente auf den hellblauen Kreis mit dem Handy-Symbol. Er zeigt dir, wo Eigenschaften für die verschiedenen Geräte unterschiedlich sein können. Das heißt, wenn du hier Abstände definierst, wirken sich diese nur auf Mobilgeräte aus und nicht auf deine Desktop-Version.
3. Integrationen: Verbinde dein E-Mail-Tool mit Elementor
Die meisten Landing Pages sind dazu da, um die Kontaktdaten der Besucher zu erfassen. Oftmals werden im Gegenzug dafür kostenlose Downloads angeboten – z.B. Guides, Checklisten, Vorlagen oder ähnliches.
Diese Kontaktdaten müssen dann aber natürlich auch irgendwo landen. Deswegen verbindest du deine Landing mit dem E-Mail Marketing Tool deiner Wahl. Das kannst du entweder über einen API-Schlüssel oder durch Wahl des entsprechenden Widgets tun.
Elementor bietet dir hierfür die Möglichkeit, professionelle Formulare selbst zu gestalten. Texteingabe, Checkboxen, Dropdown, Freitextfeld, alles kein Problem. Auch der optischen Gestaltung sind hier (fast) keine Grenzen gesetzt. Allerdings benötigst du für Formulare die Pro Version.
Folgende Anbieter kannst du per API mit Elementor verbinden:
- MailChimp
- GetResponse
- Drip
- ActiveCampaign
- Webhook
- ConvertKit
Ich selbst verwende hier übrigens GetResponse*, die Anbindung funktioniert hier super und ich kann danach schnell und einfach die Automatisierungen und Workflows zum Versenden der Freebies und zum Lead Nurturing einrichten.
Um dein E-Mail-Tool anzubinden, musst du über Elementor ein Formular anlegen. Klicke dann links auf „Aktion nach dem Versenden“ und wähle dein E-Mail-Tool aus.
Darunter erscheint ein weiterer Punkt zum Aufklappen, auf dem der Name deines Tools steht. Klicke hier bei „API Schlüssel“ auf „Custom“ und gib deinen Schlüssel ein.
Woher kommt der API Schlüssel?
Das ist von Tool zu Tool unterschiedlich. In der Regel findest du ihn irgendwo unter Account oder Einstellungen. Bei Mailchimp findest du den API unter „Account“. Klicke dazu rechts oben auf den Namen und dann auf „Account“. Wähle dann im Menü „Extras“, dort findest du „API Keys“. Sollte hier noch kein Schlüssel vorhanden sein, klicke auf „Create a key“.
Wenn du deine Landing Page mit deinem E-Mail-Tool verknüpft hast, kannst du hier nun die Liste (bzw. Gruppe) wählen, der die Kontakte hinzugefügt werden sollen. Danach ordnest du deine angelegten Formularfelder zu – also welches Feld ist die E-Mail-Adresse, welches der Name, usw.
Tipp: Wenn du (noch) nicht bereit bist, Geld für Elementor Pro auszugeben, kannst du bei der Auswahl der Elemente ganz unten unter „WordPress“ verschiedene Widgets nutzen. Hast du beispielsweise ein Plugin installiert, um ein Mailchimp Formular einzubinden, kannst du dieses hier nutzen. Bedenke aber, das deine Gestaltungsoptionen hier sehr begrenzt sind.
4. Lege deine Seite an
- Lege im WordPress eine neue Seite an.
- Lege den Titel der Seite an und bestimmte dein Layout – die auswählbaren Optionen variieren von Theme zu Theme. Folgende Optionen sind immer wählbar:
- Standard-Template
- Elementor Canvas
- Elementor Volle Breite
- Hinzu kommen können beispielsweise Optionen wie „Blog“, „Archive“, „Volle Breite“, „ohne Titel“ und mehr.
- Wähle das Layout, das am besten zu deinen Vorstellungen passt. Du kannst hier auch erstmal testen, du kannst das Layout jederzeit ändern.
- Speichere deine Seite.
- Klicke auf den „Mit Elementor bearbeiten“-Button.
- Klicke nun auf den grauen Button mit dem Ordner-Symbol und wähle unter dem Reiter „Meine Templates“ dein eben gestaltetes Template aus. Du wirst danach gefragt, ob du die Seiteneinstellungen übernehmen möchtest. Wähle hier am besten „Nein“. Ansonsten überschreibst du möglicherweise dein eben gewähltes Layout und musst es wieder neu einstellen.
5. Finalisiere deine Seite
Du kannst dein Template nun noch nach deinen Vorstellungen anpassen.
ACHTUNG: Klickst du unten links auf „Speichern“, wird deine Seite automatisch veröffentlicht. Du kannst deine Seite vorher auf Privat stellen, wenn deine Seite nicht direkt veröffentlicht werden soll.
Ist deine Seite fertig gestaltet, speicherst und veröffentlichst du sie. Teste am besten auch die Integration mit deinem Mail-Tool, damit alles so klappt, wie es soll.
3 Tipps für gute und professionelle Landing Pages:
1. Brich die Seite durch optische Unterbrechnungen auf
Das können farbige Hintergründe oder auch Bildboxen sein, die sich über die ganze Breite erstrecken. Besonders schön kommt hier der Parallax-Effekt, bei dem ein Bild im Hintergrund fixiert ist, und nur die Bildbox darüber scrollt. Damit ändert sich der Bildauschnitt beim Scrollen und bringt Bewegung in die Seite.
So geht’s:
- Wähle den Abschnitt aus, den du mit einer Farbe oder einem Bild hinterlegen möchtest. Oder füge einen neuen Abschnitt hinzu.
- Klicke dafür oben auf 6 Punkte auf dem blauen Reiter.Wähle unter „Layout“ die Option „Abschnitt strecken“ aus.
- Wähle nun links unter „Stil“ das Pinsel-Icon bei „Hintergrundtyp“.
- Du kannst nun eine Farbe oder ein Bild auswählen.
- Bei einem Bild musst du nun die Größe wählen. Am besten wählst du hier die Option „Cover“ aus, diese setzt das Bild füllend ein.
- Willst du ein Bild mit dem Parallax-Effekt versehen, wählst du bei „Anhang“ die Option „fixed“ aus. Unter Position kannst du nun noch die Höhe der Box bzw. den Ausschnitt wählen. Teste hier einfach ein wenig herum, welche Position am besten aussieht.
2. Bringe mit Animationen Bewegung auf deine Seite (aber übertreib‘ es nicht 😉 )
Unaufdringliche Animationen hauchen deiner Landing Page ein wenig Leben ein. Achte hier darauf, dass die Animation noch professionell wirkt.
Eingangsanimationen: Für jedes Element kannst du Eingangsanimationen festlegen.
- Klicke auf das entsprechende Element.
- Wähle unter dem Reiter „Optionen“ bei „Erweitert“ die gewünschte Animation aus. Die „Fade“ Animationen kannst du gut an der einen oder anderen Stelle einbauen, ohne dass es zuviel wird.
Hover: Wähle das entsprechende Element aus, das animiert werden soll, wenn du mit der Maus darüber gehst.
- Klicke unter „Stil“ auf Hover.
- Wähle bei „Animation bei Mausberührung“ die gewünschte Animation aus.
Sonstige animierte Elemente: Daneben bietet dir Elementor aber auch weitere Möglichkeiten für animierte Elemente, wie beispielsweise Slider, animierte Überschriften oder Zähler.
3. Nutze für Formulare benutzerdefinierte Nachrichten
Wenn du das Elementor-eigene Formular nutzt, hast du die Möglichkeit die Nachrichten bzw. Rückmeldungen an den Nutzer zu individualisieren. Gemeint sind damit, die Nachrichten, die erscheinen, wenn der Nutzer ein Pflichtfeld nicht ausgefüllt hat, es einen Fehler gab oder die Daten erfolgreich gesendet wurden.
So geht’s:
- Klicke auf dein Formular.
- Wähle unter dem Reiter „Inhalt“ unten „Weitere Optionen“ aus.
- Klicke auf den Button neben „Eigene Nachrichten“.
- Du kannst nun verschiedene Meldungen individualisieren. Statt dem voreingestellten „Data was sent successfully“ kannst du beispielsweise schreiben: „Sehr gut, deine Daten wurden erfolgreich gesendet. Check gleich mal deinen Posteingang!“
Landing Page Templates von Elementor
Elementor bietet dir bereits eine Menge schöner und moderner Designs, die du als Template für deine Landing Page nutzen kannst. Einige Templates sind jedoch nur in der Pro-Version verfügbar.
Hier findest du eine Übersicht aller Templates.
Wenn dir dieser Artikel gefallen hat, freue ich mich, wenn du ihn teilst! Worüber ich mich auch freue: Wenn du mir dafür einen Kaffee spendierst, damit ich noch mehr solcher Artikel schreiben kann – mit Koffein im Blut schreibt es sich immer besser ;)
Deine
Sharing is caring! Teile diesen Artikel auf Pinterest:
Andreas Herrmann meint
Danke für die gute Beschreibung! Ich werde mein Glück mit Elementor probieren und berichten. Ich habe allerdings nicht die Version für 39 Euro pro Jahr gebucht, sondern die für 199 Euro, da diese (für mein Verständnis) das Entwickeln von bis zu 1.000 Seiten ermöglicht. Beste Grüße!
Felix meint
Elementor schön und gut, jedoch habe ich als Laie aufgegeben. Ich hab meine Seite dann bei https://www.onepager.rocks/ erstellen lassen. Ging fix – kann ich nur empfehlen.
Jürgen meint
Hallo Laura;
wie bekomme ich denn ein Inhaltsverzeichnis über Elementor eingefügt?
Ich habe es ja in der Startseite geschafft, allerdings klappt es bei der anderen Seite nicht. Was mache ich falsch?
https://www.handys-drahtlos.de/qi-ladegeraete/
oder muß ich irgendwas einstellen? Ich verwende Easy Table of Contents
vielen Dank
Gruß
Jürgen
Laura Kim Kuhlemann meint
Hey Jürgen,
Mit Elementor brauchst du eigentlich kein extra Plugin dafür. Du kannst dein Inhaltsverzeichnis ganz analog als Aufzählung anlegen und dann sog. Sprungziele definieren. So geht’s:
1. Bei den Inhalt (z.B. eine Überschrift), der im Inhaltsverzeichnis verlinkt werden soll, gibst du links unter „Erweitert“ beim Eingabefeld „CSS ID“ einen individuellen Namen ein.
2. Den Link im Verzeichnis kannst du dann normal über die Verlinkungsfunktion definieren – statt der üblichen URL gibst du hier einfach #name ein.
Das kannst du auch nochmal hier https://marketing-mit-l.de/pillar-pages/ nachlesen. (Relativ weit unten im Text.)
So kannst du mit Elementor prinzipiell jeden Inhalt auf einer Seite querverlinken. Das ist ganz praktisch.
Ich hoffe das hilft dir ein wenig weiter.
Liebe Grüße,
deine Laura