Cum să proiectați o casetă de autor dinamică pentru șablonul dvs. de postare pe blog cu Divi

Menționarea autorului postării în postările de pe blog este esențială. Acum, cu Divi's Theme Builder puteți adăuga o casetă de autor dinamic la nivel de site la postările dvs. De asemenea, puteți stiliza caseta de autor folosind opțiunile încorporate ale Divi, ceea ce poate duce la un design web frumos. În acest tutorial, vă vom arăta exact cum să proiectați o frumoasă casetă dinamică de autor în șablonul dvs. de postare. Veți putea descărca gratuit fișierul JSON șablon de postare!

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

Descărcați GRATUIT șablonul Post

Pentru a pune mâna pe șablonul de postare gratuit, va trebui mai întâi să îl 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!

1. Accesați Divi Theme Builder și adăugați un șablon de postare nou

Accesați Divi Theme Builder și adăugați un șablon nou

Începeți accesând Divi Theme Builder. Odată ajuns acolo, adăugați un șablon nou.

Utilizați șablonul pentru toate postările

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

• Utilizare activată: toate postările

Începeți să construiți corpul șablonului

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

2. Construiți corpul șablonului de postare pe blog

Setări secțiune

Culoare de fundal

În editorul de șabloane, veți observa o secțiune. Deschideți setările secțiunii și adăugați o culoare de fundal.

• Culoare fundal: # 270fff

Imagine de fundal

Încărcați imaginea de fundal pe care o puteți găsi în dosarul zip pe care l-ați putut descărca la începutul acestei postări.

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

Deschideți setările rândului și modificați lățimea maximă în setările de dimensionare.

• Lățime maximă: 1380 px

Adăugați modulul Titlu postare în coloană

Elemente

Singurul modul de care avem nevoie în acest rând este un modul Titlu post. Dezactivăm imaginea prezentată a postării în setările elementelor.

• Afișați imaginea prezentată: Nu

Setări text

Treceți la fila de proiectare a modulului și schimbați culoarea textului în setările generale de text.

• Culoarea textului: deschis

Setări text titlu

Modificați apoi setările pentru textul titlului.

• Titlu Font: Work Sans
• Dimensiune text titlu: 7rem (desktop), 4rem (tabletă), 2rem (telefon)
• Spațiere litere titlu: -2px

Setări Meta Text

Împreună cu setările meta text.

• Meta Font: Work Sans
• Dimensiune Meta Text: 1rem

Adăugați o secțiune nouă

Spațiere

Adăugați o nouă secțiune obișnuită în corpul șablonului, deschideți setările secțiunii și eliminați toate umpluturile implicite de sus.

• Căptușeală de sus: 0 px

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

Deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime maximă: 1380 px

Spațiere

Eliminați și toate căptușelile implicite de sus.

• Căptușeală de sus: 0 px

Setări coloana 1

Spațiere

Apoi, deschideți setările coloanei 1 și adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

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

Box Shadow

Adăugați o umbră de cutie și la prima coloană.

• Puterea neclarității umbrei cutiei: 60 px
• Culoare umbră: rgba (0,0,0,0.09)

Adăugați un modul de conținut pentru postare în coloana 1

Setări text

E timpul să începeți să adăugați module! Plasați modulul Post Content în coloana 1 și modificați setările de text în consecință:

• Font text: Work Sans
• Dimensiune text: 1rem (desktop), 0,9rem (tabletă și telefon)
• Înălțimea liniei textului: 2.3em

Setări text antet

Modificați și diferitele setări ale textului antetului.

• Font de antet: Work Sans
• Rubrica 2 Dimensiune text: 1.6rem (H2), 1.5rem (H3), 1.4rem (H4), 1.3rem (H5), 1.2rem (H6)
• Înălțimea liniei de direcție: 1.3em

ID CSS

Completați setările modulului adăugând un ID CSS.

• CSS ID: blog-post-conținut

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

Introduceți codul CSS antet

Pentru a adăuga spațiu între diferitele elemente ale conținutului postării, vom adăuga un modul de cod în coloana 1 și vom introduce următoarele linii de cod CSS:

<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Adăugați modulul persoană la coloana 2

Conținut dinamic

În a doua coloană, singurul modul de care avem nevoie este un modul de persoană. Vom selecta următorul conținut dinamic:

• Nume: Autor post
• Poziție: autor
• Corp: Autor Bio

Conținut dinamic al imaginii

Adăugați și imaginea de profil dinamic a autorului la modul.

• Imagine: Poza de profil a autorului

Plasați cursorul pe culoarea de fundal

Apoi, adăugați o culoare de fundal alb pe mouse.

• Culoare fundal: #ffffff

