So zeigen Sie die mobile Version von WordPress-Websites auf dem Desktop an

Die mobile Version Ihrer WordPress-Website in einer Desktop-Vorschau zu überprüfen, ist eine einfache, aber wichtige Aufgabe.

Damit können Sie überprüfen, wie Ihre Website auf kleineren Bildschirmen aussieht, und so Layoutprobleme oder Designfehler erkennen, die Ihnen sonst vielleicht entgehen würden.

Im Laufe der Jahre haben wir mit vielen Website-Besitzern zusammengearbeitet, um sicherzustellen, dass ihre Websites auf Mobilgeräten gut aussehen und gut funktionieren. Wir priorisieren auch mobilfreundliche Designs, wenn wir neue Seiten und Beiträge auf der WPBeginner-Website erstellen.

Eine Herausforderung, die wir bemerkt haben, ist, dass die Überprüfung der mobilen Version auf einem Desktop ohne die richtigen Werkzeuge schwierig sein kann.

Glücklicherweise ermöglichen Ihnen der Theme Customizer von WordPress und der DevTools Device Mode von Google Chrome, schnell eine Vorschau anzuzeigen und Anpassungen vorzunehmen.

In diesem Leitfaden führen wir Sie durch beide Methoden, um die mobile Version von WordPress-Websites vom Desktop aus anzuzeigen.

Warum Sie Ihr mobiles Layout in der Vorschau anzeigen sollten

Mehr als 50 % Ihrer Website-Besucher werden über ihr Mobiltelefon auf Ihre Website zugreifen, und etwa 3 % werden ein Tablet verwenden.

Das bedeutet, dass eine Website, die auf Mobilgeräten gut aussieht, sehr wichtig ist.

Tatsächlich ist Mobilfreundlichkeit 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. Weitere Informationen finden Sie in unserem ultimativen Leitfaden zu WordPress SEO.

Selbst wenn Sie ein responsives WordPress-Theme verwenden, müssen Sie dennoch überprüfen, wie Ihre Website auf Mobilgeräten aussieht. Möglicherweise möchten Sie verschiedene Versionen von wichtigen Landingpages erstellen, die auf die Bedürfnisse mobiler Nutzer zugeschnitten sind.

Es ist wichtig zu bedenken, dass die meisten mobilen Vorschauen nicht ganz perfekt sein werden, da es so viele verschiedene mobile Bildschirmgrößen und Browser gibt. Ihr abschließender Test sollte immer die Betrachtung Ihrer Website auf einem mobilen Gerät sein.

In den folgenden Abschnitten sehen wir uns an, wie Sie die mobile Version Ihrer WordPress-Website auf einem Desktop anzeigen können.

Wir werden 2 verschiedene Methoden behandeln, um zu testen, wie Ihre Website auf Mobilgeräten mit Desktop-Browsern aussieht. Sie können auf die unten stehenden Links klicken, um zu einem beliebigen Abschnitt zu springen:

• Methode 1: Verwendung des Theme Customizers von WordPress
• Methode 2: Verwenden des Geräte-Modus von Google Chrome DevTools
• Bonustipp: Erstellen von mobil-spezifischen Inhalten in WordPress
• Video-Tutorial
• Häufig gestellte Fragen

Lass uns anfangen!

Methode 1: Verwendung des Theme Customizers von WordPress

Sie können den WordPress Theme Customizer verwenden, um die mobile Version Ihrer WordPress-Website in der Vorschau anzuzeigen.

Melden Sie sich einfach in Ihrem WordPress-Dashboard an und gehen Sie zum Bildschirm Darstellung » Anpassen.

Dies öffnet den WordPress-Theme-Customizer.

Je nachdem, welches Theme Sie verwenden, sehen Sie im linken Menü möglicherweise leicht unterschiedliche Optionen.

Klicken Sie am unteren Bildschirmrand einfach auf das mobile Symbol.

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

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

Sie können jetzt Änderungen an Ihrer Website vornehmen und sehen, wie sie aussehen, bevor Sie sie veröffentlichen.

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

Die nächste Methode, um die mobile Version der Website anzuzeigen, ist die Verwendung des Google Chrome-Browsers.

Der Google Chrome-Browser verfügt über eine Reihe von Entwicklertools, mit denen Sie verschiedene Prüfungen auf jeder Website durchführen können, einschließlich der Vorschau, wie sie auf Mobilgeräten aussieht.

Öffnen Sie einfach den Google Chrome-Browser auf Ihrem Desktop und besuchen Sie die Seite, die Sie überprüfen möchten. Es kann sich um eine Vorschau einer Seite auf Ihrer Website oder sogar um die Website eines Mitbewerbers handeln.

Als Nächstes müssen Sie mit der rechten Maustaste auf die Seite klicken und die Option 'Untersuchen' auswählen.

Ein neues Panel wird auf der rechten Seite oder am unteren Bildschirmrand geöffnet.

Es wird ungefähr so aussehen:

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

Klicken Sie anschließend auf die Schaltfläche „Geräte-Symbolleiste umschalten“, um zur mobilen Ansicht zu wechseln.

Sie sehen die Vorschau Ihrer Website, die auf die Größe des mobilen Bildschirms geschrumpft ist.

Das allgemeine Erscheinungsbild Ihrer Website ändert sich auch in der mobilen Ansicht. Zum Beispiel werden die Menüs zusammengeklappt und zusätzliche Symbole werden nach links statt nach rechts vom Menü verschoben.

