Dostosowywanie mobilnej wersji strony internetowej
Jak dodatkowo skonfigurować wyświetlanie strony na różnych urządzeniach
Tilda automatycznie dostosowuje strony internetowe do różnych urządzeń: smartfonów, tabletów, laptopów i komputerów stacjonarnych. W razie potrzeby możesz elastycznie skonfigurować mobilną wersję standardowych bloków lub stworzyć własną responsywną wersję strony internetowej, korzystając z Zero Block.

Zapoznaj się z tym szczegółowym przewodnikiem, aby dowiedzieć się, jak skonfigurować mobilną wersję strony internetowej pod adresem Tilda.
Więcej
Więcej
Więcej
Więcej
Więcej
Więcej
Więcej
Tryb edycji w wersji mobilnej
Po dodaniu i skonfigurowaniu standardowych bloków możesz dodatkowo edytować ich wersję mobilną. W tym celu kliknij ikonę urządzenia mobilnego znajdującą się pośrodku panelu edytora strony.

Z menu rozwijanego wybierz żądany rozmiar ekranu. Jeśli chcesz sprawdzić, jak strona wygląda na konkretnym urządzeniu, wybierz je lub najbliższą opcję w sekcji „Urządzenia”.
Page editor: the device switcher dropdown menu in the top bar showing standard screen widths and the "Devices" submenu.
Edytor przełączy się w tryb mobilny, co ułatwi edycję bloków.
Page editor: mobile view toggle selected in the top bar, displaying block CR15 adapted for mobile screens.
Ważne: Przełączenie widoku bloków w edytorze nie stanowi pełnego podglądu projektowanej strony internetowej. W tym trybie animacje nie działają, a niektóre bloki mogą wyświetlać się inaczej niż na opublikowanej stronie. Aby zobaczyć, jak strona będzie wyglądać po opublikowaniu, kliknij „Podgląd”.
In the page editor: the "Preview" button in the top navigation bar.
Tryb podglądu
W trybie podglądu kliknij ikonę urządzenia mobilnego i wybierz żądany rozmiar ekranu.
Ważne: W trybie podglądu nie można edytować ustawień bloku. Służy on wyłącznie do sprawdzenia, jak strona się wyświetla.
Page preview mode: "Devices" submenu with the "Galaxy A34/A35 384px" option selected in the top bar dropdown.
Aby ukryć interfejs edytora, kliknij ikonę strzałek w lewym dolnym rogu lub obok opcji „Powrót do edycji”.
Page preview mode: the "Hide UI" button in the bottom-left corner of the screen.
Aby zmienić skalę podglądu, kliknij ikonę 100% i wybierz żądaną wartość z menu rozwijanego.
Mobile preview mode: the zoom dropdown menu with "100%" selected in the bottom right corner.
Kliknij ikonę ołówka, aby powrócić do edytora i wprowadzić zmiany w blokach.
In the mobile preview mode: the edit button with a pencil icon in the bottom-left corner.
Edytowanie ustawień bloku w wersji mobilnej
Każdy blok posiada osobne ustawienia odstępów i typografii dla wersji mobilnej. W zależności od bloku mogą być również dostępne dodatkowe ustawienia dla poszczególnych elementów na urządzeniach mobilnych. Ustawienia te są zazwyczaj oznaczone wskazówkami w panelu ustawień.

Na przykład blok menu może posiadać osobną zakładkę z ustawieniami przeznaczoną właśnie do tego celu.
Block Settings panel: the "MOBILE MENU" section in the left menu.
W blokach okładkowych ustawienia wersji mobilnej mogą być oznaczone ikoną telefonu.
Block Settings panel: the "MOBILE COVER BORDER RADIUS" and "MOB. COVER PADDING" fields.
Aby otworzyć osobne ustawienia dla urządzenia mobilnego, kliknij ikonę pulpitu obok odpowiedniego pola. Pojawi się dodatkowe pole z ikoną smartfona.
In the block Settings panel, the "BORDER RADIUS" and "MOB. BORDER RADIUS" fields under the "BUTTONS" section.
Zmiana rozmiaru czcionki i odstępów między wierszami dla urządzeń mobilnych. W ustawieniach bloku otwórz sekcję „Typografia”, kliknij ikonę komputera stacjonarnego, a następnie wprowadź rozmiar czcionki dla wersji mobilnej w polu oznaczonym ikoną urządzenia mobilnego.

Odstępy między wierszami konfiguruje się w ten sam sposób.
Block Settings: "FONT SIZE" and "MOB. FONT SIZE" fields in the "DESCRIPTION" section under "TYPOGRAPHY".
Zmiana promienia zaokrąglenia narożników i odstępów dla okładek na urządzeniach mobilnych. W blokach z kategorii „Okładka” i „Ob raz ” można ustawić oddzielną wartość promienia zaokrąglenia narożników lub odstępów dla urządzeń mobilnych.

Aby zmienić promień lub odstępy, kliknij „Ustawienia” i znajdź odpowiednie pole. Następnie kliknij ikonę komputera obok tego pola i wprowadź wartość dla wersji mobilnej.
Block Settings panel: the "MOBILE COVER BORDER RADIUS" and "MOB. COVER PADDING" fields.
Zmiana położenia obrazu tła. W blokach okładkowych i innych blokach, w których dostępne jest to ustawienie, można wybrać część obrazu, która będzie wyświetlana w bloku.

Aby ustawić automatyczne pozycjonowanie, wybierz odpowiednią wartość z menu rozwijanego, na przykład „Wyśrodkuj”.
Block Settings panel: "BACKGROUND IMAGE POSITION" setting with the dropdown menu and positioning grid icon.
Aby ręcznie ustawić pozycję, kliknij ikonę obok pola.
In the block Settings panel, the "Background Image Position" drop-down menu and its focal point icon.
Otworzy się obraz z punktami pozycjonującymi. Możesz wybrać jeden z gotowych punktów lub umieścić własny punkt w wybranym miejscu.
Image focus point tool in the block settings with an orange focus point marker placed over the image.
Funkcja pozycjonowania pozwala dostosować sposób wyświetlania obrazu tła w wersji mobilnej, dzięki czemu ten sam obraz wygląda dobrze na różnych ekranach.
Konfiguracja wypełnienia dla urządzeń mobilnych
W dowolnym bloku otwórz ustawienia, kliknij ikonę obok pól „Odstęp u góry” lub „Odstęp u dołu” i wprowadź wartość odpowiednią dla urządzenia mobilnego.
Block Settings panel: the desktop and mobile padding icon next to "BOTTOM PADDING", and the "MOB. TOP PADD." and "M. BOTTOM PADD." fields.
Zakres widoczności na różnych urządzeniach
Jeśli chcesz, aby różne bloki wyświetlały się na smartfonach i komputerach stacjonarnych, skonfiguruj zakres widoczności.

Otwórz ustawienia bloku i przewiń w dół do opcji „Widoczność bloku na urządzeniach”. Określ, na których urządzeniach blok ma się wyświetlać. Następnie zapisz ustawienia i opublikuj stronę ponownie.
Block Settings panel: the "BLOCK VISIBILITY ON DEVICES" slider set to "≤ 980px" and the "Convert to Zero Block" button below it.
Konfiguracja responsywnego projektu w Zero Block
Można skonfigurować responsywność bloku dla różnych urządzeń, przekształcając blok w blok typu „ Zero Block ” za pomocą opcji dostępnej w ustawieniach bloku. Opcja ta jest obecnie dostępna w większości bloków.
Po przekształceniu bloku w „ Zero Block ” jego zawartość i wygląd zostaną zresetowane do ustawień domyślnych. Tekst i obrazy trzeba będzie ponownie dodać do bloku.
Block Settings panel: the "Convert to Zero Block" button.
Po konwersji będziesz mógł ręcznie skonfigurować wygląd bloku dla pięciu przedziałów szerokości ekranu lub dodać własne przedziały. Więcej informacji na temat konfigurowania responsywnego projektu w „ Zero Block ” znajdziesz w artykułach „Zero Block: Jak utworzyć blok niestandardowy” oraz „Zero Block: Responsywny projekt ”.
Zero Block editor: the mobile landscape screen resolution icon and the screen settings gear icon on the top panel.
Wyłączanie responsywności strony
Jeśli wyłączysz responsywność, strona na urządzeniach mobilnych będzie wyglądać tak samo jak na komputerze stacjonarnym.

Aby wyłączyć wersję responsywną, przejdź do sekcji „Ustawienia strony” → „Dodatkowe”, zaznacz pole wyboru „Wyłącz widok mobilny” i opublikuj stronę ponownie.
Page Settings: the "Disable mobile view" checkbox under "Adaptive mode" in the "Additional" tab.
Wykonane na
Tilda