Combinații de afișare cu 8 elemente în modulul de mărturie Divi

Modulul de mărturie Divi include mai multe elemente opționale pe care le puteți utiliza sau dezactiva. Aceste elemente sunt ușor de utilizat și alegerea lor în diferite combinații poate crea câteva modele interesante. În această postare, ne vom uita la 8 combinații de afișare a elementelor din modulul de mărturii Divi pentru a vă ajuta să decideți care elemente sunt cele mai bune pentru nevoile dvs.

Vom crea două versiuni, una cu fundal alb și una cu fundal negru, ale fiecărei combinații.

Să începem!

Prezentare generală a elementelor modulului de mărturie Divi

Să ne uităm la elementele din modulul de mărturie. Fiecare element are opțiuni de stil pe care le vom vedea mai târziu. De asemenea, fiecare dintre aceste elemente poate fi folosit sau nu. De asemenea, le vom vedea folosite în diverse combinații. Fiecare dintre elemente include setări pentru dimensiunile ecranului și starea hover.

Modul de mărturie Autor

Autorul este numele persoanei care a scris mărturia. Apare sub conținutul corpului și este utilizat în mod implicit. Fontul său este cel mai mare în mod implicit. Dacă nu doriți să afișați numele autorului, pur și simplu ștergeți conținutul fals și lăsați câmpul necompletat.

Denumirea funcției

Titlul postului este titlul postului al autorului. Este util pentru companiile B2B (business to business) în care titlul postului autorului este relevant pentru mărturie. Acest câmp este gol în mod implicit. Pentru a-l folosi, pur și simplu adăugați text în câmp. Apare sub numele autorului și este aliniat la stânga.

Companie

Compania este numele companiei pentru care lucrează autorul. Acest lucru este util și pentru mărturiile B2B. Este necompletat în mod implicit și apare sub numele autorului. Compania este plasată în partea dreaptă a titlului postului dacă este folosită și.

Conţinut

Zona de conținut al corpului este un editor TinyMCE care poate folosi HTML, CSS inline, media etc. Include filele Visual și Text și toate setările standard TinyMCE. Apare în cea mai mare zonă din mijlocul modulului. Este extrem de versatil.

Exemplul de mai jos arată conținutul cu un titlu 2, conținutul corpului și o imagine. Puteți include orice poate intra într-un editor TinyMCE, cum ar fi videoclipuri, coduri scurte, HTML etc.

Imagine

Imaginea afișează o fotografie (sau logo) a autorului. Este plasat în stânga conținutului. Este circular în mod implicit, dar puteți stila chenarul.

Pictograma Citat

Pictograma citatului afișează un ghilimele într-un cerc. Acest lucru este activat în mod implicit, dar îl puteți dezactiva dacă doriți. Puteți ajusta dimensiunea și schimba culoarea pictogramei și fundalul în mod independent.

Modelați modulul de mărturie Divi

Acum, să ne uităm la câteva dintre opțiunile de styling. Vom stila modulul de mărturie Divi folosind stilul din pachetul gratuit de amenajare pentru închiriere de scutere, disponibil în Divi. Vom crea o versiune albă și una neagră. Ambele vor folosi același conținut și vom face modificări la ambele pentru combinațiile de afișare a elementelor.

Conținutul modulului meu de mărturie

Iată o privire asupra conținutului modulului meu exemplu. Folosesc nume generice și text fals. Adaug un titlu și îl stilez cu CSS inline și adaug trei imagini în miniatură. Imaginea autorului este 1117×629. Voi folosi același conținut pentru toate combinațiile de afișare.

Pentru referință, iată HTML-ul inline cu CSS pe care îl folosesc pentru titlu. Acesta adaugă umplutură la titlu. Când stilăm modulul negru, vom adăuga culoare.

• Cod:

  <h3 style="padding: 25px 0px 25px 0px;"><strong>Your content goes here.</strong></h3>

Modulul Divi Testimonial Opțiune de stil alb

Mai întâi, deschideți setările modulului de mărturie și derulați în jos la Fundal. Schimbați culoarea la #f5f5f5.

• Fundal: #f5f5f5

Pictograma Citat

Apoi, accesați fila de design și schimbați culoarea pictogramei citate în #e02b20. Vom lăsa culoarea de fundal la setarea implicită.

• Culoare pictogramă citat: #e02b20

Activați Utilizați dimensiunea pictogramei citate personalizate și setați dimensiunea fontului pictogramei la 36 px.

• Utilizați dimensiunea pictogramei cu citat personalizat: da
• Dimensiunea fontului pictogramei: 36px

Imagine

Apoi, derulați în jos la Imagine. Schimbați lățimea chenarului la 3px, culoarea la #e02b20 și schimbați stilul la punctat.

