Jak zoptymalizować witrynę pod kątem wyświetlania na urządzeniach mobilnych?
Skonfiguruj widok strony na różnych urządzeniach w widocznym obszarze.
Obszar widoczny to ustawienie, które określa, które bloki mogą lub nie mogą być wyświetlane na niektórych typach urządzeń. Parametr ten można dostosować w panelu ustawień dowolnego bloku.
Dlaczego może być potrzebna i jak działa
Jeśli blok wygląda dobrze na pulpicie, ale nie tak dobrze na urządzeniach mobilnych, warto ustawić widoczność bloku na 980 pikseli lub więcej. W ten sposób blok stanie się zorientowany na komputery stacjonarne i nie będzie wyświetlany na urządzeniach mobilnych.
Następnie skopiuj blok i zoptymalizuj go pod kątem wyświetlania na urządzeniach mobilnych, dostosowując jego ustawienia (co może obejmować zmianę obrazu, czcionki itp.). Ustaw widoczność bloku na "0-980px". W rezultacie otrzymasz mobilną wersję bloku.
Ostatecznie osoby uzyskujące dostęp do witryny z komputera zobaczą wersję desktopową, a użytkownicy mobilni wersję mobilną.
Widoczność bloku to parametr, który można znaleźć w panelu Ustawienia dowolnego bloku i dostosować, aby blok pojawiał się lub nie pojawiał na urządzeniach o określonej rozdzielczości ekranu. Na przykład niektóre bloki nie wyglądają dobrze na tabletach, a inne na telefonach komórkowych.
Jeśli blok wygląda dobrze na pulpicie, ale nie tak dobrze na urządzeniach mobilnych, warto ustawić widoczność bloku na 980 pikseli lub więcej. W ten sposób blok stanie się zorientowany na komputery stacjonarne i nie będzie wyświetlany na urządzeniach mobilnych.
Następnie skopiuj blok i zoptymalizuj go pod kątem wyświetlania na urządzeniach mobilnych, dostosowując jego ustawienia (co może obejmować zmianę obrazu, czcionki itp.). Ustaw widoczność bloku na "0-980px". W rezultacie otrzymasz mobilną wersję bloku.
Ostatecznie osoby uzyskujące dostęp do witryny z komputera zobaczą wersję desktopową, a użytkownicy mobilni wersję mobilną.
Widoczność bloku to parametr, który można znaleźć w panelu Ustawienia dowolnego bloku i dostosować, aby blok pojawiał się lub nie pojawiał na urządzeniach o określonej rozdzielczości ekranu. Na przykład niektóre bloki nie wyglądają dobrze na tabletach, a inne na telefonach komórkowych.
Przykład
Mamy okładkę, która wygląda świetnie na komputerach stacjonarnych, tekst jest wyrównany do lewej, a główny obiekt do prawej. Teraz dostosujmy ją tak, aby wyglądała dobrze również na urządzeniach mobilnych.
Jak widzimy, okładka jest przycinana na urządzeniach mobilnych i nie wygląda zbyt dobrze.
Aby zapobiec wyświetlaniu go na urządzeniach mobilnych, przejdź do panelu Ustawienia bloku okładki i ustaw widoczność bloku na "> 980 pikseli". Teraz użytkownicy mobilni już go nie zobaczą.
Skopiuj blok.
Dostosuj blok do wersji mobilnej - zmień wyrównanie zdjęcia i tekstu.
Teraz, gdy ustawiliśmy widoczność bloku na "≤ 980px", nie będzie on wyświetlany na urządzeniach z ekranami szerszymi niż 980px.
Gotowe! Teraz okładka jest wyświetlana w różny sposób w zależności od szerokości ekranu.
Przykłady szerokości ekranu dla różnych urządzeń:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
