Asigurați-vă că site-ul arată bine pe telefoane și tablete
Vedeți cum arată magazinul dumneavoastră pe tablete și telefoane, ascundeți blocurile pe ecranele mici și ajustați poziția unui bloc doar pentru o anumită dimensiune de ecran.
Majoritatea cumpărătorilor vizitează un magazin de pe telefon, astfel că paginile dumneavoastră trebuie să funcționeze la orice dimensiune. Proiectați o singură dată, iar Payly adaptează pagina pentru tablete și telefoane. Acest articol explică ce se întâmplă de la sine și cum îl schimbați atunci când vreți ca un bloc să se comporte altfel pe un ecran mai mic.
Cum se adaptează așezarea
Blocurile stau în celulele unei grile cu 12 coloane, niciodată în poziții fixe în pixeli, astfel că nu se pot suprapune pe un ecran mic. Pagina își schimbă așezarea în două puncte:
- Tablete (ecrane mai înguste de 1024 de pixeli) păstrează aceeași grilă. Un bloc rămâne unde este, dacă nu îl mutați pentru tablete.
- Telefoane (760 de pixeli sau mai înguste) așază fiecare bloc pe propriul rând, pe toată lățimea. Blocurile se aranjează unul sub altul, în ordinea în care le citiți pe desktop: de sus în jos, apoi de la stânga la dreapta.
Unele blocuri se adaptează și mai mult. Linkurile din antet se ascund în spatele unui buton de meniu, grilele se strâng pe o singură coloană, iar galeriile și benzile cu logouri afișează două coloane. Rezultatul este un magazin care funcționează pe telefon fără configurare suplimentară.
Comutați între dimensiunile ecranului
- În bara de sus a editorului, faceți clic pe Tabletă sau Mobil. Pagina se îngustează pentru a arăta cum arată la acea dimensiune.
- Parcurgeți pagina pentru orice lucru care nu se citește bine. Derulați și selectați blocuri, așa cum faceți de obicei.
- Faceți clic pe Desktop pentru a reveni la așezarea de dimensiune completă.
Aceste butoane fac mai mult decât previzualizare. Ele aleg și ce așezare editați. Când treceți la Tabletă sau Mobil, un mesaj vă amintește că modificările se aplică doar acelei dimensiuni. Orice schimbați acolo nu modifică așezarea de pe desktop.
Ascundeți un bloc pe ecrane mici
O fotografie mare sau un bloc decorativ lung poate aglomera un telefon. Îl puteți ascunde pe ecranele mici și îl puteți păstra pe desktop.
- Faceți clic pe Mobil (sau pe Tabletă) în bara de sus.
- Selectați blocul.
- În panoul de setări, deschideți Dimensiune și poziție.
- Activați Ascundeți pe mobil (sau Ascundeți pe tabletă). Blocul dispare din acea vizualizare și nu lasă un spațiu gol pe pagina live.
Un bloc ascuns pe tablete este ascuns și pe telefoane, cu excepția cazului în care dezactivați din nou comutatorul în timp ce vizualizați Mobil. Pentru a ascunde un bloc pe toate ecranele, folosiți Ascundeți acest bloc pe Desktop.
Plasați un bloc diferit pe o singură dimensiune
- Alegeți Tabletă sau Mobil în bara de sus.
- Selectați blocul și deschideți Dimensiune și poziție.
- Modificați Începe din coloana, Lățime în coloane, Începe din rândul sau Înălțime în rânduri, sau faceți clic pe Umpleți toată lățimea. Puteți trage și redimensiona blocul direct pe pagină.
Bara din partea de sus a secțiunii Dimensiune și poziție arată ce așezare editați. Afișează Moștenit cât timp blocul urmează dimensiunea mai mare și un buton Resetați odată ce blocul are setări proprii. Faceți clic pe Resetați pentru ca blocul să urmeze din nou dimensiunea mai mare. Faceți clic pe Folosiți această așezare pe toate ecranele pentru a copia așezarea curentă pe fiecare dimensiune.
Bara de sus numără și blocurile care diferă de așezarea de pe desktop, de exemplu Un bloc este diferit pe mobil. Faceți clic pe număr pentru a trece de la un astfel de bloc la următorul.
Păstrați un bloc la fel pe toate ecranele
Activați Același pe toate ecranele în Dimensiune și poziție pentru a da unui bloc o singură așezare peste tot. Orice setări pe care le avea pentru tabletă sau telefon sunt eliminate, iar modificările ulterioare se aplică tuturor dimensiunilor deodată.
Notă: Mutarea unui bloc într-o altă secțiune îl schimbă pe toate dimensiunile de ecran, de aceea Payly permite asta doar pe Desktop. Pentru a plasa un bloc diferit pe telefoane, adăugați-l în ambele secțiuni și ascundeți pe fiecare dimensiune pe cel pe care nu îl doriți.
Verificați rezultatul
Folosiți Previzualizare pentru a parcurge paginile la lățimea telefonului și a tabletei și vizualizați magazinul publicat pe un telefon real, înainte să îl anunțați. Consultați Previzualizați site-ul înainte de publicare.