Keno bloggt am liebsten über Themen wie Webdesign & WordPress, Online-Marketing und über ortsunabhängiges Arbeiten. Wenn er nicht gerade online ist, spielt er Schlagzeug oder surft auf Nord- und Ostsee.

Inhaltsverzeichnis

Newsletter Landing Page in 4 [TOTAL EINFACHEN] Schritten erstellen – Landing Page Freitag #1

Auf dieser Seite verwende ich sogenannte Affiliate – Links.
Wenn Du einen Affiliate – Link klickst und anschließend etwas kaufst, dann erhalte ich für die Vermittlung eine kleine Provision und zwar…
OHNE EXTRA-KOSTEN FÜR DICH.

Es ist 2020 und Du möchtest eine Newsletter Landing Page erstellen? Bisher hast Du noch keinen Einblick gewonnen, worauf es beim Erstellen einer professionellen Zielseite ankommt und suchst nach einer Anleitung für Anfänger?
Dann bist Du hier genau richtig! Denn in diesem Artikel lernst Du Schritt für Schritt, wie man eine Landing Page mit WordPress & Elementor Pro erstellt, mit der Newsletter Abonnenten gewonnen werden.

Und das beste kommt noch:
Du kannst HIER die hier vorgestellte Landing Page kostenlos herunterladen und auf Deiner eigenen WordPress Website importieren und entsprechend für Deine Zwecke anpassen.

Bereit?

Los geht’s!

Die Landing Page Tools

Damit Deine Newsletter Landing Page genauso aussieht wie im Video, benötigst Du die folgenden WordPress Plugins & Schriften.

Und so erstellst Du die Newsletter Landing Page

Elementor downloaden & installieren

Im 1. Schritt benötigst Du die kostenlose Basis Version von Elementor. Diese kannst Du entweder hier herunterladen oder noch bequemer, direkt aus Deinem WordPress Plugins Dashboard und anschließend installieren & aktivieren:

Wenn Du die Pro Version von Elementor noch nicht gekauft hast, musst Du auch das noch erledigen. Aktuell kostet eine Lizenz / Jahr 49,- $.

Warum Du Elementor Pro benötigst:
Generell kommst Du mit der kostenlosen Version von Elementor weit.

Sehr weit!

Wenn Du allerdings möchtest, dass Deine Landing Page genauso aussieht wie in meinem Video, dann kommst Du um Elementor Pro nicht herum. 

Nur die Pro Version erlaubt es z.B. , dass Du eigene Schriften hochladen kannst. Und natürlich kannst Du nur mit der Pro Version Templates hochladen, die Elementor Pro Funktionen beinhalten.

Da ich in diesem Beitrag nicht auf jedes einzelne Feature von Elementor Pro eingehen kann, möchte ich Dich auf diese Seite verweisen, wo Du sämtliche Unterschiede zwischen der Pro- und der kostenlosen Version nachlesen kannst.

Ich kann Elementor Pro nur wärmstens empfehlen und mal ehrlich:
Wo bekommt man für unter 50,- € so viel geballte WordPress Power!?

Genau, nirgends.

Elementor Pro downloaden & installieren

Jetzt folgt der 2. Schritt:
Wir downloaden zuerst Elementor Pro aus unserem neu angelegten Account. 

Klicke dazu zunächst auf “My Account” und anschließend auf “Download Plugin“.

Der Download sollte nach dem Klick automatisch starten.
In Deinem Download Ordner findest Du anschließend eine Datei, die ungefähr so heißen sollte:

  • elementor-pro-2.8.4.zip

Wichtig ist aber noch der sogenannte “License Key“, den ich auf dem Bild oben ausgegraut habe. Markiere ihn und kopiere ihn in Deinen Arbeitsspeicher. Wir benötigen ihn gleich, um die Installation abzuschließen.

Jetzt loggst Du Dich in Dein WordPress ein und klickst auf “Plugins“.
Anschließend klickst Du oben links auf “Plugin hochladen“:

Nun erscheint dieser Dialog:

Klicke auf “Datei auswählen“.
Nun kannst Du die Datei auswählen, die Du gerade eben herunter geladen hast. 

