W artykule:
Czy chcesz wyświetlić podgląd mobilnej wersji witryny WordPress? Przeglądanie układu mobilnego pomaga zobaczyć, jak wygląda witryna na urządzeniach mobilnych.
Chociaż z pewnością możesz spojrzeć na swoją witrynę na żywo w telefonie, nie pomaga to na etapie rozwoju.
Nawet gdy witryna jest aktywna, często łatwiej jest wyświetlić wersję mobilną na komputerze stacjonarnym, dzięki czemu można szybko wprowadzać zmiany i zobaczyć ich efekt.
W tym artykule pokażemy dwa proste sposoby łatwego podglądu układu mobilnego witryny WordPress bez przełączania się na różne urządzenia.
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ć dostęp do twojej witryny. Około 3% będzie używać tabletu.
Oznacza to, że posiadanie witryny, która wygląda świetnie na urządzeniach mobilnych, jest niezbędne.
W rzeczywistości telefon komórkowy jest tak ważny, że Google używa teraz indeksu “mobile-first” do algorytmu rankingu witryny.
Nawet jeśli używasz responsywnego motywu WordPress, nadal musisz sprawdzić, jak twoja witryna wygląda na urządzeniu mobilnym. Możesz nawet chcieć utworzyć różne wersje kluczowych stron docelowych, które są zoptymalizowane pod kątem potrzeb użytkowników mobilnych (więcej na ten temat później).
W tym artykule omówimy dwie różne metody testowania wyglądu witryny na urządzeniach mobilnych przy użyciu przeglądarek desktopowych.
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 ekranu i przeglądarek mobilnych. Twoim ostatnim testem powinno być zawsze spojrzenie na swoją witrynę na rzeczywistym urządzeniu mobilnym.
Video Tutorial
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.
1. Korzystanie z WordPress ‘ s Theme Customizer
Możesz użyć WordPress theme customizer, aby wyświetlić podgląd mobilnej wersji witryny WordPress.
Po prostu zaloguj się do pulpitu WordPress i przejdź do Wygląd ” Dostosuj ekran.
Spowoduje to otwarcie dostosowywania motywów WordPress. W zależności od używanego motywu możesz zobaczyć nieco inne opcje w menu po lewej stronie:
U dołu ekranu kliknij ikonę urządzenia mobilnego. Następnie zobaczysz podgląd wyglądu witryny na urządzeniach mobilnych.
Uwaga: Niebieskie symbole edycji są obecne tylko w podglądzie. Nie zobaczysz ich na swojej stronie NA ŻYWO.
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 wprowadzić zmiany i sprawdzić, jak wyglądają, zanim je uruchomisz.
2. Korzystanie z trybu urządzenia DevTools Google Chrome
Przeglądarka Google Chrome ma zestaw narzędzi programistycznych, które umożliwiają uruchamianie różnych kontroli na dowolnej witrynie, w tym wyświetlanie podglądu wyglądu witryny na urządzeniach mobilnych.
Po prostu otwórz przeglądarkę Google Chrome na pulpicie i odwiedź stronę, którą chcesz sprawdzić.
Może to być podgląd strony w Twojej witrynie, lub może to być nawet strona konkurencji.
Następnie kliknij prawym przyciskiem myszy na stronie i wybierz “Inspect”.
Po prawej stronie otworzy się nowe okienko, w ten sposób:
W widoku deweloper będziesz mógł zobaczyć kod źródłowy HTML swojej witryny.
Następnie kliknij przycisk “Przełącz pasek narzędzi urządzenia”, aby przejść do widoku mobilnego.
Zauważysz, że podgląd Twojej witryny zmniejszy się do rozmiaru ekranu urządzenia mobilnego.
Zauważysz również zmianę wyglądu witryny w widoku mobilnym. W powyższym przykładzie menu zostało zwinięte, a ikona wyszukiwania przesunęła się w lewo zamiast w prawo menu.
Gdy najedziesz kursorem myszy na widok mobilny witryny, stanie się ona okręgiem, w ten sposób:
Ten okrąg 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 symulować szczypanie ekranu telefonu komórkowego, aby powiększyć lub pomniejszyć.
Nad mobilnym widokiem witryny zobaczysz kilka dodatkowych opcji.
Te pozwalają zrobić kilka dodatkowych rzeczy. Możesz sprawdzić, jak twoja strona będzie wyglądać na różnych typach smartfonów. Możesz także symulować wydajność swojej witryny przy szybkich lub wolnych połączeniach 3G. Możesz nawet obrócić ekran telefonu komórkowego za pomocą ikony obróć.
Jak tworzyć treści specyficzne dla urządzeń mobilnych w WordPress
Ważne jest, aby witryna miała responsywny wygląd, dzięki czemu użytkownicy mobilni mogą łatwo poruszać się po witrynie.
Ale po prostu posiadanie responsywnej strony może nie zajść wystarczająco daleko. Użytkownicy urządzeń mobilnych często szukają innych rzeczy niż użytkownicy komputerów stacjonarnych.
Wiele motywów premium i wtyczek pozwala tworzyć elementy, które wyświetlają się inaczej na komputerach stacjonarnych niż na urządzeniach mobilnych. Możesz także użyć wtyczki do tworzenia stron, takiej jak Beaver Builder, aby edytować strony docelowe w widoku mobilnym.
Zdecydowanie powinieneś tworzyć treści specyficzne dla urządzeń mobilnych dla formularzy generowania leadów. Na urządzeniach mobilnych powinny one wymagać minimalnych informacji, najlepiej tylko adresu e-mail. Powinny również dobrze wyglądać i być łatwe do zamknięcia.
Doskonałym sposobem na tworzenie wyskakujących okienek i generowania leadów jest OptinMonster. Jest to najpotężniejsza wtyczka popup WordPress i narzędzie do generowania leadów na rynku.
Mają one określone reguły wyświetlania kierowania 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ć najlepszą konwersję.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak wyświetlić podgląd mobilnego układu witryny. Możesz również zapoznać się z naszym artykułem na temat najlepszych wtyczek do konwersji witryny WordPress w aplikację mobilną.
Bonus: sprawdź nasz wybór najlepszych usług telefonicznych dla firm, dzięki czemu możesz dodać przycisk Kliknij, aby zadzwonić dla użytkowników mobilnych.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
