7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

Wie man eine Landingpage in WordPress erstellt

Scroll to top
Read Time: 11 mins

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Eine Landingpage auf Ihrer WordPress-Site ist ein unschätzbares Werkzeug, wenn Sie etwas verkaufen oder die Besucher dazu bringen möchten, sich anzumelden. In diesem Beitrag erfahren Sie, wie Sie kostenlos eine Landingpage in WordPress erstellen und andere dazu ermutigen können, Ihren Service zu kaufen oder sich bei ihm anzumelden.

Wir erstellen eine Landingpage, indem wir ein WordPress-Theme eines Drittanbieters anpassen. Dies ist der beste Weg, um WordPress kostenlos als Landingpage zu erstellen, und bietet Ihnen die größte Flexibilität, erfordert jedoch etwas Codierungs-Know-how. Wenn Sie eine Landingpage ohne Codierung erstellen möchten, lesen Sie einige unserer anderen Beiträge.

Eine Landingpage ist eine Schlüsselseite, auf der Benutzer Maßnahmen ergreifen können. Was diese Aktion ist, hängt von Ihrem Unternehmen ab, aber es ist wahrscheinlich eines von zwei Dingen:

  • Kaufen Sie etwas, wahrscheinlich ein großes Ticket, da Sie Produktseiten für kleinere Produkte verwenden würden
  • Registrieren Sie sich für etwas, das ein Abonnement für einen Dienst oder Kurs oder eine Mailingliste sein kann

Sie müssen so viel Verkehr wie möglich auf diese Seite bringen, da dies für Ihre Website wichtig ist. Sie können dies über SEO, Werbung oder Direktmarketing tun. Oder vielleicht eine Kombination.

Sobald die Leute auf dieser Landingpage angekommen sind, müssen Sie sicherstellen, dass sie kaufen oder sich anmelden.

Der Inhalt der Seite ist Teil Ihrer Vorgehensweise - nicht nur der Inhalt selbst, sondern auch die Art und Weise, wie Sie ihn gestalten. Je teurer der Artikel, desto mehr Text und desto mehr Handlungsaufforderungen werden Sie im Allgemeinen benötigen.

Es geht aber nicht nur um den Inhalt. Sie müssen auch sicherstellen, dass die einzige Option, die jemandem zur Verfügung steht, wenn er auf dieser Seite landet, darin besteht, auf die Schaltfläche "Kaufen" zu klicken. Wenn es ein Navigationsmenü, einige Widgets oder ein anklickbares Logo gibt, besteht die Möglichkeit, dass sie wegklicken, um den Rest Ihrer Website zu untersuchen, und niemals zur Landingpage zurückkehren.

Hier kommt das Erstellen einer Landingpage in Ihrem Thema ins Spiel. Sie enthält keine Links außerhalb des Inhalts. Es gibt kein Menü, keine Widgets und keine anklickbaren Links in der Kopf-, Fuß- oder anderen Position. Es ist normalerweise in voller Breite (da Sie Ihre Seitenleisten-Widgets nicht benötigen) und verfügt über ein sauberes Layout, das die Aufmerksamkeit auf den Inhalt lenkt.

In diesem Tutorial zeige ich Ihnen, wie Sie eine Vorlage für Ihr Thema erstellen. Dies besteht aus drei Dingen:

  • Erstellen einer Seitenvorlage dafür
  • Erstellen eines Headers für die Landingpage ohne Links
  • Erstellen einer Fußzeile für die Landingpage ohne Links
  • Verwenden der Vorlage zum Erstellen Ihrer Landingpage

Also lasst uns anfangen. Ich werde diese Vorlage für das Thema Twenty Twenty erstellen. Dies bedeutet, dass ein untergeordnetes Thema erstellt wird, damit ich kein Thema eines Drittanbieters bearbeite.

Was du brauchen wirst

Um diesem Tutorial zu folgen, benötigen Sie:

  • eine Test- oder Entwicklungsinstallation von WordPress
  • ein Code-Editor
  • ein Thema installiert

Also, lassen Sie uns anfangen.

Erstellen Sie ein untergeordnetes Thema

Wenn Sie an Ihrem eigenen Thema arbeiten, können Sie diesen Abschnitt überspringen. Wenn Sie jedoch ein Thema eines Drittanbieters verwenden, das Sie aus dem Themenverzeichnis heruntergeladen oder bei ThemeForest oder einer anderen Quelle gekauft haben, benötigen Sie ein untergeordnetes Thema.

Befolgen Sie unsere Anleitung zum Erstellen eines untergeordneten Themas und speichern Sie Ihr neues Thema im Verzeichnis wp-content/themes auf Ihrer Site.

Erstellen Sie eine Landingpage-Vorlagendatei

