Centrum pomocy

Jak zoptymalizować witrynę pod kątem urządzeń mobilnych?

Skonfiguruj widok strony na różnych urządzeniach w widocznym obszarze.

Tilda-Układy stron są automatycznie dostosowywane do tabletów, smartfonów, netbooków, laptopów i komputerów stacjonarnych.

Dodatkowo można zmodyfikować rozmiary paddingów dla urządzeń mobilnych, dostosować widoczność bloków dla różnych urządzeń, zaprojektować własny responsywny układ za pomocą edytora Tilda' Zero Block lub wyłączyć tryb adaptacyjny witryny dla urządzeń mobilnych.

Ссылки:

Dostosowywanie widoczności bloku
Jak zaprojektować różne wersje bloku na urządzenia mobilne i komputery stacjonarne
Czytaj więcej

Dostosowywanie marginesów dla urządzeń mobilnych
Jak zmienić rozmiary paddingów dla wersji mobilnych
Czytaj więcej

Własna wersja responsywna strony internetowej
Jak zaprojektować własną wersję mobilną za pomocą edytora Zero Block
Czytaj więcej

Wyłączanie trybu adaptacyjnego witryny
Jak wyłączyć wersję adaptacyjną witryny dla różnych rozdzielczości ekranu
Czytaj więcej

Blokada widoczności włączona Różne Urządzenia

Widoczny obszar/widoczność bloków to ustawienie określające, które bloki mogą lub nie mogą być wyświetlane na określonych typach urządzeń. Parametr ten można dostosować w panelu ustawień dowolnego bloku.

Dlaczego może być potrzebny i jak 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 pulpit i nie będzie wyświetlany na urządzeniach mobilnych. (русская версия отличается - Jeśli określony blok (taki jak sekcja bohatera) wygląda dobrze)

Następnie skopiuj blok i zoptymalizuj go pod kątem wyświetlania na urządzeniach mobilnych, dostosowując jego ustawienia (co może wymagać zmiany obrazu), czcionka, itp.). Ustaw widoczność bloku na "0-980px". W rezultacie otrzymasz mobilną wersję bloku. rozmiar czcionki???

Ostatecznie osoby uzyskujące dostęp do witryny z komputera zobaczą wersję stacjonarną, a użytkownicy mobilni wersję mobilną.

Widoczność bloku to parametr, który można znaleźć w panelu ustawień 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. (русская версия отличается - есть уточнение, что это именно range, czyli różne wartości parametrów - и дублируется)

Nie trzeba zmieniać widoczności bloków dla wszystkich bloków. Możesz to zrobić tylko dla bloków ze źle przyciętym zdjęciem lub jeśli wybrany blok nie nadaje się do 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. (русская версия отличается)

Sprawdź, jak wygląda mobilna wersja strony. Jak widzimy, okładka/zdjęcie zostaje przycięte 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 sekcja okładki/bohatera 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

(отличается порядок версий)

Dostosowanie paddingów dla urządzeń mobilnych

W dowolnym bloku otwórz kartę Ustawienia, kliknij ikonę obok opcji "Top padding" i "Bottom padding" i określ paddingi dla urządzenia mobilnego.

Dostosowanie projektu responsywnego w Zero Block

Blok można dostosować tak, aby był responsywny dla różnych urządzeń, konwertując go na Zero Block za pomocą opcji w zakładce Ustawienia bloku. Ta opcja jest dostępna w większości bloków teraz/teraz (уточняется, что это сейчас пока что в доступе или что уже есть???)

Po przekonwertowaniu bloku można ręcznie dostosować jego wygląd dla pięciu typów ekranów w zależności od zakresu szerokości. Przeczytaj więcej o tym, jak dostosować responsywny design w Zero Block w artykule "Zero Block: Jak utworzyć niestandardowy blok" oraz "Zero Block: Responsive Design" artykuły.

Wyłączanie trybu adaptacyjnego witryny

Jeśli wyłączysz tryb adaptacyjny, strona będzie wyświetlana na urządzeniu mobilnym tak samo, jak na komputerze stacjonarnym. Aby to zrobić, należy zaznaczyć pole wyboru "Wyłącz widok mobilny" w Ustawieniach strony → Dodatkowe i ponownie opublikować stronę.

Wersja strony dostosowana do urządzeń mobilnych znajduje się po lewej stronie, a strona z wyłączonym trybem adaptacyjnym po prawej.