Jak zoptymalizować witrynę pod kątem wyświetlania na urządzeniach mobilnych?
Konfigurowanie widoku strony na różnych urządzeniach
Tilda automatycznie dostosowuje witrynę do wyświetlania na tabletach, smartfonach, netbookach, laptopach i komputerach.
Dodatkowo można zmienić rozmiary paddingów między blokami dla urządzeń mobilnych, dostosować widoczność bloków na różnych urządzeniach, zbudować własną adaptacyjną wersję za pomocą edytora Zero Block lub wyłączyć adaptacyjność strony.
Jak tworzyć różne wersje bloków dla komputerów i urządzeń mobilnych?
Jak zmienić wartości paddingów dla urządzeń mobilnych?
Jak zmienić rozmiar czcionki, odstępy między wierszami, a także promień obramowania obrazów i zewnętrzne wypełnienia okładek na urządzenia mobilne?
Jak edytować wersję mobilną i od razu wyświetlać zmiany?
Jak stworzyć własną wersję strony na urządzenia mobilne za pomocą edytora Zero Block ?
Jak wyłączyć adaptację strony do różnych ekranów?
Blokowanie widoczności na urządzeniach
To ustawienie określa, które bloki mogą lub nie mogą być wyświetlane na określonych typach urządzeń. Funkcję tę można dostosować w ustawieniach dowolnego bloku.
Dlaczego możesz tego potrzebować i jak to działa
Jeśli blok wygląda dobrze na komputerze, ale nie tak dobrze na urządzeniach mobilnych, możesz 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 należy skopiować ten blok i zoptymalizować go pod kątem wyświetlania na urządzeniach mobilnych, dostosowując jego ustawienia (takie jak zmiana obrazu, rozmiaru czcionki itp.). Ustaw widoczność bloku na "0-980px". Otrzymasz mobilną wersję bloku.
Tak więc osoby uzyskujące dostęp do Twojej witryny z komputera zobaczą wersję stacjonarną, a użytkownicy mobilni wersję mobilną.
Widoczność bloku (różne wartości parametrów) jest przydatna, aby można było dostosować wygląd bloku dla określonego urządzenia, wybierając rozdzielczość, jeśli zajdzie taka potrzeba. Na przykład, jeśli niektóre bloki nie wyglądają dobrze na tabletach lub określonych telefonach komórkowych.
Jeśli blok wygląda dobrze na komputerze, ale nie tak dobrze na urządzeniach mobilnych, możesz 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 należy skopiować ten blok i zoptymalizować go pod kątem wyświetlania na urządzeniach mobilnych, dostosowując jego ustawienia (takie jak zmiana obrazu, rozmiaru czcionki itp.). Ustaw widoczność bloku na "0-980px". Otrzymasz mobilną wersję bloku.
Tak więc osoby uzyskujące dostęp do Twojej witryny z komputera zobaczą wersję stacjonarną, a użytkownicy mobilni wersję mobilną.
Widoczność bloku (różne wartości parametrów) jest przydatna, aby można było dostosować wygląd bloku dla określonego urządzenia, wybierając rozdzielczość, jeśli zajdzie taka potrzeba. Na przykład, jeśli niektóre bloki nie wyglądają dobrze na tabletach lub określonych telefonach komórkowych.
Nie ma potrzeby zmiany ustawienia widoczności bloków dla wszystkich bloków. Można je dostosować dla tych bloków, w których zdjęcie nie jest dobrze przycięte lub jeśli wybrany blok nie jest odpowiedni dla wersji mobilnej.
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, zdjęcie jest przycinane na telefonie komórkowym i nie wygląda zbyt dobrze.
Ustaw widoczność bloku na "> 980px". Teraz użytkownicy mobilni już go nie zobaczą.
Skopiuj blok.
Dostosuj blok do wersji mobilnej - zmień wyrównanie zdjęcia i tekstu.
Ustawmy widoczność tego 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 na różnych urządzeniach, 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
Ustawianie paddingów dla urządzeń mobilnych
W dowolnym bloku otwórz ustawienia, kliknij ikonę obok opcji "Top padding" i "Bottom padding" i ustaw odstępy dla urządzenia mobilnego.
Dodatkowe ustawienia dla urządzeń mobilnych
W każdym bloku można również zmienić rozmiar czcionki i odstępy między wierszami dla urządzeń mobilnych, a także osobno ustawić zaokrąglone rogi dla obrazów.
Zmiana rozmiaru czcionki i odstępów między wierszami dla urządzeń mobilnych
Aby to zrobić, kliknij przycisk "Ustawienia" bloku i znajdź zakładkę "Typografia". W tej zakładce kliknij ikonę komputera obok pola. Następnie pojawi się pole, w którym można określić rozmiar czcionki dla wersji mobilnej.
Ta sama kolejność działań jest stosowana do zmiany odstępów między wierszami.
Ta sama kolejność działań jest stosowana do zmiany odstępów między wierszami.
Zmiana promienia obramowania obrazu i wypełnienia okładki dla urządzeń mobilnych
Możesz ustawić własną wartość promienia obramowania lub zewnętrznego wypełnienia dla okładek przeznaczonych specjalnie dla urządzeń mobilnych we wszystkich blokach kategorii "Okładka" i "Obraz".
Aby zmienić promień lub wypełnienie, kliknij przycisk "Ustawienia" i znajdź odpowiednie pole. Kliknij ikonę komputera obok pola i wpisz nową wartość w nowym polu.
Aby zmienić promień lub wypełnienie, kliknij przycisk "Ustawienia" i znajdź odpowiednie pole. Kliknij ikonę komputera obok pola i wpisz nową wartość w nowym polu.
Wyświetlanie mobilnej wersji bloków w edytorze
Ta funkcja jest dostępna tylko w trybie testowym. Aby uzyskać do niej dostęp, należy zaznaczyć pole wyboru "Zapisz się, aby zostać beta-testerem i wypróbować nowe funkcje przed ich wydaniem" w swoim profilu.
Aby edytować mobilną wersję bloku, należy przełączyć wyświetlanie w edytorze na wersję mobilną. Aby to zrobić, kliknij ikonę telefonu w menu u góry i wybierz żądaną orientację urządzenia lub jego rozmiar.
Domyślnie dostępne są 4 rozmiary ekranu: 360px i 480px dla smartfona, 640px i 960px dla tabletu.
Aby wybrać inny rozmiar urządzenia mobilnego, kliknij "Urządzenia" na liście. W podmenu wybierz urządzenie, którego potrzebujesz. Wszystkie zaktualizowane urządzenia mobilne i tablety zostały już dodane do listy.
Po przełączeniu trybu wyświetlania bloku w edytorze, kliknij przycisk "Ustawienia" bloku. Teraz możesz skonfigurować wersję mobilną, a zmiany zostaną natychmiast wyświetlone w podglądzie.
Konfigurowanie adaptacyjności w Zero Block
Możesz dostosować adaptacyjność bloku dla różnych urządzeń, konwertując go na Zero Block za pomocą opcji w ustawieniach bloku. Opcja ta jest obecnie dostępna w większości bloków.
Po przekonwertowaniu bloku można ręcznie dostosować jego wygląd do pięciu wersji szerokości ekranu. Więcej informacji na temat konfigurowania adaptacyjności w Zero Block Block można znaleźć w artykułach "Zero Block: Jak utworzyć niestandardowy blok" i "Zero Block: Responsive Design".
Wyłączanie adaptacji strony
Jeśli wyłączysz adaptacyjność, strona będzie wyglądać na urządzeniach mobilnych tak samo jak na komputerze. Aby to zrobić, zaznacz pole wyboru Wyłącz widok mobilny w Ustawienia strony → Dodatkowe i ponownie opublikuj stronę.
Wersja strony dostosowana do urządzeń mobilnych znajduje się po lewej stronie, strona z wyłączoną adaptacją znajduje się po prawej stronie.
