4 Exemple uimitoare ale modulului Divi's Title Title și Cum să le realizezi

Pentru toți bloggerii Divi care caută moduri noi de a implica oamenii cu postările dvs. pe blog, modulul Divi Post Title este un loc minunat pentru a începe. Modulul Titlul postării vă permite să stilizați titlul postării (și imaginea prezentată) într-o varietate de moduri pentru nenumărate modele uimitoare. Acest lucru vă permite să creați câteva articole frumoase care vă pot lega potențialii cititori de la prima vedere. Astăzi, vă voi arăta patru moduri uimitoare prin care puteți stiliza modulul Divi Post Title pentru a vă ajuta să atrageți cititorii.

Să începem!

Trage cu ochiul

Iată o scurtă privire asupra proiectelor modulelor post titlu prezentate în acest tutorial.

# 1 Încadrare abstractă

Începeți să construiți numărul 1

# 2 Text suprapus și imagine recomandată

Începeți construirea nr. 2

# 3 fundaluri de conținut unic pentru lizibilitate

Începeți construirea nr. 3

# 4 Efect de stivuire cu imagini duale prezentate

Începeți construirea # 4

Noțiuni de bază

Abonați-vă la canalul nostru Youtube

Tot ce ai nevoie cu adevărat pentru acest tutorial este Divi. Vom crea postări noi și vom folosi Divi Builder pentru a crea desenele titlului postării. De asemenea, veți avea nevoie de câteva imagini pentru a servi ca imagini prezentate.

Configurarea pentru mesaje noi

Pentru acest tutorial, voi folosi Divi Builder pentru a construi exemple de titluri de postare pentru un post nou. Pentru a obține setările pentru versiunile din acest tutorial, va trebui să faceți următoarele:

1. Creați o postare nouă.
2. Adăugați un titlu la postarea dvs.
3. Adăugați o imagine recomandată postării dvs.
4. Implementați Divi Builder.
5. Alegeți să construiți de la zero
6. sub Setări pagini Divi, selectați aspectul paginii Fără bara laterală și selectați pentru a ascunde titlul postării.
7. Apoi faceți clic pentru a Construi pe front-end sau implementați modul de vizualizare desktop pe backend, astfel încât să puteți proiecta pagina vizual.

Depinde de dvs. dacă doriți sau nu să creați o postare nouă pentru fiecare design sau pur și simplu să adăugați mai multe modele de titlu de postare la o postare. Rețineți că, dacă adăugați mai multe titluri de postări într-o singură postare, acestea vor moșteni același titlu de pagină și imagine prezentată.

# 1 Încadrare abstractă

Acest design curat al titlului postului are elemente de încadrare abstracte subtile care vor funcționa bine imaginea prezentată și titlul postării. Efectul de încadrare este creat folosind unele stiluri personalizate de margine și umbră de cutie.

Iată cum să o faci.

Asigurați-vă că configurați noua postare așa cum este descris la începutul acestui articol (Adăugați titlu, Imagine recomandată, Fără aspect de pagină din bara laterală, ascundeți titlul implicit al postării). Adăugați o postare nouă cu un rând cu o coloană. Apoi adăugați modulul titlului postării pe rând.

În Setările pentru titlul postării, setați destinația de plasare a imaginii după cum urmează:

Amplasare imagine prezentată: Deasupra titlului

Apoi actualizați adăugați un gradient de fundal pentru a adăuga un mic element de design abstract în colțul din dreapta jos al modulului.

Culoarea din stânga a gradientului de fundal: rgba (0,0,0,0.06)
Culoarea dreaptă a gradientului de fundal: rgba (0,0,0,0)
Tipul gradientului: radial
Direcție radială: jos dreapta
Poziția inițială: 10%
Poziție finală: 0%

Continuați să actualizați restul designului după cum urmează:

Titlu Font: Josefin Sans
Alinierea textului la titlu: dreapta
Dimensiune text titlu: 36 px
Înălțimea liniei de titlu: 1.7em (desktop), 1.3em (tabletă și smartphone)
Meta Font: Josefin Sans
Stil Font Meta: TT
Alinierea Meta Textului: stânga
Distanța Meta Letter: 2 px
Înălțimea liniei meta: 2em
Marjă personalizată: -5vw top
Căptușeală personalizată: 5vw sus, 5vw jos, 5vw stânga, 5vw dreapta
Lățimea marginii drepte: 4 px

Marja -5vw trage modulul în afara rândului pentru ca marginea din dreapta să stea deasupra marginii din stânga pe care o vom adăuga la rând.

Acum, să adăugăm un element de design abstract folosind box shadow:

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 112 px
Box Shadow Vertical Position: 85 px
Puterea răspândirii umbrei cutiei: -80px
Culoare umbră: rgba (224,43,32,0.3)

Salvează setările.

Acum deschideți setările rândului pentru a-l redimensiona și creați partea stângă a designului cadrului utilizând o margine și o umbră de casetă.

Lățime personalizată: 700 px
Lățimea marginii drepte: 4 px

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 112 px
Box Shadow Vertical Position: 85 px
Puterea răspândirii umbrei cutiei: -80px
Culoare umbră: rgba (224,43,32,0.3)

Acum, să verificăm designul final.

# 2 Text suprapus și imagine recomandată

Creați o nouă secțiune cu un rând cu două coloane. Apoi adăugați un modul de imagine în coloana din stânga.

Aceasta va servi drept imagine prezentată folosind conținut dinamic. Deschideți setările imaginii și ștergeți imaginea simulată și faceți clic pe pictograma conținut dinamic din colțul din dreapta sus al casetei de previzualizare a imaginii. Apoi selectați Imagine recomandată din listă pentru a adăuga imaginea prezentată în pagină.

Acum adăugați un modul de titlu al postării în coloana din dreapta. Deschideți setările și ascundeți imaginea prezentată setând opțiunea Afișare imagine prezentată la NO.

Apoi adăugați un gradient de fundal la modulul titlului postării.

Culoarea din stânga a gradientului de fundal: #ffffff
Culoarea dreaptă a gradientului de fundal: rgba (255,255,255,0)

Acest lucru va deveni vizibil odată ce adăugăm o marjă negativă pentru a suprapune imaginea.

Actualizați restul designului după cum urmează:

Titlu Font: Fira Sans Condensed
Titlu Greutate font: Ultra ușor
Dimensiune text titlu: 80 px (desktop), 70 px (tabletă), 45 px (smartphone)
Meta Font: Fira Sans Condensed
Stil Font Meta: TT
Alinierea Meta Textului: corect
Culoare Meta Text: #cccccc
Distanța Meta Letter: 2 px
Marja personalizată: -20% rămas (desktop), 0% (tabletă și smartphone)
Căptușeală personalizată: 5vw sus, 5vw jos, 30 px stânga

Acum să-i dăm o umbră de casetă pentru a crea o linie sub titlu.

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 80 px
Box Shadow Vertical Position: 82 px
Puterea răspândirii umbrei cutiei: -80px

Salvați setarea și deschideți setările rândului pentru a regla lățimea jgheabului.

Lățimea jgheabului: 1
Egalizați înălțimile coloanei: DA

Acum verificați designul final.

Design alternativ de imagine rotunjită

Cu doar câteva modificări mici, puteți face imaginea prezentată circulară și reglați țiglă pentru a fi centrată vertical. Pentru aceasta, deschideți setările imaginii și actualizați următoarele:

Colțuri rotunjite: 50%

Apoi deschideți setările de rând și adăugați următoarele CSS personalizate sub Elementul principal:

align-items: center;

Acest lucru funcționează numai dacă aveți setat Înălțimea coloanei Egalizat la YES, care activează proprietatea flex, permițându-ne să aliniați elementele pe verticală.

Iată designul final.

# 3 fundaluri de conținut unic pentru lizibilitate

Acest design al titlului postului încorporează gradiente de fundal pentru a face titlul și meta textul mai lizibile cu un fundal de imagine prezentat.

Iată cum să o faceți.

Creați o nouă secțiune cu un rând cu o coloană. Apoi adăugați modulul titlului postării pe rând.

Apoi actualizați setările modulului titlului postării pentru a ascunde imaginea prezentată.

Titlu Font: Abril Fatface
Culoarea textului titlului: # 121212
Dimensiune text titlu: 75 px (desktop), 50 px (tabletă), 30 px (smartphone)
Spațierea literelor de titlu: 2 px
Înălțimea liniei de titlu: 1.1em
Meta Font: Roboto condensat
Culoare Meta Text: #ffffff
Dimensiune Meta Text: 16 px
Distanța Meta Letter: 2 px
Înălțimea liniei meta: 2em
Lățime: 60% (desktop), 90% (tabletă), 100% (smartphone)
Împletire personalizată: 3vw stânga

Acum, să adăugăm o umbră de casetă pentru a servi ca fundal la meta text și să o facem lizibilă.

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 0 px
Box Shadow Vertical Position: -32px
Culoare umbră cutie: # 121212

Acum vom adăuga imaginea noastră prezentată în fundalul secțiunii folosind conținut dinamic. Deschideți setările secțiunii și faceți clic pe pictograma conținut dinamic din partea dreaptă sus a casetei de previzualizare a imaginii de fundal. Apoi selectați imaginea prezentată din listă pentru a adăuga imaginea prezentată în secțiune.

Acum, să adăugăm elementul nostru de fundal de gradient pentru a face textul titlului postului mai lizibil. Pur și simplu faceți clic pe fila de gradient și actualizați următoarele:

Culoarea stânga a gradientului de fundal: rgba (255,255,255,0,76)
Culoarea dreaptă a gradientului de fundal: rgba (255,255,255,0)
Tipul gradientului: radial
Direcție radială: stânga sus
Poziția inițială: 40%
Poziție finală: 0%
Plasați gradientul deasupra imaginii de fundal: DA

Acum să vedem designul final.

# 4 Efect de stivuire cu imagini duale prezentate

Acest design încorporează câteva umbre de casetă pentru a da efectul de stivuire a elementelor care alcătuiesc modulul titlului postului și fundalul secțiunii. De asemenea, folosește două versiuni ale imaginii prezentate (dinamic) pentru un element de design unic.

Iată cum să o faci.

Creați o nouă secțiune cu un rând cu o coloană. Apoi adăugați modulul de postare pe rând și actualizați plasarea imaginii prezentate la Titlu / Meta Imagine de fundal.

Apoi actualizați setările de proiectare după cum urmează:

Culoarea textului: deschis
Culoarea fundalului textului: rgba (1,59,104,0,79)
Orientare text: centru
Titlu Font: Roboto Condensed
Titlu Greutate font: ușor
Dimensiune text titlu 70 px (desktop), 50 px (tabletă), 30 px (smartphone)
Înălțimea liniei de titlu: 1.3em
Meta Font Greutate: ușoară
Stil Font Meta: TT
Culoare Meta Text: #cccccc
Distanțarea Meta Letter: 1 px
Căptușeală personalizată: 10vw sus, 0 px jos

Acum să adăugăm prima noastră umbră de cutie pentru a crea primul nostru strat de stivuire.

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 0 px
Box Shadow Vertical Position: -46px
Culoare umbră: #ffffff

Puteți vedea că acest lucru servește și ca o modalitate creativă de a împărți titlul și meta textul.

Acum salvați setările și deschideți setările secțiunii. Adăugați imaginea prezentată pe fundal ca conținut dinamic. Apoi adăugați un gradient după cum urmează:

Culoarea din stânga a gradientului de fundal: rgba (1,59,104,0,79)
Gradient de fundal Culoare dreaptă: rgba (1,59,104,0,79)
Plasați gradientul deasupra imaginii de fundal: DA

Acest design suplimentar de fundal al imaginii recomandate este un mod unic de a oferi titlului postării dvs. un design unic care se va schimba dinamic cu fiecare nouă imagine prezentată.

Apoi, adăugați niște umpluturi personalizate.

Împletire personalizată (desktop): 10vw sus, 0 px jos
Împletire personalizată (smartphone): 0vw sus, 0 px jos

Apoi adăugați o altă umbră de cutie pentru a continua efectul de stivuire.

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 0 px
Box Shadow Vertical Position: -92px
Culoare umbră: #ffffff

Pentru a finaliza designul, deschideți setările rândului și actualizați următoarele:

Faceți acest rând lățime completă: DA
Lățimea jgheabului: 1
Împletire personalizată (desktop): 0 px sus, 0 px jos, 6% stânga, 6% dreapta
Împletire personalizată (smartphone: 0 px sus, 0 px jos, 0% stânga, 0% dreapta

Acum verificați designul final.

Gânduri finale

Cu aceste modele de titlu post, ar trebui să înțelegeți destul de bine ceea ce este posibil cu modulul Divi titlu post și Divi Builder. Cu doar câteva modificări de design, combinate cu puterea conținutului dinamic pentru imaginile prezentate, puteți crea nenumărate stiluri unice de titlu de postare pentru postările dvs. de pe blog. În orice caz, sper că acestea vă vor inspira să creați singuri titluri de post uimitoare.

Pentru mai multe inspirații legate de design, consultați postarea de pe blogul nostru despre secțiunile eroice ale postărilor de blog frumoase și atrăgătoare și secretul proiectării aspectelor de grilă rupte în Divi.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!