In meinem Fall hieß sie: elementor-pro-2.8.4.zip

Folge den Anweisungen und aktiviere das Plugin.

Nun benötigst Du den “License Key“.
Kopiere ihn aus Deinem Elementor Account – siehe oben – und füge ihn im entsprechenden Feld ein. 

Es kann auch sein, dass Du direkt auf die Elementor Website geleitet wirst, wo Du Dich nur noch einloggen musst. Die Verknüpfung zwischen Deinem Elementor Account und Deiner Website, auf der Du Elementor Pro nutzen möchtest, wird dann automatisch hergestellt und Du musst nichts weiter tun.

Herzlichen Glückwunsch!
Elementor Pro ist nun erfolgreich installiert und Dein WordPress wurde mit einem Turbo ausgestattet.

Bevor Du nun das Newsletter Landing Page Plugin installieren kannst, benötigst Du noch die Schriften, die ich weiter oben erwähnt habe.

Im nächsten Schritt erkläre ich Dir kurz, wie Du sie installierst.

Google Fonts in Elementor Pro installieren & lokal hosten

Im 3. Schritt installieren wir die Google Fonts, damit die Landing Page nahezu genauso aussieht wie in meinem Video Tutorial.

Nun solltest Du hier gelandet sein:

Suche nach den Schriften Roboto und Roboto Slab.

Wenn Du sie gefunden hast, kannst Du ganz einfach auf die rot markierten Plus-Zeichen klicken:

Die gewünschten Schriften erscheinen dann unten rechts in einem neuen Dialog-Fenster und stehen zum Download bereit.

Klicke einfach auf den kleinen “weißen Strich” (rechter Pfeil).
Die Dialog Box öffnet sich.

Und sieht dann so aus:

Siehst Du ganz oben rechts den roten Pfeil, der nach unten auf einen waagerechten Strich deutet?

Fahre mit der Maus “drüber” und schon siehts so aus.

Klicke auf Download und eine Datei Namens “fonts.zip” wird in den Download Ordner auf Deinem Rechner herunter geladen.

Öffne die Zip Datei.
Darin sind die von Dir gewünschten Google Fonts im .ttf Format enthalten. Falls Du Dich fragst, was das für eine Datei sein soll, dann kannst Du hier weitere Infos zu Datei-Typen bei Schriften finden.

BITTE LESEN –  W I C H T I G!
Es nützt nix; Bevor Du die Google Fonts installierst, musst Du die Lizenz lesen und verstehen. Erst dann weißt Du, ob Du sie installieren und für Deine Zwecke nutzen darfst oder nicht.

Dann geht’s weiter mit der eigentlichen Installation der Google Fonts in Elementor Pro.

Klicke dazu ganz links auf “Elementor” und dann rechts auf “Benutzerdedinierte Schriftarten“:

Da ich schon ein paar Schriften installiert habe, werden sie hier aufgelistet.

Zur Installation einer neuen Schriftart klickst Du hier einfach auf “Add New“:

Hier gibst Du nun als nächstes den Namen der Schriftart ein.
Damit es nicht zu Verwechslungen und Verwirrungen kommt, würde ich den ursprünglichen Schriftnamen verwenden:

Klicke jetzt auf “Schriftart Variante hinzufügen”:

Es erscheint ein neues Dialog Fenster:

Öffne nun den Ordner mit den eben herunter geladenen Schriften.
Sieh genau hin, welche Schrift Du auswählst und als 1. hochladen möchtest.

Im Roboto Ordner findest Du:

  1. Roboto-Black.ttf
  2. Roboto-BlackItalic.ttf
  3. Roboto-Bold.ttf
  4. Roboto-BoldItalic.ttf
  5. Roboto-Italic.ttf
  6. Roboto-Light-ttf
  7. usw.
Wenn Du z.B. Roboto-Black.ttf als 1. installieren möchtest, solltest Du folgendes eintragen:
  • Name der Schriftart: Roboto-Black
  • Grad des Fettdrucks: 900
  • Stil: Normal
Dann klickst Du neben “TTF Datei” auf “hochladen” und wählst im darauf folgenden Dialog die “Roboto-Black.ttf” Datei aus.

