Cum se ajustează ordinea de stivuire a coloanelor Divi pe dispozitivele mobile

Divi este construit pe o grilă receptivă care stochează (sau comandă) coloanele dvs. într-un anumit mod atunci când mergeți de pe desktop la afișaje mobile. Coloanele sunt stivuite în ordine de la stânga la dreapta. Deci, dacă aveți trei coloane pe desktop, coloana din stânga (prima) va fi stivuită mai întâi pe mobil, urmată de coloanele 2 și 3 dedesubt. Acest lucru are sens și este de obicei necesar pentru majoritatea site-urilor web. Dar, uneori, anumite modele care arată excelent pe desktop creează o ordonare inconsecventă a conținutului pe mobil. În acest caz, va trebui să modificați ordinea coloanelor pentru a crea o experiență de utilizator mai consistentă pe mobil.

Astăzi vă voi arăta două moduri în care puteți schimba ordinea de stivuire a coloanelor Divi pe dispozitive mobile. Primul presupune crearea unei versiuni alternative a conținutului special pentru dispozitivele mobile utilizând funcția „Dezactivare activată” din cadrul Divi. A doua modalitate este de a utiliza CSS personalizat pentru a adăuga clase la coloanele dvs. care desemnează comanda lor pe mobil.

Să începem!

Crearea conținutului

Abonați-vă la canalul nostru Youtube

Pe o pagină nouă, faceți clic pentru a utiliza Divi Builder și lansați Visual Builder.

Din constructorul vizual, alegeți un aspect cu 2 coloane (1/2 - 1/2).

Adăugați un modul de imagine la prima coloană din rândul dvs.

Sub Setări imagine, încărcați și introduceți o imagine. (Folosesc o imagine de 770 x 433 de la unsplash.com)

Apoi, introduceți un modul text în a doua coloană a rândului.

Sub Setări generale pentru text, adăugați textul în caseta de text Conținut.

Salvați

Acum ar trebui să aveți un rând cu 2 coloane, primul rând conținând o imagine și al doilea rând conținând text. Am etichetat coloanele pentru dvs. în următoarea imagine.

Din constructorul vizual, copiați rândul cu aceleași 2 coloane făcând clic pe pictograma rând duplicat.

Pe al doilea rând (rândul duplicat pe care tocmai l-ați creat), trageți modulul imagine peste a doua coloană și trageți modulul text peste prima coloană.

Alternarea pozițiilor imaginii și a textului pe fiecare rând astfel poate fi o modalitate creativă și eficientă de a afișa conținutul pe pagina dvs. web. Dar creează și o problemă atunci când coloanele se stivuiesc pe mobil. Când micșorați lățimea browserului la o lățime mai mică de 980 px (punctul de întrerupere pentru dispozitivele mobile), conținutul fiecărui rând se stochează de la stânga la dreapta. Aceasta înseamnă că prima coloană a rândului dvs. se va stiva deasupra celei de-a doua coloane. Acest lucru poate cauza o problemă dacă doriți să păstrați fluxul de conținut consecvent pe dispozitivele mobile. Odată cu aspectul curent, fluxul de conținut de pe mobil se va stiva în următoarea ordine:

Coloana 1 (Imagine)
Coloana 2 (text)
Coloana 1 (text)
Coloana 2 (Imagine)

Un aspect mai bun pentru mobil va fi modificarea ordinii de stivuire a coloanelor din unul dintre rândurile dvs., astfel încât să obțineți un aspect mai consistent al conținutului.

Două moduri de a schimba ordinea de stivuire a coloanei pe mobil

1: Modificarea ordinii de stivuire a coloanei pe mobil utilizând funcția „Dezactivare activată” a lui Divi

Funcția „Disable On” de la Divi vă permite să creați diferite versiuni ale conținutului dvs. pe telefon, tabletă și desktop. Cu câteva clicuri puteți ascunde sau afișa secțiuni de conținut pe orice dispozitiv.

Pentru acest exemplu, trebuie să păstrăm al doilea rând vizibil pe desktop, dar să îl ascundem pe dispozitivele mobile. Apoi, trebuie să creăm o versiune diferită a celui de-al doilea rând pentru a fi vizibilă numai pe mobil.

Folosind Visual Builder, copiați al doilea rând.

Înainte de a edita noul rând duplicat, deschideți Setări rând în al doilea rând.

Sub Setări generale rând, bifați pentru a dezactiva rândul de pe telefon și tabletă.

Salvați

Acum al doilea rând va fi ascuns pe dispozitivele mobile. Apoi, trebuie să schimbăm aspectul noului nostru al treilea rând în modul în care dorim ca ordinea coloanelor să fie pe mobil.

Trageți conținutul modulului text în a doua coloană și trageți modulul imagine în prima coloană.

Acum intrați în Setările generale de rând pentru al treilea rând și bifați caseta pentru a dezactiva rândul de pe desktop.

Salvați

Acum verificați rezultatele. Veți observa că a treia coloană este dezactivată pe desktop și apoi activată pe dispozitivele mobile. Acest lucru creează un aspect mai consistent pe mobil.

Asta e!

Cu această capacitate de a dezactiva și activa anumite secțiuni de conținut, puteți schimba / reordona cu ușurință orice tip de aspect.

De asemenea, atunci când vizualizează pagina dvs. din Visual Builder, Divi estompează în mod convenabil conținutul ascuns pe pagină, astfel încât să puteți identifica ce conținut este dezactivat.

Utilizarea funcției „Disabled On” pentru a ascunde coloanele și rândurile este un pariu sigur. Cu toate acestea, dacă faceți acest lucru prea mult și / sau aveți mult conținut, editarea paginii poate deveni confuză. Și, atunci când faceți actualizări de conținut, trebuie să actualizați conținutul pentru toate versiunile, nu doar pentru una.

Dacă dezactivarea și activarea conținutului nu este soluția potrivită pentru dvs., există o altă modalitate de a comanda conținutul pe mobil utilizând clasele CSS.

2. Modificarea ordinii de stivuire a coloanei pe mobil utilizând clase CSS

Pentru a face acest lucru, vom folosi câteva CSS personalizate, astfel încât să putem adăuga o clasă la coloanele noastre care le va comanda oricum doriți pe afișajul mobil.

Apoi, din tabloul de bord wordpress, accesați Divi → Personalizator temă → CSS suplimentar și adăugați următorul CSS:

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

.second-on-mobile {
-webkit-order: 2;
order: 2;
}

.third-on-mobile {
-webkit-order: 3;
order: 3;
}

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

Salvați și publicați

Privind CSS-ul pe care tocmai l-ați adăugat, observați că toate CSS-urile sunt conținute cu o interogare media care va utiliza css-ul doar pentru dispozitive mobile (pe dimensiuni de ecran mai mici de 980 px lățime).
Veți observa și prima clasă numită „rând personalizat”. Această clasă va fi adăugată la rândul pe care doriți să schimbați ordinea de stivuire a coloanelor pe mobil.

Următoarele 4 clase („primul pe mobil”, „al doilea pe mobil”, „al treilea pe mobil” și „al patrulea pe mobil”) au o proprietate de comandă și o valoare de număr atribuită. Aceste clase vor fi adăugate la coloanele din rândul „personalizat” pentru a desemna ordinea în care doriți să fie afișate pe mobil.

Acum, că avem CSS-ul la locul nostru, să aplicăm aceste clase pe pagina noastră.

Asigurați-vă că aveți cele două rânduri create urmând instrucțiunile. De asemenea, asigurați-vă că nu aveți niciunul dintre rândurile dezactivate pe mobil sau desktop.

Pentru acest exemplu, vom schimba ordinea coloanelor din al doilea rând pe mobil. Iată o ilustrare a ceea ce vrem să realizăm.

Folosind Visual Builder, deschideți setările de rând pentru al doilea rând.

