Cum să stilizați modulul de comentarii al lui Divi într-un șablon de postare pe blog

Proiectarea unui șablon de postare pe blog este destul de ușoară cu generatorul de teme Divi. Dar există un lucru care tinde să fie trecut cu vederea la proiectarea șabloanelor de blog și acesta este secțiunea de comentarii. Din fericire, Divi are un modul de comentarii personalizabil care poate fi adăugat cu ușurință la un șablon de postare pe blog. În această postare, vă vom arăta cum să creați două modele de secțiuni de comentarii personalizate pe care să le puteți include în orice șablon de blog. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Să aruncăm o privire asupra modului în care arată aspectele design-urilor de comentarii pe diferite dimensiuni de ecran. Primul design este un stil minim în alb și negru, iar al doilea este mai colorat.

Desktop

Comprimat

Telefon

Desktop

Comprimat

Mobil

Descărcați șabloanele modulului de comentarii GRATUIT

Pentru a pune mâna pe șabloanele gratuite ale modulului de comentarii, va trebui mai întâi să le 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.

Descărcați fișierele

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.

DESCARCA

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!

Să recreăm proiectarea modulului de comentarii nr. 1

Creați design de fundal

Primul pas pentru a recrea șablonul de aspect al comentariilor alb-negru este de a proiecta fundalul punctelor. Una pentru vizualizarea desktop și alta pentru ecranele receptive. Dacă doriți să creați singur acest lucru, veți avea nevoie de instrumentul de creare a modelelor Adobe Illustrator. În caz contrar, puteți obține un model similar de pe internet sau îl puteți utiliza pe cel inclus în fișierul .zip descărcabil de mai sus.

1. În Adobe Illustrator, creați o planșă goală de aproximativ 1920px înălțime + 670px lățime.
2. Creați un cerc negru într-un pătrat alb cu margini de aproximativ jumătate din mărimea cercului.
3. Selectați ambele forme și creați un model făcând clic pe obiect> model> make.
4. În creatorul de modele, alegeți „cărămidă cu coloană” și salvați ca model de model.
5. Creați o formă de dimensiunea planșei și aplicați modelul.
6. Pentru dimensiunile de ecran receptive, micșorați forma la jumătate din dimensiunea sa. Apăsați tasta pentru a păstra raportul cercurilor.
7. Copiați și lipiți forma modelată lângă prima și acum aveți același model cu cercuri mai mici.
8. Descărcați ambele separat.

Deschideți Theme Builder și adăugați un șablon nou

Acum este timpul să deschideți generatorul de teme. Adăugați un șablon nou.

Selectați șablonul pentru toate postările

Utilizați noul șablon pentru toate postările.

Adăugați corp personalizat și creați de la zero

Nu în ultimul rând, începeți să construiți corpul personalizat al șablonului.

Adăugați o secțiune nouă

fundal

Acum, putem începe să construim designul pentru aspectul comentariilor. În editorul de șabloane, veți observa o secțiune. Deschideți setările secțiunii și încărcați imaginile de fundal ale modelului. Adăugați și o suprapunere în gradient.

• Fundal: Gradient
• Culoare 1: alb semi-transparent rgba (255,255,255,0,96)
• Culoarea 2: alb #ffffff
• Plasați gradientul deasupra imaginii de fundal: Da
• Imagine:
  • Desktop: Imagine cu model de puncte 1
  • Tabletă și telefon: Imagine 2 a modelului de puncte

Adăugați un rând nou

Structura coloanei

Acum, adăugați un rând nou cu două coloane.

Dimensionare

Apoi, ajustați dimensiunea rândului.

• Lățime personalizată a jgheabului: 2
• Lățime: 80%
• Lățime maximă: 100%

Setări coloana 2

Frontieră

În setările coloanelor, adăugați o margine superioară la a doua coloană.

• Stil: Doar de top
• Lățime: 3 px
• Culoare: Negru #ffffff

Adăugați un modul de text în coloana 1

Conţinut

Adăugați primul modul de text în coloana 1 cu un conținut H3 la alegere.

• Text: paragraf

Text de antet

Apoi, în fila Design, stilizați textul antetului.

• Nivel de titlu: H3
• Font: GFS Didot
• Culoare: Negru # 000000
• Mărimea:
  • Desktop: 5vw
  • Tabletă: 9vw
  • Telefon: 13vw

Spațiere

De asemenea, reglați distanța.

• Căptușeală inferioară
  • Desktop: 3vw
  • Tabletă și telefon: 7vw

Adăugați un modul Testimonial în coloana 1

Conţinut

Acum, adăugați un modul testimonial în coloana 1 cu un conținut la alegere. Încărcați și o imagine.

• Autor: Loyal Reader
• Denumirea postului: Responsabil marketing conținut
• Companie: Tiger Media Company
• Corp: text de paragraf
• Imagine: Fotografie portret

fundal

Asigurați-vă că fundalul este transparent

• Culoare fundal: transparent

Elemente

În fila Elemente, selectați pentru a afișa pictograma citatului.

• Afișează pictograma ofertă: Da

Pictogramă Citat

Apoi, stilizați pictograma citatului după cum urmează.

• Culoare: Negru # 000000
• Fundal: alb #ffffff
• Pictogramă Dimensiune font:
  • Desktop: 2vw
  • Tabletă: 5vw
  • Telefon: 9vw

Imagine

Schimbați apoi setările imaginii.

• Latime si inaltime:
  • Desktop: 110 px
  • Tabletă și telefon: 90 px
• Colțuri rotunjite: 90 px
• Culoare margine: transparentă

Text

Schimbați și alinierea textului.

• Aliniere: centru

Corpul textului

Apoi, stilizați textul corpului.

• Font: Verdana
• Culoarea neagra
• Mărimea:
  • Desktop: 0,7vw
  • Tabletă: 2vw
  • Telefon: 3vw

Textul autorului

Continuați cu stilul textului autorului.

• Font: GFS Didot
• Greutate: îndrăzneț
• Culoare: Negru #ffffff
• Mărimea:
  • Desktop: 1.2vw
  • Tabletă: 2,5vw
  • Telefon: 4vw
• Spațierea literelor: 1 px

Textul poziției

Apoi, textul poziției.

• Font: GFS Didot
• Culoare: Negru #ffffff
• Mărimea:
  • Desktop: 0,9vw
  • Tabletă: 2vw
  • Telefon: 3vw
• Înălțimea liniei: 2em

Textul companiei

De asemenea, textul companiei.

• Font: GFS Didot
• Culoare: Negru #ffffff
• Mărimea:
  • Desktop: 0,7vw
  • Tabletă: 2vw
  • Telefon: 3vw
• Înălțimea liniei: 2em

Dimensionare

Continuați ajustând dimensiunea modulului.

• Lăţime:
  • Desktop: 60%
  • Tabletă: 65%
  • Telefon: 75%
• Alinierea modulului: centru

Spațiere

De asemenea, reglați distanța.

• Căptușeală superioară:
  • Desktop: 1,5vw
  • Tabletă: 5vw
  • Telefon: 6vw

Frontieră

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

• Stiluri de frontieră: numai de sus
• Lățime: 2 px
• Culoare: Negru #ffffff

Adăugați modulul de comentarii la coloana 2

Elemente

Trecând la coloana 2, adăugați un modul de comentarii. Modificați setările elementelor după cum urmează.

• Arată autorul avatar: nu
• Afișați butonul Răspuns: Da
• Afișează numărul de comentarii: Nu

Câmpuri

Treceți la fila de proiectare a modulului și modificați setările câmpurilor.

