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

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 4 Schritten zur eigenen Landing Page

WordPress hat mit den Seiten-Templates die passende Funktion bereits an Bord. In dieser Anleitung erfährst Du in vier Schritten, wie Du ein Seiten-Template für das Theme Twenty Twenty 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.

Schritt 1: Seiten-Template erstellen

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

/**
*	Template Name: Landing Page

*
*	@package Twenty Twenty Child
*/

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 unter dem Reiter Dokument der Bereich Seiten-Attribute. Dort wechselst Du im Dropdown-Menü vom Standard-Template auf Landing Page.

Seiten-Attribute

Schritt 2: 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, da es laufend gepflegt wird und sich flexibel anpassen lässt. Nach der Installation kannst Du im Backend unter Formulare das Standard-Formular bearbeiten. Nicht benötigte Labels kannst Du im Editor löschen und über die Buttons weitere Felder hinzufügen. In unserem Beispiel reichen Name, E-Mail-Adresse und Telefon. Den »Senden«- Button solltest Du so umbenennen, dass er zu Deinem Angebot passt (z. B. »Anmelden«, »Kaufen«, »Download«).

Um den Button des Formulars umzubenennen, änderst Du das Tag, z. B. [submit »Anmelden«].

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

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

Schritt 3: CSS anpassen

Mit dem nachfolgenden CSS-Code sieht das Ganze gleich viel besser aus. Das sind die wichtigsten Anpassungen im Überblick:

  • Header und Navigation ausblenden
  • Hintergrundbild einfügen
  • Button-Farbe und -größe anpassen
  • Schriftfarben ändern
  • Link zum Impressum im Footer rechts platzieren

WordPress vergibt für Seiten-Templates neue Klassen nach dem Schema body. page-template-TEMPLATENAME. Damit kannst Du die Bereiche flexibel anpassen, ohne die anderen Seiten Deiner Website zu verändern:

/* Anpassungen Landing Page */

/* Header ausblenden */
body.page-template-landing-page .header-inner { display: none;
}

/* Hintergrundbild einfügen */ body.page-template-landing-page {
background-image: url(„/wp-content/uploads/2020/06/balance-110850_1280.jpg“); background-repeat: no-repeat;
background-position: center; background-size: cover;
}

/* Button */
body.page-template-landing-page .wpcf7-submit { width: 100%; background: #9ACD32;
padding: 1rem;
}

/* Schriftfarben */
body.page-template-landing-page .entry-content p, h3, ul { color: #ffffff;
}
body.page-template-landing-page h1 { color: #282828;
}

/* Abstand nach oben reduzieren */
body.page-template-landing-page .post-inner.thin { padding-top: 0em;
}

/* Impressum-Link Farbe */
body.page-template-landing-page #site-footer a { color: #282828;
}

/* Impressum-Link rechts */
body.page-template-landing-page .landing-page-impressum { float: none;
position: absolute; right: 10%;
}

Schritt 4: Impressum einfügen

Eine Landing Page muss – wie auch alle anderen Seiten einer Website – einen Link zum Impressum enthalten – am besten im Footer. Alles andere wird hier entfernt, damit Besucher nicht abgelenkt werden und aussteigen.

Bei Twenty Twenty ersetzt Du dazu einfach in der landing-page.php die Funktion

<?php get_footer(); ?> 

durch Folgendes:

<?php get_template_part( ‚template-parts/footer-menus-widgets‘ ); ?>

<footer id=“site-footer“>

<a href=“https://DEINE-URL/impressum“ class=“landing-page- impressum“>Impressum</a>

</div>

Damit erhält die Landing Page einen Footer mit einem Link zum Impressum. Dessen Farbe und Platzierung haben wir über die Klasse »landing-page-impressum« bereits definiert.

Die Verweise zur Datenschutz-Seite, den AGB oder der Widerrufsbelehrung fügst Du wie das Impressum innerhalb der ID »site-footer« ein und vergibst dafür ggf. eigene Klassen. Über den Customizer kannst die CSS-Anweisungen live testen. Abschließend lädst Du die Dateien landing-page.php und style.css in das Hauptverzeichnis  Deines Child-Themes,

Hier ist das Ergebnis unserer Yoga-Landing-Page:

Und so sieht das auf dem Smartphone aus:

Landing Page in vier 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! 🙂

Hinweis: Diesen Beitrag haben wir am 26.11.2020 aktualisiert.

Schlagworte:

Teilen

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

 

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen