Wie man eine mobile Landing Page in WordPress erstellt 

Eine mobile Landing Page in WordPress ist eine einzelne Seite, die so gestaltet ist, dass sie auf Smartphones gut aussieht und gut konvertiert. Sie können eine solche Seite schnell mit einem Drag-and-Drop-Seitenerstellungs-Plugin erstellen, ohne dass Sie programmieren müssen.

Ich kenne das: Ich besuche eine Website auf meinem Handy und finde nur winzigen Text, langsame Ladezeiten und Schaltflächen, auf die ich nicht tippen kann. Deshalb habe ich angefangen, mit SeedProd mobile-first Seiten zu erstellen.

In dieser Schritt-für-Schritt-Anleitung zeige ich Ihnen genau, wie Sie eine mobile Landing Page in WordPress mithilfe eines Drag-and-Drop-Builders erstellen können.

Warum sollte Ihre Landing Page mobilfreundlich sein?

Heutzutage greifen mehr Menschen über ihre mobilen Geräte auf das Internet zu als über Desktops. Das heißt, wenn Ihre Landing Page nicht mobilfreundlich ist, entgeht Ihnen ein großer Teil potenzieller Kunden.

Denken Sie darüber nach: Wenn eine Website auf Ihrem Handy zu lange zum Laden braucht oder schwer zu navigieren ist, würden Sie sie dann nicht verlassen und sich eine bessere Option suchen? Studien zeigen, dass 40 % der Nutzer eine Website, die länger als 3 Sekunden zum Laden braucht, wieder verlassen.

Google weiß, dass mobile Nutzer wichtig sind, weshalb es dem Mobile-First-Design in den Suchergebnissen Vorrang einräumt. Ein mobil-responsives Design ist also nicht nur gut für die Benutzerfreundlichkeit, sondern auch für die Suchmaschinenoptimierung.

Jetzt fragen Sie sich vielleicht: "Wie gestaltet man mobile Landing Pages in WordPrerss am besten?" Es gibt zwei Hauptwege:

1. Verwenden Sie ein WordPress-Landingpage-Plugin: Dies ist die einfachste Option, da sie keine Programmierung erfordert. Ein Plugin wie SeedProd, das beste WordPress-Plugin für effektive mobile Landingpages, bietet mobile-responsive Vorlagen und einen Drag-and-Drop-Builder, um den Prozess zu vereinfachen.
2. Programmieren Sie ein individuelles responsives Design: Diese Option bietet Ihnen mehr Flexibilität, erfordert aber Programmierkenntnisse und kann zeitaufwändig sein.

Dieser Leitfaden konzentriert sich auf die einfachste Methode - die Verwendung eines WordPress-Landingpage-Plugins. Auf diese Weise können Sie schnell und einfach eine hochkonvertierende mobile Landing Page erstellen.

Wie man eine mobile Landing Page erstellt

Schritt 1. SeedProd Landing Page Builder Plugin installieren

Sind Sie bereit, eine mobile Landing Page zu erstellen? Der erste Schritt ist die Installation des SeedProd Landing Page Plugins.

SeedProd ist ein leistungsstarker WordPress Mobile Landing Page Builder, der die Erstellung schöner, hochkonvertierender Seiten zum Kinderspiel macht.

Keine Sorge, es ist kein Programmieren erforderlich. SeedProd verfügt über eine Drag-and-Drop-Benutzeroberfläche und vorgefertigte Vorlagen, die es jedem leicht machen, großartige mobile Landing Pages zu erstellen.

SeedProd hat zwar eine kostenlose Version, aber dieser Leitfaden verwendet SeedProd Pro. Die Pro-Version bietet mehr erweiterte Funktionen und Anpassungsoptionen zur Optimierung von Landing Pages für Conversions.

Und im Elite-Tarif können Sie die WooCommerce-Blöcke verwenden, um eCommerce-Landingpages zu erstellen, die den Umsatz steigern.

Hier erfahren Sie, wie Sie SeedProd Pro installieren:

1. Erwerben Sie SeedProd Pro über die Preisseite.
2. Laden Sie die Plugin-Datei von Ihrem SeedProd-Konto herunter.
3. Gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Plugins " Neu hinzufügen.
4. Klicken Sie auf Plugin hochladen und wählen Sie die SeedProd Pro Zip-Datei aus.
5. Klicken Sie auf Jetzt installieren, und nach der Installation auf Plugin aktivieren.

Nach der Aktivierung werden Sie aufgefordert, Ihren Lizenzschlüssel einzugeben. Sie finden diesen Schlüssel in Ihrem SeedProd-Konto-Dashboard. Nachdem Sie ihn eingegeben haben, können Sie mit dem Bau beginnen.