Setări text titlu

Treceți la fila de proiectare a modulului și modificați setările de text H3 în consecință:

• Titlu Nivel antet: H3
• Titlu Font: Work Sans
• Dimensiune text titlu: 1.1rem

Setări text corp

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

• Font corp: Work Sans
• Dimensiunea textului corpului: 0.9rem
• Înălțimea liniei corpului: 2em

Setări text poziție

Apoi, modificați setările pentru textul fontului de poziție.

• Poziție Font: Lucrare Sans
• Dimensiune text poziție: 0.9rem

Dimensiune implicită

Modificați înălțimea în setările de dimensionare.

• Înălțime: 160 px (desktop), automată (tabletă și telefon)

Plasați cursorul pe mouse

Și readuceți înălțimea pentru a porni automat.

• Înălțime: auto

Spațiere

În continuare, adăugăm un spațiu în jurul modulului folosind padding personalizat.

• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Bordură implicită

Și vom folosi și o margine.

• Lățimea marginii stânga: 0 px (desktop), 4 px (tabletă și telefon)
• Culoare margine stângă: # 270fff

Plasați mouse-ul peste frontieră

Modificați lățimea chenarului la cursor.

• Lățimea marginii stângi: 4 px

Default Box Shadow

Apoi, adăugați o umbră de cutie.

• Puterea neclarității umbrei cutiei: 60 px
• Culoare umbră: rgba (0,0,0,0) (Desktop), rgba (0,0,0,0.11) (tabletă și telefon)

Hover Box Shadow

Schimbați culoarea umbrei la cursor.

• Culoare umbră: rgba (0,0,0,0.11)

Filtre implicite

Mai departe, vom schimba opacitatea.

• Opacitate: 41% (desktop), 100% (tabletă și telefon)

Treceți cu mouse-ul peste filtre

Aduceți înapoi opacitatea la 100% la plecare.

• Opacitate: 100%

Element principal CSS

Pentru a adăuga efectul lipicios pe care l-ați putut observa în previzualizarea acestui post, vom adăuga câteva linii de CSS personalizate la elementul principal al modulului.

position: sticky;
position: -webkit-sticky;
top: 50px !important;

CSS de imagine de membru

Ne asigurăm că imaginea de profil a autorului este aliniată la stânga adăugând o singură linie de cod CSS la imaginea de membru a modulului.

text-align: left;

Vizibilitate implicită

Pentru a ascunde conținutul modulului pe desktop, vom schimba depășirile din fila avansată.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Plasați cursorul pe vizibilitate

Vom face ca conținutul să apară pe hover prin schimbarea revărsărilor la vizibil.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

Adăugați o secțiune nouă

Adăugați o altă secțiune la design.

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

Deschideți setările rândului și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime maximă: 1380 px

Adăugați modulul de comentarii în coloană

Setări câmpuri

Singurul modul de care avem nevoie în acest rând este un modul de comentarii. Modificați setările câmpurilor după cum urmează:

• Culoarea fundalului câmpurilor: #ffffff
• Căptușire de câmp: 20 px
• Căptușeală inferioară a câmpurilor: 20 px
• Fields Font: Work Sans
• Dimensiune text câmpuri: 1rem

Setări text numărare comentarii

Modificați și setările de text pentru numărul de comentarii.

• Număr de comentarii Nivel antet: H2
• Comentariu Font Count: Work Sans
• Număr de comentarii Dimensiune text: 1.5rem

Setări text titlu formular

Apoi, modificați setările textului titlului formularului.

• Titlu formular Formă nivel: H3
• Font Titlu formular: Work Sans
• Titlu formular Dimensiune text: 1.2rem

Setări Meta Text

Modificați și setările meta text.

• Meta Font: Work Sans
• Dimensiune Meta Text: 1rem

Setări text pentru comentarii

Modificăm și setările pentru textul comentariilor.

• Comentariu Font: Work Sans
• Dimensiune text comentariu: 1rem
• Înălțimea liniei de comentariu: 2.3em

Setări buton

Completați setările modulului stilizând butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1rem
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 270fff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px

• Buton Font: Work Sans

3. Salvați modificările temei Builder și vedeți rezultatul

După ce ați completat șablonul, asigurați-vă că salvați toate modificările, ieșiți din Theme Builder și vizualizați rezultatul pe postările dvs.!

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 acest post, v-am arătat cum să proiectați o frumoasă casetă de autor dinamică folosind opțiunile încorporate ale Divi, caracteristica dinamică și Generatorul de teme. Cu aceste trei lucruri combinate, acum este mai ușor ca niciodată să vă personalizați șablonul de postare pe blog și să acordați credit autorului postării într-un mod creativ. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.