5 moduri de a stila avatarul în modulul de comentarii al Divi

Secțiunea de comentarii a postărilor de blog – sau a paginilor – din WordPress vă permite să aveți discuții semnificative cu utilizatorii și cititorii site-ului dvs. A fost o perioadă în care secțiunea de comentarii a site-urilor noastre preferate era un loc de conectare unul cu celălalt. Odată cu dispariția lentă a unor platforme de social media, mulți se întorc la crearea de bloguri. Având în vedere acest lucru, putem folosi această oportunitate pentru a înfrumuseța secțiunea noastră de comentarii.

În tutorialul de astăzi, ne concentrăm pe stilarea avatarului de comentarii în Divi. Cu toate acestea, haideți să aruncăm o privire la unele dintre celelalte elemente ale Modulului de comentarii al Divi pe care le putem stila.

Elemente ale modulului de comentarii Divi

Modulul de comentarii al lui Divi are destul de multe elemente. Se poate folosi modulul atât pentru a prezenta comentarii, cât și pentru a trimite comentarii. Modulul arată, de asemenea, câte comentarii au fost trimise, împreună cu numele și fotografia celui care a trimis comentariul. Iată o privire asupra diferitelor elemente ale modulului:

În ordine, iată ce îi corespunde fiecarei secțiuni numerotate:

1. Numele autorului comentariului
2. Comentariul în sine
3. Avatarul autorului comentariului
4. Metadatele comentariului (data, ora postării etc.)
5. Butonul de răspuns
6. Trimiteți un formular de comentarii

În fila Design a modulului Comentarii , puteți vedea că avem multe opțiuni pe care le putem folosi interschimbabil pentru a stila diferitele aspecte ale modulului.

Stilizarea avatarului de comentarii în Divi

În setările Modulului de comentarii, ne vom petrece cea mai mare parte a timpului în fila Design și avansat. Vom folosi funcțiile încorporate pentru a stabili cadrul pentru stilarea avatarului de comentarii în Divi. După aceea, vom folosi câteva fragmente de CSS pentru a ne aduce viziunea la viață. Pentru acest tutorial, vom folosi gratuități care sunt disponibile în secțiunea Resurse Divi a blogului nostru. Când vine vorba de stilarea oricărui aspect al site-ului dvs., este imperativ să vă inspirați din designul pe care l-ați creat. Acest lucru vă ajută să existe coeziune în munca dvs. și vă determină să construiți o cunoaștere mai puternică a mărcii cu publicul dvs.

Puteți vedea cum intenționăm să facem acest lucru prin exemplele de mai jos:

Primul exemplu: Fabrica de piatră Divi

Al doilea exemplu: Consultant Divi

Al treilea exemplu: îngrijirea la domiciliu

Al patrulea exemplu: ONG Divi

Al cincilea exemplu: Divi Data Science

Pentru fiecare dintre aceste exemple, ne inspirăm din elementele și modelele care se află deja în șablonul de aspect. Făcând acest lucru, ne asigurăm că, pe măsură ce stilizăm avatarul de comentarii în Divi, vorbim în continuare despre designul general al aspectului ales.

Să trecem la primul exemplu!

Stilizarea avatarului comentariului în Divi ft. Divi Stone Factory

În primul rând, va trebui să urmați instrucțiunile din această postare de blog pentru a descărca și instala șablonul de postare pe blog pentru Pachetul de layout Divi Stone Factory.

Identificarea inspirației înainte de stilarea avatarului de comentariu în Divi

O cheie majoră în acest tutorial este să vă familiarizați cu inspirația dintr-un design și aplicarea acesteia stilului pe parcursul unui aspect. În cazul nostru, ne vom inspira din modul în care este stilată imaginea prezentată. Să aducem aceeași idee în avatarul nostru de comentarii.

Deschideți Setările modulului de comentarii

Odată instalat aspectul, derulați în jos la modulul Comentarii și deschideți setările .

Adăugați chenar la imaginea de avatar

Navigați la fila Design. Faceți clic pe fila Imagine . Derulați în jos la Stiluri de margine imagine și alegeți prima pictogramă pentru Toate marginile. Apoi, adăugați o lățime a marginii imaginii de 10 px și o culoare a marginii imaginii de #FFFFFF . De asemenea, dorim să menținem stilul chenar imagine la Solid.

Setări imagine:

• Stiluri de margini imagini: Toate marginile
• Lățimea chenarului imaginii: 10px
• Culoarea marginii imaginii: #FFFFFF
• Stil chenar imagine: solid

Adăugați umbră pentru caseta de imagine