Wenn Sie den Mauszeiger über die mobile Ansicht Ihrer Website bewegen, wird er zu einem Kreis. Sie können diesen Kreis mit Ihrer Maus bewegen, um den Touchscreen auf einem mobilen Gerät zu simulieren.

Sie können auch die Umschalttaste gedrückt halten und dann mit der Maus klicken und ziehen, um das Zusammenkneifen des mobilen Bildschirms zu simulieren, um hinein- oder herauszuzoomen.

Über der mobilen Ansicht Ihrer Website sehen Sie zusätzliche Optionen.

Diese Einstellungen ermöglichen Ihnen mehrere zusätzliche Dinge. Sie können überprüfen, wie Ihre Website auf verschiedenen Arten von Smartphones aussehen würde.

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

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

Bonustipp: Erstellen von mobil-spezifischen Inhalten in WordPress

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

Eine responsive Website allein reicht jedoch möglicherweise nicht aus. Nutzer auf Mobilgeräten suchen oft nach anderen Dingen als Desktop-Nutzer.

Viele Premium-Themes und Plugins ermöglichen es Ihnen, Elemente zu erstellen, die auf Desktops anders angezeigt werden als auf Mobilgeräten. Sie können auch ein Page Builder-Plugin wie SeedProd verwenden, um Ihre Landingpages in der mobilen Ansicht zu bearbeiten.

Sie sollten in Erwägung ziehen, mobilgeräte-spezifische Inhalte für Ihre Lead-Generierungsformulare zu erstellen. Auf Mobilgeräten sollten diese Formulare nach minimalen Informationen fragen, idealerweise nur nach einer E-Mail-Adresse. Sie sollten auch gut aussehen und leicht zu schließen sein.

Weitere Details finden Sie in unserem Leitfaden zur Erstellung einer Landing Page in WordPress.

Eine weitere großartige Möglichkeit, mobil-spezifische Popups und Lead-Generierungsformulare zu erstellen, ist mit OptinMonster. Es ist das leistungsstärkste WordPress-Popup-Plugin und Lead-Generierungstool auf dem Markt.

OptinMonster verfügt über spezielle gerätebezogene Anzeigeregeln, mit denen Sie mobile Benutzer im Vergleich zu Desktop-Benutzern unterschiedliche Kampagnen anzeigen können. Sie können dies 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 zum Erstellen von mobilen Popups, die konvertieren.

Video-Tutorial

Bevor Sie gehen, sollten Sie sich unser Video-Tutorial ansehen, wie Sie die mobile Version von WordPress-Websites vom Desktop aus anzeigen.

WPBeginner abonnieren

Häufig gestellte Fragen

Hier sind einige Fragen, die unsere Leser häufig zum Anzeigen des mobilen Layouts Ihrer Website stellen.

Werden diese Desktop-Vorschauen exakt mit echten Mobilgeräten übereinstimmen?

Nicht immer. Obwohl sie hilfreich sind, um offensichtliche Layoutprobleme zu erkennen, können diese desktopbasierten Tools nur Bildschirmabmessungen, Browserverhalten und Netzwerkbedingungen emulieren.

Sie erfassen möglicherweise keine Leistungsprobleme oder hardware-spezifischen Interaktionen wie Touch-Gesten.

Deshalb empfehlen wir, immer auf echten Geräten, einschließlich Smartphones und Tablets, zu testen, um die Benutzerfreundlichkeit in der realen Welt zu bestätigen, bevor Sie live gehen.

Kann ich meine Website in der mobilen Ansicht von meinem Desktop aus bearbeiten?

Ja, WordPress ermöglicht es Ihnen, Inhalte zu bearbeiten, während Sie den mobilen Modus im Customizer in der Vorschau anzeigen oder Page Builder wie Elementor, SeedProd und Beaver Builder verwenden.

Wenn Sie zur mobilen Vorschau wechseln, können Sie:

• Passen Sie Abstände, Ränder und Schriftgrößen für kleinere Bildschirme an.
• Bestimmte Elemente nur auf Mobilgeräten ausblenden oder anzeigen (z. B. große Bilder oder nur für Desktops bestimmte Banner).
• Testen Sie Menüs und Widgets, die für Touch-Interaktionen entwickelt wurden.

Die meisten Builder bieten gerätespezifische Einstellungen, sodass Sie Layouts anpassen können, ohne Desktop- oder Tablet-Versionen zu beeinträchtigen.

Wie kann ich meine WordPress-Mobilansicht überprüfen, ohne mich anzumelden?

Wenn Sie sehen möchten, wie die Live-Site für Besucher aussieht, probieren Sie diese Methoden aus:

• Öffnen Sie Ihre Website in einem Inkognito-Browserfenster und verwenden Sie den Gerätemodus der Entwicklertools.
• Verwenden Sie Online-Responsive-Design-Checker wie den Responsive Design Checker.

Diese Tools ermöglichen es Ihnen, Ihre Website mit unterschiedlichen Auflösungen anzuzeigen, ohne Anmeldeinformationen zu benötigen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie das mobile Layout Ihrer Website in der Vorschau anzeigen können. Sie möchten vielleicht auch unsere Expertenauswahl für die besten Plugins zum Konvertieren einer WordPress-Website in eine mobile App ansehen und erfahren, wie Sie eine mobilfreundliche Website erstellen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.