Cum să reordonați elemente pe diferite puncte de întrerupere din Divi 5

Proiectarea receptivă necesită mai mult decât scalarea machetei, necesită, de asemenea, controlul modului în care conținutul se stive pe dispozitive. Un design care se simte structurat pe desktop poate fi o comandă confuză pe mobil, cu bare laterale sau elemente secundare care împing conținutul cheie din vedere. Divi 5 abordează acest lucru cu noul său sistem FlexBox, care introduce structuri de coloane sensibile pre -reacționate și controale precise de comandă.

În această postare, vom analiza de ce contează reordonarea elementelor, modul în care instrumentele Flexbox ale Divi 5 îl fac simplu și parcurgem pașii pentru a restructura machete la diferite puncte de întrerupere.

De ce ai vrea să reordodezi elemente

Când un aspect trece de la desktop la mobil, comanda de stivuire nu reflectă întotdeauna experiența dvs. prevăzută. Un design echilibrat pe desktop cu trei coloane se poate prăbuși într-o stivă verticală în care coloana din stânga vine întotdeauna mai întâi, împingând un formular de apel la acțiune, de înscriere sau informații de contact, departe de pagină, unde utilizatorii nu o pot vedea niciodată.

Abonați -vă la canalul nostru YouTube

Sistemul FlexBox al Divi 5 rezolvă acest lucru, permițându -vă să reordonați elemente vizual la fiecare punct de întrerupere. Puteți muta un CTA direct sub titlul pe mobil, puteți aduce mărturii deasupra unui tabel de prețuri sau evidențiați informațiile de contact înainte de conținutul lung. În loc să fiți blocat cu logica implicită a stivuirii browserului, decideți ierarhia. Acest lucru asigură că cel mai important conținut apare întotdeauna acolo unde contează cel mai mult.

Cum face ușor reordonarea Divi 5

Divi 5 vă oferă un control direct asupra modului în care elementele se stivuiesc pe punctele de întrerupere. Puteți utiliza structuri de coloane flexibile pre-construite pentru a configura machete care se adaptează în mod natural, apoi reglați-vă bine structurile de coloană și comenzile de coloană la fiecare dimensiune a ecranului.

Flexbox acționează ca un recipient genial care se reglează pe baza spațiului. În loc să stivuiești conținut la întâmplare, controlezi comanda pe fiecare dispozitiv.

Divi 5 se ocupă, de asemenea, de machete cuibărite și complexe. Puteți schimba structurile de rând, dimensiunile coloanelor și ordinea modulului la fiecare punct de întrerupere fără a copia conținut sau codare.

De asemenea, gestionează automat alinierea și poziționarea verticală, făcând conținutul dvs. să pară intenționat, pe deplin receptiv și nu a fost aranjat la întâmplare.

Un ghid pas cu pas pentru reordonarea receptivă în Divi 5

Să aruncăm o privire la modul în care puteți reordona elemente în Divi 5 folosind noul său sistem FlexBox. Pașii de mai jos vă parcurg prin configurarea structurilor de coloană și reglarea comenzii la diferite puncte de întrerupere, astfel încât machetele dvs. să rămână clare și consecvente pe fiecare dispozitiv.

1. Configurați -vă cele șapte puncte de întrerupere personalizate

Divi 5 vă oferă șapte puncte de întrerupere în loc de trei. Puteți modifica fiecare valoare de pixeli, astfel încât site -ul dvs. să arate corect pe orice dispozitiv.

Faceți clic pe meniul Elipsis din bara de activități și găsiți comutatoarele de comutare a punctului de întrerupere. Fiecare are intervale implicite, dar puteți schimba aceste numere pentru a se potrivi mai bine publicului dvs.

Veți vedea telefonul (sub 767px), telefonul larg (sub 860px), tabletă (sub 980px), tabletă lățime (sub 1024px), desktop (peste 981px), ecran larg (peste 1280px) și ultra lățime (peste 1440px).

După ce le porniți, în bara de activități apar mici pictograme. Faceți clic pe orice pictogramă pentru a vedea cum se uită imediat site -ul dvs. dimensiunea ecranului.

În loc să faceți clic pe fiecare pictogramă și să fiți limitat în testarea dvs., puteți apuca marginea pânzei și să o trageți la stânga sau la dreapta. Designul dvs. se micșorează sau se extinde pe măsură ce trageți, arătând cum se schimbă aspectul dvs. la diferite lățimi.

Trageți pânza la 300px și urmăriți că aspectul desktop cu trei coloane se transformă într-o singură stivă mobilă. Trageți -l înapoi la 1200px și vedeți conținutul dvs. răspândit din nou. Nu trebuie să schimbați modurile de previzualizare sau să redimensionați fereastra browserului.

2. Accesați controalele Flex

Faceți clic pe pictograma Setări a oricărui rând pentru a deschide panoul Setări din partea dreaptă. Navigați la fila Design din partea de sus a acestui panou. În meniul de aspect, veți găsi toate controalele FlexBox Divi 5. În mod implicit, Flex este selectat sub stil de aspect.

Dacă nu este aplicat la aspectul existent, îl puteți schimba pentru a flexa cu un clic.

Derulați în jos pentru a localiza câmpul de direcție de dispunere. Aceasta va determina ordinea și modul în care apar coloanele (unul lângă altul sau deasupra și sub celălalt).

Mai jos sunt opțiunile de conținut justificați pentru controlul alinierii și distribuției. Între timp, opțiunile de aliniere elemente apar chiar sub opțiunile de poziționare.

3. Structura de dispunere fină pentru fiecare dimensiune a ecranului

Controalele dvs. FlexBox sunt acum active, dar machete pentru desktop ar putea avea nevoie de ajustări structurale pentru ecrane mai mici. Un aspect în trei coloane ar putea funcționa frumos pe un desktop, dar ar deveni copleșitor și aglomerat pe o tabletă, necesitând în schimb o grilă 2 × 2, cu atât mai mult pe un dispozitiv mobil unde există un spațiu pentru o grilă.

Din fericire, pictogramele dispozitivului din partea dreaptă sus a comenzilor vă permit să vă previzualizați aspectul pe diferite ecrane și să reglați setările FlexBox pentru fiecare punct de întrerupere. Acest lucru vă permite să ajustați designul, astfel încât să arate bine și să funcționeze bine pe fiecare dispozitiv.

Treceți la punctul de întrerupere a tabletei și faceți clic pe butonul Schimbare structură a coloanei. În loc de configurarea curentă, alegeți un aspect simetric 2 × 2. Acest lucru face ca vederea să fie mai puțin copleșitoare, arătând mai puține cărți în fiecare rând. Reglați golurile verticale și orizontale, după cum este necesar pentru un aspect echilibrat. Apoi selectați coloana CTA, setați clasa de coloană pe o lățime completă sub setările de dimensionare și selectați „Grow to Hill”.

Versiunea ta de tabletă arată acum două cărți simultan, păstrând acel aspect uniform. Butonul de apel la acțiune se află frumos în rândul din partea de jos, făcându-l să iasă în evidență, similar cu aspectul desktop. Această actualizare ajută la crearea unei experiențe mai curate și mai primitoare, care evită senzația înfundată a prea multor opțiuni aglomerate împreună.

Pentru mobil, utilizați opțiunea Schimbare a structurii coloanei pentru a trece la o structură cu o singură coloană. În controalele FlexBox, setați direcția de dispunere pe coloana inversă. Reglați decalajul la ceea ce arată cel mai bine pentru conținutul dvs.

4. Reordonarea coloanelor pe punctele de întrerupere

Utilizarea valorilor comenzii este o modalitate excelentă de a decide manual ordinea elementelor copilului dvs. Flex Containers (adesea coloane) pe diferite dimensiuni ale ecranului. Fila de comandă din setările rândului oferă fiecărei coloane un număr care spune browserului, „Afișați această coloană în poziția 1, aceasta în poziția 2” și așa mai departe. Numerele mai mici apar mai întâi, iar numărul mai mare apar ultimul. Simplu ca asta.

Puteți utiliza chiar și numere „0” sau negative precum „-1” pentru a forța conținut specific să apară mai întâi, indiferent de alte valori.

Fiecare punct de întrerupere acceptă propriul său sistem de comandă, oferindu -vă un control complet asupra poziționării elementelor pe dispozitive.

Să aruncăm o privire la un exemplu practic: pe desktop, selectați coloana 1 și setați ordinea sa la 1. Selectați coloana 2 și setați ordinea sa la „2” și faceți același lucru pentru restul coloanei (coloanele). Dispunerea desktopului curge în mod natural de la stânga la dreapta, terminând cu un apel la acțiune.

Personalizarea comenzii pe tablete și telefoane mobile

Acum, treceți la punctul de întrerupere a tabletei folosind comutarea dispozitivului. Și schimbați comenzile de coloană:

Setați coloana 6 (apel la acțiune) la „3”, astfel încât să apară în rândul de mijloc. Lăsați coloanele 1 și 2 așa cum este, coloana 3 ca 4, iar restul după cum doriți. Utilizatorii tabletei văd apelul la acțiune imediat după propunerea de valoare, urmată de detaliile de susținere.

Apoi, treceți la mobil folosind comutarea dispozitivului. Schimbați ordinea coloanei CTA în „3” și lăsați ordinea primelor două coloane așa cum este. Faceți restul comenzii coloanei similare cu aranjamentul tabletei.

Ordinea sursă de bază a conținutului dvs. rămâne aceeași, dar CTA trece de la ultima poziție la a treia, fără a afecta aspectul desktopului. În acest fel, puteți controla modul în care secțiunile apar la diferite puncte de întrerupere fără a duplica sau restructura conținutul dvs.

Controlează cum totul se stivește cu Divi 5

Noul sistem FlexBox al Divi 5 vă oferă un control precis asupra modului în care conținutul stivuiește pe dispozitive. Cu șapte puncte de întrerupere personalizabile și scalare de pânză live, puteți previzualiza și regla machete la orice dimensiune a ecranului în timp real.

În loc să vă bazați pe comanda implicită de stivuire a browserului, decideți exact unde apar bare laterale, CTA și conținut cheie. FlexBox vă permite să mențineți ierarhia și claritatea pe fiecare dispozitiv fără soluții suplimentare sau cod.