Adăugați o umbră pentru caseta de imagine la avatarul dvs. Ajustați Poziția orizontală și verticală la -10px . Apoi, faceți culoarea umbrei #000000.

Setări pentru caseta de imagine:

• Caseta de imagine Shadow: Shadow #4
• Poziție orizontală a umbrei casetei: -10px
• Poziție verticală a umbrei casetei: -10px
• Culoare umbră: #000000

Adăugați CSS personalizat

Aruncând o privire la avatarul nostru așa cum este acum, acesta se suprapune ușor cu corpul comentariului. De asemenea, ne lipsește o chenar mai subțire în jurul imaginii. Vom adăuga acest lucru cu CSS în fila Avansat a modalului de setări Comentarii.

Navigați la fila Avansat din setările Modulului de comentarii. Adăugați următoarele fragmente de CSS la Meta-ul comentariului, Conținutul comentariului și Avatarul comentariului

CSS personalizat

Meta comentariu:

margin-left: 15px;

Continutul comentariului:

margin-left: 15px;

Avatar de comentariu:

border: 1px solid #000000;

O marjă din stânga este adăugată conținutului comentariului și meta, astfel încât chenarul adăugat la avatar să nu acopere textul comentariului și meta informațiile. Adăugăm un alt chenar la avatarul de comentarii pentru a reproduce designul care a fost găsit cu imaginea prezentată.

Cu toate acestea spuse, să trecem la exemplul numărul doi cu Pachetul Divi Consultant Layout!

Exemplul doi: stilizarea avatarului de comentariu în Divi cu șablonul de postare pe blog pentru consultant Divi

Pentru al doilea exemplu, ne vom inspira pentru avatarul de comentarii dintr-un element de design care este utilizat în acest pachet de layout.

Schimbarea formei avatarului cu margini CSS

În primul rând, vom derula în jos la Modulul de comentarii și vom intra în meniul de setări . În al doilea rând, vom naviga la fila Design . În fila Design, să facem clic pe fila Imagine pentru a începe să facem modificări ale chenarului. În primul rând, să facem colțuri rotunjite pe avatarul nostru cu o valoare de 55px. Acest lucru va face din avatarul nostru un cerc. În continuare, vom adăuga un chenar solid de 2 px în negru.

Setări imagine:

• Imagine Colțuri rotunjite: 55px, toate colțurile, legate
• Stiluri de margini imagini: Toate marginile
• Lățimea chenarului imaginii: 2px
• Culoarea marginii imaginii: #000000

Adăugarea unui accent avatarului nostru

Acum, vom adăuga un accent albastru drăguț avatarului nostru. Vom folosi setarea Box Shadow pentru a crea un cerc care va apărea în spatele fiecărui avatar. Observați cum acest lucru reamintește inspirația pe care am luat-o din imaginea folosită în antet. Pentru a face acest lucru, vom continua să derulăm prin fila Imagine până ajungem la Umbra Caseta de imagine. Aici, vom selecta prima opțiune, care este o strălucire moale. Cu toate acestea, vom ajusta setările pentru a transforma acest lucru într-un cerc!

Setări Box Shadow:

• Imagine Box Shadow: Shadow #1
• Poziție orizontală a umbrei casetei: -30px
• Poziție verticală a umbrei casetei: -30px
• Intensitatea estomparii umbrei casetei: 0px
• Intensitatea răspândirii umbrei casetei: -28px
• Culoare umbră: #3093fb

Din fericire, în acest exemplu, nu a fost nevoie să folosiți niciun CSS personalizat! Avatarul nostru a fost stilat complet folosind setările găsite nativ în Divi Builder.

Îngrijire la domiciliu Divi: al treilea exemplu de stilare a avatarului în modulul de comentarii Divi

În al treilea exemplu, vom folosi aspectul postării blogului Divi Home Care. Privind secțiunea de îndemn la acțiune din acest aspect, să imităm casetele portocalii și galbene pentru avatarul nostru de comentarii.

Modelarea avatarului nostru de comentarii cu colțuri rotunjite

Utilizarea colțurilor rotunjite va da avatarului nostru o formă interesantă. Cu toate acestea, vom aplica doar colțuri rotunjite în colțurile din stânga sus și din dreapta sus. Ambele vor primi o rază de 25px. Colțurile din dreapta jos și din stânga jos vor rămâne neatinse, cu o rază de 0px. Asigurați-vă că ați debifat pictograma linkului din caseta cu rază de margine. Acest lucru ne va permite să avem setări diferite pentru fiecare colț al imaginii noastre.

Setări pentru chenarul imaginii:

