Landing Page erstellen mit Cleverreach und Bootstrap

0
191
landing-page-erstellen-cleverreach-title

In diesem Tutorial lernst du schnell und effizient, wie man mit dem kostenlosen Twitter Bootstrap Framework eine einfache Landing Page erstellen kann. Es eignet sich besonders für Unternehmer und Online-Marketer oder zum Aufbau einer E-Mail-Liste. Durch das Erstellen einer Basis-Landing Page mit Hilfe des Tutorials, lassen sich die Grundkosten für die Erstellung durch einen Freelancer sparen. Ideal für Unternehmer oder Grafiker, die eine Landing Page benötigen.

Was wird zum Landing Page erstellen benötigt?

  • Ein Computer mit Texteditor
  • HTML-Kenntnisse sind von Vorteil, aber nicht zwingend. Alle Dateien werden am Ende des Artikels zum Download bereitgestellt
  • Ein Account bei Cleverreach, dem E-Mail Marketing Tool
  • Ein Webspace und eine Domain oder Subdomain
  • FTP-Zugriff auf den Webspace

Hier findest du eine Vorschau der fertigen Landing Page.

Schritt 1: Einrichten der Projektstruktur

Zunächst solltest du dir einen Ordner erstellen, in dem du das gesamte Projekt speicherst. Am besten auf dem Desktop, so findest du alles schnell wieder im Verlauf des Tutorials. In meinem Fall heißt der Ordner „LandingPage“, aber den Namen kannst du natürlich frei wählen. Erstelle innerhalb dieses Ordners noch zwei weitere Unterordner „img“ und „css“. In diese Unterordner werden wir später die Bilder und CSS-Dateien ablegen.

Schritt 2: Das HTML-Template erstellen

Wenn du keinen Code-Editor nutzt, kannst du mit dem Windows-Kontextmenü eine neue Textdatei innerhalb des Projektordners erstellen. Auf Mac geht dies über das Programm „TextEdit“, was du im Zweifelsfall über das Suchfeld oben rechts schnell findest. Erstelle zunächst eine Datei mit dem Namen „index.txt“ und ändere anschließend den Dateinamen auf „index.html“, wenn du nicht schon ein Programm nutzt, welches HTML-Dateien direkt erstellen kann.

Dein Projektordner sollte jetzt so aussehen:Landing Page erstellen Ordnerstruktur

Schritt 3: HTML-Grundgerüst mit Bootstrap erstellen

In diesem Schritt, bringen wir unsere „index.html“ mit HTML und CSS zum leben. Wir werden zunächst ein HTML-Grundgerüst anlegen, die Bootstrap-Dateien einbinden, und anschließend unser einfaches Design zusammenbauen. Wir möchten einen schönen großen Header mit einem Bild im Hintergrund, eine starke Headline mit Subheadline über dem Bild. Darunter eine Auflistung und ein Eintrags-Formular. Auch ein Beschreibungstext und ein abschließender Website-Footer mit einigen Links sollte nicht fehlen. Das reicht für den Anfang. Du kannst deine Landing Page später auf eigene Faust beliebig erweitern.

Füge zunächst folgenden Inhalt in die HTML-Datei „index.html“ ein:

Zur Erklärung des Codes: Wir haben jetzt bereits das HTML-Grundgerüst stehen und alle Bootstrap-Komponenten, Styles, Farben und Formatierungen sind bereits verfügbar. Über den link-Tag, wird das Bootstrap-CSS eingebunden, und über die 3 script-Tags weiter unten, werden alle notwendigen JavaScript-Bibliotheken eingebunden. Das ging easy, oder?

Großer Header mit Überschrift

Als erstes wirklich sichtbares Gestaltungselement, erstellen wir den „Jumbotron“, also einen großen Header mit zentriertem Text, und einem schicken Hintergrundbild.

Ersetze dazu den Teil <!– Inhalt der Website hier –> mit folgendem Code:

Jetzt kannst du im Browser bereits einen großen grauen Balken und den Text sehen, wenn du die Datei index.html öffnest. Der Bootstrap-Standard ist grau und langweilig. Wir ändern das später natürlich noch.

Liste mit Vorteilen und Eintrags-Formular

Als nächstes füge unter dem Code-Block unseres Headers, den folgenden Code ein. Dieser erzeugt eine Reihe mit Zwei Spalten á jeweils 50% Breite. In der linken Spalte befindet sich die Auflistung der Produktvorteile oder Features, in der rechten Spalte ein kleines Formular, mit einleitendem Text, einem Eingabefeld für die E-Mail Adresse und einem großen Absende-Button.

Erweitere den Code mit folgendem Snippet:

Nun kannst du im Browser bereits eine (fast) fertige Website sehen!

