Cum să aliniați elemente pe aceeași linie pe Divi

Capacitatea de a alinia vertical cuprins la crearea unui site cu Divi poate fi un plus util la instrumentul dvs. de proiectare. Uneori, o anumită prevedere impune ca cuprins este aliniat vertical în diferite moduri (centrat, jos, sus). Cea mai frecventă nevoie este să vă centrați cuprins vertical.

Oferă o notă delicioasă de spațiere simetrică, care este utilă atunci când utilizați structuri de coloane multiple pentru conținutul dvs. În plus, conținutul centrat pe verticală rămâne centrat la diferite lățimi ale browserului, eliminând dificultatea de a aplica umpluturi sau margini personalizate pentru a obține o reacție similară.

În acest tutorial, vă voi arăta cum să adăugați câteva mici fragmente CSS la orice coloană pentru a alinia vertical conținutul. Voi folosi unele dintre machetele prefabricate din Divi pentru exemple despre cum să faceți acest lucru. Dacă nu știți prea multe despre CSS, nu trebuie să vă faceți griji. Va fi destul de ușor de aplicat propriilor machete în câteva secunde.

Înțelegerea Flex și Divi

Proprietatea css Flex (sau Flexbox) este pur și simplu un mod de a poziționa articole în stive orizontale și / sau verticale (la fel ca un tabel). Cu excepția, spre deosebire de tabelele tradiționale, proprietatea flex vă permite să creați casete care să se adapteze la dimensiunea conținutului pe care îl conține.

Divi folosește proprietatea flex ori de câte ori selectați „Egalizare înălțimi coloane” ca parametru de rând. Acest lucru pur și simplu asigură că dimensiunea coloanelor dvs. se va ajusta la dimensiunea coloanei cu cel mai mult conținut. Și, deoarece „Egalizați înălțimile coloanelor” permite flexibilitatea pentru containerul de rânduri, puteți profita cu ușurință de aceasta adăugând css la coloanele dvs. pentru a ajusta conținutul fiecărei coloane (sau zonă).

De exemplu, dacă adăugați „margin: auto” la o coloană într-un rând, conținutul acelei coloane (indiferent dacă este unul sau mai multe module) va deveni centrat vertical.

În plus, dacă adăugați „align-items: center” la linia dvs., toate coloanele dvs. (și conținutul lor) vor fi centrate vertical.

Desigur, există multe alte utilizări pentru proprietatea Flex în designul web, precum și CSS mai avansate pe care le puteți aplica temei dvs. Dar pentru acest tutorial am vrut să-l păstrez simplu.

Este într-adevăr necesar?

Tehnic, nu. Puteți să vă aliniați conținutul / modulele pe verticală într-o coloană folosind spațierea personalizată (umplere și margine). De exemplu, puteți utiliza opțiunile de spațiere ale Divi pentru a da o coloană egală cu umplutura de sus și de jos pentru a centra modulul (modulele) vertical (e) în coloană. De asemenea, puteți adăuga numai umplutura de sus la o coloană pentru a alinia conținutul de jos. Cu toate acestea, poate fi necesar să ajustați spațiul atunci când vă actualizați pagina cu mai mult conținut. În plus, poate fi dificil să mențineți această aliniere pe diferite lățimi ale browserului.

Deci, dacă sunteți în căutarea unei soluții pentru alinierea verticală a conținutului fără a fi nevoie să vă gândiți la spațierea personalizată, cred că veți găsi acest lucru util.

Să începem!

Încărcați aspectul predefinit pe pagina dvs.

Pentru început, voi folosi aspectul din gama Portofoliu de companii de design interior. Pentru a obține acest aspect pe pagina dvs., creați o pagină nouă. Apoi dați titlului paginii dvs. Faceți clic pe „Use Divi Builder”, apoi pe „Use Visual Builder”. Apoi selectați opțiunea „Alegeți un aspect de bază”. Apoi selectați kitul de aspect Compania de design interior din fereastra pop-up Încărcare din bibliotecă. În cele din urmă, selectați pagina Portofoliu din lista de machete și faceți clic pe „Utilizați acest aspect”.

Odată ce aspectul este încărcat pe pagina dvs., sunteți gata de plecare.

Metoda 1: Cum să aliniați vertical conținutul utilizând Flex și Auto Margin

Deschideți setările de linie pentru a doua linie a paginii (cea direct sub linia cu titlul paginii). În Setări de proiectare, deschideți grupul de opțiuni de dimensionare și observați că „Egalizați înălțimile coloanei” este deja activ. Aceasta înseamnă că linia are acum proprietatea flex („display: flex;”) adăugată.

Acum accesați setările filei Advanced pentru același rând și adăugați următorul fragment CSS sub caseta de intrare a elementului principal din coloana 2.

Acum, conținutul celei de-a doua coloane au fost mutați în centru.

Aliniați conținutul inferior