• Colțuri rotunjite ale imaginii: 25 px 25px 0px 0px (în sensul acelor de ceasornic, deconectat)
• Stiluri de margini imagini: Toate marginile

Adăugarea unui chenar

Acum, vom adăuga o chenar. Acest lucru va apela la modulul Email Optin din antetul acestui șablon de postare pe blog.

Să observăm ceva. După ce am adăugat setările noastre de chenar, chenarul se suprapune acum peste corpul comentariului, precum și cu autorul comentariului și meta informațiile. Vom remedia acest lucru utilizând câteva linii de CSS în fila Avansat a modulului.

CSS personalizat

Meta comentariu:

margin-left: 15px;

Continutul comentariului:

margin-left: 15px;

Aceste două linii simple de cod ajută la adăugarea unui spațiu de respirație în jurul imaginii noastre avatarului... permitându-ne totodată să citim comentariile clar!

Stilizarea avatarului comentariului în Divi ft. Divi NGO

Pentru al patrulea exemplu, vom folosi șablonul de postare pe blog Divi ONG. Observați stilul fotografiei de profil a avatarului. Acesta este ceea ce vom emula pentru avatar în modulul nostru de comentarii.

Adăugarea colțurilor rotunjite la avatarul nostru

Similar cu unele dintre exemplele noastre anterioare, vom folosi funcțiile Divi’s Rounded Corner pentru a ne stila avatarul. În cazul nostru, vom face toate colțurile acestui avatar 20px.

Setări imagine:

• Colțuri rotunjite ale imaginii: 20 px (toate colțurile, legate)

Adăugarea unei umbre cutie

A doua parte a acestui stil este de a adăuga o umbră solidă, opac, în spatele avatarului nostru. Vom folosi aceeași culoare ca și fotografia autorului, pentru a ne menține brandingul perfect în acest șablon. Vom folosi a patra opțiune de umbră casetă și vom folosi setările implicite Divi pentru această umbră.

Setări Box Shadow:

• Caseta de imagine Shadow: Shadow #4
• Poziție orizontală a umbrei casetei: 10px
• Poziție verticală a umbrei casetei: 10px
• Intensitatea estomparii umbrei casetei: 0px
• Intensitatea răspândirii umbrei casetei: 0px
• Culoare umbră: #347362

Datorită poziționării umbrei, nici în acest exemplu nu vom avea nevoie de niciun CSS personalizat.

Exemplu final: Aspectul blogului Divi Data Science

Cel de-al cincilea și ultimul nostru exemplu de stilare a avatarului de comentarii în Divi va folosi pachetul de aranjare a blogului Divi Data Science. Ca și în exemplele anterioare, ne vom inspira din stilul imaginii prezentate în acest pachet de aspect.

Prin urmare, știm că vom adăuga un chenar alb gros și o umbră de casetă la avatarul nostru de comentarii.

Adăugarea unui chenar la avatarul nostru de comentarii

Acest avatar va rămâne un pătrat, cu toate acestea, îi vom adăuga o chenar. Să mergem mai departe și să derulăm în jos la fila Imagine și să adăugăm un chenar alb imaginii noastre.

Setări pentru chenarul imaginii:

• Stiluri chenar imagini: Toate chenarele
• Lățimea chenarului imaginii: 10px
• Culoarea marginii imaginii: #000000
• Stil chenar imagine: solid

Adăugarea de umbră la avatarul nostru

De asemenea, în acest tutorial, vom folosi setarea implicită Divi Box Shadow pentru a adăuga o umbră avatarului nostru de comentarii. Vom folosi opțiunea Box Shadow 3.

Setări Box Shadow:

• Imagine Box Shadow: Shadow #3
• Poziție orizontală umbră casetă: 0px
• Poziție verticală a umbrei casetei: 12px
• Intensitatea estomparii umbrei casetei: 18px
• Forța de răspândire a umbrei casetei: -6px
• Culoare umbră: rgba(0,0,0,0.3)

Pentru a preveni ca avatarul nostru nou stilat să ne acopere informațiile despre comentarii, vom adăuga câteva rânduri de CSS pentru a ne curăța designul.

CSS personalizat:

Corpul comentariului:

margin-top: 50px;

Meta comentariu:

margin-left: 15px;

Continutul comentariului:

margin-left: 15px;

Aducând totul împreună

Avatarul de comentarii este o mică parte dintr-un modul care poate fi personalizat profund cu CSS și instrumentele native Divi. Nu uitați să vă uitați la designul dvs. pentru a vă inspira. Prin această inspirație, pot fi create modele nesfârșite care vorbesc pentru brandul tău!