Newsletter Landing Page

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

Auf dieser Seite verwende ich sogenannte Affiliate LinksWenn Du einen Affiliate – Link klickst und anschließend etwas kaufst, dann erhalte ich für die Vermittlung eine kleine Provision vom Anbieter und zwar ohne Extrakosten für Dich!

So verpasst Du keinen Artikel mehr:
Klick hier und abonniere meinen kostenlosen Newsletter!

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:


Elementor Pro installieren

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


Weiter zu Elementor Pro

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“.


Download Elementor Pro

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“:


Elementor Pro installieren 3. Schritt

Nun erscheint dieser Dialog:


Elementor Pro installieren - 4. Schritt

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:

Google Fonts downloaden für Elementor Pro

Suche nach den Schriften Roboto und Roboto Slab.

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


Google Fonts lokal hosten mit Elementor Pro

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.


Google Fonts lokal hosten mit Elementor Pro

Und sieht dann so aus:


Google Fonts in Elementor Pro hosten

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.


Elementor Pro & Google Fonts

Ö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.


Google Fonts Lizenz lesen

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“:


Google Fonts in Elementor Pro installieren

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

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


Google Fonts in Elementor lokal hosten

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:


Google Fonts Roboto installieren

Klicke jetzt auf “Schriftart Variante hinzufügen”:


Schriftart Variante hinzufügen

Es erscheint ein neues Dialog Fenster:


Google Schriften in Elementor Pro verwalten

Ö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.

Google Font zum Hochladen auswählen

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


Google Font in Elementor Pro hochladen und lokal hosten

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”.


Schriftstil und Grad des Fettdrucks einstellen

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“:

Elementor Pro Templates

Danach klickst Du oben auf “Templates importieren“.


Templates installieren und importieren in Elementor Pro

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“.


Elementor Pro Datei zum Import auswählen

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


Landing Page mit Elementor Pro bearbeiten

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!



Tags


Diese Artikel könnten Dir auch gefallen:


Platz für Fragen, Anregungen & Kritik

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>

Lerne WordPress

Du möchtest WordPress besser kennenlernen und mehr über tolle Plugins, Tipps & Tricks zum Erstellen einer Website erfahren?

Dann abonniere hier meinen kostenlosen Newsletter: