Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 11. Oktober 2017

Landingpage

WordPress: Wie Du mithilfe eines Seiten-Templates Deine Landing Page erstellst

Ob kaufen, herunterladen oder registrieren – eine Landing Page hat ein Ziel: Den Besucher zur Interaktion zu motivieren. Wir zeigen Dir in diesem Beitrag, wie Du mit WordPress eine Landing Page mit Hilfe eines Seiten-Templates erstellst.

Wie Besucher zu Kunden werden

Auf einer Landing Page sollen Besucher ohne Umwege und Ablenkung ein bestimmtes Produkt kaufen oder sich zu einer Veranstaltung anmelden können. Um dieses Ziel zu erreichen, muss eine Landing Page zielgruppenorientiert, argumentativ und auf das Wesentliche reduziert sein. Mit dem Klick auf den sogenannten Call-to-Action-Button wird aus dem Besucher schließlich ein Kunde.

Mit Seiten-Templates in 5 Schritten zur eigenen Landing Page

WordPress hat mit den Seiten-Templates die passende Funktion bereits an Bord. In dieser Anleitung erfährst Du in fünf Schritten, wie Du ein Seiten-Template für das Theme Twenty Seventeen anlegst. Dazu bauen wir eine einfache Landing Page, über die sich Besucher für eine Yoga-Veranstaltung anmelden können. Voraussetzungen für diese Anleitung sind ein Hosting-Paket, eine WordPress-Installation und PHP-/CSS-Kenntnisse.

1. Child Theme anlegen

Zunächst legst Du für die Anpassungen ein Child Theme an. So stellst Du sicher, dass die Änderungen nach einem Update nicht verloren gehen. Wie das funktioniert, haben wir hier beschrieben.

2. Seiten-Template erstellen

Um das Template zu erstellen, lade die Datei page.php aus dem Verzeichnis Deines Themes (/wp-content/themes/twentyseventeen) herunter und benenne sie in landing-page.php um. Um daraus ein Seiten-Template zu machen, ersetzt Du den Kommentar am Anfang durch folgenden:

Anschließend lädst Du die Datei in das Hauptverzeichnis Deines Child Themes.

Für die Landing Page erstellst Du nun eine Seite und präsentierst dort Dein Angebot. In der Seiten-Ansicht im Backend befindet sich rechts unterhalb von Veröffentlichen der Bereich Seiten-Attribute. Dort wechselst Du im Dropdown-Menü vom Standardtemplate auf Landing Page.
Seiten-Attribute

3. Kontaktformular einfügen

Damit Sich die Besucher für die Veranstaltung anmelden können, benötigst Du ein Kontaktformular. Empfehlenswert ist das Plugin Contact Form 7 an, da es laufend gepflegt wird und sich flexibel anpassen lässt. Nach der Installation kannst Du im Backend unter Formulare ein neues hinzufügen. Über die Buttons wählst Du einfach die gewünschten Felder: Name, E-Mail-Adresse, Telefon. Den „Senden“-Button solltest Du so umbenennen, dass er zu Deinem Angebot passt (z. B. „Anmelden“, „Kaufen“, „Download“).

Contact Form 7 Einstellungen

Um den Button des Formulars umzubenennen, änderst Du das Tag [submit „XXX“].

Nach dem Speichern kopierst Du den blau markierten Code oberhalb des Editors in die Landing Page. Diese sieht in unserem Fall anschließend so aus:

Landingpage unformatiert

Ohne CSS-Anpassungen: Eine typische WordPress-Seite mit Header und Navigation.

4. CSS anpassen

Mit dem nachfolgenden CSS-Code sieht das Ganze gleich viel besser aus. Hier sind die Anpassungen im Überblick:
– Komplette Breite des Contentbereichs wird genutzt,
– Header und die Navigation ausgeblendet,
– Hintergrundbild hinzugefügt,
– Contentbereich mit weißer Farbe und Transparenz hinterlegt,
– Überschrift, Button und Link zum Impressum angepasst.

Wichtig: WordPress vergibt für Seiten-Templates neue Klassen nach dem Schema body.page-template-TEMPLATENAME. Wenn Du also in Deinem Seiten-Template namens „gewinnspiel“ den Header ausblenden willst, gibst Du Folgendes ein:

5. Impressum einfügen

Wie (fast) alle Webseiten benötigt eine Landing Page ein Impressum. Mit dem Impressums-Link kannst Du gleich den Hinweis „Stolz präsentiert von WordPress“ im Footer ersetzen. Das sorgt für weniger Ablenkung und Ausstiegsmöglichkeiten. Bei Twenty Seventeen liegt die entsprechende Datei site-info.php im Ordner template-parts (Unterverzeichnis footer). Am besten lädst Du einfach das komplette Verzeichnis template-parts samt Inhalt herunter und ersetzt den Code in der site-info.php durch diesen:

Danach lädst Du den Ordner template-parts in das Hauptverzeichnis Deines Child Themes. Je nach Branche und Ziel musst Du eventuell weitere rechtliche Regelungen wie AGB, Widerrufsbelehrung und Datenschutz-Hinweise beachten. Am besten fügst Du diese Links auch in den Footer ein.

Landingpage mobil

So sieht das Formular auf dem Smartphone aus.

Landing Page in fünf Schritten

Mit ein bisschen Geduld ist es gar nicht so schwer, eine einfache Landing Page zu entwickeln. Das Praktische dabei: Hast Du das Seiten-Template einmal angelegt, kannst Du das Design unabhängig von den anderen Seiten beliebig anpassen. Das heißt, dass sich Funktionen und Layout komplett vom Rest der Website unterscheiden können. Die Funktion der Seiten-Templates von WordPress ist deshalb wie geschaffen für individuelle Landing Pages. Viel Erfolg! 🙂

Tags: Wordpress

Der Autor:

Autor: Christian Lingnau

Ich heiße Christian Lingnau und bin freier Redakteur für Hosting-Themen, insbesondere WordPress.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *
Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Philipp Wolf
Benutzt die STRATO Produkte im Alltag und berichtet darüber

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden