Landing Page mit WordPress erstellen

Landing Page mit WordPress erstellen.

Eine Landing Page ist eine einzelne Seite welche genutzt wird um besondere Aufmerksamkeit für eine Aktion zu erreichen. Je nach Bedarf sind den Möglichkeiten kaum Grenzen gesetzt: Den Newsletter oder ein bald erscheinendes Produkt oder sonstige Aktionen bewerben. In diesem Artikel erstellen wir eine eigene Landing Page, welche wir als Startseite unseres Blogs definieren. Damit wird aus unserer Landing Page eine „Splash Page“.

In diesem Artikel werden die Begriffe Landing Page und Splash Page verwendet, welche fast das gleiche bedeuten. Wir unterscheiden hier: Eine Landing Page ist eine Seite, welche so optimiert ist, damit ein bestimmtes Ziel so gut wie möglich erreicht wird. Das kann das Sammeln von E-Mail Adressen sein. Diese Landing Page bewirbt man dann zum Beispiel über Anzeigen. Eine Splash Page ist vom Aufbau eine Landing Page, sie wird nur als Startseite aktiviert. Die Splash Page ist somit die Eingangstür zur Website.

Um sich etwas inspirieren zu lassen folgen einige Beispiele von Splash Seiten.

Beispiele von Splash Seiten

Introseite des Magazins "Forbes".

Introseite des Magazins „Forbes“.

Die Startseite von Pinterest.

Die Startseite von Pinterest.

Auch Instagram bittet um eine Anmeldung bevor es weiter geht.

Auch Instagram bittet um eine Anmeldung bevor es weiter geht.

Bei Shopify steht die E-Mail Adresse im Vordergrund.

Bei Shopify steht die E-Mail Adresse im Vordergrund.

Übersicht

Unsere Splash Page wird eine statische Seite, welcher wir ein eigenes Seitentemplate zuweisen. Wie das funktioniert wird in diesem Artikel erklärt. Möchte man mehr über WordPress Seiten Templates lesen, gibt es diesen Beitrag dazu: Seiten Template erstellen.

Seiten Template anlegen

Als erste legen wir eine Seiten Template an, welches wir später für unsere Startseite verwenden. Durch das Template können wir unabhängig vom Design unseres aktiven Themes eine komplett individuelle Landing Page gestalten. Das ist ein weiteres Merkmal von Splash Seiten: Es fehlen häufig Elemente wie die Navigation oder die Sidebar.

Wir erstellen lokal eine neue Datei und definieren sie als Template:

Einfache Definition um die Seite für WordPress als Template erkennbar zu machen.

Einfache Definition um die Seite für WordPress als Template erkennbar zu machen.

Diese speichern wir als „splash-page.php“ ab und laden sie in unseren Theme Ordner unseres gerade aktiven Themes:

Unsere hochgeladene Datei.

Unsere hochgeladene Datei.

Dieses Template können wir jetzt bei einer neuen Seite aus dem Dropdown Menü auswählen. Es wird nicht der Name der Datei, sondern der definierte Template Name angezeigt.

Das restliche Layout der Seite bauen wir jetzt aus reinem HTML zusammen. Dabei werden wir aber die Funktionen

the_title()

und

the_content()

 nutzen, um den Titel und den Inhalt unserer WordPress Seite auszugeben. Das hat den Vorteil, dass wir den Inhalt unserer Splash Page weiterhin über die WordPress Verwaltung anpassen können.

Splash Page Design

Wir erstellen eine einfache Seite mit einem Hintergrundbild und einer anderen Schriftart. Damit unsere Splash Page den Titel und den Inhalt, unserer WordPress Seite übernimmt, verwenden wir die oben gezeigten WordPress Funktionen.

Die Funktion

the_content()

 muss dabei in einer While Schleife, dem WordPress Loop, stehen damit der Inhalt angezeigt wird.

Man könnte diese Seite aber auch komplett mit reinem HTML gestalten.

Der Inhalt unserer PHP Datei:

<?php
/*
Template Name: Rockstar Splash Page
*/
?>
<html><head><title><?php the_title() ?></title>
<style type="text/css">
body {
background-image:url(http://www.wprockstars.de/wp-content/uploads/splash.jpg);
font-family: Verdana;
}
</style>
</head>
<body>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</body>
</html>

Unsere WordPress Seite können wir jetzt mit beliebigen Inhalt füllen und ganz wichtig: Das erstellte Template zuweisen.

Wir können den Inhalt unserer Splash Seite über WordPress pflegen.

Wir können den Inhalt unserer Splash Seite über WordPress pflegen.

Für diese Seite wählen wir unser Template aus.

Für diese Seite wählen wir unser Template aus.

Und so sieht unsere Startseite dann in der Vorschau aus:

Vorschau unserer Introseite.

Vorschau unserer Introseite.

Neue Startseite anlegen

Jetzt haben wir noch ein Problem zu lösen:

Die Splash Page soll beim beim Aufruf unserer Haupt Domain angezeigt werden: www.wprockstars.de

Von unserer neue Startseite müssen wir aber irgendwie auf unsere Blog Artikel verweisen können.

Dafür legen wir eine neue leere Seite an, die unsere neue Beitragsseite wird. Wir legen diese Seite nur an um über WordPress die URL dieser Seite als neue Beitragsseite festzulegen.

Unter dieser URL erreicht man später unsere Artikel.

Unter dieser URL erreicht man später unsere Artikel.

Splash Page aktivieren

Im letzten Schritt müssen wir WordPress noch sagen, dass unsere Splash Page die Startseite sein soll und unsere Artikel unter der gerade angelegten leeren Seite angezeigt werden.

Unter Einstellungen -> Lesen legen wir die statische Splash Page als Startseite und unsere leere Seite als Beitragsseite fest. Mit einem Klick auf den dazugehörigen Radio Button werden die Auswahlfelder aktiv und wir wählen als Startseite unsere Splash Page und als Beitragseite unsere leere Seite.

Ab jetzt sehen wir unsere Splash Page.

Ab jetzt sehen wir unsere Splash Page.

Fertig! Unter der Hauptdomain erscheint jetzt die Splash Page. Wichtig ist dann von hier aus auf die Beitragsseite zu verlinken. Eine weitere gute Idee ist die neue Startseite auch für Suchmaschinen zu optimieren. Hier sollte nicht nur ein E-Mail Anmeldeformular sein, sondern man kann die wichtigsten Blogartikel verlinken.

Welche Tipps und Erfahrungen habt Ihr mit Splash- und Landing Pages gemacht?

2 Kommentare

  1. Marcel   •  

    Hallo
    Hoffe du kannst mir helfen.
    Meine *Introseite* bleibt einfach weiss :-(

    Bin fast am verzweifeln.

    Vielen lieben Dank

    • rockstarmark   •     Author

      Hallo,
      dann kann es daran liegen, dass im PHP der Introseite ein Fehler ist. Bei PHP Fehlern bleibt die Seite dann einfach weiß.
      Am besten die Introseite mal nur mit diesem Inhalt füllen:
      < ?php /* Template Name: Rockstar Splash Page */ ?>
      Hallo

      Ist damit das Wort „Hallo“ sichtbar?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.