So erstellen Sie eine Landingpage in WordPress: 3 einfache Methoden 

Die steigende Beliebtheit optisch ansprechender WordPress-Websites ist etwas, das WordPress-Website-Betreiber im Auge behalten sollten. Wenn ein Nutzer Ihre Website besucht, fällt ihm als Erstes das Design der Startseite oder Landingpage in WordPress ins Auge.

Neben dem ansprechenden WordPress-Webdesign ist es ebenso wichtig, die Leadgenerierung und den Call-to-Action (CTA) auf Ihrer Website im Blick zu behalten – genau dafür ist eine Landingpage da. Dies gilt insbesondere für Marketingkampagnen oder wenn Sie möchten, dass Nutzer buchen, etwas kaufen oder einfach nur Informationen auf Ihrer Seite finden.

Hier kommt die Landingpage ins Spiel. Eine WordPress-Landingpage hilft dabei, die Aufmerksamkeit der Nutzer zu gewinnen und ihnen die wirklich benötigten Informationen zu liefern. Doch wie erstellt man eine Landingpage, die sowohl zur Markenbotschaft als auch zur Nutzerintention passt?

In diesem Blogbeitrag stellen wir Ihnen drei einfache Methoden zur Erstellung einer Landingpage vor. Los geht's!.

Was ist eine Landingpage?

Zunächst einmal sollten wir klären, was eine Landingpage in WordPress ist. Viele verwechseln eine Landingpage mit der Startseite einer Website. Es ist jedoch wichtig zu verstehen, dass es sich um zwei verschiedene Dinge handelt.

Die Startseite ist die erste Seite, auf der ein Nutzer landet, wenn er nach Ihrer Website-Domain . Sie ist so gestaltet, dass sie die Aufmerksamkeit des Nutzers durch visuell ansprechende Designelemente und alle wichtigen Informationen zu Ihrem Unternehmen/Ihrer Marke fesselt.

Während die Startseite eine hervorragende Möglichkeit bietet, Nutzer anzusprechen und ihre Verweildauer auf der Website zu verlängern, animiert eine Landingpage Nutzer zu einer konkreten Handlung, wie beispielsweise dem Ausfüllen eines Kontaktformulars , dem Kauf eines bestimmten Produkts oder einer Dienstleistung oder der Anmeldung zu Ihrem Newsletter. Ihr Hauptziel ist es, Nutzer zu gewinnen und sie in Leads zu verwandeln.

Eine Landingpage enthält üblicherweise weniger Links und konzentriert sich auf eine einzige Handlungsaufforderung (Call-to-Action, CTA). Sie können jede beliebige CTA wählen, die zu Ihrem Ziel passt, aber die meisten Landingpages zielen darauf ab, Besucher zum Kauf zu bewegen oder sie zur Leadgenerierung .

Im Gegensatz zu Ihrer Homepage, von der Sie nur eine haben, können Sie beliebig viele Landingpages erstellen. Möchten Sie eine Landingpage in WordPress erstellen? Lesen Sie weiter.

Siehe auch: Die besten SaaS-Landingpage-Vorlagen

So erstellen Sie eine Landingpage in WordPress: 3 Methoden 

Nachdem Sie nun den Zweck einer Landingpage auf Ihrer Website kennen, zeigen wir Ihnen drei einfache Möglichkeiten, eine in WordPress zu erstellen. Jede Methode erfordert zwar etwas Aufwand, aber unsere Schritt-für-Schritt-Anleitung hilft Ihnen dabei, schnell und einfach eine perfekte Landingpage zu gestalten.

Methode 1: Erstellen einer Landingpage in WordPress mithilfe eines Plugins

Wir wissen, dass das Erstellen einer Landingpage für WordPress-Anfänger eine Herausforderung sein kann. Aber keine Sorge: WordPress bietet viele einfache Möglichkeiten, Ihre Landingpage zu erstellen und zu gestalten. Eine davon ist die Verwendung eines Plugins.

Viele WordPress-Plugins bieten einen Drag-and-Drop-Builder und vorgefertigte Landingpage-Vorlagen, wodurch der Einstieg kinderleicht ist. Schauen wir uns das genauer an:

Es gibt viele hervorragende Page-Builder für WordPress-Websites, um Landingpages zu erstellen. Wir verwenden hier den Elementemtor Page-Builder, um Ihnen die Vorgehensweise zu zeigen. Alternativ können Sie auch Page-Builder wie Divi, Seedprod usw. nutzen, um in WordPress eine Landingpage zu erstellen.