• Culoarea textului: Negru #oooooo
• Culoare fundal: Gri pal # f7f7f7
• Culoare text focalizare: negru #oooooo
• Culoare fundal focus: Gri pal # f7f7f7
• Font: GFS Didot
• Mărimea textului:
  • Desktop: 0,9vw
  • Tabletă: 1,5vw
  • Telefon: 2,5vw
• Spațierea literelor: 1 px

Textul titlului formularului

Modificați apoi setările textului titlului formularului.

• Font: GFS Didot
• Culoare: Negru #ffffff
• Mărimea:
  • Desktop: 0,9vw
  • Tabletă: 2,5vw
  • Font: 3,5vw

Meta Text

Continuați cu stilul meta textului.

• Font: GFS Didot
• Culoare: Negru #ffffff
• Mărimea:
  • Desktop: 1,3vw
  • Tabletă: 3vw
  • Telefon: 4vw

Text comentariu

De asemenea, textul comentariului.

• Font: Verdana
• Culoare: Negru #ffffff
• Mărimea:
  • Desktop: 0,7vw
  • Tabletă: 1,7vw
  • Telefon: 2.7vw
• Spațierea literelor: 1 px
• Înălțimea liniei: 1,8em

Buton

Continuând, stilizați butoanele.

• Mărimea textului:
  • Desktop: 0,9vw
  • Tabletă: 2,5vw
  • Telefon: 3.5vw
• Culoarea textului: alb # 000000
• Fundal: negru #ffffff
• Spațierea literelor: 1 px
• Font: GFS Didot

Dimensionare

Apoi, ajustați setările de dimensionare ale modulului.

• Lățime: 90%
• Alinierea modulului: centru

Spațiere

În cele din urmă, distanța.

• Căptușeală superioară:
  • Desktop: 4vw
  • Tabletă și telefon: 8vw
• Garnitura stânga și dreapta: 3vw

Să recreăm Designul modulului de comentarii nr. 2

Creați design de fundal

Primul pas pentru a recrea aspectul modulului de comentarii al cercurilor colorate este pregătirea unui design de fundal. Puteți crea un design de cerc simplu în editorul dvs. grafic preferat. Iată pașii pe care trebuie să-i urmați pentru a crea imaginea de fundal:

1. Creați o pânză de 1800 px lățime și aproximativ 1800 px înaltă.
2. Adăugați două cercuri, unul mai mare decât celălalt.
3. Colorează cercurile și adaugă transparență.
4. Așezați cele două cercuri puțin suprapuse în partea stângă sus a pânzei.
5. Grupați cercurile ca un singur obiect și copiați-le.
6. Întoarceți cercurile și plasați-le în diagonală în jos și chiar din primele două.
7. Asigurați-vă că lăsați spațiu în partea de sus și de jos. Când există o mulțime de comentarii, imaginea se va repeta și se va țiglă vertical.

Designul de fundal pe care l-am creat pentru acest șablon de aspect pentru comentarii este, de asemenea, disponibil în folderul cu zip care îl puteți descărca la începutul tutorialului.

Deschideți Theme Builder și adăugați un șablon nou

Acum este timpul să deschideți generatorul de teme. Adăugați un șablon nou.

Selectați șablonul pentru toate postările

Aplicați șablonul la toate postările.

Adăugați corp personalizat și creați de la zero

Și începeți să construiți corpul personalizat al șablonului.

Adăugați o secțiune nouă

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și încărcați imaginea de fundal. Includeți și o suprapunere de culoare degradată.

fundal

• Fundal: Gradient
• Culoare degrade 1: alb transparent rgba (255,255,255,0,55)
• Culoare degrade 2: Rgba alb transparent (255,255,255,0,55)
• Imagine: fundal cercuri

Spațiere

De asemenea, reglați spațiul secțiunii înainte de a adăuga un rând.

• Căptușeală superioară și inferioară: 200 px

Adăugați un rând nou

Structura coloanei

Acum adăugați un rând cu trei coloane.

