Un ghid util pentru proiectarea elementelor circulare în Divi
Publicat: 2019-05-01Din când în când, un design de site web necesită anumite elemente circulare. Este un mod frumos de a ieși din monotonia design-urilor standard de cutii de pe o pagină web. Crearea elementelor circulare poate suna simplu (și de fapt este!), Dar dacă nu sunteți familiarizați cu câteva reguli de bază, puteți întâlni câteva obstacole inutile care pot fi destul de frustrante.
De exemplu, este uneori dificil să obții conținutul să se alinieze și să se potrivească în interiorul unui element în formă de cerc cu spațiere corectă. Sau s-ar putea să vă fie dificil să faceți cercul receptiv pentru dispozitivele mobile. Din acest motiv, unii au recurs la utilizarea unui fundal de imagine circulară pentru conținut. Dar dacă nu doriți să utilizați un fundal de imagine personalizat, următorul dvs. cel mai bun pariu este să utilizați CSS. Vestea bună este că Divi elimină nevoia de a veni cu propriul CSS personalizat pentru realizarea de elemente circulare, ceea ce face procesul mult mai ușor. Deci, dacă vreți vreodată să dați unui element o formă de cerc în Divi, aceasta este postarea pentru dvs.
În acest tutorial, vă voi prezenta elementele de bază despre cum să creați elemente circulare în Divi (inclusiv secțiuni, rânduri și module). Apoi vă voi arăta cât de ușor este să implementați acele tehnici pe un aspect premade.
Verifică!
Trage cu ochiul
Descărcați GRATUIT exemplul de aspect al elementelor circulare
Pentru a pune mâna pe exemplele de elemente circulare proiectate în acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.
Descarcă gratis
Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.
V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!
Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.
Să trecem la tutorial, nu-i așa?
Ce trebuie să începeți
Pentru a începe, creați o nouă pagină în Divi. Apoi acordați-vă paginii un titlu și implementați constructorul Divi pe partea frontală. Selectați opțiunea „construiți de la zero”.
De asemenea, vom adăuga un aspect premade la pagina noastră un pic mai târziu, dar deocamdată putem începe să construim de la zero.
Acum ești gata să pleci!
Cei trei pași de bază pentru crearea unui element circular
Există cu adevărat trei pași simpli pentru a crea un element circular. Pentru a ilustra acești pași, voi aplica acești pași la un modul Call to Action folosind Divi Builder.
Pasul 1: Dimensiune element cu valori egale de înălțime și lățime
Primul pas este de a seta înălțimea și lățimea la aceeași valoare egală. Practic vrem să facem din element un pătrat perfect înainte de a-l face un cerc perfect. În acest exemplu, să acordăm modulului de apel la acțiune o înălțime și o lățime de 10vw.
Pasul 2: adăugați o rază de margine de 50% pentru toate cele patru colțuri
Al doilea pas este de a seta raza de margine a elementului (sau modulului) la 50% pe toate cele patru colțuri. În Divi, puteți modifica raza chenarului unui element sub opțiunea etichetată „Colțuri rotunjite”.
Pasul 3: Aliniați conținutul în interiorul elementului circular
Al treilea pas este alinierea conținutului elementului circular. Putem face acest lucru ajustând umplutura elementului. (De asemenea, acoper un mod de a utiliza flexul pentru a centra vertical conținutul mai târziu în această postare)
În acest exemplu, putem adăuga următoarea umplutură pentru a ne apropia conținutul de centrul elementului circular:
Căptușeală personalizată: 18vw sus, 3vw stânga, 3vw dreapta
Desigur, există încă ajustări care ar putea fi necesare pentru a vă asigura că textul / conținutul se potrivește în interiorul elementului circular de pe mobil, dar aceasta acoperă configurarea de bază.
Este posibil să observați că am folosit unitatea de lungime vw pentru a măsura și a spaționa elementul meu circular. Acest lucru este util pentru crearea unui design receptiv mai consistent. Voi explica.
Utilizarea unităților de lungime relativă pentru a face elementele circulare receptive
Utilizarea unității de lungime VW pentru înălțime și lățime
Dintre toate unitățile de lungime relativă, unitatea de lungime vw este una dintre preferatele mele pentru un design receptiv. Deoarece unitatea de lungime vw este relativă la lățimea ferestrei browserului (nu a elementului părinte), puteți obține un design consistent care se ajustează ușor cu dimensiunea ferestrei browserului.
Să aruncăm o privire asupra modului în care arată modulul nostru de apel circular la acțiune în timp ce micșorăm lățimea browserului.
Utilizarea unității de lungime VW pentru conținutul elementului circular
Utilizarea unității de lungime vw pentru dimensiunea și conținutul elementelor circulare este o combinație bună pentru un design receptiv. Practic, acest lucru permite conținutului (cum ar fi textul sau imaginile) să se adapteze perfect cu dimensiunea elementului cerc pentru un design consistent pe toate browserele. Cu toate acestea, trebuie să aveți grijă la utilizarea unității de lungime vw pentru textul corpului, deoarece textul poate deveni mult prea mic pe mobil. Îmi place să folosesc unitatea de lungime vw pentru titluri și apoi să ajustez dimensiunea textului corpului cu pixeli, după cum este necesar.
De asemenea, dacă intenționați să păstrați designul elementului circular pe afișajul telefonului, va trebui să vă mențineți conținutul la minimum și să ajustați dimensiunea elementului circular pentru spațiu maxim.
Folosind exemplul nostru actual, puteți da textului titlului o valoare de lungime vw și apoi puteți redimensiona modulul de pe mobil, după cum urmează:
Dimensiune text titlu: 4vw
Lățime (telefon): 70vw
Înălțime (telefon: 70vw
După cum puteți vedea, tot conținutul se află acum în interiorul elementului circular de pe ecranul telefonului.
Dar pixelii?
Dacă doriți să utilizați unități de lungime absolută (cum ar fi pixeli) pentru a vă dimensiona cercul, este perfect. Va trebui doar să vă asigurați și să faceți ajustările de dimensiune necesare la fiecare punct de întrerupere pentru afișarea tabletei și a telefonului, pentru a vă asigura că elementul circular se potrivește în fereastra browserului. În unele cazuri, utilizarea pixelilor poate fi mai ușor pentru a obține dimensiunea corectă (sau mai exactă) pe afișajele de pe tabletă și telefon.
De exemplu, să luăm același modul de apel la acțiune și să folosim pixeli (în loc de vw) pentru a dimensiona și a spaționa modulul nostru.
Puteți actualiza înălțimea, lățimea și căptușeala după cum urmează:
Lățime: 500 px
Înălțime: 500 px
Împletire personalizată: 200 px sus, 20 px stânga, 20 px dreapta
Acest design va arăta similar pe desktop, dar problema apare ori de câte ori vizualizați elementul circular pe ecranul telefonului. Deoarece elementul circular este dimensionat folosind pixeli (o unitate de lungime absolută), elementul circular se va extinde în afara containerului și a browserului pe ecranul telefonului.
De aceea este important să reglați lățimea și valorile pixelilor de umplere pe afișajele mobile. De exemplu, poate fi necesar să schimbați lățimea și înălțimea la 300 px în schimb.
De ce unitatea% lungime nu funcționează prea bine pentru dimensionarea elementelor circulare
Dacă doriți o soluție mai receptivă pentru elementele circulare, vă puteți gândi că folosirea procentelor este răspunsul. Cu toate acestea, la dimensionarea elementelor de pe o pagină web, unitatea de lungime procentuală pentru înălțime nu funcționează la fel ca unitatea de lungime procentuală pentru lățime. Acest lucru se datorează faptului că înălțimea implicită a elementelor este lăsată de obicei la valoarea implicită (înălțime: automată). De exemplu, dacă încercați să setați, dați 100% înălțime unui modul Divi, modulul nu se va regla deoarece containerele părinte (coloană, rând, secțiune, etc ...) au toate o valoare nedefinită pentru înălțime. Browser-ul nu încearcă practic să seteze modulul la 100% din nimic (ceea ce nu poate). Nu este cazul lățimii. Lățimea implicită a oricărui element de bloc (sau div) este de 100%. Deci, toate secțiunile, rândurile și modulele au această lățime implicită de 100%, cu excepția cazului în care sunt modificate de setări. Acesta este motivul pentru care unitatea% lungime nu este cea mai bună opțiune de utilizat atunci când încercăm să construim un element circular receptiv. Elementul circular trebuie să aibă aceeași înălțime și lățime pe toate dimensiunile browserului, astfel încât este dificil să se realizeze acest lucru folosind o unitate de lungime procentuală pentru înălțime. Cu toate acestea, există modalități de a face ca înălțimea și lățimea să funcționeze 100% cu mai multe CSS personalizate aplicate elementelor părinte. Dar pentru a crea elemente circulare în Divi, este posibil să găsiți unitatea de lungime vw mai ușor de utilizat.
Alinierea conținutului într-un element circular
Dacă doriți să aliniați conținutul într-un element circular, aveți într-adevăr două opțiuni pe care le-aș considera simple atunci când utilizați Divi. Puteți utiliza padding pentru a alinia conținutul, ceea ce vă oferă mai mult control asupra locului în care doriți să fie afișat conținutul în elementul cercului. Sau puteți utiliza proprietatea flex (cu umplutură) pentru a vă asigura că conținutul este afișat direct în centrul cercului.
Alinierea conținutului elementului circular cu umplutura
Pentru a alinia conținutul în interiorul unui element de cerc folosind padding, aș sugera utilizarea unei unități de lungime relativă (cum ar fi% sau vw), astfel încât padding-ul să crească sau să scadă odată cu dimensiunea containerului sau a lățimii browserului. Nu doriți să utilizați unități de lungime absolută pentru umplerea în interiorul unui element circular care este dimensionat folosind unități relative. Rezultatul ar fi inconsecvent, iar designul s-ar rupe pe mobil. De exemplu, dacă ați avut un element circular care avea o înălțime de 10vw și o lățime de 10vw. Elementul respectiv se va micșora în măsura în care browserul se micșorează în lățime. Dacă ați adăugat o umplutură de 100 px în partea de sus a elementului, 100 px ar rămâne ori de câte ori reglați lățimea browserului și rupeți designul. Cu toate acestea, dacă ați adăuga o căptușeală 3vw, această căptușeală s-ar regla bine cu elementul.
Acesta este motivul pentru care am sugerat utilizarea vw padding în exemplul nostru de modul de chemare la acțiune.
Alinierea conținutului elementului circular cu proprietatea Flex
Dacă nu doriți să vă faceți griji atât de mult pentru a obține umplutura de sus și de jos pentru a vă asigura că conținutul este centrat vertical, puteți utiliza proprietatea flex. Adăugând câteva fragmente de css la părinte (element circular), vă puteți asigura că tot conținutul rămâne centrat vertical. Apoi, puteți utiliza alinierea, umplerea sau marginea pentru a vă asigura că și conținutul rămâne centrat orizontal.
Iată ce vreau să spun.
Folosind exemplul nostru, deschideți setările modulului de apelare la acțiune.
Apoi setați umplutura de sus și de jos la 0 px.
Apoi accesați fila avansată și adăugați următorul fragment de CSS la elementul principal:
display:flex; align-items: center;
Pentru acest modul special, există o anumită umplere suplimentară sub descrierea promoțională care va arunca alinierea puțin. Deci, puteți scăpa de acesta adăugând următorul CSS la Descrierea promoției:
padding-bottom: 0px
Consultați această postare despre cum să aliniați vertical conținutul pentru mai multe informații.
Punerea în practică: adăugarea de elemente circulare la un aspect premade
Acum, că aveți o înțelegere mai bună despre cum să creați elemente circulare în Divi, haideți să vedem cum ar putea funcționa acest lucru cu un design de aspect real. Pentru acest exemplu, voi folosi Divi's Farmer Landing Page din Farmer Layout Pack.
Încărcați aspectul paginii de destinație a fermierului în pagina dvs.
Pentru a începe, mai întâi să adăugăm aspectul paginii de destinație a fermierului la pagină. Pentru a face acest lucru, deschideți meniul de setări și partea de jos a Divi Builder și faceți clic pe butonul de încărcare din bibliotecă. În fereastra pop-up de încărcare din bibliotecă, găsiți pachetul de aspect Farmer și selectați-l. Apoi faceți clic pentru a utiliza pagina de destinație a fermierilor.
Aceasta va încărca aspectul pe pagină.
Realizarea unui antet de secțiune circulară
Pentru primul exemplu, vom converti secțiunea de antet de sus a aspectului într-un element circular. Pentru a face acest lucru, vom folosi cele trei reguli de bază:
1: element de dimensiune cu valori egale de înălțime și lățime
2: Adăugați o rază de margine de 50% pentru toate cele patru colțuri
3: Aliniați conținutul din elementul circular
Deschideți setările secțiunii și actualizați următoarele:
Lățime: 70vw (desktop), 70vw (tabletă), 80vw (telefon)
Lățime maximă: 1080px
Alinierea secțiunii: centru
Înălțime: 70vw (desktop), 70vw (tabletă), 80vw (telefon)
Înălțime maximă: 1080px
Observați că am adăugat valori suplimentare de înălțime și lățime pentru tabletă și telefon, plus că am adăugat și înălțimea maximă și lățimea maximă. Important este să vă asigurați că toate valorile înălțimii și toate valorile lățimii sunt egale.
Acum trebuie să adăugăm raza frontierei de 50% pe toate cele patru colțuri.
Colțuri rotunjite: 50% (toate cele patru colțuri)
Deoarece aceasta este o secțiune, conținutul include un rând din două coloane cu mai multe module. Cu acest conținut atât de mare, trebuie să facem unele ajustări de dimensiune la module pentru a ne asigura că conținutul se încadrează în secțiune.
Mai întâi, deschideți setările modulului de text superior din coloana 1 care conține titlul secțiunii. Apoi actualizați dimensiunea textului titlului după cum urmează:
antet Dimensiune text: 4vw
Apoi micșorați cantitatea de text din modulul text direct sub modulul text care conține antetul.
Acum putem alinia conținutul ajustând spațiul rândului. Deschideți setările rândului și actualizați următoarele:
Marjă personalizată: 10vw top (desktop), 5vw (tabletă), 0vw (telefon)
Împletire personalizată: 3vw stânga, 3vw dreapta
Pentru a face forma cercului mai vizibilă, putem adăuga un divizor al secțiunii superioare și putem muta poziția imaginii de fundal în partea stângă sus.
Acum, să verificăm rezultatul.
Realizarea modulelor de semnalizare circulară
Acum, să luăm o crăpătură la realizarea unor blurbs circulare pe acest aspect. Pentru acest exemplu, să folosim cele patru module de blurb din secțiunea intitulată „Produsele noastre”. După ce îl găsiți, deschideți setările modulului de blurb în partea de sus a coloanei 2.
Apoi actualizați dimensiunea modulului după cum urmează:
Lățimea imaginii: 7vw
Lățime: 50vw (desktop), 80vw (telefon)
Lățime maximă: 400 px
Alinierea modulului: centru
Înălțime: 50vw (desktop), 80vw (telefon)
Înălțime maximă: 400 px
Apoi, adăugați raza chenarului sau colțurile rotunjite:
Colțuri rotunjite: 50%
După aceea, să actualizăm designul și spațiul conținutului după cum urmează:
Plasare imagine / pictogramă: sus
Dimensiune text titlu: 2vw (desktop), 20 px (tabletă)
Orientarea textului: centru
Căptușeală personalizată: 0vw sus, 0vw jos, 4vw stânga, 4vw dreapta
În cele din urmă, să aliniem vertical conținutul folosind proprietatea flex prin adăugarea următorului CSS personalizat la elementul principal:
display: flex; align-items: center;
Extindeți stilul circular tuturor Blurbs din secțiune
Aceasta are grijă de designul circular pentru primul nostru modul. Acum tot ce trebuie să facem este să extindem setările de proiectare a modulului de blurb la celelalte trei blurbs din secțiune. Pentru a face acest lucru, faceți clic dreapta pe modulul blurb pe care tocmai l-am proiectat și selectați „Extind Blurb Styles”. În fereastra pop-up Extinde stiluri, selectați pentru a extinde stilul în întreaga secțiune.
Rezultat final
Acum, să verificăm rezultatul final.
Gânduri finale
Sper că ați învățat câteva sfaturi utile despre cum să creați elemente circulare în Divi. Înțelegând trei pași de bază și cum să utilizați în mod corespunzător unitățile de lungime pentru a vă măsura și spaționa elementul, puteți crea destul de ușor designul circular pe care îl căutați. Și, poate fi foarte distractiv să încorporezi câteva elemente circulare pe un aspect Divi existent sau premodat. Simțiți-vă liber să explorați realizarea de module circulare, rânduri sau chiar secțiuni întregi!
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Noroc!