Modulul Persoană al lui Divi este cea mai bună modalitate de a crea un bloc de profil personal. Acesta este un modul grozav de folosit pe paginile Despre mine sau pe cele care prezintă membri ai echipei în care doriți să creați o biografie a persoanelor individuale. Acest modul a combinat text, imagini și linkuri de social media într-un singur modul coeziv.

Cum se configurează modulul Divi Person

Înainte de a putea adăuga un modul Divi Person la pagina dvs., trebuie mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe dvs site-ul web, veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual. De asemenea, puteți face clic pe buton Utilizați Visual Builder când răsfoiți dvs site-ul web în prim-plan dacă sunteți conectat la tabloul de bord WordPress.

Odată ce ați intrat în Visual Builder, puteți face clic pe butonul plus gri pentru a adăuga un nou modul la pagina dvs. Modulele noi pot fi adăugate numai în rânduri. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs. Avem tutoriale minunate despre utilizarea elementelor LIGNES și secțiuni de Divi.

Localizați modulul persoană în lista de module și faceți clic pe el pentru a-l adăuga pe pagina dvs. Lista de module poate fi căutată, ceea ce înseamnă că puteți introduce și cuvântul „persoană” și apoi faceți clic pe Enter pentru a găsi și adăuga automat modulul Persoană! Odată ce modulul este adăugat, veți fi întâmpinat de lista de opțiuni de modul. Aceste opțiuni sunt separate în trei grupuri principale: Conținut , Concepție et avansat .

Exemplu de caz de utilizare: adăugarea unei secțiuni „Echipa noastră” la o pagină Despre noi

Pagina despre noi este un loc bun pentru a-ți prezenta membrii echipei folosind modulul Persoane. Acest lucru adaugă o notă personală și poate ajuta la construirea încrederii cu noii clienți.

Pentru acest exemplu, vă voi arăta cum să utilizați modulul Persoane pentru a adăuga o secțiune „Echipa noastră” la o pagină despre o afacere mică. Voi folosi un aspect de trei persoane, trei coloane, care menține secțiunea mai compactă și se potrivește cu designul general al paginii.

Folosind Visual Builder, inserați o nouă secțiune standard cu un rând de trei coloane (1/3 1/3 1/3). Apoi adăugați un modul Persoană la prima coloană.

Actualizați setările modulului Persoană după cum urmează:

Opțiuni de conținut

Nume: [Introduceți numele persoanei]
Poziție: [Introduceți poziția persoanei]
Introduceți adresele URL ale profilului rețelelor sociale
Descriere: [Introduceți o scurtă biografie]
Imagine: [Introduceți o imagine de 600 x 600]

Opțiuni de proiectare

Culoare pictogramă: #fcbf00
Culoarea pictogramei de trecere cu mouse-ul: #e0a831
Font antet: Roboto, bold, antet de pârghie
Dimensiunea fontului antetului: 30px
Culoarea textului antetului: #505050
Spațierea literelor din antet: 1px
Înălțimea liniei antetului: 1.5 em
Dimensiunea fontului corpului: 18px
Dimensiunea liniei corpului: 1.4 em
Umplutură personalizată: 15px sus, 15px dreapta, 15px jos, 15px stânga

Opțiuni avansate (CSS personalizate)

Element principal:
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0,2);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0,2);

Salvați setările

Acum duplicați modulul Persoană pe care tocmai l-ați creat de două ori și trageți modulele duplicate în a doua și a treia coloană din rând. Deoarece designul a fost transferat pentru fiecare dintre modulele „Persoană” duplicat, tot ce trebuie să faceți este să actualizați conținutul cu imaginea, titlul, poziția, URL-urile rețelelor sociale și descrierea persoanei.

Asta este!

Opțiuni pentru conținutul persoanei

În fila conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna găsit în această filă.

Prenume

Acesta este numele persoanei pe care o prezentați. Numele este afișat în partea de sus a modulului în text mai mare.

Poziţie

Poziția este afișată sub nume în text mai mic. Acesta este adesea folosit pentru a face referire la poziția profesională a unei persoane în cadrul unei echipe a companiei. De exemplu, Nick Roach, „Designer grafic”.

Adresa URL a profilului Facebook

Introduceți adresa URL pe pagina dvs. de Facebook sau lăsați-l necompletat pentru a dezactiva pictograma Facebook.

Adresa URL a profilului Twitter

Introduceți adresa URL pe pagina dvs. de Twitter sau lăsați-l necompletat pentru a dezactiva pictograma Twitter.

Adresa URL a profilului Google+

Introduceți adresa URL pe pagina dvs. Google+ sau lăsați-l necompletat pentru a dezactiva pictograma Google+.

Adresa URL a profilului LinkedIn

Introduceți adresa URL pe pagina dvs. LinkedIn sau lăsați-l necompletat pentru a dezactiva pictograma LinkedIn.

Descriere

Introduceți aici conținutul textului principal pentru modulul dvs.

URL imagine

Aici puteți încărca o fotografie pentru a o folosi în bio.

Culoarea de fundal

Definiți o culoare de fundal personalizată pentru modulul dvs. sau lăsați necompletat pentru a utiliza culoarea implicită.

Imagine de fundal

Dacă este setată, această imagine va fi folosită ca fundal pentru acest modul. Pentru a elimina o imagine de fundal, trebuie doar să eliminați adresa URL din câmpul de setări. Imaginile de fundal vor apărea deasupra culorilor de fundal, ceea ce înseamnă că culoarea de fundal nu va fi vizibilă atunci când se aplică o imagine de fundal.