Hier siehst Du die vorausgewählte Schrift, die Du eben hochgeladen hast. Klicke zur Auswahl unten rechts auf “.ttf Datei auswählen“.

Im letzten Schritt gibst Du noch den “Grad des Fettdrucks” und den “Stil” an. 

Im Falle von Roboto Black habe ich mich für “900” und “normal” entschieden, da “black” noch dicker als fett – also “bold” ist. Der Schriftstil ist nicht kursiv, also stimmt “normal”.

Wenn Du weitere Schriftart Varianten zu Roboto hinzufügen möchtest, dann wiederholst Du einfach die letzten Schritte bis hierhin.

Anschließend kannst Du das kostenlose Newsletter Landing Page Template installieren, das Du hier herunterladen kannst.

Im nächsten Schritt zeige ich Dir, wie Du es in Dein Elementor Pro importierst.

So importierst Du das Newsletter Landing Page Template

Im 4. und letzten Schritt importierst Du das Newsletter Landing Page Template in Dein Elementor Pro.

Das ist total einfach und jetzt zeige ich Dir, wie es geht:

  • Öffne zunächst die Zip Datei, die Du gerade heruntergeladen hast. Sie heißt in diesem Fall: lpf_14-02-2020.zip
Darin findest Du 2 Dateien:
  1. LPF Erklärung & Lizenz
  2. lpf1_14-02-2020.json 

1. LPF Erlärung & Lizenz solltest Du Dir unbedingt durchlesen. 
Es ist die Lizenz, unter der Du das Template kostenlos benutzen darfst.

Die 2. Datei benötigen wir nun für den Import.

Klicke nun links auf “Templates“:

Danach klickst Du oben auf “Templates importieren“.

Nun erscheint der nächste Dialog.
Klicke auf “Datei auswählen” und suche nach der Datei “lpf1_14-02-2020.json“.

Anschließend klickst Du auf “Jetzt importieren“.

Danach ist der Import der Newsletter Landing Page fertig und Du kannst mit der Bearbeitung und Anpassung beginnen:

Und fertig ist die Newsletter Landing Page….

Wie sieht’s aus?
Hat alles bei Dir geklappt? Wenn Du magst, dann hinterlasse weiter unten gern einen Kommentar und verlinke Deine Landing Page, die Du mit meinem Template erstellt hast.

Gern gebe ich Dir dann noch Tipps und Ratschläge, was verändert werden könnte.

Bis dahin und bis zum nächsten Mal!

Das könnte Dich auch interessieren:

Nordvpn Tutorial & Anleitung

Der Nordvpn Test: Darum brauchen (auch) Blogger 2020 einen VPN Service

Du willst im Internet sicher surfen und nur solche Daten preisgeben, die nicht gleich verraten, wer Du wirklich bist?
Du möchtest die neuesten US Serien auf Netflix sehen, bevor sie in Deutschland ausgestrahlt werden?
Dann ist der NordVPN Test 2020 genau die richtige Anlaufstelle für Dich. Hier lernst Du, was ein Virtual Private Network ist, wie Du es einrichtest
und wozu man es verwenden kann.

Thrive Leads 2020 – Das beste WordPress Newsletter Plugin

Thrive Leads ist für mich das beste WordPress Newsletter Plugin.
Wie ich zu diesem Ergebnis gekommen bin, was das Plugin kann und wie man es Schritt für Schritt einrichtet, damit es hunderte und tausende neue Abonnenten für Dich sammelt, lernst Du genau hier.

Getresponse Autoresponder Tutorial

Das Getresponse Autoresponder Email Tutorial – In 10 Schritten automatisch E-Mails versenden

Getresponse ist einer der beliebtesten Newsletter Anbieter und erfreut sich stetig wachsender Popularität. Neben der Newsletter Funktion wartet Getresponse mit vielen anderen auf, die Deine Selbstständigkeit nach vorn bringen können. Eine der gefragtesten Funktionen ist der Autoresponder, mit dem Dein E-Mail Marketing auf ein neues Level gehoben werden kann. Was ein Autoresponder ist und wie man ihn einrichtet lernst Du hier im Getresponse Autoresponder Tutorial.

>