Jak edytować mobilną wersję witryny WordPress?
Dlaczego wersja mobilna Twojej witryny jest kluczowa dla Twojego sukcesu?
Zacznijmy od tego, że ponad 50% ruchu w sieci na całym świecie pochodzi z telefonów komórkowych. To dosłownie oznacza, że ponad połowa Twoich klientów przegląda Twoją witrynę ze swoich telefonów komórkowych. Począwszy od 2018 roku, kiedy Google zainicjował indeksowanie witryn z myślą o urządzeniach mobilnych, responsywne projektowanie stron internetowych stało się jeszcze ważniejsze, a skupienie się na mobilnych doświadczeniach witryny stało się logicznie priorytetem dla każdego, kto poważnie traktuje swój biznes. Kolejną ważną zaletą witryn przyjaznych dla urządzeń mobilnych jest ich prostota i intuicyjność. Oferują płynną obsługę, ułatwiając potencjalnym klientom kontakt z Tobą. Ponadto ładują się szybko i sprawiają, że udostępnianie treści jest łatwe i naturalne. Jednym ze sposobów myślenia o responsywnej witrynie jest postrzeganie jej jako darmowego sposobu na lepszą pozycję w wyszukiwarkach. Dlaczego miałbyś przegapić tę okazję? Im lepszą pozycję zajmujesz, tym więcej bezpłatnych wyników wyszukiwania, co oznacza więcej potencjalnych klientów i więcej konwersji.
Jak wyświetlić podgląd mobilnej wersji swojej witryny?
Responsywny motyw WordPress gwarantuje wiele korzyści, ale nadal musisz sprawdzać, jak Twoja witryna wygląda na smartfonach w czasie rzeczywistym. Istnieje wiele możliwych różnic w rozmiarach ekranu i przeglądarkach, więc żaden z podglądów mobilnych nie zapewnia doskonałego i 100% dokładnego podglądu. Zawsze powinieneś polegać na rzeczywistych wrażeniach, jakie uzyskujesz, patrząc na swoją witrynę na prawdziwym smartfonie lub urządzeniu mobilnym. Może to zainspirować Cię do optymalizacji kluczowych stron docelowych i tworzenia różnych wersji zoptymalizowanych pod kątem urządzeń mobilnych.
Zobaczmy więc, jak możesz wyświetlić podgląd, jeśli masz witrynę przyjazną dla urządzeń mobilnych WordPress na dwa różne sposoby.
Korzystanie z narzędzia do dostosowywania motywów WordPress
Pierwszym i najprostszym sposobem obejrzenia podglądu wersji mobilnej jest użycie programu Theme Customizer WP. Procedura jest prosta. Zaloguj się do pulpitu WordPress i przejdź do Wygląd > Dostosuj.
Gdy klikniesz na WordPress Theme Customizer i otworzysz go, zobaczysz wszystkie opcje w menu po lewej stronie. Oferowane opcje mogą się różnić w zależności od używanego motywu.
Zwróć uwagę na ikonę telefonu komórkowego u dołu ekranu. Kliknij na nią, a zobaczysz podgląd, jak Twoja witryna wygląda na urządzeniach mobilnych.
Jeśli niebieskie symbole edycji wprowadzają w błąd – nie martw się. Są widoczne tylko w podglądzie, a nigdy w Twojej aktywnej witrynie.
Wskazówka: jeśli blog nie został jeszcze uruchomiony lub jest w trybie konserwacji, ta metoda podglądu jest bardzo przydatna, ponieważ umożliwia wprowadzanie zmian i sprawdzanie ich wyglądu przed uruchomieniem witryny.
Korzystanie z trybu urządzenia dla programistów Google Chrome
Jeśli z jakiegoś powodu nie czujesz się komfortowo przy użyciu WP Theme Customizer, zawsze możesz sprawdzić, czy masz WordPress mobilny przyjazny z przeglądarką Google Chrome. Jest to również bardzo prosta i łatwa procedura, która składa się z kilku kroków.
Po prostu otwórz przeglądarkę Google Chrome jak zwykle i przejdź do strony, którą chcesz sprawdzić. Następnie kliknij stronę prawym przyciskiem myszy i wybierz Sprawdź.
Pamiętaj, że w ten sposób możesz zobaczyć podgląd dowolnej strony w dowolnej witrynie, nie tylko swojej. Może to być nawet witryna konkurencji.
Po prawej stronie otworzy się nowe okienko, które będzie wyglądać tak:
Widok programisty pozwala zobaczyć kod źródłowy HTML Twojej witryny.
Teraz kliknij przycisk Przełącz pasek narzędzi urządzenia, aby wyświetlić widok mobilny.
W podglądzie na urządzeniu mobilnym zauważysz kilka zmian: Twoja witryna zostanie zmniejszona, aby dopasować się do rozmiaru ekranu urządzenia mobilnego i mogą wystąpić inne zmiany. Przyjrzyj się uważnie różnicom i zanotuj, co powinieneś zmienić.
Sprawdź, co się stanie, gdy spróbujesz najechać kursorem myszy na widok mobilny – staje się on okręgiem.
Celem koła jest naśladowanie ekranu dotykowego na urządzeniu mobilnym.
Wskazówka: jeśli chcesz zobaczyć, jak ekran telefonu komórkowego powiększa się i pomniejsza, przytrzymaj klawisz Shift, a następnie klikaj i poruszaj myszą.
Zaletą korzystania z tej metody podglądu witryny mobilnej jest to, że pozwala zobaczyć, jak wygląda strona na różnych typach smartfonów. Te dodatkowe opcje znajdują się nad mobilnym widokiem Twojej witryny. Bez względu na rodzaj podglądu, który otworzyłeś po kliknięciu Przełącz pasek narzędzi urządzenia, tutaj możesz zmienić rozmiar ekranu urządzenia.
Wskazówka: użyj ikony obracania w prawym górnym rogu, aby obrócić ekran telefonu komórkowego. Możesz także sprawdzić elementy na stronie, klikając prawym przyciskiem myszy i wybierając opcję Sprawdź.
Dlaczego Kreator Stron jest ważny dla RWD
RWD to coś, o czym trzeba dokładnie pomyśleć od samego początku tworzenia witryny. Jeśli chcesz, aby Twoja witryna była równie atrakcyjna, łatwa w nawigacji i skuteczna na różnych rozmiarach ekranu, musisz przeanalizować wiele rzeczy. Kreatory stron WordPress odgrywają decydującą rolę w tym procesie, dostarczają podstaw projektu witryny, dlatego przed dokonaniem wyboru należy się dobrze poinformować. Tak więc, inwestując trochę czasu w badania nad narzędziami do tworzenia stron, w rzeczywistości zaoszczędzisz dużo czasu, który możesz poświęcić na tworzenie swojej witryny.
Bazując na naszym doświadczeniu, WPBakery i Elementor to doskonały wybór, ponieważ mogą zaspokoić szeroki zakres różnych potrzeb.
Jeśli masz ograniczony budżet, Elementor jest najlepszym wyborem. Jest to prosta w obsłudze, przyjazna dla początkujących wtyczka, która ma bardzo hojną darmową wersję z solidnym zestawem elementów. Dobrze integruje się również z innymi wiodącymi wtyczkami i usługami WP, takimi jak MailChimp, WooCommerce, HubSpot, Yoast SEO itp. Jeśli możesz sobie pozwolić na wtyczkę premium, WPBakery Page Builder nigdy Cię nie zawiedzie. Zawiera niesamowicie dużą kolekcję elementów, mnóstwo bloków i opcji. Jest również łatwy w użyciu i pozwala na dużą kreatywność.
Chociaż narzędzia do tworzenia stron są niezbędne dla RWD, motyw, którego planujesz użyć, jest również ważny, ponieważ może oferować niesamowite funkcje. Jak być może wiesz, autorzy motywów opracowują określone widżety i elementy, które można dostosowywać niezależnie od kreatorów stron. Wiele z tych elementów pozwala dostosować czas reakcji do własnych potrzeb. Z tego powodu warto wybrać motyw opracowany przez znanych, godnych zaufania autorów. Jest to szczególnie ważne, jeśli chcesz korzystać z darmowego motywu WordPress. Aby zaoszczędzić Twój czas i nerwy, przetestowaliśmy mnóstwo darmowych motywów. Jeśli więc chcesz użyć responsywnego, bogatego w funkcje i niezawodnego darmowego motywu, zalecamy wypróbowanie motywu Qi.
Jak edytować wersję mobilną swojej witryny w Elementor
Można śmiało powiedzieć, że Elementor jest zdecydowanie najlepszym narzędziem do tworzenia stron, jeśli chodzi o edycję mobilnej wersji Twojej witryny. Może się zdarzyć, że nie zauważyłeś tej małej ikony, zwanej ikoną rzutni, w ustawieniach :
Ta ikona wskazuje, że każdą wartość znajdującą się obok niej można edytować osobno dla wersji na komputery i dla komórek. Weźmy na przykład ustawienia szerokości kolumny – możesz dostosować wartość dla komputerów stacjonarnych, telefonów komórkowych i tabletów. Wprowadzona wartość dla każdego urządzenia będzie ważna tylko dla tego wybranego urządzenia. Zauważ, że obok tagu HTML nie ma ikony, co oznacza, że ma taką samą wartość dla każdego urządzenia.
W przypadku, gdy chcesz zmienić wartość dla urządzenia mobilnego, wystarczy wybrać opcję układu mobilnego i wprowadzić żądane wartości (wartości te zostaną zaimplementowane tylko na urządzeniach mobilnych). Po prawej stronie ekranu masz podgląd na żywo wszystkich wprowadzonych zmian, dzięki czemu możesz od razu zobaczyć, jak nowe wartości będą wyglądać na urządzeniu.
Aby powrócić do widoku pulpitu należy przełączyć się na opcję układu pulpitu. Możesz to zrobić, jak wspomnieliśmy powyżej, lub używając tej małej ikony w dolnym menu na stronie :
Jeszcze jedną ważną rzeczą związaną z responsywnością jest to, że kolumny i wiersze można wyłączyć dla poszczególnych urządzeń, czyli możemy powiedzieć, że nie będą widoczne (lub będą widoczne) na niektórych rozmiarach ekranu.
Aby uzyskać dostęp do tej opcji, podążaj ścieżką:
- Kliknij prawym przyciskiem myszy wiersz/kolumnę
- Wybierz Edytuj sekcję
- Kliknij kartę Zaawansowane
- Wybierz menu Responsywne
Ta opcja jest bardzo ważna w przypadku, gdy mamy sekcję, o której wiemy, że ma sens tylko do wyświetlenia na pulpicie, więc anulujemy ją na innych urządzeniach. A żeby zrekompensować jego brak, możemy zrobić jedną sekcję, która będzie widoczna na wszystkich innych urządzeniach oprócz pulpitu.
Jeśli chodzi o kolumny, możemy również znaleźć opcję Reverse column (Tablet / Mobile). Najlepiej wyjaśnić to na przykładzie. Załóżmy, że mamy taką sekcję na pulpicie, w której zawartość jest podzielona na dwie kolumny z obrazami, po których następuje krótki tekst :
Oczywiście na urządzeniach mobilnych zawartość zostanie przeorganizowana tak, jak na poniższym obrazku, zgodnie z pierwotną kolejnością z pulpitu:
Opcja odwróconej kolumny pozwala nam na zmianę kolejności określonej sekcji dla urządzeń mobilnych lub układów tabletów. Kiedy robimy to dla pierwszej sekcji na mniejszych urządzeniach, efektem jest efektywniejsza prezentacja treści:
Jak edytować mobilną wersję swojej witryny za pomocą wtyczek
Wcześniej czy później pokusisz się o użycie różnych wtyczek, które ułatwią dodanie paska bocznego, wezwania do działania, widżetu lub podobnego elementu do Twojej witryny. To moment, w którym wielu zapomina, że pasek boczny lub jakikolwiek inny element, który działa idealnie na ekranie komputera stacjonarnego, może nie być tak dobry na telefonie komórkowym. Tak więc, zanim zaczniesz korzystać z tych przydatnych narzędzi, sprawdź, czy one również reagują. Prawda jest taka, że wiele z nich jest i może faktycznie pomóc Ci poprawić UX. Ale żeby mieć pewność, przeczytaj recenzje lub znajdź demo przed instalacją. Dopóki wtyczka działa dobrze na urządzeniach mobilnych, możesz mieć pewność, że Twoja witryna jest na drodze do sukcesu. Nie zapominajmy też, że opcje różnią się znacznie w zależności od używanego motywu. Motyw premiumna pewno gwarantuje dużo więcej możliwości.
Menu jest filarem doświadczenia użytkownika. Jest to pierwsza lub jedna z pierwszych rzeczy, które użytkownik klika, odwiedzając Twoją witrynę. Wpływa na to, jak szybko odwiedzający znajdzie to, po co przyszedł, jak długo zostanie i na wiele innych aspektów UX. Ważne jest, aby mieć piękne, dobrze zorganizowane menu, które ułatwia nawigację, ale nie jest to tak proste, jak się wydaje. Możesz mieć świetne menu, które działa idealnie na komputerze, ale jest zbyt ciężkie dla telefonu komórkowego. Jednym z rozwiązań w tym przypadku jest dostosowanie wersji komputerowej również do rozmiaru ekranu mobilnego. Ale co, jeśli oznacza to utratę zbyt wielu przydatnych informacji? W takim przypadku możesz utworzyć inne menu, dostosowane tylko do rozmiaru ekranu urządzenia mobilnego. Wiele motywów WP ma taką opcję. Jeśli Twój motyw nie jest jednym z nich, nie martw się, jest ich wieleświetne wtyczki do responsywnych menu. Naszą rekomendacją jest wtyczka Responsive Menu, która zawiera ponad 150 opcji dostosowywania i nie wymaga znajomości kodowania. Pozwala dodawać animacje, obrazy tła, ustawiać pozycje przycisków menu i wiele więcej. Jest niezwykle łatwy w użyciu, więc jest szczególnie przydatny dla początkujących.
Obrazy i galerie
Obraz mówi w tysiącach języków, więc upewnij się, że Twój obraz będzie wyglądał tak samo oszałamiająco na każdym rozmiarze ekranu. Żyjemy w bardzo zorientowanej wizualnie kulturze i bez względu na niszę, w której się znajdujesz, świetne zdjęcia są koniecznością. Ale bez względu na to, jak świetne masz obrazy, jeśli ładują się powoli lub nie są ładnie prezentowane, ryzykujesz utratę znacznego odsetka odbiorców. Aby uniknąć tego scenariusza, zalecamy wtyczkę Envira Gallery Lite, która pomoże Ci tworzyć potężne galerie jak profesjonalista. Niektóre z jego zalet to to, że jest wysoce zoptymalizowany pod kątem wydajności sieci i serwera, co jest świetną wiadomością dla Twojego SEO.
Przyciski udostępniania społecznościowego
Gdy masz świetne, responsywne menu i zachwycające galerie, następną rzeczą, o którą musisz zadbać, są przyciski udostępniania społecznościowego. Ich wielkość należy dostosować do urządzenia. Duży przycisk na małym ekranie powoduje, że odwiedzający klika przypadkowo, co jest dość irytujące. Z drugiej strony małe przyciski na dużym ekranie nie są tak łatwe do rozpoznania. Wtyczką, która może pomóc w dostosowaniu przycisków, jest wtyczka Sassy Social Share. Łatwy w użyciu, całkowicie darmowy i przyjazny dla początkujących, sprawia, że udostępnianie jest proste zarówno dla Ciebie, jak i dla odwiedzających Twoją witrynę.
Mobilne strony internetowe Firendly
W sytuacjach, gdy musisz szybko dostosować swoją witrynę do urządzeń mobilnych, nie ma lepszego rozwiązania niż wtyczka taka jak WPtouch. Ta wtyczka jest stworzona w taki sposób, że automatycznie dodaje prosty i elegancki motyw mobilny do Twojej witryny WP. Fakt, że jest rekomendowany przez Google, mówi wiele o jego skuteczności. Więc nawet jeśli nie masz mobilnej wersji swojej witryny, taka wtyczka może natychmiast włączyć wersję przyjazną dla urządzeń mobilnych, dzięki czemu nie stracisz pozycji w rankingu. Pozwala także dostosować wiele aspektów wyglądu witryny.
Szybkość ładowania strony jest również bardzo ważnym aspektem doświadczenia użytkownika, zwłaszcza na urządzeniach mobilnych. Jeśli napotykasz pewne wyzwania w tej dziedzinie, rozważ skorzystanie z wtyczki Accelerated Mobile Pages, ponieważ jest to jeden z najszybszych i najprostszych sposobów na zwiększenie szybkości ładowania witryny.
Unikaj dodawania wyskakujących okienek na urządzeniach mobilnych
Wyskakujące okienka rzadko bywają zabawne, ale szczególnie irytują na urządzeniach mobilnych. Zajmują one dużą część ekranu i wymagają od odwiedzającego ich odrzucenia przed uzyskaniem dostępu do zawartości strony. Dlatego najlepiej unikać ich całkowicie w mobilnej wersji witryny. Jak zamierzasz ich uniknąć, zależy głównie od Twojego dostawcy usług, ale większość z nich ma opcję wyłączenia natrętnych wyskakujących okienek na telefonach komórkowych. Pamiętaj też , że Google karze witryny, które mają bardzo natrętne wyskakujące okienka.
Na zakończenie
Ponieważ liczba osób korzystających ze smartfonów w celu uzyskania dostępu do Internetu stale rośnie, warto oczekiwać znacznie większej liczby rozwiązań i opcji dla mobilnych wersji witryn. Projektanci ciężko pracują, aby rozwiązać wiele wzorców użytkowania, jednak podstawy RWD są takie same – upewnij się, że wybrałeś przyjazny dla urządzeń mobilnych motyw WP i program do tworzenia stron, który ma wszystkie potrzebne opcje.
Jak więc responsywna jest Twoja witryna? Czy musisz wprowadzić wiele zmian, aby była bardziej przyjazna dla urządzeń mobilnych? Podziel się z nami swoimi odpowiedziami i poproś o więcej informacji w sekcji komentarzy.