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 % Ihrer Website-Besucher nutzen ihr Mobiltelefon, um auf Ihre Website zuzugreifen. Etwa 3 % werden ein Tablet verwenden.

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

Tatsächlich ist die Bedeutung des Mobilfunks so groß, dass Google für seinen Website-Ranking-Algorithmus jetzt einen Mobile-First-Index verwendet. Das bedeutet, dass Google die mobile Version Ihrer Website für die Indizierung verwendet. Mehr dazu erfahren Sie in unseremultimative Anleitung für WordPress SEO.

Auch wenn Sie eineresponsives WordPress-Thememüssen Sie dennoch prüfen, wie Ihre Website auf dem Handy aussieht. Vielleicht möchten Sie verschiedene Versionen der wichtigsten Landing Pages erstellen, die für die Bedürfnisse der mobilen Nutzer optimiert sind.

Es ist wichtig zu bedenken, dass die meisten mobilen Vorschauen nicht ganz 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.

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

Wir werden zwei verschiedene Methoden vorstellen, um zu testen, wie Ihre Website in Desktop-Browsern auf mobilen Geräten 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 dieWordPress Theme-Anpassungsprogramm um eine Vorschau der mobilen Version Ihrer WordPress-Website anzuzeigen.

Loggen Sie sich einfach in Ihr WordPress-Dashboard ein und gehen Sie auf die SeiteErscheinungsbild “ Anpassen Bildschirm.

Dadurch wird der WordPress-Theme-Customizer geöffnet. Für dieses Tutorial werden wir dieThema Astra.

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 noch nicht fertig sindIhr Blog erstellen oder wenn es inWartungsmodus.

Sie können nun Ä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 besuchen Sie die Seite, die Sie überprüfen möchten. Dabei kann es sich um die Vorschau einer Seite auf Ihrer Website oder sogar um die Website Ihres Konkurrenten handeln.

Als Nächstes müssen Sie mit der rechten Maustaste auf die Seite klicken und die Option „Prüfen“ auswä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 wird sich in der mobilen Ansicht ändern. Zum Beispiel werden die Menüs 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. Dieser Kreis kann mit der Maus bewegt werden, 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 einige 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 Symbol „Drehen“ 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. 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 eineSeitenerstellungs-Plugin wieSeedProd 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 mobilen Geräten sollten diese Formulare nur wenige 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 unserem Leitfaden überwie man eine Landing Page in WordPress erstellt.

Eine weitere großartige Möglichkeit, mobilspezifische Popups und Formulare für die Lead-Generierung zu erstellen, ist mitOptinMonster. Sie ist die mächtigsteWordPress 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 erweiterten Personalisierungsfunktionen kombinieren, um die besten Konversionen zu erzielen.