Zusätzlichen Beschreibungstext einfügen

Unterhalb unseres Eintrags-Formulars und der Aufführung der Vorteile, wäre ein Text für Suchmaschinen nicht schlecht. Es wird häufig empfohlen mindestens 300 Wörter Text auf einer Websites zu integrieren, um mehr Aufmerksamkeit von Google zu bekommen.

Füge also folgenden Code unterhalb des zuvor eingefügten Blocks ein:

Sauberer Abschluss: Der Website-Footer

Nun erzeugen wir noch einen Footer mit kleinem Textfeld, einer Meta-Navigation und einem Copyright-Hinweis. Füge dazu folgenden Code unterhalb des zuletzt erstellten Textblocks ein:

Erster Test im Browser

Nun solltest du in deinem Browser bereits etwas sehen können, was nach einer Website aussieht. Es fehlt lediglich die Funktionalität für unser Formular, welche wir im nächsten Schritt mit Cleverreach einrichten werden.

landingpage-erstellen-screenshot

Tipp: Ich empfehle zum Entwickeln von Websites entweder Google Chrome oder Firefox, denn diese sind schnell und stellen innovative Entwickler-Tools zur Verfügung, die einem das Leben enorm erleichtern können.

Schritt 4: Registrierung bei Cleverreach

Bei Cleverreach kann man sich kostenlos registrieren, und sogar in der Gratis-Version monatlich bis zu 1000 E-Mail Newsletter versenden. Das Tool ist professionell, es gibt integrierte Newsletter-Vorlagen und vor allem: Ein komplett fertig programmiertes und rechtssicheres Double-Op-In Verfahren was für unsere Landing Page optimal geeignet ist.

Hier geht es zur kostenlosen Registrierung

Schritt 5: Anlegen von Formular und Empfängergruppe

Im Cleverreach-Account angemeldet, können wir unter „Formulare“ ein Formular für die Landingpage erstellen. Wir geben also „Testformular“ oder einen beliebigen Namen für das Formular ein.

Bei dem Feld „In welcher Gruppe sollen sich die Empfänger eintragen?“ wählen wir „+ Neue Gruppe erstellen“ und fahren fort mit dem Speichern. Cleverreach erstellt automatisch eine Gruppe für unsere späteren Leads, bzw. Einträge der Landing Page. Es ist ebenso möglich, zuerst die Gruppe anzulegen, und anschließend im Formular-Editor auszuwählen, aber für unser einfach gehaltenes Tutorial ist die vorgeschlagene Methode die schnellere Variante.

Nach dem Speichern erscheint der Formular-Editor. Sämtliche Gestaltungsmöglichkeiten im Formular-Editor, können wir zunächst außer Acht lassen. Da wir unser Formular selbst erstellen und integrieren, benötigen wir zunächst lediglich eine URL, die Cleverreach unter Quellcode/Verbreitung -> Anmeldung bereitstellt.

Wir brauchen für unser Formular lediglich die URL, an die nach dem Klick auf den Button weitergeleitet werden soll. Auf dem folgenden Screenshot sieht man genau was gemeint ist:

Hier die Stelle in unserem Code, wo die URL eingesetzt werden muss:

formular-url-ersetzen-cleverreach

Schritt 6: Custom Design und eigene Schriftarten

Das Landing Page erstellen funktioniert jetzt bereits prima, und das sogar Responsive, dank der cleveren Bootstrap-Styles. Aber niemand möchte eine derart langweilige Landing Page sehen, also müssen wir noch ein paar Verbesserungen am Design vornehmen.

Eigene CSS-Datei für Landing Page erstellen und einbinden

Erstelle im Ordner css deines Projektordners, eine Datei mit dem Namen style.css. Wenn du nicht direkt CSS-Dateien erstellen kannst, funktioniert hier der gleiche Trick wie mit der HTML-Datei. Einfach style.txt erstellen und anschließend in style.css umbenennen.

Füge jetzt in den Header deiner index.html folgende Zeile Code ein, direkt unterhalb der Zeile mit „<link rel=“stylesheet“ href=“https://maxcdn.bootstrapcdn.com/….“.

<link rel=“stylesheet“ href=“css/style.css“>

Du bindest damit deine eigene CSS-Datei unterhalb des Bootstrap-Codes ein, und kannst anschließend, die Bootstrap-Styles überschreiben und verändern.

Ein Hintergrundbild im Header / Jumbotron einbinden

Das Hintergrundbild sollte ein Bild im JPG-Format sein, welches nicht zu groß, aber auch nicht zu klein ist. Heutzutage nutzen ebenso viele Menschen einen Full-HD Bildschirm, wie mobile Endgeräte mit weniger als 400 Pixeln Auflösung. Die Spanne ist sehr groß. Daher ist ein gesundes Mittelmaß entscheidend. Ich habe dir ein Bild mit 1680×600 Pixeln bereitgestellt. Lade dieses hier herunter, und speichere es im Unterordner img deines Projektordners.