Jetzt müssen Sie eine Seitenvorlage erstellen, die Ihre Landingpagevorlage ist. Sie müssen die Vorlage, die für Seiten in Ihrem Thema verwendet wird, duplizieren und die neue Datei umbenennen. Für viele Themen ist das page.php. Für zwanzig zwanzig ist das singular.php. Sie können die WordPress-Vorlagenhierarchie verwenden, um herauszufinden, welche Vorlagendatei verwendet wird.

Wenn Sie mit einem untergeordneten Thema arbeiten, kopieren Sie Ihr Duplikat in das untergeordnete Thema. Wenn Sie im Hauptthema arbeiten, speichern Sie das Duplikat im Hauptthema. Hinweis: Tun Sie dies nicht auf Ihrer Live-Site!

Wenn Ihr Thema eine Seitenvorlage in voller Breite hat, verwenden Sie diese anstelle von page.php, da das Layout bereits so eingerichtet ist, dass die Seite keine Seitenleiste enthält und die Seitenleiste entfernt wurde.

Ich habe meine Datei landing-page-template.php benannt. Geben Sie ihm keinen Namen, der mit Seite beginnt. Wenn Sie dann eine Seite mit diesem Namen erstellen, weist WordPress die Vorlage dieser Seite automatisch zu. Es ist besser, die Dinge manuell zu halten, damit Sie mehr Kontrolle haben.

Hier ist der vollständige Inhalt meiner neuen landing-page-template.php-Datei. Ihre sieht anders aus, wenn Sie mit einem anderen Thema arbeiten.

Jetzt ist es Zeit, die Datei zu bearbeiten. Beginnen Sie mit dem auskommentierten Text oben. Ersetzen Sie es durch den Text, der für Seitenvorlagen benötigt wird:

Der nächste Schritt besteht darin, alle Aufrufe für die Seitenleiste oder Fußzeile zu entfernen. Wie Sie dies tun, hängt von Ihrem Thema ab und davon, ob Sie zunächst eine Vorlage in voller Breite verwendet haben.

In Twenty Twenty gibt es keinen Anruf in der Seitenleiste, daher muss ich das nicht entfernen. Wenn Sie diese Zeile in Ihrer Vorlage haben, müssen Sie sie entfernen:

Hinweis: Nach Abschluss der Bearbeitung dieser Vorlagendatei kann es vorkommen, dass das Layout eine Lücke hinterlässt, in der sich die Seitenleiste befinden sollte. Bearbeiten Sie das CSS für die Vorlage oder ändern Sie die Klassen im Inhaltsbereich, um die volle Breite zu erhalten.

Nun zur Fußzeile. Sie möchten die Fußzeile nicht vollständig entfernen, da Sie noch Ihr Kolophon und Ihren Aufruf von wp_footer benötigen. Anstatt den Aufruf get_footer() zu entfernen, lassen Sie ihn dort und erstellen eine neue Fußzeilendatei für Ihre Landingpage.

In Twenty Twenty funktioniert die Fußzeile nicht wie gewohnt. In meiner Vorlagendatei befinden sich zwei Aufrufe:

Die erste ruft eine Include-Datei auf, die nur Widgets enthält. Die zweite nennt die Fußzeile, die ich benötige, aber wir werden sie später bearbeiten. Also lösche ich einfach diese Zeile:

Speichern Sie nun Ihre Datei. Wir werden in Kürze darauf zurückkommen.

Erstellen Sie eine Kopfzeile für Ihre Landingpage

Jetzt ist es an der Zeit, eine Kopfzeile für Ihre Landingpage ohne Navigation, Widgets oder Links zu erstellen.

Erstellen Sie ein Duplikat der Datei header.php Ihres Themas (entweder im Hauptthema oder im untergeordneten Thema) und nennen Sie es header-landing.php.

Entfernen Sie den Link im Logo oder im Site-Titel

Suchen Sie den Site-Namen oder das Logo in Ihrer Header-Datei. Meins besteht aus einer Funktion:

Anstatt zu versuchen, diese Funktion zu bearbeiten, werde ich sie durch einen Aufruf des Logos ersetzen:

Ersetzen Sie xxx.jpg im obigen Code durch den Namen Ihres eigenen Logos und stellen Sie sicher, dass Sie den richtigen Pfad verwenden.

Wenn Ihre Site kein Logo in der Kopfzeile, sondern einen Site-Titel enthält, verwenden Sie stattdessen Folgendes:

Hinweis: Die Klassen, die ich oben verwendet habe, sind spezifisch für zwanzigundzwanzig. Bearbeiten Sie sie entsprechend Ihrem Thema.

