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.

Die Bedeutung des Mobilfunks ist sogar 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. Weitere Informationen finden Sie in unserem ultimativen Leitfaden für WordPress-SEO.

Auch wenn Sie ein responsives WordPress-Theme verwenden, müssen Sie überprü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 mobiler 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.

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 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

Subscribe to WPBeginner

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 zum Bildschirm Erscheinungsbild “ Anpassen.

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 Ihr Blog noch nicht fertiggestellt haben oder wenn es sich im Wartungsmodus befindet.

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

Die nächste Methode zur Anzeige der mobilen Version einer Website ist die Verwendung des Google Chrome-Browsers.

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“ 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.

Sie werden sehen, dass die Vorschau Ihrer Website auf die Größe des mobilen Bildschirms verkleinert wird.

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 z. B. ein mobiles Gerät wie ein iPhone auswählen und sehen, wie Ihre Website auf diesem Gerät angezeigt wird.

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 ein Seitenerstellungs-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 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 unserer Anleitung zum Erstellen einer Landing Page in WordPress.

Eine weitere großartige Möglichkeit, mobilspezifische Popups und Formulare zur Lead-Generierung zu erstellen, ist OptinMonster. Es ist 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 erweiterten Personalisierungsfunktionen kombinieren, um die besten Konversionen zu erzielen.

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

Wir hoffen, dieser Artikel hat Ihnen geholfen, das mobile Layout Ihrer Website in der Vorschau anzuzeigen. Vielleicht interessieren Sie sich auch für unsere Expertenauswahl der besten Plugins zur Umwandlung einer WordPress Website in eine mobile App und erfahren, wie Sie eine mobilfreundliche Website erstellen 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.