Czy chcesz wyświetlić podgląd mobilnej wersji swojej witryny WordPress?
Podgląd układu mobilnego pomaga zobaczyć, jak witryna wygląda na urządzeniach przenośnych. Gdy witryna jest w fazie rozwoju, a nawet gdy jest już uruchomiona, często łatwiej jest wyświetlić wersję mobilną na komputerze stacjonarnym. Wówczas można szybko wprowadzić zmiany i zobaczyć ich efekt.
W tym artykule pokażemy, jak wyświetlić mobilną wersję witryny WordPress z komputera stacjonarnego.
Dlaczego warto wyświetlić podgląd układu mobilnego
Ponad 50% odwiedzających Twoją witrynę będzie korzystać z telefonów komórkowych, aby uzyskać do niej dostęp. Około 3% będzie korzystać z tabletu.
Oznacza to, że posiadanie strony, która wygląda świetnie na urządzeniach mobilnych jest bardzo ważne.
W rzeczywistości mobilność jest tak ważna, że Google używa teraz indeksu mobile-first dla swojego algorytmu rankingu witryn. Oznacza to, że Google będzie używać wersji mobilnej witryny do indeksowania. Możesz dowiedzieć się więcej, czytając nasz kompletny przewodnik po WordPress SEO.
Nawet jeśli korzystasz z responsywnego motywu WordPress, nadal musisz sprawdzić, jak Twoja witryna wygląda na urządzeniach mobilnych. Możesz stworzyć różne wersje kluczowych stron docelowych, które są zoptymalizowane pod kątem potrzeb użytkowników mobilnych.
Ważne jest, aby pamiętać, że większość podglądów mobilnych nie będzie całkowicie idealna, ponieważ istnieje tak wiele różnych rozmiarów ekranów mobilnych i przeglądarek. Ostatecznym testem powinno być zawsze sprawdzenie witryny na rzeczywistym urządzeniu mobilnym.
To powiedziawszy, przyjrzyjmy się, jak można wyświetlić mobilną wersję witryny WordPress na komputerze.
Omówimy dwie różne metody testowania wyglądu witryny na urządzeniach mobilnych przy użyciu przeglądarek stacjonarnych. Możesz kliknąć poniższe linki, aby przejść do dowolnej sekcji:
Samouczek wideo
Subskrybuj WPBeginner
Jeśli wolisz instrukcje pisemne, kontynuuj czytanie.
Metoda 1: Korzystanie z narzędzia do dostosowywania motywu WordPress
Możesz użyć narzędzia do dostosowywania motywu WordPress, aby wyświetlić podgląd mobilnej wersji witryny WordPress.
Wystarczy zalogować się do pulpitu nawigacyjnego WordPress i przejść do ekranu Wygląd ” Dostosuj.
Spowoduje to otwarcie konfiguratora motywów WordPress. W tym samouczku będziemy używać motywu Astra.
W zależności od używanego motywu, w menu po lewej stronie mogą pojawić się nieco inne opcje.
W dolnej części ekranu kliknij ikonę telefonu komórkowego.
Wyświetli się podgląd wyglądu witryny na urządzeniach mobilnych.
Ta metoda podglądu wersji mobilnej jest szczególnie przydatna, gdy nie ukończyłeś jeszcze tworzenia bloga lub gdy jest on w trybie konserwacji.
Możesz teraz wprowadzić zmiany w swojej witrynie i sprawdzić, jak wyglądają przed ich wprowadzeniem. pchasz je na żywo.
Metoda 2: Korzystanie z trybu urządzenia DevTools w Google Chrome
Przeglądarka Google Chrome posiada zestaw narzędzi dla deweloperów, które umożliwiają przeprowadzanie różnych kontroli na dowolnej stronie internetowej, w tym wyświetlanie podglądu jej wyglądu na urządzeniach mobilnych.
Wystarczy otworzyć przeglądarkę Google Chrome na komputerze i odwiedzić stronę, którą chcesz sprawdzić. Może to być podgląd strony w Twojej witrynie lub nawet witryna Twojej konkurencji.
Następnie kliknij stronę prawym przyciskiem myszy i wybierz opcję „Sprawdź”.
Nowy panel otworzy się po prawej stronie lub na dole ekranu.
Będzie on wyglądał mniej więcej tak:
W widoku deweloperskim będziesz mógł zobaczyć kod źródłowy HTML swojej witryny, CSS i inne szczegóły.
Następnie należy kliknąć przycisk „Toggle Device Toolbar”, aby przejść do widoku mobilnego.
Podgląd witryny zostanie zmniejszony do rozmiaru ekranu urządzenia mobilnego.
Ogólny wygląd witryny zmieni się również w widoku mobilnym. Na przykład menu zwinie się, a dodatkowe ikony przesuną się na lewo zamiast na prawo od menu.
Po najechaniu kursorem myszy na widok mobilny witryny, zmieni się on w okrąg. Okrąg ten można przesuwać za pomocą myszy, aby naśladować ekran dotykowy na urządzeniu mobilnym.
Możesz także przytrzymać klawisz „Shift”, a następnie kliknąć i przesunąć myszą, aby zasymulować szczypanie ekranu urządzenia mobilnego w celu powiększenia lub pomniejszenia.
Powyżej widoku mobilnego witryny zobaczysz kilka dodatkowych opcji.
Ustawienia te umożliwiają wykonanie kilku dodatkowych czynności. Możesz sprawdzić, jak Twoja witryna będzie wyglądać na różnych typach smartfonów.
Na przykład możesz wybrać urządzenie mobilne, takie jak iPhone, i zobaczyć, jak Twoja witryna będzie wyglądać na tym urządzeniu.
Możesz także symulować wydajność witryny na szybkich lub wolnych połączeniach 3G. Możesz nawet obrócić ekran urządzenia mobilnego za pomocą ikony obracania.
Bonus: Jak tworzyć treści dostosowane do urządzeń mobilnych w WordPress
Ważne jest, aby Twoja witryna miała responsywny wygląd, aby użytkownicy mobilni mogli z łatwością poruszać się po Twojej witrynie.
Jednak samo posiadanie responsywnej witryny może nie wystarczyć. Użytkownicy urządzeń mobilnych często szukają innych rzeczy niż użytkownicy komputerów stacjonarnych.
Wiele motywów i wtyczek premium umożliwia tworzenie elementów, które wyświetlają się inaczej na komputerach stacjonarnych i urządzeniach mobilnych. Możesz także użyć wtyczki do tworzenia stron, takiej jak SeedProd, aby edytować swoje strony docelowe w widoku mobilnym.
Powinieneś rozważyć stworzenie treści specyficznych dla urządzeń mobilnych dla formularzy generowania leadów. Na urządzeniach mobilnych formularze te powinny wymagać minimalnej ilości informacji, najlepiej tylko adresu e-mail. Powinny one również dobrze wyglądać i być łatwe do zamknięcia.
Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat tworzenia stron docelowych w WordPress.
Innym świetnym sposobem na tworzenie wyskakujących okienek na urządzenia mobilne i formularzy generujących leady jest OptinMonster. Jest to najpotężniejsza wtyczka WordPress popup i narzędzie do generowania leadów na rynku.
OptinMonster ma określone reguły wyświetlania ukierunkowane na urządzenia, które pozwalają wyświetlać różne kampanie użytkownikom mobilnym i użytkownikom komputerów stacjonarnych. Możesz nawet połączyć to z funkcją kierowania geograficznego OptinMonster i innymi zaawansowanymi funkcjami personalizacji, aby uzyskać najlepsze konwersje.
Możesz zapoznać się z naszym przewodnikiem na temat tworzenia mobilnych wyskakujących okienek, które konwertują dla więcej informacji.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wyświetlić podgląd mobilnego układu witryny. Warto również zapoznać się z naszymi typami najlepszych wtyczek do konwersji witryny WordPress na aplikację mobilną i dowiedzieć się, jak zwiększyć ruch na blogu.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć samouczki wideo WordPress. Można nas również znaleźć na Twitterze i Facebooku.