În Setare rând, sub fila CSS, adăugați următoarele:

Adăugați „custom_row” în caseta de text Clasă CSS. (vă înfășoară rândul într-o cutie flexibilă)

Adăugați „second-on-mobile” în caseta de text Coloana 1 CSS Class (Aceasta modifică ordinea coloanei 1 pentru a se afișa a doua pe dispozitivul mobil. Numele clasei ar trebui să facă acest lucru ușor de reținut.)

Adăugați „first-on-mobile” în caseta de text Coloana 2 CSS Class (Aceasta modifică ordinea coloanei 2 pentru a fi afișată mai întâi pe mobil.)

Notă: Este important să adăugați o clasă de comandă la fiecare coloană.

Acum să verificăm rezultatele. Observați pe mobil cum au fost modificate coloanele celui de-al doilea rând pentru a se afișa la fel ca primul rând. Aceasta creează un flux consistent de imagine → text → imagine → text.

Modificarea ordinii de stivuire a coloanei oricărui aspect utilizând clase CSS

Puteți modifica ordinea oricărui aspect al coloanei utilizând aceeași metodă. Amintiți-vă că CSS personalizat vă permite să adăugați prima, a doua, a treia și a patra valoare de plasare. De exemplu, dacă doriți să schimbați ordinea unui aspect de o pătrime, o jumătate și o pătrime, astfel:

Doar urmați aceiași pași pe care i-ați făcut înainte. În setările de rând, sub fila CSS, adăugați o clasă „custom_row” la rând și adăugați clasa de comandă („first-on-mobile”, „second-on-mobile”, „third-on-mobile”) la fiecare dintre coloanele tale. Nu uitați să vă asigurați că adăugați o clasă la fiecare dintre coloanele dvs., astfel încât toate să aibă o valoare de comandă desemnată.

Asta e!

Metoda preferată

Dacă trebuie să creați machete distincte pentru fiecare dispozitiv și / sau să planificați modificarea conținutului în plus față de ordinea coloanelor de pe mobil, atunci ar trebui să utilizați funcția „Disabled On” a Divi pentru a vă personaliza aspectele.

Dacă trebuie doar să reordonați coloanele pe mobil fără a schimba conținutul și nu doriți să vă deranjați să jonglați cu mai multe versiuni de conținut dezactivate / activate, atunci puteți beneficia de metoda CSS.

Considerații SEO

Au fost multe dezbateri de-a lungul anilor despre modul în care motoarele de căutare gestionează conținutul care este dezactivat sau ascuns pe o pagină. Chiar dacă puteți ascunde conținut pentru anumite dispozitive, conținutul este încă accesibil cu accesarea cu crawlere de către Google. Acest lucru ar putea fi considerat conținut duplicat și ar putea sugera că utilizarea funcției „Dezactivare activată” va afecta negativ clasarea paginii. Cu toate acestea, motoarele de căutare precum Google sunt destul de bune în a identifica dacă conținutul este ascuns din motive de aspect receptiv. Pe scurt, Google știe dacă copiați conținut pentru diferite dispozitive și nu vă va penaliza pentru aceasta. Atâta timp cât nu ascundeți conținut din motive rău intenționate, este sigur de utilizat.

Gânduri finale

A putea schimba ordinea de stivuire a coloanelor este extrem de util și uneori este necesar. Cu toții avem nevoie de posibilitatea de a crea un aspect unic de proiectare pentru afișajul desktop, fără a compromite consistența fluxului de conținut de pe dispozitivele mobile. Utilizând funcția „Disable On” a Divi, puteți crea machete complet diferite pentru fiecare dispozitiv. De asemenea, cu câteva linii de CSS personalizate, puteți adăuga cu ușurință clase la rândurile și coloanele dvs. pentru a le comanda oricum doriți pentru dispozitivele mobile.

Sper că această postare vă va ajuta să câștigați mai mult control asupra ecranelor dvs. mobile.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!