Deine Ordnerstruktur sollte jetzt so aussehen:

Öffne nun die style.css und füge folgenden Code für den Header / Jumbotron ein:

Jetzt sieht der Header schon wesentlich interessanter aus!
Doch was genau passiert hier?

Der CSS-Code setzt den Text zentriert, färbt ihn weiß ein und hinterlegt ihn mit einem dezenten Schlagschatten. Zudem wird der gesamte Jumbotron-Kasten mit dem Hintergrundbild und einem leichten Farbverlauf darüber ausgestattet, und ebenfalls mit einem leichten Schlagschatten etwas „abgehoben“. Außerdem wird der Zeilenabstand des Textes leicht verringert, und die Höhe des Jumbotrons noch ein wenig erweitert.

Die Headline-Schrift verändern mit Google Fonts

Um die Schriftart der Überschiften etwas interessanter zu gestalten, kannst du ganz leicht innerhalb deiner CSS-Datei, eine kostenlose Schrift von Google einbinden. Du musst lediglich das externe Stylesheet von Google laden, und deinem CSS sagen, welche Schriften in der neuen Schriftart dargestellt werden sollen. In unserem Fall sind es alle Überschriften von h1-h6.

Füge folgenden Code unterhalb des Jumbotron-Codes ein:

Die Liste der Vorteile könnte mehr ins Auge stechen

Um die Liste der Vorteile hervorzuheben, kannst du folgenden Code in deine CSS-Datei einfügen. Dadurch werden kleine grüne Häkchen vor die einzelnen Punkte gesetzt, die Rahmen entfernt, und die Abstände ein wenig optimiert.

Farbe der Links im Footer anpassen

Zum Schluss unserer CSS-Optimierungen, ändern wir noch die Farbe der Links im Footer. Das Standard-Blau von Bootstrap sieht auf grauem Hintergrund nicht wirklich schön aus. Füge dazu einfach folgenden Code zu deiner CSS-Datei hinzu:

Schritt 7: Die Landing Page ist fertig! Let’s GO LIVE!

Herzlichen Glückwunsch! Du hast soeben deine erste eigene Landing Page erstellt! Nun sollte alles aussehen wie auf folgendem Screenshot, wenn du alles richtig gemacht hast:

landing-page-preview-final

Das Beste an der Sache ist: Du kannst den gesamten Ordner nun auf einen FTP-Server hochladen, und die Landing Page ist sofort einsatzbereit. Du kannst auch den Code kopieren, und mehr als nur eine Landing Page erstellen.

Wenn du den Ordner in das Root-Verzeichnis deines Webspace legst, kannst ihn anschließend über www.deineseite.de/LandingPage/ erreichen. Du kannst natürlich auch auf den Projektordner verzichten, und die Websites direkt über die Domain erreichbar machen. Achte aber darauf, dass in deinem Root-Verzeichnis keine anderen Dateien oder Projekte liegen. Diese könntest du aus Versehen überschreiben oder sie könnten die Funktion deiner neuen Landing Page beeinträchtigen.

Ich empfehle aus jahrelanger Erfahrung heraus all-inkl.com als Provider zum Landing Page erstellen. Man bekommt dort bereits ab 4,95,-€ monatlich ein Webspace mit 3 Domains inklusive. Damit könntest du schon mindestens 3 Landing Pages mit jeweils einer eigenen Domain erstellen! Abgesehen von der Möglichkeit, über Subdomains unendlich viele Pages anlegen zu können.

Bei all-inkl gibt es einen File-Manager, den du ganz leicht im Browser bedienen kannst. Damit kannst du die Dateien der neuen Page bequem hochladen und das Ergebnis direkt im Browser prüfen. Der File-Manager sieht so aus:

all-inkl-web-ftp-screenshot

Wie du sehen kannst, haben wir bei tutorialbox folgende Ordnerstruktur:
ROOT/tutorials/LandingPage/

Daher erreichst du die Landing Page unter folgendem Link:
https://tutorialbox.de/tutorials/LandingPage/

Natürlich geht das Ganze auch mit einem FTP-Programm wie etwa das beliebte FileZilla. Eine Anleitung für FileZilla mit All-inkl, findest du hier.

Fazit und Downloads

Ich hoffe das dir mein Tutorial zum Thema Landing Page erstellen gefallen und geholfen hat! Für alle Fragen, Anregungen und Kritik, nutze bitte die Kommentarfunktion.

Hier kannst du den gesamten Projektordner mit allen Codes herunterladen:
DOWNLOAD