Creați cu ușurință site-ul dvs. web astăzi!

ELEMENTOR este cel mai simplu Blog Builder din lume!

Stop pierdere de timp și mulți bani să plătești un dezvoltator când poți Creați-vă cu ușurință site-ul sau blogul WordPress cu un design profesional doar cateva minute ! Nu sunt necesare cunoștințe tehnice.

Abilitatea de a alinia vertical conținutul atunci când creați un site cu Divi poate fi un plus util la instrumentul dvs. de proiectare. Uneori, un anumit aspect necesită ca conținutul să fie aliniat vertical în moduri diferite (centru, jos, sus). Cea mai frecventă nevoie este să vă centrați conținutul pe 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 „Egalizați înălțimile coloanei” ca parametru rând. Se asigură doar 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” permite flexarea pentru containerul rândului, puteți profita cu ușurință de aceasta adăugând css la coloanele dvs. pentru a regla conținutul fiecărei coloane (sau zone).

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”.

template divi theme wordpress.png

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ă.

armoniza înălțimile coloanelor

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.

marginauto;

marja automată divi.png

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ă:

marginauto 0;

marginea divi line.png

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.

align-items: center;

aliniați elementele divi.png

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

align-items: flex-end;

Ș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”.

extinde elementul principal.png

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.

extinde stiluri pe divi.png

Acum totul este centrat pe verticală.

apariția modificărilor divi.png

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;

Steering flex-column.png

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”.

flex end.png

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.

aspectul cutiilor.png

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.

Aliniere blorbds.png

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

armonize columns.png

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:

align-items: center;

Modificați alinierea conținutului divi.png

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

align-items: flex-end;

aliniere la partea de jos divi.png

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:

marginauto auto 0;

Elementul principal CSN de coloană 3:

margin0 auto auto;

personalizați alinierea abstractelor divi.png

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.

%d bloggerilor le place această pagină: