Cum se aliniază vertical conținutul în Divi

Capacitatea de a alinia vertical conținutul atunci când construiți un site cu Divi poate fi un plus convenabil pentru centura dvs. de instrumente de proiectare. Uneori, un anumit aspect necesită alinierea verticală a conținutului în diferite moduri (centrat, jos, sus). Cea mai comună nevoie este să aveți conținutul centrat vertical. Oferă o notă încântătoare de spațiere simetrică, care este foarte utilă atunci când utilizați mai multe coloane pentru conținut. În plus, conținutul centrat pe verticală rămâne centrat pe diferite lățimi ale browserului, ceea ce elimină sarcina grea a aplicării de umpluturi sau margini personalizate pentru a obține o reacție similară.

În acest tutorial, vă voi arăta cum puteți adăuga câteva fragmente mici de CSS la orice coloană pentru a alinia vertical conținutul. Voi folosi câteva dintre aspectele premade ale lui Divi pentru exemple despre cum să faci acest lucru. Dacă nu știți multe despre CSS, nu trebuie să vă faceți griji. Acest lucru va fi suficient de ușor pentru a vă aplica propriile machete în câteva secunde.

Înțelegerea Flex și Divi

Proprietatea css Flex (sau Flexbox) este pur și simplu o modalitate de poziționare a elementelor în stive orizontale și / sau verticale (cam ca o masă). Cu excepția, spre deosebire de tabelele tradiționale, proprietatea flex vă permite să creați casete care să se adapteze sau să „flexeze” la dimensiunea conținutului pe care îl deține.

Divi folosește proprietatea flex ori de câte ori selectați „Egalizați înălțimile coloanei” ca setare de rând. Acest lucru asigură pur și simplu că dimensiunea coloanelor dvs. se va adapta la dimensiunea coloanei cu cel mai mult conținut. Și din moment ce „Egalizați înălțimile coloanei” activează flexul pentru containerul rândului, puteți profita cu ușurință de acest lucru adăugând css la coloanele dvs. pentru a regla conținutul fiecărei coloane (sau casetă).

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

De asemenea, dacă adăugați „align-items: center;” la rândul dvs., toate coloanele dvs. (și conținutul lor) vor fi centrate vertical.

Desigur, există mult mai multe utilizări pentru proprietatea flex în design web împreună cu CSS mai avansate pe care le puteți aplica temei dvs. Dar pentru acest tutorial am vrut să păstrez lucrurile simple.

Este acest lucru cu adevărat necesar?

Tehnic, nu. Puteți să vă aliniați conținutul / modulele pe verticală într-o coloană utilizând spațierea personalizată (umplere și margine). De exemplu, puteți utiliza opțiunile de distanțare ale Divi pentru a oferi unei coloane umplutura de sus și de jos egală pentru a centra modulul (modulele) vertical (e) în coloană. Sau, puteți adăuga numai umplutura de sus la o coloană pentru a face conținutul aliniat 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ă păstraț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 premade pe pagina dvs.

Pentru a da startul lucrurilor, voi folosi aspectul paginii de portofoliu a companiei 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” și apoi pe „Use Visual Builder”. Apoi selectați opțiunea „Alegeți un aspect premade”. Apoi selectați pachetul de aspect al companiei de design interior din fereastra pop-up Încărcare din bibliotecă. În cele din urmă, selectați pagina Portofoliu din lista de aspecte și faceți clic pe „Utilizați acest aspect”.

Odată ce aspectul s-a încărcat pe pagina dvs., sunteți gata să mergeți.

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

Deschideți setările de rând ale celui de-al doilea rând de pe pagină (cel aflat direct sub rândul cu titlul paginii). Sub setările de proiectare, deschideți grupul de opțiuni Dimensionare și observați că „Egalizați înălțimile coloanei” este deja activ. Aceasta înseamnă că rândul are acum proprietatea flex („display: flex;”) adăugată.

Acum, accesați setările de filă Avansate pentru același rând și adăugați următorul fragment CSS sub caseta de intrare Coloana 2 Element principal.

margin: auto;

Acum, conținutul celei de-a doua coloane sa schimbat pentru a deveni centrat vertical.

Alinierea conținutului inferior

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

margin: auto auto 0;

