Treci la conținutul principal

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

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Posibilitatea de a alinia vertical conținutul atunci când creați un site cu Divi poate fi un plus practic pentru instrumentul dvs. de design. Uneori, un anumit aspect necesită alinierea verticală a conținutului în moduri diferite (centrat, jos, sus). Cea mai comună nevoie este de a vă centra 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 fragmente mici de CSS la orice coloană pentru a alinia vertical conținutul. Voi folosi câteva dintre aspectele pre-construite 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. Va fi destul de ușor să aplicați propriile 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

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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

Asigurarea conținutului coloanei centrat vertical poate fi, de asemenea, utilă pentru blurbs. După cum știți, nu toate blurbs-urile vor conține cantitatea exactă de text utilizat pentru a descrie caracteristica sau serviciul. Centrarea acestor blurbs 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

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

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.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
4 acțiuni
acțiune2
tweet
Registru2