Divi: Cum să adăugați o secțiune Hero la o postare de blog

Doriți să vă îmbunătățiți postările de pe blog? Divi prin adăugarea unei secțiuni Hero la ea?

Secțiunile Hero pe ecran complet arată grozav pe orice pagină web, dar sunt deosebit de grozave în postările de blog. 

Chiar dacă imaginea prezentată este pe ecran complet, există o mulțime de opțiuni de design pentru a plasa titlul și meta textul. Este ușor de făcut cu Divi Theme Builder . 

În acest articol, vom vedea mai multe modalități de a adăuga o secțiune Hero pe ecran complet la șablonul de postare pe blog. Divi.

Să începem.

studiu

Iată o previzualizare a ceea ce vom proiecta în acest tutorial.

Citiți și: Divi: Cum să utilizați „Gradient Builder” pentru a vă înfrumuseța imaginile

Secțiune ero cu modul Post Title Desktop

Secțiune Erou cu modul de versiune mobilă Post Title

Aspect alternativ al secțiunii Hero cu modulul pentru versiunea desktop Post Title

Descărcați DIVI acum!!!

Aspect alternativ al secțiunii Hero cu modulul mobil Post Title

Secțiune erou cu metadate Versiunea desktop

Secțiune erou cu versiunea mobilă cu metadate

Descărcați DIVI acum!!!

Șabloane de postări de blog pentru secțiunea dvs. de eroi pe ecran complet

Puteți crea șablonul de postări de blog în Divi Theme Builder de la zero sau descărcați un șablon de pe blogul Elegant Themes. Pentru a le găsi, căutați pe blog „șablon gratuit de postare pe blog”. Dacă descărcați un șablon, asigurați-vă că îl dezarhivați.

Pentru exemplele noastre, vom folosi  Șablon gratuit de postare de blog pentru Pachetul de aspect al designerului de modă Divi . De asemenea, folosim pachetul de layout gratuit Creator de modă antet și subsol .

Descărcați sau creați șablonul de postare pe blog pentru secțiunea Hero pe ecran complet

Puteți descărca șablonul de postare pe blog sau puteți crea unul de la zero. Vom încărca unul, dar procesul de creare a unei secțiuni eroi pe ecran complet este același.

Vezi si: Divi: Cum să utilizați măștile și modelele de fundal pentru o secțiune de eroi

Metoda 1: Modulul Titlul postării pe ecran complet

Această metodă va folosi Modulul PostTitle . Este o alegere bună dacă doriți să afișați toate informațiile împreună. După ce aveți șablonul, selectați pictograma de editare pentru a-l deschide.

Șablonul pe care l-am încărcat are o secțiune cu imaginea prezentată. Vom elimina această secțiune și vom adăuga un Secțiune cu lățime completă in locul lui.

selecta Titlul postării la lățime completă în lista de module cu lățime completă.

Toate elementele sunt selectate implicit. Lăsați-le activate. Derulați la Plasarea imaginilor recomandate și selectați Deasupra titlului.

• Plasarea imaginii recomandate: deasupra titlului

Derulați până la Culoare de fundal și setați culoarea la #fff9f2

• Fundal: #fff9f2

Textul titlului

Selectați fila Proiecta. Pentru textul titlului, păstrați H1 și alegeți Playfair Display. Setați-l la Left Justified și alegeți #34332e pentru culoare.

• Titlu :
  • Nivel de titlu: H1
  • Font: Playfair Display
  • Alinierea textului: justificat la stânga
  • Culoare text: #34332e

Pour la Mărimea textului , setați versiunea desktop la 65 px, versiunea mobilă la 42 px și înălțimea rândului la 1,2 em.

• Dimensiunea textului titlului (desktop): 65px (desktop), 42px (telefon)
• Înălțimea liniei de titlu: 1,2 em

Meta text

Derulați până la Meta Text. Selectați Montserrat pentru font și setați-l la mediu, majuscule, alinierea la dreapta pentru versiunea desktop și alinierea la stânga pentru versiunea mobilă. Alegeți #7b7975 pentru culoare.

• MetaFont:
  • Font: Montserrat
  • Greutate: Mediu
  • Stil: TT
• Meta Text:
  • Aliniere: dreapta (desktop), stânga (telefon)
  • Culoare: #7b7975

Seteaza marimea fontului pentru versiunea desktop la 14 px, pentru versiunea mobilă la 10 px, spațierea literelor la 1 px și înălțimea liniei la 1,6 em. Închideți setările și salvați șablonul.

• Meta Text:
  • Dimensiune (desktop): 14px
  • Dimensiune (Telefon): 10px
• Spațiere între litere: 1px
• Înălțimea liniei: 1,6 em

Titlul pe imaginea de fundal

Dacă decideți că doriți să apară titlul pe imaginea selectată, utilizați aceleași setări de design și reveniți la filă Conţinut. 

selecta Titlu/Meta imagine de fundal pentru Plasarea imaginilor recomandate.

• Plasarea imaginii recomandate: Titlu/Meta imagine de fundal

Derulați până la Context și selectați Gradient de fundal. Setați culoarea stângă la #fff9f2, culoarea dreaptă la rgba(255,255,255,0), direcția la 90 de grade, poziția de pornire la 30% și alegeți da pentru a plasa gradientul deasupra imaginii de fundal. Închideți și salvați setările.

• Opriri de gradient:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• Direcție gradient: 90 de grade
• Gradient pătrat deasupra imaginii de fundal: DA

Metoda 2: Secțiunea Hero pe ecran complet cu metadate

Această metodă va folosi module Text cu continut dinamic pentru informare. Aceasta este o opțiune bună dacă doriți să afișați toate articolele în locuri diferite. 

Mai întâi, descărcați șablonul și ștergeți prima secțiune. Vom recrea modulele și setările lor în coloana din stânga, dar le vom parcurge astfel încât să le puteți configura.

Setări pentru secțiunea Hero pe ecran complet cu metadate

Deschideți setările secțiune și derulați la Imagine de fundal. Selectați Gradient de fundal și modificați setările după cum urmează:

• Opriri de gradient:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• Direcție gradient: 90 de grade
• Gradient pătrat deasupra imaginii de fundal: DA

selecta Imagine de fundal și alegeți opțiunea Utilizați conținut dinamic.

Alege Imagine Recomandate în opțiuni.

Selectați fila Amenajăriși derulați la dimensionarea. Adăugați 100vh la înălțimea minimă. Închideți setările secțiunii.

• Înălțime minimă: 100vh

Setări pentru secțiunea Hero pe ecran complet cu metadate

Apoi, adăugați un rând de coloană dublă la secțiune.

Adauga o Modul text în coloana din dreapta.

Pentru a lui cuprins, selectați Utilizați conținut dinamic.

Alege Titlul postării/arhivei în lista de opțiuni.

• Conținut dinamic: titlul postării/arhivei

Accesați fila Proiecta.

• Titlu:
  • Text: H1
  • Font: Playfair Display
  • Alinierea textului: justificat la stânga
  • Culoare text: #34332e

Pentru dimensiunea de text , setat pentru versiunea desktop la 65 px, pentru versiunea mobilă la 42 px și înălțimea rândului la 1,2 em.

• Titlu:
  • Dimensiune text: 65 px (desktop), 42 px (telefon)
  • Înălțimea liniei: 1,2 em

Derulați până la spațiere și introduceți 50% pentru umplutura superioară. Închide Setări.

• Captuseala: 50% (sus)

Puteți citi și acest articol pe: Cum se creează o secțiune erou cu modulul de antet cu lățime completă al Divi

Secțiune erou cu categorie de metadate

Adăugați o nouă secțiune obișnuit în secțiunea Hero.

Deschideți setările și setați culoare fundal pe #fff9f2. Închide Setări.

• Culoare de fundal: #fff9f2

Apoi adăugați a linie din 4 coloane la noua secțiune.

Erou pe ecran complet cu text din categoria metadatelor

Adauga o Modul text în coloana din stânga.

Deschideți setările modulului și selectați Utilizați conținut dinamic pentru corpul textului.

selecta Categorii anterioare În listă.

• Conținut dinamic: categorii de postări

Selectați fila Amenajări și derulați în jos la Textul titlului. Selectați H4. Alegeți Playfair Display pentru font și setați-l la mediu, majuscule, alinierea la dreapta pentru versiunea desktop și alinierea la stânga pentru versiunea de telefon. Alegeți #7b7975 pentru culoare.

• Titlu:
  • Afișare text
  • Font: Playfair Display
  • Greutatea fontului: medie
  • Stil: TT
  • Alinierea textului: Centru
  • Culoare text: #7b7975

Setați dimensiunea fontului pentru versiunea desktop la 14 px, pentru versiunea mobilă la 10 px, spațierea literelor la 1 px și înălțimea liniei la 1,6 em. Închideți setările și salvați șablonul.

• Titlul 4:
  • Dimensiune (desktop): 14px
  • Dimensiune (Telefon): 10px
  • Spațiere între litere: 1px
  • Înălțimea liniei: 1,6 em

Derulați până la spațiere și adăugați 0px la marginea de jos. Închide Setări.

• Marja (jos): 0px

Secțiunea Hero cu ecran complet cu metadate metatext

Apoi, copiați modulul Categorie și trageți-l în coloana următoare. Fiecare dintre modulele Meta are aceleași setări. Vom arăta cum să creați primul modul și apoi să îl copiați de două ori pentru a crea celelalte module.

Autor

Deschideți setările și ștergeți cuprins dinamic.

Faceți clic pe Utilizați conținut dinamic și alegeți Autorul postului.

• Conținut dinamic: autor al postării

În fila Amenajări, Modificați următoarele setări. 

• Titlul 4:
• Font: Montserrat
• Greutatea fontului: medie
• Stil: TT
• Alinierea textului (desktop): Centru
• Alinierea textului (telefon): stânga
• Culoare: #7b7975

Setările de marimea fontului include:

• Dimensiunea textului: 14px (desktop), 10px (telefon)
• Spațiere între litere: 1px
• Înălțimea liniei: 1,6 em

La marginea de jos trebuie să aibă 0px.

• Marja (jos): 0px

Data

copie modulul Autor și trageți-l în coloana următoare.

Sterge-l cuprins dinamic curent, alege Utilizați conținut dinamic și selectați Data postului publicării. Închide Setări.

• Conținut dinamic: data postului publicării

comentarii

Oricum, copie modulul Post Publicare Data și trageți-l în ultima coloană.

Ca și în cazul altor module, eliminați conținutul dinamic și selectați Utilizați conținut dinamic .

Alege Număr de comentarii din alegerile tale.

• Conținut dinamic: număr de postări

De data aceasta adăugați un spațiu și cuvântul Comentarii în câmp După . Închideți micul modal apoi închideți setările. Salvează-ți munca.

• După: Comentarii

Citiți și: Divi: Cum să afișați modulul Fullwidth Header pe ecran complet

resultats

Secțiune ero cu modul Post Title Desktop

Secțiune Erou cu modul de versiune mobilă Post Title

Aspect alternativ al secțiunii Hero cu modulul pentru versiunea desktop Post Title

Aspect alternativ al secțiunii Hero cu modulul mobil Post Title

Secțiune erou cu metadate Versiunea desktop

Secțiune erou cu metadate pentru versiunea mobilă

Descărcați DIVI acum!!!

Concluzie

asta e tot! Aceasta este privirea noastră despre cum să adăugați o secțiune Hero pe ecran complet la șablonul de postare de blog. Divi. 

Module Divi și Theme Builder oferă mai multe opțiuni pentru a crea secțiuni Hero pe ecran complet. Toate metodele funcționează foarte bine și toate au avantajele lor. 

Folosind aceste metode, puteți adăuga o secțiune Hero pe ecran complet la orice șablon de postare de blog Divi.

Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.

De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.

Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...