Admin Label

Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.

Opțiuni de proiectare a modulului de persoană

În fila Proiectare, veți găsi toate opțiunile de stilare a modulului, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba orice.

Culoarea pictogramei

Această opțiune controlează culoarea pictogramelor rețelelor sociale care apar în profilul fiecărei persoane. În mod implicit, aceste pictograme sunt gri, cumpărați puteți schimba această culoare folosind această setare.

Culoarea pictogramei la trecerea cursorului

De asemenea, puteți schimba culoarea de trecere a pictogramelor rețelelor sociale. Selectați culoarea dorită folosind selectorul de culori în această setare.

Culoarea textului

Aici puteți alege valoarea textului dvs. Dacă lucrați la un fundal întunecat, textul dvs. ar trebui să fie activat. Dacă lucrați cu un fundal deschis, textul dvs. ar trebui să fie întunecat.

Font antet

Puteți modifica fontul textului antetului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Dimensiunea fontului antetului

Aici puteți regla dimensiunea textului antetului. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dimensiunii dorite a textului în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoare text antet

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului antetului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor antet

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul antetului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea rândului antet

Înălțimea rândului afectează spațiul dintre fiecare rând al textului antetului dvs. Dacă doriți să măriți spațiul dintre fiecare rând, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmp de intrare în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Font corp

Puteți schimba fontul corpului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Dimensiunea fontului corpului

Aici puteți regla dimensiunea textului corpului. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau a introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului corporal

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor corporale

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din text, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei corpului

Înălțimea liniei afectează spațiul dintre fiecare linie de text din corpul dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Utilizați marginea

Activarea acestei opțiuni va plasa o margine în jurul modulului. Această margine poate fi personalizată utilizând următorii parametri condiționali.

Culoarea frontierei

Această opțiune afectează culoarea chenarului. Selectați o culoare personalizată din selectorul de culori pentru ao aplica la bordura dvs.

Lățimea frontierei

În mod implicit, marginile au o lățime de 1 pixel. Puteți crește această valoare trăgând glisorul de interval sau introducând o valoare personalizată în câmpul de introducere din dreapta glisorului. Unități de măsură personalizate acceptate, ceea ce înseamnă că puteți schimba unitatea implicită din „px” în altceva precum em, vh, vw etc.

Stilul de frontieră

Bordurile acceptă opt stiluri diferite: solid, punctat, punctat, dublu, șanț, creastă, suprapunere și start. Selectați stilul dorit din meniul derulant pentru a-l aplica la chenar.

Marja personalizata

Marja este spațiul adăugat în exteriorul modulului dvs., între modul și următorul element de deasupra, dedesubt sau la stânga și la dreapta acestuia. Puteți adăuga valori de marjă personalizate la oricare dintre cele patru laturi ale modulului. Pentru a elimina marja personalizată, eliminați valoarea adăugată din câmpul de introducere. În mod implicit, aceste valori sunt măsurate în pixeli, dar puteți introduce unități de măsură personalizate în câmpurile de intrare.

Căptușeală personalizată

Completarea este spațiul adăugat în interiorul modulului dvs., între marginea modulului și elementele sale interne. Puteți adăuga valori de umplere personalizate la oricare dintre cele patru laturi ale modulului. Pentru a elimina marja personalizată, eliminați valoarea adăugată din câmpul de introducere. În mod implicit, aceste valori sunt măsurate în pixeli, dar puteți introduce unități de măsură personalizate în câmpurile de intrare.

Opțiuni avansate în modulul Persoană

În fila avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.

Cod CSS

Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.

CSS

Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina sau site-ul dvs. site-ul web folosind opțiunile temei Divi sau setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.

Animaţie

În mod implicit, imaginile sunt animate pe măsură ce derulați. Aici puteți alege direcția animației sau o puteți dezactiva.

vizibilitate

Această opțiune vă permite să controlați pe ce dispozitive apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați diferite module pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente din pagină.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCĂRCĂ TEMA DIVI [/vcex_button][/vc_column][vc_column] width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]

Alte tutoriale Divi

produse similare

3 Comentarii

Sophie pe 13 octombrie 2020 la 10 ore 09 min

bonjour,
Vă mulțumim pentru aceste articole foarte utile.
La fel ca URL-urile către Facebook, Twitter, Google+ sau LinkedIn, știi dacă este posibil să adaugi o adresă URL la profilul tău Instagram, te rog? Mulțumesc 🙂
răspuns
Orizont pe 10 noiembrie 2019 la 20 h 16 min

Bună!
Când creez un proiect sau postare și folosesc modulul Persoană, de ce dispare câmpul Poziție când văd proiecte sau postări folosind modulul Blog sau Blog filtrabil?

Cum să faceți vizibil câmpul Poziție al modulului persoană într-o vizualizare Blog Grid?

Multumesc!
răspuns
- Blair Jersyer pe 18 noiembrie 2019 la 17 h 35 min
  
  Bună seara și mulțumesc pentru așteptare.
  De obicei, modulele de căutare nu execută coduri scurte. În consecință, modulul Persoană (ca orice alt modul) generează un shortcode care poate fi redat doar prin previzualizarea articolului sau a paginii și nu dintr-un modul care oferă o previzualizare a articolului sau a paginii menționate.
  răspuns

Raspunde la Orizont Annuler la REPONSE

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

Tutorial Divi: Cum să utilizați modulul Divi Builder Person