5 moduri de a fi creativi cu modulul Persoana Divi

Toate noile actualizări ale caracteristicilor Divi care au avut loc în ultimele luni au extins fără îndoială gama de posibilități pe care le aveți atunci când proiectați site-uri web. Pentru acest tutorial, am creat 5 moduri diferite de a deveni creativi cu modulul Divi Person fără a utiliza niciun cod CSS suplimentar. Scopul principal al acestei postări este să vă inspire înainte de a începe următorul dvs. proiect Divi. Modulul persoană este adesea utilizat pentru a partaja mai multe informații despre membrii echipei sau pentru a partaja mărturii. Cu aceste 5 exemple diferite, sunteți gata să dați paginilor dvs. un impuls de design.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Abonați-vă la canalul nostru Youtube

Recreați exemplul nr. 1

Adăugați o secțiune nouă

Să începem să creăm primul exemplu! Deschideți o pagină nouă sau existentă și adăugați o secțiune obișnuită.

Adăugați un rând nou

Structura coloanei

Fără a modifica setările secțiunii, adăugați un rând nou folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și faceți câteva modificări la setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Apoi, deschideți setările de spațiere și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușeală inferioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușire stângă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)
• Căptușeală dreaptă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)

Adăugați modulul de imagine în coloana 1

Incarca imaginea

E timpul să începeți să adăugați module! Adăugați un modul de imagine în prima coloană și încărcați o imagine pătrată la alegere.

Box Shadow

Continuați accesând fila de proiectare și aplicând o umbră de casetă subtilă.

Filtre

De asemenea, puteți juca cu setările filtrelor pentru a adăuga un efect imaginii dvs.

• Saturație: 40%
• Contrast: 130%

Adăugați modulul persoană nr. 1 în coloana 2

Adauga continut

Următorul modul de care vom avea nevoie este un modul de persoană. Continuați și adăugați una la a doua coloană și completați câmpurile de nume și poziție.

Fundal de gradient

Adăugați un fundal de gradient la acest modul.

• Culoare 1: rgba (11,15,229,0,41)
• Culoare 2: rgba (45.237.255,0.87)
• Direcția gradientului: 150 grade

Setări text titlu

Apoi, modificați setările pentru textul titlului în fila Design.

• Titlu Font: Baloo
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 20 px

Setări text corp

Modificați și setările pentru textul corpului.

• Greutatea fontului corpului: ușoară
• Culoarea textului corpului: #ffffff

Spațiere

Și adăugați câteva valori de marjă și umplere personalizate în setările de spațiere.

• Marja stângă: -4vw (Desktop și tabletă), 0vw (telefon)
• Marja dreaptă: 8vw (desktop și tabletă), 0vw (telefon)
• Căptușeală superioară: 25 px
• Căptușeală inferioară: 25 px
• Căptușeală stângă: 20 px

Frontieră

De asemenea, adăugăm o margine stângă subtilă la modul.

• Lățimea marginii stângi: 3 px
• Culoarea chenarului stâng: #ffffff

Box Shadow

Împreună cu o umbră de cutie care vă va ajuta să creați adâncimea paginii.

• Puterea neclarității umbrei cutiei: 80 px

Adăugați modulul persoană 2 în coloana 2

Adauga continut

Adăugați un alt modul de persoană chiar sub cel anterior. Folosim acest modul pentru a afișa profilurile de socializare și descrierea.

Setări pictograme

Accesați fila Design și modificați culoarea pictogramei din setările pictogramei.

• Culoare pictogramă: # 50e8fe

Spațiere

Nu în ultimul rând, deschideți setările de spațiere și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 30 px
• Căptușeală stângă: 30 px (desktop și tabletă), 0 px (telefon)

Recreați exemplul nr. 2

Adăugați o secțiune nouă

Trecem la următorul exemplu! Adăugați o nouă secțiune la pagina dvs.

Adăugați un rând nou

Structura coloanei

Adăugați un rând nou la această secțiune folosind următoarea structură de coloane.

Coloana 2 Culoare fundal

Fără a adăuga încă module, deschideți setările rândurilor și adăugați o culoare de fundal pentru coloana 2.

• Coloana 2 Culoare fundal: # f4f4f4

Dimensionare

Apoi, accesați fila de proiectare și faceți câteva modificări la setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Adăugați și câteva valori de umplere personalizate și în setările de spațiere.

• Căptușeală superioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușeală inferioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușire stângă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)
• Căptușeală dreaptă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)

Adăugați modulul de imagine în coloana 1

Incarca imaginea

E timpul să începeți să adăugați module! Primul modul de care avem nevoie este un modul de imagine din coloana 1. Încărcați o imagine la alegere.

Box Shadow

Apoi, adăugați o umbră de casetă la imagine.

• Puterea neclarității umbrei cutiei: 160 px

Filtre

De asemenea, vă puteți juca cu setările filtrelor.

• Saturație: 40%
• Contrast: 130%

Adăugați modulul persoană nr. 1 în coloana 2

Adauga continut

În a doua coloană, primul modul de care avem nevoie este un Modul persoană. Completați câmpurile de nume și poziție.

Culoare de fundal

Accesați setările de fundal și adăugați o culoare de fundal transparentă.

• Culoare fundal: rgba (255,255,255,0,7)

Setări text

Apoi, modificați orientarea textului în setările textului.

• Orientare text: centru

Setări text titlu

Modificați și setările pentru textul titlului.

• Titlu Font: Abril Fatface
• Culoare text titlu: # 000000
• Dimensiune text titlu: 40 px

Setări text corp

Împreună cu setările pentru textul corpului.

• Greutatea fontului corpului: ușoară
• Culoarea textului corpului: # 000000
• Dimensiunea textului corpului: 15 px

Spațiere

Creăm o suprapunere utilizând o marjă stângă negativă în setările de spațiere.

• Marja stângă: -21,64vw (desktop), -46,1vw (tabletă), 0vw (telefon)
• Căptușeală superioară: 30 px
• Căptușeală inferioară: 30 px

Box Shadow

Și aplicăm și o umbră de cutie subtilă.

• Puterea neclarității umbrei cutiei: 80 px

Adăugați modulul persoană 2 în coloana 2

Adauga continut

Al doilea modul de care avem nevoie în coloana 2 este un alt modul de persoană. Aici, adăugăm linkurile și descrierea rețelelor sociale.

Setări pictograme

Continuați accesând fila Design și schimbând culoarea pictogramei din setările pictogramei.

• Culoare pictogramă: # 000000

Spațiere

Adăugați și câteva valori de marjă și umplere personalizate.

• Marja superioară: 3vw
• Căptușeală superioară: 30 px
• Căptușeală inferioară: 30 px
• Căptușeală stângă: 30 px
• Căptușeală dreaptă: 30 px

Recreați exemplul nr. 3

Adăugați o secțiune nouă

Trecem la al treilea exemplu! Adăugați o nouă secțiune la pagina dvs.

Adăugați un rând nou

Structura coloanei

Apoi, adăugați un rând nou la secțiune folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Adăugați și câteva valori de umplere personalizate.

• Căptușeală superioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușeală inferioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușire stângă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)
• Căptușeală dreaptă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)

Adăugați modulul persoană nr. 1 în coloana 1

Adauga continut

E timpul să începeți să adăugați module! Adăugați primul modul de persoană în coloana 1 și completați câmpurile de nume și poziție.

Culoare de fundal

Apoi, adăugați o culoare de fundal la modul.

• Culoare fundal: #ffffff

Setări text titlu

Modificați și setările pentru textul titlului.

• Titlu Greutate font: Ultra Bold
• Culoare text titlu: # 000000
• Dimensiune text titlu: 40 px
• Spațiere litere titlu: -4px

Setări text corp

Faceți același lucru pentru setările pentru textul corpului.

• Greutatea fontului corpului: ușoară
• Culoarea textului corpului: # 000000
• Dimensiunea textului corpului: 15 px

Spațiere

Continuați accesând setările de spațiere și adăugați câteva valori de marjă și umplere personalizate.

• Marja superioară: 40 px (desktop), 0 px (tabletă și telefon)
• Căptușeală superioară: 30 px
• Căptușeală inferioară: 30 px
• Căptușeală stângă: 30 px
• Căptușeală dreaptă: 30 px

Frontieră

Adăugați „20 px” în colțul din stânga sus și în setările de margine.

Box Shadow

Și dați modulului o umbră colorată a cutiei.

• Puterea neclarității umbrei cutiei: 140 px
• Culoare umbră: rgba (31,15,255,0,66)

Adăugați modulul nr. 2 persoană în coloana 1

Adauga continut

Accesați modulul pentru persoana a doua din coloana 1! Utilizați acest modul pentru a afișa linkurile și descrierea rețelelor sociale.

Culoare de fundal

Apoi, accesați setările de fundal și adăugați o culoare albă de fundal.

• Culoare fundal: #ffffff

Setări pictograme

Schimbați și culoarea pictogramei.

• Culoare pictogramă: # 000000

Spațiere

Continuați adăugând câteva valori de spațiere personalizate în setările de spațiere.

Frontieră

Și adăugați „20 px” în colțul din stânga jos.

Box Shadow

Nu în ultimul rând, adăugați umbra casetei.

• Box Shadow Vertical Position: 50 px
• Puterea neclarității umbrei cutiei: 140 px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: rgba (2.219.219,0.26)

Adăugați modulul de imagine în coloana 2

Incarca imaginea

Următorul modul de care vom avea nevoie este un modul de imagine. Continuați și adăugați una la a doua coloană și încărcați o imagine la alegere.

Frontieră

Dați acestui modul „20 px” de colțuri rotunjite în setările de margine.

Box Shadow

Și adăugați o umbră de casetă subtilă.

Filtre

Din nou, nu ezitați să vă jucați cu setările filtrelor pentru a schimba aspectul imaginii.

Recreați exemplul # 4

Adăugați o secțiune nouă

Trecem la al patrulea exemplu! Adăugați o nouă secțiune la pagina dvs.

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Modificați și setările de spațiere.

• Căptușeală superioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușeală inferioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușire stângă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)
• Căptușeală dreaptă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)

Adăugați modulul persoană la coloana 1

Adauga continut

E timpul să începeți să adăugați module! Adăugați un modul de persoană în coloana 1 și completați toate câmpurile.

Setări pictograme

Apoi, accesați setările pictogramei și schimbați culoarea pictogramei.

• Culoare pictogramă: # 000000

Setări text

Schimbați și orientarea textului în setările textului.

• Orientare text: centru

Setări text titlu

Apoi, deschideți setările pentru textul titlului și efectuați câteva modificări.

• Titlu Greutate font: Ultra Bold
• Culoare text titlu: # 000000
• Dimensiune text titlu: 40 px
• Spațiere litere titlu: -4px

Setări text corp

Modificați și setările pentru textul corpului.

• Greutatea fontului corpului: ușoară
• Culoarea textului corpului: # 000000
• Dimensiunea textului corpului: 15 px
• Înălțimea liniei corpului: 2em

Spațiere

Și creați o formă folosind valorile de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 280 px (desktop), 200 px (tabletă), 50 px (telefon)
• Căptușeală inferioară: 280 px (desktop), 200 px (tabletă), 50 px (telefon)
• Căptușire stângă: 200 px (desktop), 150 px (tabletă), 20 px (telefon)
• Căptușire dreaptă: 200 px (desktop), 150 px (tabletă), 20 px (telefon)

Frontieră

Creați un cerc adăugând „700 px” la fiecare dintre colțurile din setările de margine și adăugați și o margine subtilă.

• Lățimea chenarului: 1 px
• Culoare margine: # 333333

Adăugați modulul de imagine în coloana 2

Incarca imaginea

Continuați adăugând un modul de imagine în a doua coloană și încărcați o imagine pătrată la alegere.

Spațiere

Modificați setările de spațiere ale acestui modul.

• Marja superioară: 7vw (desktop), -15vw (tabletă), -5vw (telefon)
• Marja stângă: -5vw (desktop), 0vw (tabletă și telefon)

Frontieră

Creați o formă de cerc din această imagine adăugând „1000px” la fiecare dintre colțurile modulului.

Box Shadow

Adăugați și o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 160 px
• Puterea răspândirii umbrei cutiei: -10px

Filtre

Și finalizați designul jucându-vă cu setările filtrelor imaginii.

• Saturație: 0%
• Contrast: 130%

Recreați exemplul nr. 5

Adăugați o secțiune nouă

Trecem la următorul și ultimul exemplu! Adăugați o nouă secțiune la pagina dvs.

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Coloana 1 Gradient Background

Deschideți setările de rând și adăugați un fundal de gradient pentru coloana 1.

• Culoare 1: #dddddd
• Culoare 2: #ffffff
• Coloana 1 Direcție gradient: 90 grade
• Coloana 1 Poziție de start: 40%
• Coloana 1 Poziție finală: 40%

Dimensionare

Apoi, accesați setările de dimensionare și efectuați câteva modificări.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Adăugați și câteva valori de umplere personalizate la rând.

• Căptușeală superioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușeală inferioară: 100 px (desktop), 80 px (tabletă și telefon)
• Căptușire stângă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)
• Căptușeală dreaptă: 100 px (desktop), 30 px (tabletă), 25 px (telefon)

Adăugați modulul persoană la coloana 1

Adauga continut

E timpul să începeți să adăugați module! Adăugați un modul de persoană în coloana 1 și completați toate câmpurile.

Setări pictograme

Apoi, schimbați culoarea pictogramei din setările pictogramei.

• Culoare pictogramă: # 000000

Setări text

Schimbați și orientarea textului în setările textului.

• Orientarea textului: dreapta

Setări text titlu

Apoi, faceți câteva modificări la setările textului titlului.

• Titlu Font: Chenla
• Culoare text titlu: # 000000
• Dimensiune text titlu: 50 px
• Spațierea literelor de titlu: -1 px

Setări text corp

Faceți același lucru pentru setările pentru textul corpului.

• Greutatea fontului corpului: ușoară
• Culoarea textului corpului: # 000000
• Dimensiunea textului corpului: 15 px
• Înălțimea liniei corpului: 2em

Spațiere

Continuați adăugând câteva valori de umplere personalizate la setările de spațiere ale modulului.

• Căptușeală superioară: 200 px (desktop), 100 px (tabletă și telefon)
• Căptușeală inferioară: 200 px (desktop), 100 px (tabletă și telefon)
• Căptușire stângă: 500 px (desktop), 250 px (tabletă), 50 px (telefon)
• Căptușire dreaptă: 200 px (desktop), 100 px (tabletă), 50 px (telefon)

Frontieră

În cele din urmă, adăugați o margine la modul.

Adăugați modulul de imagine în coloana 2

Incarca imaginea

Următorul modul de care avem nevoie este un modul de imagine din coloana 2. Continuați și încărcați o imagine pătrată la alegere.

Spațiere

Apoi, faceți câteva modificări la setările de spațiere ale acestui modul.

• Marja superioară: 7vw (desktop), -2vw (tabletă și telefon)
• Marja stângă: -10vw (desktop), 0vw (tabletă și telefon)

Box Shadow

Dă și modulului de imagine o umbră de casetă.

• Puterea neclarității umbrei cutiei: 160 px
• Puterea răspândirii umbrei cutiei: -10px

Filtre

Și pentru a finaliza, jucați-vă cu setările filtrelor.

• Saturație: 50%
• Contrast: 130%

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat 5 moduri diferite de a deveni creativi cu modulul Divi Person. Puteți utiliza aceste exemple pentru orice site web pe care îl creați și puteți crea propriile versiuni alternative modificând setările fiecărui element de design. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!