Większość odwiedzających ogląda Twoją stronę na telefonie. Elementor pozwala ustawić osobne rozmiary i odstępy dla komputera, tabletu i telefonu. Treść jest jedna dla wszystkich urządzeń.
Zmiana w widoku komputera może przenieść się na telefon, a zmiana w widoku telefonu nie przenosi się na komputer. Przed publikacją sprawdź wszystkie trzy widoki, a po publikacji otwórz stronę na prawdziwym telefonie. Gdy coś się rozjedzie, cofniesz to w Historii.
- Telefon pod ręką, żeby sprawdzić efekt na prawdziwym ekranie
Film bez dźwięku, z napisami. Te same kroki do przeczytania są w zakładce Krok po kroku.
Krok po kroku
Kliknij ikonę telefonu
Na górnym pasku kliknij ikonę telefonu. Podgląd strony zwęzi się do szerokości telefonu.
Skrót Ctrl+Shift+M (Mac: Cmd+Shift+M) przełącza tryb urządzeń. Domyślnie widok telefonu obejmuje ekrany do 767 px, a tabletu do 1024 px.
Kliknij nagłówek
Podgląd pokazuje stronę jak na telefonie. Kliknij nagłówek, który jest za duży albo łamie się w dziwnym miejscu.
Otwórz Typografię w Stylu
W panelu otwórz zakładkę Styl i kliknij ikonę ołówka przy Typografia. Rozwinie się lista ustawień czcionki.
Zmień rozmiar dla telefonu
Zmień Rozmiar. Ikona telefonu przy nazwie pola oznacza, że zmiana dotyczy tylko telefonu. Dla nagłówka głównego zwykle wystarcza 28–34 px, dla zwykłego tekstu nie schodź poniżej 16 px.
Ikona przy polu działa też jak przełącznik: kliknięcie jej zmienia podgląd na inne urządzenie.
Wróć do widoku komputera
Kliknij ikonę komputera na górnym pasku. Tam nagłówek ma swój dawny rozmiar. Sprawdź też widok tabletu.
Opublikuj i sprawdź na telefonie
Kliknij Opublikuj. Otwórz stronę na swoim telefonie, przewiń ją do końca i sprawdź, czy nic nie przesuwa się w bok.
Na telefonie dalej stara wersja? Odśwież stronę albo otwórz ją w karcie prywatnej (nie widzę zmian).
Co możesz ustawić osobno dla telefonu
| Co poprawić | Gdzie to jest |
|---|---|
| Za duży lub za mały tekst | Styl → ołówek przy Typografia → Rozmiar, ewentualnie Wysokość wiersza |
| Za duże odstępy, pusta przestrzeń | Zaawansowane → Margines i Dopełnienie (wyjaśnienie w poradniku o odstępach) |
| Tekst wyrównany do środka zamiast do lewej | Styl → Wyrównanie lub Wyrównanie tekstu (zależnie od elementu) |
| Elementy obok siebie są za wąskie | Ustawienia kontenera, zakładka Układ: Kierunek (pod sobą zamiast obok) i Szerokość |
Czego nie zmieniać w widoku telefonu
- Treści. Tekst, zdjęcie i link są wspólne dla wszystkich urządzeń. Poprawka literówki w widoku telefonu zmieni ją wszędzie. To dobrze, ale nie próbuj w ten sposób pisać osobnej wersji tekstu na telefon.
- Kolorów i czcionek globalnych. Te ustawienia działają na całą stronę i na wszystkie urządzenia (kolory globalne).
- Ukrywania zamiast poprawiania. Ukryty element znika dla połowy klientów. Najpierw spróbuj zmniejszyć rozmiar albo odstęp. Gdy ukrycie ma sens, zobacz ukrywanie elementu na telefonie.
- Stałych szerokości w pikselach. Element o szerokości 600 px nie zmieści się na telefonie o szerokości 390 px.
Zasada dziedziczenia: telefon bierze ustawienia z tabletu, a tablet z komputera, dopóki nie wpiszesz osobnej wartości. Gdy wpiszesz wartość na telefonie, późniejsza zmiana na komputerze już jej nie nadpisze. Żeby telefon znów dziedziczył, w widoku telefonu wyczyść pole.
Rozmiar zmieniony na telefonie zmienił się też na komputerze
Zmiana była zrobiona w widoku komputera. Sprawdź ikonę przy nazwie pola: musi być ikona telefonu. Cofnij zmianę skrótem Ctrl+Z (Mac: Cmd+Z), przełącz się na telefon i ustaw rozmiar jeszcze raz.
Zmiana na komputerze nie działa na telefonie
Na telefonie jest wpisana osobna wartość. Przełącz się na widok telefonu i wyczyść pole albo wpisz właściwą wartość także tam.
Na prawdziwym telefonie strona wygląda inaczej niż w podglądzie
Podgląd w edytorze to przybliżenie. Telefony mają różne szerokości, a niektóre ustawienia przeglądarki powiększają tekst. Przejdź przez listę kontrolną w poradniku o widoku mobilnym.
Strona na telefonie przewija się w bok
Któryś element jest szerszy niż ekran, zwykle przez stałą szerokość w pikselach albo duży margines. Sprawdź w widoku telefonu elementy po kolei w zakładce Zaawansowane.
Nic z tego nie pomogło? Opisz problem w formularzu, odpowiemy w dni robocze.