Was Sie erstellen werden

Einer der Zwecke einer Website besteht darin, Leads zu generieren. Dies kann auf verschiedene Arten geschehen: Sie haben möglicherweise ein Formular, über das Personen Sie für ein bestimmtes Angebot ansprechen können, Sie können Personen dazu ermutigen, beim Kauf von Waren auf Ihrer Website ein Konto anzulegen, oder Sie haben einen Lead-Magnet, den Sie Ihren Kunden geben im Gegenzug für ihre E-Mail-Adresse.

Wenn Sie einen Lead-Magneten verwenden oder eine Seite auf Ihrer Website haben, die speziell dafür konzipiert ist, einen Artikel zu verkaufen, sei es ein Abonnement, ein Service oder ein Produkt, dann möchten Sie die Benutzer davon abhalten, diese Seite zu verlassen, ohne zu kaufen oder Ihnen Ihre E-Mail-Adresse geben.

Diese Art von Seite wird Landing-Page genannt. Es ist eine Seite, die entworfen wurde, um Teil Ihres Marketingtrichters zu sein, Leads zu generieren oder etwas zu verkaufen. Der Zweck der Seite ist sehr einfach, und Sie möchten nicht, dass andere Personen etwas tun, wenn sie darauf gelandet sind.

Um die Wahrscheinlichkeit zu verringern, dass Personen vor dem Kauf oder der Anmeldung navigieren, möchten Sie die Anzahl der Links auf Ihrer Zielseite verringern. Es sollte keine Widgets und keine Navigationsmenüs haben. Sie möchten nicht, dass andere Benutzer Ihre Website durchsuchen. Sogar der Link zur Startseite in der Kopfzeile muss zusammen mit allen Links in Ihrem Kolophon ganz unten auf der Seite gehen.

In diesem Tutorial zeige ich Ihnen, wie Sie eine Seitenvorlage für Ihr WordPress-Theme erstellen, mit der dies erreicht wird. Es enthält keine Links zu etwas außerhalb des Seiteninhalts. Die Besucher der Seite haben keine andere Wahl, als die Kaufen oder Anmelden Taste.

Dazu arbeiten wir mit einigen Dateien in unserem Theme:

• Wir erstellen eine neue benutzerdefinierte Seitenvorlage für Landing-Pages.
• Wir bearbeiten die Header-Datei. Wenn diese Vorlage angezeigt wird, sind die Links nicht vorhanden.
• Wir bearbeiten die Fußzeilendatei, um Widgets und Links im Kolophon zu entfernen.

Also lasst uns anfangen!

Was du brauchen wirst

Um diesem Tutorial folgen zu können, benötigen Sie:

• Bei einer Entwicklungsinstallation von WordPress fügen Sie Ihrer Live-Site die Landing Page erst hinzu, nachdem Sie sie getestet haben.
• Ein Thema, das Sie bearbeiten können. Wenn es sich um ein Design eines Drittanbieters handelt, erstellen Sie ein untergeordnetes Design und bearbeiten Sie es.
• Ein Code-Editor.

Die Startseite

Ich habe auf meiner Website eine Dummy-Seite erstellt, die als Zielseite verwendet werden kann. So sieht es mit der normalen Seitenvorlage aus:

Im Verlauf dieses Tutorials entferne ich das Navigationsmenü, die Seitenleiste und die Widget-Bereiche in der Fußzeile. Ich werde sicherstellen, dass nichts außerhalb des Inhalts ein anklickbarer Link ist.

Erstellen der WordPress-Landing-Page-Vorlage

Zuerst müssen Sie eine Zielseitenvorlage erstellen. Tun Sie dies auf zwei Arten:

Wenn Sie mit Ihrem eigenen Thema arbeiten, erstellen Sie ein Duplikat page.php und benennen Sie es um.

Wenn Sie mit einem Design eines Drittanbieters arbeiten, erstellen Sie ein untergeordnetes Design. Erstellen Sie ein Duplikat von page.php aus dem übergeordneten Thema im untergeordneten Thema und benennen Sie es um.

Vergeben Sie keinen Dateinamen, der mit beginnt Seite- da dies WordPress verwirren wird, wenn Sie später eine Seite mit dem Slug erstellen, den Sie danach verwenden Seite-. Ich rufe meine an Landing-Page-template.php.

Öffnen Sie jetzt Ihre Vorlagendatei. Fügen Sie diese Codezeile oben ein:

* / Vorlagenname: Zielseitenvorlage / *

Speichern Sie dies, und Sie werden nun sehen, dass Sie die neue Vorlage auswählen können, wenn Sie eine neue Seite auf Ihrer Website erstellen:

Entfernen Sie nun den Seitenleistenaufruf aus der Datei. Finden Sie diese Zeile:

… Und löschen Speichern Sie Ihre Datei. Ihre neue Seitenvorlage ist fertig. Aber du bist noch nicht fertig.

Bearbeiten der Header-Datei

Der nächste Schritt ist die Bearbeitung der header.php Datei, um alle Links zu entfernen, wenn diese Seitenvorlage verwendet wird. Dafür verwenden wir die is_page_template () Bedingter Tag.

Öffne dein header.php Datei und finden Sie den Code für Ihren Site-Titel. 

Hinweis: Wenn Sie ein Design eines Drittanbieters verwenden, erstellen Sie ein header.php Datei in Ihrem untergeordneten Design, die ein Duplikat des übergeordneten Designs ist, und bearbeiten Sie das.

In meinem Thema sieht es so aus:

"title =""rel =" home ">  

Bearbeiten Sie es so, dass es so etwas liest und Anpassungen für Ihr eigenes Thema vornimmt:

  "title =""rel =" home ">    

Wenn die Zielseitenvorlage verwendet wird, wird der Site-Name weiterhin angezeigt, er wird jedoch nicht als Link dargestellt.

Sie müssen auch die Navigation entfernen. Finden Sie den Code für Ihr Hauptmenü. In meinem Thema sieht es so aus:

Bearbeiten Sie es so, dass der gesamte Code für das Menü in einem bedingten Tag platziert wird, der überprüft, ob wir uns befinden nicht Verwenden der Zielseitenvorlage:

Wenn sich in Ihrer Header-Datei weitere Menüs oder Links befinden, umgeben Sie diese mit dem gleichen bedingten Tag. Dies gilt auch für alle Widget-Bereiche.

Speichern Sie jetzt die header.php Datei und schließe es.

Bearbeiten der Fußzeilendatei

Die letzte Stufe besteht darin, sicherzustellen, dass keine Widget-Bereiche in der Fußzeile angezeigt werden.

Dasselbe bedingte Tag wird nur für die Ausgabe von Widget-Bereichen verwendet, wenn die Landing-Page-Vorlage nicht verwendet wird.

Öffne dein footer.php Vorlage (oder erstellen Sie ggf. ein Duplikat für Ihr untergeordnetes Design).

Suchen Sie den Code für die Ausgabe Ihrer Widgets. Hier ist meins:

Wickeln Sie das jetzt in ein bedingtes Tag auf die gleiche Weise ein, wie Sie es in der Header-Datei getan haben.

Als nächstes müssen wir das Kolophon ändern. Dies kann einen Link zu Ihrer Homepage und / oder zur WordPress-Site enthalten.

Hier ist meins:

Verwenden Sie jetzt ein bedingtes Tag, um das Kolophon ohne Links auf der Landing Page auszugeben:

Überprüfen Sie Ihre Fußzeilendatei nach weiteren Links und wickeln Sie sie gegebenenfalls in ein bedingtes Tag ein.

Anpassen des Stylings

Möglicherweise stellen Sie fest, dass Sie die Seitenleiste aus Ihrer Zielseitenvorlage entfernt haben und dass Sie den Stil für den Inhalt anpassen müssen. Wenn der Inhaltsbereich immer noch nur zwei Drittel des Bildschirms ausmacht, können Sie das verwenden Karosserie Klasse, die von WordPress für die Seitenvorlage erstellt wurde, um sie zu beheben.

Nehmen wir an, Sie haben den folgenden Stil für Ihren Inhalt und Ihre Seitenleiste:

.Inhalt Float: Links; Breite: 65%;  .sidebar float: right; Breite: 32%; 

Sie müssen etwas mehr Styling hinzufügen darunter So richten Sie die Inhaltsklasse in Ihrer WordPress-Zielseitenvorlage als Ziel ein:

.Seitenvorlage-Landing-Page-Vorlage .content Breite: 100%; 

Sie müssen dies anpassen, um die verwendeten Ränder oder Polsterungen zu berücksichtigen. Dies gibt Ihnen jedoch eine allgemeine Vorstellung.

Die letzte Seite

Hier ist meine Landingpage ohne Links:

Im Moment sieht es ein bisschen leer aus, aber Sie werden es mit einer Fülle saftiger Inhalte füllen, die die Leute zum Kauf oder zur Anmeldung von Bildern, großen roten Knöpfen und so weiter anregen! Und Sie können sehen, dass es nichts gibt, was den Besucher vom Inhalt der Seite ablenkt.

Ich hoffe, Ihre Landing Page bringt Ihnen viel Arbeit. Viel Glück!