Schritt 2. Wählen Sie eine mobilfreundliche Vorlage

Nachdem Sie nun SeedProd installiert haben, können Sie Ihre mobilfreundliche Landing Page erstellen.

SeedProd bietet eine Vielzahl von responsiven Landing Page-Vorlagen, so dass Sie nicht bei Null anfangen müssen. Diese mobilen Landing Page-Vorlagen sind bereits für die mobile Nutzung optimiert, sodass Ihre Seite auf jeder Bildschirmgröße gut aussieht.

So wählen Sie eine Vorlage aus:

1. Gehen Sie zu Ihrem WordPress Dashboard und klicken Sie auf SeedProd " Landing Pages.
2. Klicken Sie auf die Schaltfläche Neue Landing Page hinzufügen.

3. Es wird eine Bibliothek mit Vorlagen angezeigt. Blättern Sie durch die Optionen oder verwenden Sie die Filter, um Ihre Suche einzugrenzen. Wenn Sie z. B. eine mobile Seite für Ihr Webinar wünschen, wählen Sie den Filter "Webinar-Landingpage".

Tipps für die Auswahl einer mobilfreundlichen Vorlage:

• Achten Sie auf ein sauberes und einfaches Layout: Vermeiden Sie Vorlagen mit zu vielen Spalten oder unübersichtlichen Designs, da diese auf kleineren Bildschirmen erdrückend wirken können.
• Legen Sie Wert auf Lesbarkeit: Stellen Sie sicher, dass der Text groß genug ist, um ihn auf einem mobilen Gerät bequem lesen zu können.
• Wählen Sie große, berührungsfreundliche Schaltflächen: Die Schaltflächen sollten leicht mit dem Finger zu berühren sein.

Denken Sie daran, dass Sie jede Vorlage so anpassen können, dass sie zu Ihrer Marke und Ihrer Botschaft passt.

Wenn Sie eine Vorlage gefunden haben, die Ihnen gefällt, bewegen Sie den Mauszeiger über die Vorlage und klicken Sie auf das Häkchen, um sie auszuwählen.

Sie werden aufgefordert, Ihrer Seite einen Namen und eine URL zu geben. Sie können diese später jederzeit ändern. Wenn Sie fertig sind, klicken Sie auf Speichern und mit der Bearbeitung der Seite beginnen, um den Drag-and-Drop-Builder zu öffnen.

Schritt 3. Anpassen Ihrer Landing Page für Mobilgeräte

Jetzt kommt der spaßige Teil - die Anpassung Ihrer mobilen Landing Page.

Der Drag-and-Drop-Builder von SeedProd macht diesen Prozess einfach und intuitiv. Auf der linken Seite des Bildschirms sehen Sie eine Bibliothek mit vorgefertigten Blöcken, wie z. B. Bilder, Text, Schaltflächen, Formulare und mehr.

Ziehen Sie die gewünschten Elemente einfach per Drag & Drop auf die Seitenvorschau. Wenn Sie Änderungen vornehmen, werden diese in Echtzeit angezeigt, sodass Sie Ihr Design einfach visualisieren können.

Mobile-spezifische Gestaltungsprinzipien

Bei der Gestaltung für mobile Endgeräte sollten Sie diese zusätzlichen Grundsätze beachten:

Daumenfreundliche Navigationszonen

Berücksichtigen Sie die "Daumenzone" - den Bereich des Bildschirms, der mit dem Daumen leicht zu erreichen ist, wenn man ein Smartphone in der Hand hält. Platzieren Sie wichtige Schaltflächen und interaktive Elemente in diesem Bereich, um die Navigation zu erleichtern.

Bildquelle

Geeignete Schriftgrößen

Verwenden Sie größere Schriftgrößen, um die Lesbarkeit auf kleinen Bildschirmen zu gewährleisten. Eine gute Faustregel ist:

• Textkörper: 16-18px
• Überschriften: 22px oder größer
• Call-to-Action-Schaltflächen: 14px oder größer

Mit SeedProd können Sie die Schriftgröße leicht anpassen. Wählen Sie einfach einen beliebigen Text- oder Überschriftenblock aus und passen Sie die Schriftgröße mit dem Schieberegler an Ihre Bedürfnisse an.

Handhabung komplexer Inhalte

Für komplexe Inhalte oder große Tabellen sollten Sie dies in Betracht ziehen:

• Verwendung von Ziehharmonikas oder faltbaren Abschnitten, um Platz zu sparen
• Vereinfachung von Tabellen für die mobile Ansicht oder Ermöglichung eines horizontalen Bildlaufs
• Verwendung von Aufzählungspunkten anstelle von Absätzen, wenn möglich

So fügen Sie ein Akkordeon in SeedProd ein:

Optimierte Navigation

Verwenden Sie ein Hamburger-Menü, um Platz zu sparen und die Navigation übersichtlich zu halten. Mit dem Navigationsblock von SeedProd können Sie ganz einfach ein mobilfreundliches Menü erstellen:

Expertentipp

Erwägen Sie das Hinzufügen einer Click-to-Call-Schaltfläche zu Ihrer mobilen Landing Page. Auf diese Weise können mobile Nutzer direkt mit Ihnen in Kontakt treten.

Fügen Sie so lange Inhalte zu Ihrer Seite hinzu, bis Sie mit dem Aussehen zufrieden sind. Klicken Sie dann auf die grüne Schaltfläche "Speichern" in der oberen rechten Ecke, um Ihre Einstellungen zu speichern.

Schritt 4. Konfigurieren Sie Ihre Einstellungen

Jetzt, wo Ihre Landing Page auf dem Handy fantastisch aussieht, können wir einige wichtige Einstellungen konfigurieren, die Ihnen helfen, die Leistung zu verfolgen und Leads zu erfassen.

Verbinden Sie Ihren E-Mail-Marketingdienst

SeedProd lässt sich nahtlos in beliebte E-Mail-Marketingdienste wie Constant Contact, MailChimp und andere integrieren. Mit dieser Integration können Sie Ihre E-Mail-Liste ganz einfach erweitern, indem Sie Leads direkt von Ihrer mobilen Landing Page erfassen.

Um Ihren E-Mail-Marketingdienst zu verbinden:

1. Klicken Sie im SeedProd Builder auf die Registerkarte Verbinden.

2. Wählen Sie Ihren E-Mail-Anbieter aus der Liste aus und folgen Sie den Anweisungen auf dem Bildschirm, um Ihr Konto zu verbinden.

Seiteneinstellungen konfigurieren

Klicken Sie nun auf die Registerkarte Seiteneinstellungen, um Ihre Landing Page-Einstellungen anzuzeigen. Sie können den Namen und die URL Ihrer Landing Page bearbeiten und wählen, ob Sie den Isolationsmodus aktivieren möchten.

Was ist der Isolationsmodus?

Der Isolationsmodus sorgt dafür, dass Ihre Landing Page schneller lädt, indem er Konflikte mit Ihrem WordPress-Theme und Plugins verhindert. Wenn Sie Anzeigeprobleme haben, kann die Aktivierung dieser Option helfen.

Mit SeedProd können Sie Ihre Landing Page auch für Suchmaschinen optimieren und wichtige Metriken mit Google Analytics verfolgen. Sie können den Titel und die Meta-Beschreibung Ihrer Seite anpassen und Tracking-Codes hinzufügen.

Auf der Registerkarte Skripte können Sie dann benutzerdefinierte Skripte für Kopf-, Haupt- und Fußzeilen einfügen. Dies ist nützlich für das Retargeting von Seitenbesuchern mit Ihrem Facebook-Tracking-Pixel usw.

Schritt 5. Vorschau und Veröffentlichung Ihrer mobilen Landing Page

Bevor Sie Ihre neue Landing Page starten, ist es wichtig zu sehen, wie sie auf verschiedenen Geräten aussieht. Glücklicherweise macht SeedProd dies mit seiner integrierten mobilen Vorschaufunktion einfach.

Hier erfahren Sie, wie Sie eine Vorschau für Ihre Landing Page erstellen:

1. Suchen Sie im SeedProd Builder nach dem Handy-Symbol am unteren Rand des Bildschirms.

2. Klicken Sie auf das Symbol, um zwischen der Desktop-, der Tablet- und der mobilen Ansicht zu wechseln.

In dieser Vorschau können Sie überprüfen, ob Ihr Layout, die Textgröße und die Schaltflächen für kleinere Bildschirme optimiert sind. Wenn etwas nicht stimmt, können Sie direkt in der mobilen Vorschau Anpassungen vornehmen.

Bereit zur Veröffentlichung?

1. Klicken Sie auf die grüne Schaltfläche Speichern, um Ihre Änderungen zu speichern.
2. Klicken Sie neben der Schaltfläche "Speichern" auf den Pfeil, um Ihre Landing Page entweder als Vorlage für eine spätere Verwendung zu speichern, oder klicken Sie auf " Veröffentlichen", um sie auf Ihrer Website zu veröffentlichen.

Herzlichen Glückwunsch! Sie haben erfolgreich eine mobilfreundliche Landing Page in WordPress erstellt. Jetzt sind Sie bereit, mehr Leads und Konversionen von Ihren mobilen Besuchern zu erhalten.

Hier ist die endgültige Version einer Seite, die ich auf meiner Test-Website erstellt habe:

Mobile Landing Page Beispiele & Inspiration

Schauen Sie sich die besten Beispiele für mobile Landing Pages an, die ich gefunden habe, wenn Sie vor der Gestaltung Ihrer Seite etwas Inspiration brauchen.

1. Bugaboo

Das erste Beispiel ist eine mobile Seite von Bugaboo, einem Online-Händler von Produkten für Babys und Kinder. Mir gefällt das einspaltige Layout der Landing Page, das sauber, modern und von jedem Gerät aus leicht zu navigieren ist.

2. Etsy

Wie Sie sehen können, blendet Etsy das Navigationsmenü der Seite auf der Hauptseite mit einem mobilen Menü aus. Die Bilder sind kristallklar, und die Schaltflächen sind groß genug, damit die Kunden darauf tippen können.

Außerdem erstreckt sich das Suchfeld über die gesamte Breite der mobilen Seite, so dass es auf kleineren Bildschirmen viel einfacher zu bedienen ist.

3. Schlupf

Besonders gut gefällt mir die mobile Landing Page von Slack, weil sie auf das Gerät des Nutzers zugeschnitten ist. Da ich ein iPhone verwendet habe, wurde die Seite für den Apple Store personalisiert.

Dieser Ansatz ist eine hervorragende Möglichkeit, um bestimmte Zielgruppen anzusprechen. Und da die Seite den Bedürfnissen dieser Zielgruppe entspricht, ist die Wahrscheinlichkeit höher, dass sie konvertiert.

4. Kartierte Helix

Das klare Design der mobilen Landing Page von Maped Helix überlässt nichts dem Zufall. Sie verfügt über eine Sticky Bar am oberen Rand der Seite, um die Nutzer zum Abonnieren zu ermutigen, sowie über klar beschriftete CTA-Buttons, die die Nutzer zu beliebten Bereichen der Website führen.

Noch besser: Die Farben der CTA-Schaltflächen variieren je nach Wichtigkeit, wobei die kräftigere Farbe anzeigt, auf welche Schaltfläche die Nutzer zuerst klicken sollten.

5. Evernote

Evernote hält die Dinge in diesem Beispiel einfach. Der Aufruf zum Handeln ist klar und nachvollziehbar und die Seite lädt blitzschnell. In Anbetracht der Tatsache, dass die Seite praktisch keine Bilder enthält, ist sie erstaunlich auffällig.

Eine mobile Landing Page, die nur aus Text besteht, ist vielleicht nicht für jeden die beste Lösung, aber für die richtigen Marken ist sie effektiv.

6. Kopfraum

Die mobile Landing Page von Headspace nutzt großen, gut lesbaren Text in Kombination mit viel Weißraum für ein klares, fokussiertes Erlebnis, das Ihre Aufmerksamkeit auf die primäre Handlungsaufforderung des Unternehmens lenkt.

Häufig gestellte Fragen zur mobilen Landing Page

Nächster Punkt: Weitere Tipps für die mobile Nutzung

Ich hoffe, dass dieser Leitfaden Sie mit dem Wissen und den Best Practices ausgestattet hat, die Sie benötigen, um hochkonvertierende, mobilfreundliche Landing Pages für Ihre WordPress-Website zu erstellen.

Indem Sie auf mobile Endgeräte setzen, die Leistung optimieren und responsive Designtechniken nutzen, können Sie sicherstellen, dass Ihre Landing Pages eine nahtlose Benutzererfahrung bieten, die zu mehr Leads und Verkäufen durch die ständig wachsende mobile Zielgruppe führt.

Wenn Ihnen dieser Artikel gefallen hat, finden Sie vielleicht diese zusätzlichen Tipps für ein mobilfreundliches Design hilfreich:

• Wie man mobile Menüs in WordPress bearbeitet (Anleitung für Anfänger)
• Landing Page Best Practices für unglaubliche Konversionsraten
• Wie man Bilder in der mobilen Ansicht von WordPress ausblendet
• 9 Mobile Friendly Website Beispiele für Responsive Design Inspiration
• Wie man eine nur für den Desktop bestimmte Website mobilfreundlich macht (einfache Schritte)
• 11 beste WordPress Mobile Plugins für mobilfreundliche Websites

Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.

Stacey Corrin Autorin

Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.

Vollständige Bio sehen

WordPress SEO Content Marketing Digitales Marketing SaaS Werbetexten Webgestaltung