Alinierea conținutului pe verticală 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 Row.

align-items: center;

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

align-items: flex-end;

Și nu uitați că ați putea 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 acel element principal css la toate rândurile din întreaga pagină (sau secțiune) pentru a centra vertical tot conținutul fiecărei coloane din pagină.

Acum totul este centrat vertical.

Dar, este posibil să fi observat că culoarea albă a fundalului coloanei nu se mai întinde pe toată înălțimea rândului. Acest lucru se datorează faptului că am adăugat „margin: auto” la coloană. Pentru a remedia acest lucru, puteți schimba culoarea de fundal a rândului în alb și a scăpa de umplutura rândului. Dar, în schimb, vă voi arăta o modalitate prin care puteți centra conținutul coloanei fără a modifica marja.

Metoda 2: Alinierea verticală a conținutului utilizând direcția flexibilă a coloanei

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

Dar există și o modalitate de utilizare a direcției flexibile 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 câteva linii de CSS la coloana noastră, astfel încât toate modulele din coloană să fie stivuite vertical și apoi centrate.

Să revenim la rândul nostru din exemplul anterior. Deschideți Setările rândului și scoateți orice css personalizat pe care îl aveți acolo făcând clic dreapta pe CSS personalizat și făcând clic pe „Resetare stiluri CSS personalizate”

Apoi adăugați următorul CSS în coloana 2 Element principal:

display: flex;
flex-direction: column;
justify-content: center;

Sau dacă doream să aliniez conținutul, schimbați „justify-content: center” în „justify-content: flex-end”.

Ce este minunat la această configurare este că, dacă am conținutul meu centrat vertical și fac rândul pe toată lățimea, conținutul rămâne centrat.

Realizarea de blurbs cu diferite cantități de text aliniate vertical

A face ca conținutul coloanei să fie centrat vertical poate fi, de asemenea, util pentru blurbs. După cum știți, nu fiecare text va avea cantitatea exactă de text utilizată pentru a descrie caracteristica sau serviciul. Realizarea acestor blurbs centrate vertical poate crea un design frumos pentru aspectul dvs.

Pentru acest exemplu, voi alinia vertical blurbs-urile pe aspectul paginii de start cu plăți digitale.

Voi adăuga mai întâi câteva cantități diferite de text al corpului pentru a oferi o reprezentare mai realistă a aspectului unui site.

Acum, trebuie să merg la setările rândului și „Egalizați înălțimile coloanei”.

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

Sub fila Avansate din Setările de rând, putem centra vertical conținutul coloanelor noastre adăugând următoarele în Elementul principal:

align-items: center;

Sau schimbați-l la următorul pentru a le alinia în jos.

align-items: flex-end;

Sau puteți să vă resetați stilurile CSS personalizate și să adăugați următoarele margini personalizate pentru a alinia prima coloană de jos și a treia coloană de sus.

Coloana 1 Element principal CSS:

margin: auto auto 0;

Coloana 3 Element principal CSS:

margin: 0 auto auto;

Ce zici de aspectele cu o coloană?

Din punct de vedere tehnic, nu aveți nevoie de un fragment CSS sau flex pentru a obține un conținut de coloană centrat vertical. 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, oamenii au nevoie de conținut vertical centrat pe machete cu mai multe coloane, deoarece vor ca conținutul adiacent să se alinieze perfect.

O mulțime de aplicații

Există o mulțime de aplicații utile care aliniază vertical conținutul dvs. în Divi. Acest lucru ar fi util pentru anteturile cu un aspect cu două coloane, cu textul titlului într-o coloană și doriți să vă asigurați că un CTA (buton) din cealaltă coloană este centrat vertical. De asemenea, ar fi util pentru centrarea verticală a logo-urilor într-un aspect cu șase coloane (mai ales dacă logo-urile au dimensiuni ușor diferite).

Gânduri finale

Chiar dacă această metodă se bazează pe câteva fragmente mici de CSS personalizate, cred că aplicația poate fi extrem de utilă pentru cei care caută o soluție rapidă la un proces uneori greoi. Mi-ar plăcea să aud de alte exemple în care acest lucru ar putea fi util.

Simțiți-vă liber să ne împărtășiți ideile și comentariile de mai jos.

Noroc!