Vergleich: Elementor vs. Beaver Builder

Elementor bietet Ihnen mit seinem Drag-and-Drop-Designeditor mehr Flexibilität und Möglichkeiten. Damit haben Sie mehr Kontrolle über Ihr Design und können jeden Aspekt Ihrer Landingpage so kreativ gestalten, wie Sie möchten.

Wissenswertes: WordPress-Website-Designvorlagen für Ihr Unternehmen

Schritt 1: Elementor installieren

Sobald Ihre WordPress-Website eingerichtet ist, können Sie mit dem Elementor-Plugin und seiner visuellen Drag-and-Drop-Oberfläche ganz einfach Landingpages gestalten. Und das Beste daran? Elementor ist kostenlos und direkt über WordPress verfügbar.

Um es zu installieren, gehen Sie einfach in Ihr WordPress-Dashboard, dann auf Plugins → Neu hinzufügen und suchen Sie nach „Elementor“. So einfach ist das!

Schritt 2: Erstellen Sie eine neue Landingpage

Um zu beginnen, gehen Sie in Ihrem WordPress-Dashboard zu Templates → Landing Pages und klicken Sie auf die "Neue Landing Page hinzufügen" .

Dadurch gelangen Sie zum Elementor-Editor, wo Sie zwei Möglichkeiten haben: Sie können aus einer Vielzahl vorgefertigter Landingpage-Vorlagen auswählen oder die Vorlagenbibliothek schließen und Ihre Seite von Grund auf neu erstellen, wenn Sie einen individuellen Ansatz bevorzugen.

Lerne: So zeigst du beliebte WordPress-Beiträge mithilfe eines Plugins an.

Schritt 3: Mit Farben, Schriftarten und der Farbauswahl anpassen

Bevor Sie mit der Gestaltung Ihrer Landingpage beginnen, ist es ratsam, den visuellen Editor richtig einzurichten.

Beim Erstellen einer neuen Landingpage wendet Elementor automatisch das Elementor Canvas -Layout an. Dadurch erhalten Sie eine leere Seite ohne Kopfzeile , Fußzeile oder Seitenleiste – ideal für die Erstellung einer zielgerichteten Landingpage.

Als Nächstes legen wir die globalen Standardfarben fest: Primärfarbe ist Weiß, Sekundärfarbe und Textfarbe sind Schwarz.

Diese Standardfarbschemata werden automatisch angewendet, sobald Sie ein neues Widget hinzufügen, wodurch der Designprozess reibungsloser und schneller abläuft.

Navigationsbereich , den Außenbereich und die Galerie Ihrer Landingpage gestalten und festlegen

Siehe auch: Die besten KI-Webdesign-Vorlagen

Schritt 4: Integration mit Drittanbietertools

Der Einsatz interessanter Tools zur Gewinnung neuer Nutzer und zur Steigerung des Umsatzes auf Ihrer Website ist stets eine hervorragende Option. Mit Elememtor lassen sich Ihre Landingpages in gängige Marketing-Tools integrieren, um die Performance Ihrer Kampagnen zu optimieren.

Mit dem visuellen Formulargenerator von Elementor können Sie beispielsweise ganz einfach ein Kontaktformular erstellen und es optisch an den Rest Ihrer Seite anpassen. Dank der integrierten Formularintegrationen von Elementor E-Mail-Marketing-

Schritt 5: Veröffentlichen Sie Ihre Landingpage

Nachdem Sie Ihre Landingpage bearbeitet und gestaltet haben, können Sie sie veröffentlichen. Vorher empfiehlt es sich jedoch, eine Vorschau Ihrer Landingpage anzusehen, um sicherzustellen, dass alles Ihren Vorstellungen entspricht.

Klicken Sie einfach auf das Augensymbol unten links, um eine Vorschau anzuzeigen. Sobald Sie mit dem Ergebnis zufrieden sind, veröffentlichen Sie die Seite. Anschließend ändert sich die grüne Schaltfläche „Veröffentlichen“ in eine graue Schaltfläche „Aktualisieren“, mit der Sie später gegebenenfalls Änderungen vornehmen können.

Wichtige Lektüre: Barrierefreie Websites für alle: ADA-konforme Website-Designlösungen

Methode 2: Erstellen einer Landingpage in WordPress mit einem Theme

Eine weitere Möglichkeit, eine Landingpage auf Ihrer WordPress-Website zu erstellen, besteht darin, ein WordPress-Theme auszuwählen und dessen Design und Layout anzupassen. Es gibt zahlreiche kostenlose WordPress-Themes, mit denen Sie eine Landingpage erstellen können.

Astra und Neve gehören zu den beliebtesten WordPress-Themes und sind mit gängigen Tools wie WooCommerce und Beaver Builder kompatibel. Alternativ können Sie auch Elementor-Landingpage-Vorlagen , um im Handumdrehen eine professionell aussehende Landingpage zu erstellen.

Lernen Sie: WooCommerce-Vorlagen und Produktseiten anpassen

Schauen wir uns nun an, wie man mit einem WordPress-Theme eine Landingpage erstellt:

Schritt 1: Wähle ein Thema

Gehen Sie zunächst in Ihrem WordPress-Dashboard zu Meine Website“ → „Design“ → „Themes“ . WordPress bietet eine riesige Auswahl an Themes. Wählen Sie ein Theme aus oder laden Sie ein neues herunter. Sobald Sie das passende Theme gefunden haben, klicken Sie einfach auf die drei Punkte neben dem Namen und anschließend auf „Aktivieren“ .

Siehe auch: Die besten UI-Design-Themes und Beispielseiten für E-Commerce

Schritt 2: Inhalte bearbeiten

Einfachheit sollte beim Design Ihrer Landingpage im Vordergrund stehen. Je übersichtlicher die Seite, desto einfacher ist die Navigation für die Nutzer. Entfernen Sie daher alle überflüssigen Seiten und Beiträge. Gehen Sie zu „ Meine Website“ → „Website“ → „Seiten“ und klicken Sie auf die drei Punkte neben jeder Seite, die Sie nicht benötigen. Wählen Sie anschließend „Papierkorb“ . Welche Seite Sie behalten, ist letztendlich egal.

Entdecken Sie: Die besten WordPress-Themes für kleine Unternehmen

Schritt 3: Eine statische Startseite festlegen

Legen Sie als Nächstes die Seite, die Sie behalten möchten, als Ihre statische Startseite fest. Klicken Sie dazu einfach auf die drei Punkte daneben und wählen Sie die Option, sie als Startseite festzulegen. So stellen Sie sicher, dass Besucher Ihrer Website auf Ihrer benutzerdefinierten Seite landen.

Schritt 4: Passen Sie Ihre Seite an

Jetzt ist es an der Zeit, die Seite zu personalisieren! Klicken Sie erneut auf die drei Punkte und wählen Sie „Bearbeiten“. Sie können Text, Bilder, Kontaktformulare und Handlungsaufforderungen hinzufügen, um die Seite ganz individuell zu gestalten.

Weiterlesen: Wie erstelle ich mein eigenes Logo für meine Website?

Schritt 5: Live gehen!

Wenn Sie mit dem Design zufrieden sind, klicken Sie auf „Veröffentlichen“, um Ihre Landingpage online zu stellen. Fertig! Ihre neue Landingpage ist jetzt online und einsatzbereit

Methode 3: Erstellen Sie eine benutzerdefinierte Landingpage in WordPress

Dies ist die letzte empfohlene Methode, falls Sie noch nicht viel Erfahrung mit WordPress haben. Wenn Sie Ihre WordPress-Landingpage jedoch individueller gestalten möchten und sich mit Programmierung und Design auskennen, kann Ihnen dieser Schritt die Arbeit erleichtern.

Mal sehen, wie:

Schritt 1: Erstellen Sie ein Child-Theme

Erstellen Sie zunächst ein Child-Theme in Ihrer WordPress-Installation. Warum? Weil das aktuelle Theme Ihrer WordPress-Website üblicherweise als „Parent-Theme“ bezeichnet wird. Beim Erstellen einer Landingpage kann es sinnvoll sein, ein neues Child-Theme zu erstellen, das Ihre bestehende Theme-Konfiguration nicht beeinträchtigt.

Schritt 2: Erstellen Sie eine style.css-Datei

Sobald Ihr Child-Theme eingerichtet ist, können Sie die style.css-Datei mit dem folgenden Code bearbeiten, um Ihre benutzerdefinierten Theme-Details zu definieren:

/* Theme Name: Custom Landing Page Theme Description: A child theme based on Twenty Sixteen, customized for landing pages Author: Your Name Author URI: https://yourwebsite.com Template: twentysixteen Version: 1.0 Text Domain: custom-landing-page

Schritt 3. Erstellen Sie eine functions.php-Datei

Als Nächstes müssen Sie die Stylesheets des Eltern- und des Kind-Themes laden. Erstellen Sie dazu eine neue Datei namens functions.php im Ordner Ihres Kind-Themes.

Beginnen Sie mit dem öffnenden PHP-Tag und fügen Sie dann den Code zum Einbinden des Stylesheets des übergeordneten Themes hinzu. Hier ist ein Beispiel für den hinzuzufügenden Code:

<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?>

Damit ist Ihr Child-Theme eingerichtet und bereit, mit Ihrem Parent-Theme zusammenzuarbeiten.

Schritt 4: Installieren und aktivieren Sie Ihr Child-Theme

Jetzt ist es an der Zeit, Ihr Child-Theme in WordPress zu installieren und zu aktivieren. Um zu überprüfen, ob alles einwandfrei funktioniert, können Sie einige CSS-Stile testen. Fügen Sie einfach diesen Code in Ihre style.css- Datei ein und laden Sie Ihre Startseite neu. Wenn sich die Hintergrundfarbe ändert, herzlichen Glückwunsch – alles ist eingerichtet und funktioniert wie erwartet!

body, #page { background: #ECE8C1;}

Mehr erfahren: Die schnellsten WordPress-Themes (mit PageSpeed-Werten)

Schritt 5: Erstellen Sie eine benutzerdefinierte Seite

Sobald Ihr Theme aktiviert ist, können Sie eine benutzerdefinierte Seitenvorlage für Ihre Landingpage erstellen. Erstellen Sie dazu zunächst eine neue Datei namens landing-page.php im Ordner Ihres Child-Themes und fügen Sie folgenden Code ein:

<?php /* Template Name: Landing Page */ ?>

Sie können den Vorlagennamen nach Belieben ändern und die Datei anschließend speichern.

Wenn Sie in WordPress eine Seite bearbeiten oder eine neue Seite erstellen, steht Ihnen diese benutzerdefinierte Vorlage nun in der Seitenleiste zur Verfügung. Beachten Sie jedoch, dass die Seite noch leer ist, bis Sie Inhalte hinzufügen!

Schritt 6. Landingpage mit CSS anpassen

Nachdem Ihre Landingpage-Vorlage eingerichtet ist, ist es nun an der Zeit, sie anzupassen.