Dimensionare

Înainte de a adăuga module, ajustați dimensiunea rândului.

• Lățime personalizată a jgheabului: 2
• Lățime: 80%
• Lățime maximă: 100%

Setări coloana 2

fundal

Acum, stilizați a doua coloană adăugând un fundal albastru.

• Culoare fundal: Albastru # 51a2ff

Frontieră

Continuați rotunjind granițele.

• Colțuri rotunjite: 1vw toate cele patru colțuri

Box Shadow

În cele din urmă, adăugați și o umbră de cutie.

• Umbra: a treia opțiune
• Forța de estompare: 80 px
• Culoare: rgba (0,0,0,0.13)

Adăugați modulul persoană la coloana 1

Conţinut

Este timpul să adăugați modulele. Începeți cu un modul persoană din coloana 1 și adăugați conținutul.

• Nume: Jenny McAbee
• Poziție: Colaborator obișnuit
• Corp: Text de paragraf
• Imagine: Fotografie portret

fundal

Adăugați un fundal alb la modul.

• Culoare fundal: alb # 000000

Imagine

În fila de proiectare, stilizați marginea imaginii după cum urmează.

• Colțuri rotunjite: 0,5vw în stânga sus și în dreapta sus
• Stiluri de margine: margine de jos
  • Lățime: 5 px
  • Culoare: Albastru # 51a2ff

Textul titlului

Continuați cu stilul textului antetului.

• Nivel de titlu: H4
• Font: Alegreya Sans SC
• Stil: TT
• Culoare: # 021859
• Mărimea:
  • Desktop: 1vw
  • Tabletă: 3vw
  • Telefon: 5vw
• Spațierea literelor: 1 px
• Înălțimea liniei: 1.6em

Corpul textului

Apoi, de asemenea, textul corpului.

• Font: Lato
• Culoare: Albastru # 1a1f73
• Mărimea:
  • Desktop: 0,7vw
  • Tabletă: 2vw
  • Telefon: 3vw
• Înălțimea liniei: 2em

Textul poziției

Continuați cu textul poziției.

• Font: Lato
• Stil: italic
• Culoare: # 021859
• Mărimea:
  • Desktop: 0,8vw
  • Tabletă: 3vw
  • Telefon: 3.5vw

Dimensionare

Apoi, ajustați dimensiunea.

• Lăţime:
  • Desktop: 100%
  • Tabletă: 50%
  • Telefon: 70%
• Alinierea modulului: centru

Spațiere

De asemenea, distanța.

• Căptușeală superioară și inferioară: 4vw

Frontieră

Apoi, adăugați câteva colțuri rotunjite.

• Colțuri rotunjite: o.5vw pe toate cele patru colțuri
• Stiluri de frontieră: 24 px toate cele patru laturi
  • Culoare: alb #ffffff

Box Shadow

În cele din urmă, adăugați o umbră de cutie.

• Umbra: a treia opțiune
• Forța de estompare: 80 px
• Culoare: rgba (0,0,0,0.13)

Adăugați modulul Social Media Follow în coloana 1

Rețele

Sub modulul persoană, adăugați un modul de urmărire social media cu trei rețele sociale.

• Facebook
• Linkedin
• Stare de nervozitate

Setari de retea

Aplicați o culoare de fundal transparentă fiecărei rețele sociale. Trebuie să faceți acest lucru unul câte unul.

• Fundal: transparent

Aliniere

În setările principale de proiectare, centrați alinierea modulului.

• Alinierea modulului: centru

Pictogramă

În cele din urmă, colorați pictogramele în albastru.

• Culoare: Albastru # 51a2ff
• Mărimea:
  • Desktop: 1vw
  • Tabletă și telefon: 4vw

Adăugați un modul de text în coloana 2

Conţinut

Treceți la coloana 2. Adăugați un modul text cu un conținut h3 la alegere.

• Text: Lasă-ne un comentariu

fundal

Adăugați un fundal alb.

• Culoare fundal: alb #ffffff

Text de antet

Apoi treceți la fila de proiectare și stilizați textul antetului.

• Nivel de titlu: H3
• Font: Alegreya Sans SC
• Greutate: îndrăzneț
• Stilul fontului: TT
• Culoare: Albastru # 021859
• Mărimea:
  • Desktop: 2vw
  • Tabletă și telefon: 5.5vw

Spațiere

În cele din urmă, reglați distanța.

• Căptușeală superioară:
  • Desktop: 3vw
  • Tabletă: 2vw
  • Telefon: 6vw
• Căptușeală inferioară
  • Desktop și tabletă: 3vw
• Căptușeala stângă și dreapta:
  • Desktop și tabletă: 1vw

Adăugați modulul de comentarii la coloana 2

Elemente

Acum adăugați modulul de comentarii în coloana 2. Activați toate elementele.

• Arată autorul avatar: Da
• Afișați butonul Răspuns: Da
• Afișează numărul de comentarii: Da

fundal

Adăugați un fundal alb la modulul de comentarii.

• Culoare fundal: alb #ffffff

Câmpuri

Apoi, începeți să coafați modulul ajustând setările câmpurilor după cum urmează

• Culoare fundal: alb #ffffff
• Culoarea textului: albastru # 1a1f73
• Culoare fundal focalizare: alb #ffffff
• Culoare text focalizare: albastru # 1a1f73
• Font: Alegreya Sans SC
• Stil: TT
• Mărimea:
  • Desktop: 1vw
  • Tabletă: 3vw
  • Telefon: 4vw
• Colțuri rotunjite: 5 px toate colțurile

Imagine

Modificați și setările imaginii.

• Colțuri rotunjite: 5 px
• Stilul frontierei: toate laturile
• Lățime: 3 px
• Culoare: Albastru # 1a1f73

Text de numărare comentarii

Apoi, textul contează comentariile.

• Nivel de titlu: H3
• Font: Alegreya Sans SC
• Stilul fontului: TT
• Culoare: Albastru # 021859
• Mărimea:
  • Desktop: 1,3vw
  • Tabletă: 3vw
  • Telefon: 5vw
• Înălțimea liniei: 2 em

Textul titlului formularului

De asemenea, stilizați textul titlului formularului.

• Nivel de titlu: H3
• Font: Alegreya Sans SC
• Stilul fontului: TT
• Culoare: Albastru # 021859
• Mărimea:
  • Desktop: 1vw
  • Tabletă: 3vw
  • Telefon: 5vw
• Înălțimea liniei: 2 em

Meta Text

Treceți la meta text și stil, după cum urmează.

• Font: Lato
• Culoare: # 021859
• Mărimea:
  • Desktop: 1vw
  • Tabletă: 2,7vw
  • Telefon: 3.5vw

Text comentariu

Apoi textul comentariului.

• Font: Lato
• Culoare: # 021859
• Mărimea:
  • Desktop: 0,9vw
  • Tabletă: 1,8vw
  • Telefon: 2,5vw

Buton

Nu uitați să stilizați și butoanele.

• Mărimea textului:
  • Desktop: 0,9vw
  • Tabletă: 2,5vw
  • Telefon: 3.5vw
• Culoarea textului: alb #ffffff
• Raza de frontieră: 5 px
• Font: Lato

Spațiere

De asemenea, spațiul modulului de comentarii.

• Marja superioară:
  • Desktop: -1vw
  • Tabletă și telefon: -3.3vw
• Căptușeală superioară:
  • Desktop și tabletă: 3vw
  • Telefon: 4vw
• Căptușeală inferioară:
  • Desktop: 3vw
  • Telefon și tabletă: 0vw
• Căptușeala stângă și dreapta:
  • Desktop: 2vw
  • Tabletă: 4vw
  • Telefon: 7vw

