Primul site web responsiv (RWD)

Înainte de a începe, haideți să clarificăm ce este un site web responsive. Responsive web design (RWD) este o abordare a designului web care face ca paginile web să se potrivească cu dimensiunile ecranului pe o varietate de dispozitive. Indiferent de dispozitivul pe care vizualizați site-ul dvs. web, acesta ar trebui să fie afișat corespunzător. Mai mult, puteți schimba stilul și dimensiunea unui element în fiecare versiune a site-ului web: pentru desktop, tabletă sau mobil. Este imposibil de modificat în site-urile web de tip "mobil". Citiți mai multe despre diferențele dintre site-urile web responsive și cele mobile.

Pentru a crea primul dvs. site web responsive, ar trebui să finalizați mai întâi proiectul de site web pentru desktop. După ce l-ați terminat, citiți articolul de mai jos și începeți să vă creați primul site web responsive.

Construirea unui site web responsive constă în principal în adaptarea proiectului pe care l-ați creat la celelalte dimensiuni ale ecranului prin modificarea conținutului și a dimensiunii elementelor la punctele de întrerupere. De ce la breakpoints? Pentru că tot ceea ce se află în afara breakpoints nu este vizibil pentru un utilizator.

Activați RWD
Selectați un tip de ecran
Ajustați
Dezactivați RWD

Activarea modurilor RWD

În bara de sus, faceți clic pe pictograma de angrenaj, care vă duce la "Settings panel" -> "Site" -> "Responsive design (RWD) " Alături de diferitele moduri RWD, mutăm cursorul în partea dreaptă.

Selectați un tip de ecran

În cazul nostru, va fi o tabletă, așa că facem clic pe pictograma care o reprezintă.

Resetarea setărilor RWD pentru modul selectat.

Pentru a reseta setările tuturor elementelor pe un anumit mod, accesați "Settings Panel" -> " Page " -> " Screens of different sizes (RWD)", faceți clic pe pictograma de restaurare.

Notă! Vizualizarea se va reseta numai pe subpagina respectivă.

Resetarea setărilor de poziție a elementului pe modul RWD selectat.

Pentru a reseta setările de poziționare a elementelor în modul RWD selectat, mergeți la editarea paginii, selectați elementele pentru care doriți să resetați setările, apoi în "Settings Panel" -> " Subpage" -> "Responsive design (RWD)", faceți clic pe pictograma de restaurare.

Legătura separată a obiectelor pentru diferite versiuni RWD

Ați realizat deja o pagină în care aveți legături, dar ați dori ca pagina să fie diferită în ordinea elementelor sau a aspectului în vizualizarea telefonică? Nimic mai simplu, doar selectați un element, mergeți la panoul de setări și apoi la fila "Bound Objects". Dați clic pe butonul "bind for RWD differently" și setați propriile condiții cu privire la modul în care ar trebui să arate aceste bind-uri într-una dintre vizualizările pentru mobil:

Reglați

În mod normal, aspectul elementelor este copiat din versiunea pentru desktop, care are lățime și înălțime diferite. Acum trebuie să ajustați fiecare element în parte pentru a vă asigura că se potrivește cu ecranul mobil (în acest caz).

Ajustarea aspectului elementelor nu ar trebui să dureze mult timp, dar totul depinde de site-ul web și de numărul de modificări pe care doriți să le aplicați.

S-ar putea să se dovedească faptul că conținutul sau meniul, pe care l-ați creat pentru versiunea Desktop, trebuie modificat. Un lucru util de știut ar fi și cum să ascundeți elementele.

Dezactivați RWD

Dacă decideți că nu aveți nevoie de RWD acum, puteți să o dezactivați prin deplasarea cursorului spre stânga.

Nu ai reușit să găsești soluția?

Îți lipsesc funcții în WebWave?

Întreabă pe Facebook

Trimite-ne un Mesaj

Companie.

Materiale.

Prețuri.

Programul WebWave.

Urmărește-ne pe:

Creează Site-uri Web si Magazine Online cu ajutorul platformei WebWave ! Alege unul dintre șabloanele deja optimizate pentru dispozitivele mobile și modifică-l după propriile necesități sau începe cu o pagina curată.

contact@webwave.ro

Scrie-ne pe chat
De luni până vineri, de la 9:00 până la 17:00

Acest site a fost creat în cu ajutorul platformei WebWave