• Kopieren Sie den Header- und Loop-Code :
  page.php Ihres übergeordneten Themes (zu finden unter public_html → wp-content → Themes → IhrTheme landing-page.php ein , sodass sie wie folgt aussieht:

<?php /* Template Name: Landing Page */ ?> <?php get_header(); while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; get_footer(); ?>

• Seitenleiste und Fußzeile entfernen :
  Um die Seite übersichtlich und frei von Ablenkungen zu halten, entfernen Sie die Seitenleiste und die Fußzeile, indem Sie diese Zeilen löschen:

get_sidebar();get_footer();

• Fügen Sie benutzerdefinierte Inhalte hinzu :
  Verwenden Sie den WordPress-Block-Editor, um Ihrer Landingpage Inhalte hinzuzufügen, oder installieren Sie das Gutenberg Forms -Plugin, um benutzerdefinierte Formulare zu erstellen.

• Zusätzliches CSS hinzufügen :
  Für weitere Anpassungen navigieren Sie zu Design → Anpassen → Zusätzliches CSS . Hier können Sie Hintergrund, Schriftarten und andere Elemente ändern.

• Hintergrundfarbe ändern:

.site-content-contain { background-color: #DEF0F5; position: relative;}

• Schriftarten anpassen:

p { color: teal; font-family: Georgia; font-size: 22px;} h1 { color: white; text-align: center;}

Dadurch wird die Hintergrundfarbe in ein helles Grün geändert und Schriftart und -größe Ihrer Landingpage angepasst. Diese Methode mag für Anfänger etwas knifflig erscheinen, wird aber mit etwas Übung oder professioneller Unterstützung von WordPress-Entwicklern und -Designern immer einfacher.

Tipps zum Erstellen einer perfekten Landingpage in WordPress

Das Erstellen einer Landingpage in WordPress ist recht einfach, wenn Sie die oben genannten Methoden befolgen und die für Sie passende auswählen. Sie müssen aber auch verstehen, wie Sie eine Landingpage optimieren können, um ihr volles Potenzial auszuschöpfen.

Dynamische Landingpages bieten wertvolle Einblicke in Kundendaten und die Leadgenerierung. Die Auswertung der über diese Landingpages eingehenden Kundendaten hilft Ihnen außerdem zu verstehen, wie viele Nutzer Ihre Marketingkampagnen tatsächlich verfolgen.

Manchmal reicht es nicht, einfach nur eine Landingpage zu erstellen; für unsere Website benötigen wir lediglich eine Landingpage, die potenzielle Leads in Kunden verwandelt. Sehen wir uns an, wie das geht:

Einfachheit ist das Beste

Setzen Sie beim Design auf Minimalismus . Einfachheit ist das neue Geheimnis, und Landingpages sollten diesem Prinzip unbedingt Rechnung tragen. Eine Landingpage dient im Wesentlichen dazu, potenzielle Leads in Kunden zu verwandeln. Daher muss die Navigation für Nutzer kinderleicht sein. Zu viele Informationen oder Elemente können die Besucher verwirren. Halten Sie Ihr Design daher einfach und übersichtlich, um die Conversion-Rate optimal zu steigern .

Lernen Sie: Möglichkeiten zur Steigerung Ihrer Conversion-Rate am Ende des Verkaufstrichters

Richten Sie die Landingpage an Ihren Zielen aus

Werbestrategien abstimmen . Ob Sie nun ansprechende Handlungsaufforderungen (CTAs) oder Kontaktformulare zur Informationsgewinnung einsetzen – das Ergebnis muss Ihren Zielen entsprechen. Nur so erzielen Sie den maximalen Erfolg mit Ihrer Landingpage.

Design, das Wirkung erzielt

So wichtig es ist, die Landingpage einfach zu gestalten, so wichtig ist es auch, sie wirkungsvoll zu machen. Eine Landingpage muss informativ genug sein, um Eindruck zu hinterlassen. Sie können Bilder oder aussagekräftige Betreffzeilen verwenden, um die Aufmerksamkeit der Nutzer zu gewinnen und sie zum Interagieren zu animieren .

Machen Sie einen Test

Vergessen Sie nicht, Ihre Landingpage zu testen! Nur so erfahren Sie, wie Ihre Landingpage von Nutzern wahrgenommen und genutzt wird. Testen Sie die Handlungsaufforderungen (CTAs), das Kontaktformular, den Anmeldebutton und alle anderen Elemente Ihrer Landingpage. So stellen Sie sicher, dass Ihnen keine potenziellen Kunden entgehen.

Weiterlesen: Website-Relaunch: Anzeichen dafür, dass Ihre Website überarbeitet werden muss

Überwachen und Optimieren

Sobald Sie eine Landingpage in WordPress erstellt und veröffentlicht haben, ist Ihre Arbeit noch nicht getan. Um erfolgreiche Ergebnisse zu erzielen, müssen Sie die Performance regelmäßig überprüfen und überwachen. Das ist wie die regelmäßige WordPress-Wartung . Behalten Sie im Blick, was funktioniert und was nicht. Probieren Sie verschiedene Überschriften, Bilder oder Elemente aus, um herauszufinden, was am besten ankommt. Verbessern und optimieren Sie die Seite kontinuierlich.

Wählen Sie White-Label-WordPress: Die besten White-Label-Webdesign-Agenturen: Unsere Top-Empfehlungen

Zusammenfassung

Eine Landingpage ist ein wichtiger Bestandteil jeder WordPress-Website und trägt dazu bei, die Konversionsrate zu steigern und Besucher zu binden. Je nach Ihren Kenntnissen gibt es verschiedene Möglichkeiten, eine Landingpage in WordPress zu erstellen.

Für Einsteiger ist die Verwendung eines Plugins oder Themes der einfachste Weg. Dank zahlreicher integrierter Funktionen können Sie Ihre Landingpage individuell anpassen und optimieren, ohne Programmierkenntnisse zu benötigen.

Wenn Sie hingegen mit HTML, PHP und CSS vertraut sind, bietet Ihnen der Aufbau einer Landingpage von Grund auf mehr Flexibilität und Kontrolle über das Design.

Egal welchen Weg Sie wählen, achten Sie unbedingt auf eine aussagekräftige Überschrift, ein klares Design und einen eindeutigen Handlungsaufruf, um eine Landingpage zu erstellen, die zu Conversions führt.

Häufig gestellte Fragen zur Erstellung einer WordPress-Landingpage