Dacă doriți să aliniați conținutul în partea de jos, astfel încât toate modulele să stiveze în partea de jos a coloanei dvs., puteți ajusta valoarea marjei după cum urmează:

Alinierea verticală a conținutului pentru toate coloanele din rândul dvs.

În loc să adăugați „margin: auto” la fiecare coloană individual, puteți, de asemenea, să centrați vertical conținutul tuturor coloanelor din rândul dvs. adăugând următorul fragment la elementul principal al setărilor rândului.

Sau dacă doriți ca întregul conținut al coloanelor dvs. să fie aliniat în partea de jos, puteți adăuga acest extras:

Și nu uitați că puteți profita de funcția Extinde stiluri Divi făcând clic dreapta pe elementul principal cu fragmentul CSS și făcând clic pe „Extindeți elementul principal”.

Apoi, extindeți acest element principal css la toate liniile paginii (sau secțiunii) pentru a centra vertical tot conținutul fiecărei coloane a paginii.

Acum totul este centrat pe verticală.

Dar s-ar putea să fi observat că culoarea de fundal a coloanei albe nu mai acoperă întreaga înălțime a rândului. Acest lucru se datorează faptului că am adăugat „margin: auto” la coloană. Pentru a rezolva această problemă, puteți schimba culoarea de fundal a liniei în alb și puteți elimina umplutura de pe linie. În schimb, vă voi arăta o modalitate de a centra conținutul coloanei fără a modifica marja.

Metoda 2: Aliniați conținutul pe verticală utilizând direcția de flexie a coloanei

În prima metodă, am profitat de proprietatea flex adăugată la rând. Acest lucru a făcut din fiecare dintre coloanele noastre o „casetă flexibilă” care ar putea fi aliniată pe verticală prin simpla ajustare a marginii.

Dar există, de asemenea, o modalitate de direcție flexibilă pentru a alinia conținutul coloanei noastre fără a pierde efectul „Egalizați înălțimea coloanei”, care menține coloanele (și fundalurile coloanei) de aceeași dimensiune. Pentru a face acest lucru, vom adăuga doar câteva linii de CSS în coloana noastră, astfel încât toate modulele din coloană să fie stivuite vertical și apoi centrate.

Să revenim la linia noastră din exemplul anterior. Deschideți setările de rând și eliminați orice css personalizat pe care îl aveți acolo făcând clic dreapta pe CSS personalizat și făcând clic pe „Resetați stiluri CSS personalizate”.

Apoi adăugați următorul CSS sub coloana 2, elementul principal:

display: flex; direcție flexibilă: coloană; justify-content: centru;

Sau, dacă aș dori să aliniez conținutul din partea de jos, trebuie doar să înlocuiesc „Justify the content: center” cu „justify the content: flex-end”.

Ce este minunat la această configurare este că, dacă conținutul meu este centrat vertical și lățimea rândului este atinsă, conținutul rămâne centrat.

Creează neclarități (rezumat) cu diferite cantități de text aliniat vertical

Centrarea verticală a conținutului coloanei poate fi, de asemenea, utilă pentru anunțuri. După cum știți, nu toate blurburile vor conține cantitatea exactă de text folosită pentru dscrie funcţie sau serviciu. Centrarea acestor imagini pe verticală poate crea un design frumos pentru aspectul dvs.

Pentru acest exemplu, voi alinia vertical blurbs la aspectul paginii de pornire Digital Payments.

Voi adăuga mai întâi diferite cantități de text corporal la blurbs pentru a oferi o reprezentare mai realistă a aspectului unui site.

Acum trebuie să merg la setările liniei și la „Armonizarea înălțimilor coloanei”.

Acum pot adăuga fragmentele CSS pentru a alinia conținutul meu și pentru a modifica designul.

Sub fila Avansate a setărilor rândurilor dvs., putem centra vertical conținutul coloanelor noastre adăugând următoarele în Elementul principal:

Sau schimbați-o urmând să le aliniați.

Puteți, de asemenea, să vă resetați stilurile CSS personalizate și să adăugați următoarele margini personalizate pentru a alinia partea inferioară a primei coloane și a treia coloană aliniată.

Elementul principal CSN de coloană 1:

Elementul principal CSN de coloană 3:

Cum rămâne cu aspectele unei singure coloane?

Din punct de vedere tehnic, nu aveți nevoie de niciun fragment CSS sau flex pentru a centra vertical conținutul coloanei. Tot ce trebuie să faceți este să vă asigurați că aveți spațiu egal deasupra și sub conținutul (sau modulele) dvs. De cele mai multe ori, utilizatorii au nevoie de conținut vertical care este centrat pe machete cu mai multe coloane, deoarece doresc ca conținutul adiacent să se alinieze perfect.

Asta este tot pentru acest tutorial care vă arată cum să aliniați elemente pe aceeași linie pe Divi.