• Lățimea chenarului imaginii: 3px
• Culoare chenar: #e02b20
• Stil chenar: punctat

Corpul textului

Apoi, derulați în jos la Textul corpului. Schimbați culoarea la negru și înălțimea liniei la 1,8 em.

• Culoare: #000000
• Înălțimea liniei: 1,8 em

Textul autorului

Derulați în jos la Textul autorului. Schimbați Greutatea la Semi aldine, Culoarea în negru și Dimensiunea la 24 px.

• Greutatea fontului: semi-aldine
• Culoare: #000000
• Dimensiune: 24px

Text de poziție

Pentru Textul de poziție, setați culoarea la negru.

• Culoare: #000000

Textul companiei

Pentru Textul companiei, setați culoarea la negru. Închideți setările modulului de mărturie.

• Culoarea textului companiei: #000000

Divi Testimonial Module Black Styling Option

Apoi, duplicați modulul de mărturie și deschideți setările acestuia.

Derulați la editorul Body Content și adăugați CSS-ul inline pentru a schimba culoarea titlului în alb.

• HTML cu CSS:

  <h3 style="color: white; padding: 25px 0px 25px 0px;"><strong>Your content goes here.</strong></h3>

Apoi, derulați la Fundal și schimbați culoarea în negru.

• Fundal: #000000

Corpul textului

Apoi, faceți clic pe fila design și derulați în jos la Textul corpului. Setați culoarea la alb.

• Culoare: #ffffff

Textul autorului

Derulați în jos la Textul autorului și setați-i culoarea la alb.

• Culoare: #ffffff

Text de poziție

Derulați la Text de poziție și setați culoarea la alb.

• Culoare: #ffffff

Textul companiei

În cele din urmă, derulați la Textul companiei și schimbați culoarea fontului în alb.

• Culoare: #ffffff

Afișați combinații în modulul de mărturie Divi

Avem acum două module de mărturie pe care le putem folosi pentru a afișa diverse combinații de elemente.

Combinația de afișare a modulului de mărturie Divi 1

Prima noastră combinație folosește numele autorului și pictograma citatului. Acestea sunt setările implicite ale modulului de mărturie.

Iată versiunea cu fundal negru. Pur și simplu am lăsat goale câmpurile Titlul postului și Numele companiei.

Combinația de afișare a modulului de mărturie Divi 2

Pentru a doua noastră combinație, am eliminat pictograma Numele autorului și Citatul, astfel încât să nu afișeze niciunul dintre elemente. Acest lucru este ideal numai dacă informațiile sunt furnizate în conținutul corpului.

Iată versiunea cu fundal alb.

Combinația de afișare a modulului de mărturie Divi 3

Pentru a treia combinație, am eliminat pictograma Citat și am adăugat Numele companiei.

Iată versiunea cu fundal negru.

Combinația de afișare a modulului de mărturie Divi 4

Pentru a patra combinație, am eliminat pictograma Numele autorului și Citatul și am adăugat titlul postului și Numele companiei.

Iată versiunea cu fundal alb.

Combinația de afișare a modulului de mărturie Divi 5

Desigur, nu ne limităm la textul pe care îl adăugăm în oricare dintre câmpuri. Acest exemplu folosește numele companiei ca nume al autorului. Am inclus și pictograma Citat.

Iată versiunea cu fundal negru.

Combinația de afișare a modulului de mărturie Divi 6

De asemenea, putem adăuga mai multe informații la fiecare linie. Pentru aceasta, am adăugat o bară după Numele autorului și am inclus numele companiei în același câmp. Am inclus, de asemenea, titlul postului și pictograma Citat.

Iată versiunea cu fundal alb.

Combinația de afișare a modulului de mărturie Divi 7

A șaptea noastră combinație arată pictograma Citat, Numele autorului și Titlul postului.

Iată versiunea cu fundal negru.

Combinația de afișare a modulului de mărturie Divi 8

A opta noastră combinație are toate elementele activate.

Iată versiunea cu fundal alb a acestei combinații.

Gânduri de sfârșit

Acesta este aspectul nostru asupra combinațiilor de afișare cu 8 elemente din modulul de mărturie Divi. Selectarea elementelor este simplă, așa că este ușor să încercați diferite combinații pentru a vedea ce funcționează cel mai bine pentru orice situație dată. Vă recomand să utilizați oricare dintre aceste combinații sau să experimentați cu ale dvs. pentru a vedea ce funcționează cel mai bine pentru dvs. Indiferent de combinația pe care o alegeți, asigurați-vă că includeți suficiente informații pentru a adăuga credibilitate mărturiei.

Vrem sa auzim de la tine. Folosiți vreuna dintre aceste combinații sau alte combinații în modulul de mărturii Divi? Spune-ne despre experiența ta în comentarii.