Frontieră

În cele din urmă, adăugați câteva colțuri rotunjite la modulul de comentarii.

• Stiluri de margine: de 2 ori pe toate cele patru laturi
• Culoare: Albastru # 1a1f73

Adăugați modulul Optin de e-mail în coloana 3

Conţinut

Treceți la coloana 3 și la un modul optin de e-mail. Dă modulului un titlu.

• Text: primiți actualizări regulate
• Corp: Text de paragraf

Cont de email

Configurați furnizorul de e-mail în fila Cont de e-mail. Alegeți o listă și adăugați cheia API.

• Furnizor de e-mail
  • Listă
  • Cheie API

Câmpuri

Apoi, selectați să utilizați doar un singur câmp de nume.

• Utilizați câmpul cu un singur nume: Da

fundal

Adăugați un fundal alb la modul.

• Culoare fundal: alb

Aspect

Treceți la ta de proiectare și modificați setările de aspect după cum urmează.

• Aspect: corp în stânga, formă în dreapta
• Nume Lățime completă: Da
• Prenume Lățime completă: Da
• Numele de familie Lățime completă: Da
• Lățime completă a e-mailului: Da

Câmpuri

Apoi, stilizați setările câmpurilor.

• Culoarea textului: albastru # 1a1f73
• Culoare fundal: alb #ffff
• Culoare text focalizare: albastru # 1a1f73
• Culoare fundal focalizare: alb #ffff
• Font: Lato
• Mărimea textului:
  • Desktop: 0,7vw
  • Tabletă: 2.2vw
  • Telefon: 3.2vw
• Spațierea literelor: 1 px
• Colțuri rotunjite: 0,2vw pe toate colțurile
• Stiluri de frontieră: toate cele patru laturi
  • Lățime: 2 px
  • Culoare: Albastru # 1a1f73

Textul titlului

Urmat de textul titlului.

• Nivel de titlu: H4
• Font: Alegreya Sans SC
• Greutate: medie
• Stilul fontului: TT
• Culoare: Albastru # 1a1f73
• Mărimea:
  • Desktop: 1vw
  • Tabletă: 4vw
  • Telefon: 5vw
• Spațierea literelor: 1 px

Corpul textului

De asemenea, textul corpului.

• Font: Lato
• Culoare: Albastru # 1a1f73
• Mărimea:
  • Desktop: 0,7vw
  • Tabletă: 2.3vw
  • Telefon: 3vw

Text de mesaj rezultat

Nu uitați textul mesajului rezultat.

• Font: Lato
• Culoare: Albastru # 1a1f73
• Mărimea:
  • Desktop: 0,7vw
  • Tabletă: 2.3vw
  • Telefon: 3vw

Buton

De asemenea, stilizați butonul.

• Mărimea textului:
  • Desktop: 0,7vw
  • Tabletă: 2.3vw
  • Telefon: 3vw
• Culoarea textului: alb #ffffff
• Culoare fundal: Albastru # 51a2ff
• Font: Lato

Spațiere

Reglați spațiul.

• Căptușeală superioară și inferioară: 4vw

Frontieră

Apoi, adăugați câteva colțuri rotunjite.

• Colțuri rotunjite: o.5vw pe toate cele patru colțuri

Box Shadow

În cele din urmă, adăugați o umbră de cutie.

• Umbra: a treia opțiune
• Forța de estompare: 80 px
• Culoare: rgba (0,0,0,0,13)

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului acestui tutorial.

Desktop

Comprimat

Telefon

Desktop

Comprimat

Mobil

Este un modul de comentarii Wrap!

Asta e! Tocmai ați adăugat o secțiune de comentarii personalizate la șablonul dvs. de postare pe blog. Sperăm că aceste modele vor inspira propriile creații ale constructorului de teme Divi. Ați putut descărca fișierele JSON ale ambelor modele la începutul acestui tutorial. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos!