Wie man die mobile Version von WordPress-Seiten vom Desktop aus anzeigt

Möchten Sie eine Vorschau der mobilen Version Ihrer WordPress-Website anzeigen?

Die Vorschau des mobilen Layouts hilft Ihnen zu sehen, wie Ihre Website auf mobilen Geräten aussieht. Wenn sich Ihre Website in der Entwicklung befindet oder sogar schon live ist, ist es oft einfacher, die mobile Version auf einem Desktop-Computer zu betrachten. Dann können Sie schnell Änderungen vornehmen und deren Auswirkungen sehen.

In diesem Artikel zeigen wir Ihnen, wie Sie eine mobile Version der WordPress-Website von einem Desktop aus anzeigen können.

Warum Sie Ihr mobiles Layout in der Vorschau anzeigen sollten

Mehr als 50 % der Besucher Ihrer Website nutzen ihr Mobiltelefon, um auf Ihre Website zuzugreifen. 3 % nutzen ein Tablet.

Das bedeutet, dass eine Website, die auf dem Handy gut aussieht, sehr wichtig ist.

Mobile ist sogar so wichtig, dass Google jetzt einen Mobile-First-Index für seinen Website-Ranking-Algorithmus verwendet. Das bedeutet, dass Google die mobile Version Ihrer Website für die Indexierung verwendet. Sie können mehr erfahren, indem Sie unseren ultimativen Leitfaden für WordPress-SEO lesen.

Auch wenn Sie ein responsives WordPress-Theme verwenden, müssen Sie überprüfen, wie Ihre Website auf mobilen Geräten aussieht. Sie sollten verschiedene Versionen der wichtigsten Landing Pages erstellen, die für die Bedürfnisse mobiler Nutzer optimiert sind.

Es ist wichtig zu bedenken, dass die meisten mobilen Vorschauen nicht perfekt sind, da es so viele verschiedene mobile Bildschirmgrößen und Browser gibt. Ihr letzter Test sollte immer darin bestehen, sich Ihre Website auf einem echten mobilen Gerät anzusehen.

Sehen wir uns also an, wie Sie die mobile Version Ihrer WordPress-Website auf einem Desktop anzeigen können.

Wir werden zwei verschiedene Methoden vorstellen, um zu testen, wie Ihre Website auf mobilen Geräten und in Desktop-Browsern aussieht. Sie können auf die Links unten klicken, um zu einem beliebigen Abschnitt zu springen:

Video-Anleitung

Wenn Sie eine schriftliche Anleitung bevorzugen, dann lesen Sie weiter.

Methode 1: Verwendung des WordPress Theme Customizer

Sie können den WordPress-Theme-Customizer verwenden, um eine Vorschau der mobilen Version Ihrer WordPress-Website anzuzeigen.

Loggen Sie sich einfach in Ihr WordPress-Dashboard ein und gehen Sie auf die Seite Erscheinungsbild " Anpassen Bildschirm.

Dadurch öffnet sich der WordPress-Theme-Customizer. Für dieses Tutorial werden wir das Astra-Theme verwenden.

Je nachdem, welches Thema Sie verwenden, sehen Sie möglicherweise etwas andere Optionen im linken Menü.

Klicken Sie am unteren Rand des Bildschirms einfach auf das Handy-Symbol.

Sie sehen dann eine Vorschau, wie Ihre Website auf mobilen Geräten aussieht.

Diese Methode zur Vorschau der mobilen Version ist besonders nützlich, wenn Sie die Erstellung Ihres Blogs noch nicht abgeschlossen haben oder wenn er sich im Wartungsmodus befindet.

Sie können jetzt Änderungen an Ihrer Website vornehmen und überprüfen, wie sie aussehen, bevor Sie sie in Betrieb nehmen.

Methode 2: Verwendung des DevTools-Gerätemodus von Google Chrome

Der Google Chrome-Browser verfügt über eine Reihe von Entwicklertools, mit denen Sie jede beliebige Website überprüfen können, einschließlich einer Vorschau, wie sie auf mobilen Geräten aussieht.

Öffnen Sie einfach den Google Chrome-Browser auf Ihrem Desktop und rufen Sie die Seite auf, die Sie überprüfen möchten, z. B. die Vorschau einer Seite auf Ihrer Website oder die Website eines Wettbewerbers.

Als Nächstes müssen Sie mit der rechten Maustaste auf die Seite klicken und die Option "Prüfen" wählen.

Auf der rechten Seite oder am unteren Rand des Bildschirms öffnet sich ein neues Fenster.

Sie wird in etwa so aussehen:

In der Entwickleransicht können Sie den HTML-Quellcode, CSS und andere Details Ihrer Website einsehen.

Als nächstes müssen Sie auf die Schaltfläche "Gerätesymbolleiste umschalten" klicken, um zur mobilen Ansicht zu wechseln.

Die Vorschau Ihrer Website wird auf die Größe des mobilen Bildschirms verkleinert.

Auch das allgemeine Erscheinungsbild Ihrer Website ändert sich in der mobilen Ansicht: Die Menüs werden beispielsweise eingeklappt, und zusätzliche Symbole werden nach links statt nach rechts verschoben.

Wenn Sie mit dem Mauszeiger über die mobile Ansicht Ihrer Website fahren, wird er zu einem Kreis, den Sie mit der Maus bewegen können, um den Touchscreen eines mobilen Geräts zu imitieren.

Sie können auch die Umschalttaste gedrückt halten und dann mit der Maus klicken und bewegen, um zu simulieren, dass Sie den Bildschirm Ihres Mobiltelefons zum Vergrößern oder Verkleinern zusammenkneifen.

Oberhalb der mobilen Ansicht Ihrer Website sehen Sie einige zusätzliche Optionen.

Mit diesen Einstellungen können Sie verschiedene zusätzliche Dinge tun: Sie können prüfen, wie Ihre Website auf verschiedenen Smartphone-Typen aussehen würde.

Sie können zum Beispiel ein mobiles Gerät wie ein iPhone auswählen und sehen, wie Ihre Website auf diesem Gerät aussieht.

Sie können auch die Leistung Ihrer Website bei schnellen oder langsamen 3G-Verbindungen simulieren. Mit dem Drehsymbol können Sie sogar den mobilen Bildschirm drehen.

Bonus: Wie man in WordPress mobilspezifische Inhalte erstellt

Es ist wichtig, dass Ihre Website ein responsives Design hat, damit mobile Besucher problemlos auf Ihrer Website navigieren können.

Eine responsive Website allein reicht jedoch nicht aus, denn Nutzer von Mobilgeräten suchen oft nach anderen Dingen als Desktop-Nutzer.

Mit vielen Premium-Themes und Plugins können Sie Elemente erstellen, die auf dem Desktop anders dargestellt werden als auf dem Handy. Sie können auch ein Page-Builder-Plugin wie SeedProd verwenden, um Ihre Landing Pages in der mobilen Ansicht zu bearbeiten.

Sie sollten in Erwägung ziehen, für Ihre Formulare zur Lead-Generierung spezielle Inhalte für Mobilgeräte zu erstellen. Auf Mobilgeräten sollten diese Formulare nur minimale Informationen abfragen, idealerweise nur eine E-Mail-Adresse. Sie sollten außerdem gut aussehen und leicht zu schließen sein.

Weitere Einzelheiten finden Sie in unserer Anleitung zum Erstellen einer Landing Page in WordPress.

Eine weitere großartige Möglichkeit, mobilspezifische Popups und Lead-Generierungsformulare zu erstellen, ist OptinMonster, das leistungsfähigste WordPress-Popup-Plugin und Lead-Generierungs-Tool auf dem Markt.

OptinMonster verfügt über gerätespezifische Anzeigeregeln, mit denen Sie mobilen Nutzern andere Kampagnen zeigen können als Desktop-Nutzern. Sie können dies sogar mit der Geo-Targeting-Funktion von OptinMonster und anderen fortschrittlichen Personalisierungsfunktionen kombinieren, um die besten Konversionen zu erzielen.

Weitere Informationen finden Sie in unserem Leitfaden zur Erstellung konvertierender mobiler Popups.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, das mobile Layout Ihrer Website in der Vorschau anzuzeigen. Vielleicht möchten Sie auch unsere Expertenauswahl der besten Plugins zur Umwandlung einer WordPress-Website in eine mobile App lesen und erfahren, wie Sie den Blog-Traffic erhöhen können.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.