Wenn Ihr Thema standardmäßiger als zwanzigundzwanzig funktioniert, werden Sie wahrscheinlich feststellen, dass dieser Code bereits vorhanden ist. Sie müssen lediglich alle <a> Elemente entfernen, die die Umgebung umgeben, damit der Site-Titel oder das Protokoll noch vorhanden sind, diese jedoch nicht als Links fungieren.

Entfernen Sie das Navigationsmenü h3

Jetzt ist es Zeit, das Navigationsmenü zu entfernen. Den Code dafür finden Sie in Ihrem Header-Filer. In Twenty Twenty befindet es sich in einem Element, das so aussieht:

Wenn Sie mit 20 arbeiten, entfernen Sie das und alles darin. Wenn nicht, müssen Sie ein div, eine aside oder einen section mit einem ähnlichen Namen finden.

Twenty Twenty verfügt außerdem über zwei Navigationsschaltflächen für Mobilgeräte, die sich in folgenden Elementen befinden:

Entfernen Sie diese, und stellen Sie sicher, dass Sie den Site-Titel und die Beschreibung zwischen ihnen nicht entfernen. Wenn Ihr Thema etwas Ähnliches hat, entfernen Sie das.

Entfernen Sie alle Widget-Bereiche oder anderen Code mit Links

Twenty Twenty hat auch einen Code für die Suche, den ich ebenfalls entfernen werde. Ihr Thema hat dies möglicherweise in einem Widget. In diesem Fall entfernen Sie alle Widget-Bereiche in der Header-Datei.

Und schließlich gibt es in Twenty Twenty am Ende der Datei ein modales Menü, das ich ebenfalls entfernen möchte. Auch hier kann es sein, dass Ihr Thema dies nicht hat - zwanzigundzwanzig ist komplexer als viele!

Meine header-landing.php-Datei sieht jetzt viel einfacher aus:

Speichern Sie die Datei und kehren Sie zu Ihrer Vorlagendatei zurück. Suchen Sie die Zeile, die den Header aufruft:

Bearbeiten Sie es so, dass es die neue Header-Datei aufruft:

Speichern Sie nun Ihre Datei.

Erstellen Sie eine Fußzeile für die Landingpage

Jetzt ist es Zeit, eine Fußzeile für Ihre Landingpage zu erstellen.

Machen Sie ein Duplikat von footer.php und nennen Sie es footer-landing.php. Öffnen Sie Ihre neue Datei.

Suchen Sie nach Code für Widget-Bereiche und entfernen Sie diesen. Twenty Twenty hat keine Widget-Bereiche in der Datei footer.php. Sie befinden sich in einer Include-Datei, zu der ich den Aufruf bereits entfernt habe.

Sie müssen auch das Kolophon bearbeiten, um Links zu entfernen. Hier ist das Kolophon in zwanzig:

Entfernen Sie alle Links im Code. Meins liest sich jetzt so:

Speichern Sie nun die Fußzeilendatei und kehren Sie zu Ihrer Vorlagendatei zurück. Finden Sie den Anruf in der Fußzeile:

Bearbeiten Sie es, um die neue Fußzeilendatei aufzurufen:

Meine Vorlagendatei ist jetzt abgespeckt und lautet wie folgt:

Speichern Sie Ihre Vorlagendatei und aktivieren Sie sie im WordPress-Administrator, wenn Sie mit einem untergeordneten Thema arbeiten.

Verwenden Sie die Vorlage, um Ihre Landingpage zu erstellen

Erstellen Sie eine neue statische Seite für Ihre Landingpage und geben Sie ihr einen Titel, der Ihren Wünschen entspricht.

Erstellen Sie den Inhalt und wählen Sie dann im Abschnitt Seitenattribute des Dokumentbereichs rechts in der Dropdown-Liste Vorlage die Option Landingpage aus.

creating a page using the landing page templatecreating a page using the landing page templatecreating a page using the landing page template

Veröffentlichen Sie die Seite.

Wenn Sie es jetzt im Frontend besuchen, werden Sie feststellen, dass es keine Links oder Navigation enthält und dass die Benutzer nur auf die Schaltfläche "Aufruf zum Handeln" klicken können.

landing page in front endlanding page in front endlanding page in front end

Abschluss

Eine Landingpage ist viel leistungsfähiger, wenn Sie sicherstellen, dass die einzige Aktion, die Personen ausführen können, wenn sie dazu gelangen, darin besteht, auf die Schaltfläche "Kaufen" zu klicken. Durch das Erstellen einer Vorlage dafür in Ihrem WordPress-Design können Sie Ihre Ladingpageeffektiver gestalten und mehr Verkäufe oder Abonnements erzielen.

Befolgen Sie diese Anleitung und Sie erhalten eine leistungsstarke Landingpage für Ihr Thema!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.