Divi: Si të shtoni një seksion Hero në një postim në blog

Dëshironi të përmirësoni postimet tuaja në blog? Divi duke shtuar një seksion Hero në të?

Seksionet e heroit me ekran të plotë duken të shkëlqyera në çdo faqe interneti, por ato janë veçanërisht të shkëlqyera në postimet në blog. 

Edhe pse imazhi i paraqitur është me ekran të plotë, ka shumë opsione dizajni për vendosjen e titullit dhe tekstit meta. Është e lehtë të bësh me Ndërtuesi i Temave Divi . 

Në këtë artikull, do të shohim disa mënyra për të shtuar një seksion Hero në ekran të plotë në shabllonin tuaj të postimit të blogut. Divi.

Le të fillojë.

studim

Këtu është një pamje paraprake e asaj që ne do të dizajnojmë në këtë tutorial.

Lexo gjithashtu: Divi: Si të përdorni "Gradient Builder" për të zbukuruar imazhet tuaja

Seksioni Hero me modulin e versionit të Titullit të Postimit në Desktop

Seksioni Hero me modulin e versionit celular të titullit të postimit

Alternoni paraqitjen e seksionit Hero me modulin e versionit desktop të Titullit të Postimit

Shkarkoni DIVI tani!!!

Struktura alternative e seksionit Hero me modulin celular të Titullit të Postimit

Seksioni Hero me versionin e desktopit të meta të dhënave

Seksioni Hero me versionin celular të meta të dhënave

Shkarkoni DIVI tani!!!

Modelet e postimeve në blog për seksionin tuaj të heroit në ekran të plotë

Mund të krijoni shabllonin e postimeve në blog Divi Ndërtuesi i Temave nga e para ose shkarkoni një shabllon nga blogu Elegant Themes. Për t'i gjetur, kërkoni në blog "shabllon falas i postimit në blog". Nëse shkarkoni një shabllon, sigurohuni që ta çzipni atë.

Për shembujt tanë, ne do të përdorim  Modeli falas i Postimit në Blog për Paketën e Paraqitjes së Dizajnerëve të Modës së Divi . Ne përdorim gjithashtu paketën e paraqitjes falas Dizajnues i modës në krye dhe në fund .

Shkarkoni ose krijoni shabllonin tuaj të postimit në blog për seksionin tuaj Hero me ekran të plotë

Ju mund të shkarkoni shabllonin tuaj të postimit në blog ose të krijoni një nga e para. Ne do të ngarkojmë një, por procesi për krijimin e një seksioni të heroit në ekran të plotë është i njëjtë.

Shiko gjithashtu: Divi: Si të përdorni maskat dhe modelet e sfondit për një seksion heronj

Metoda 1: Moduli i titullit të postimit me ekran të plotë

Kjo metodë do të përdorë Moduli PostTitle . Është një zgjedhje e mirë nëse dëshironi të shfaqni të gjitha informacionet së bashku. Pasi të keni shabllonin tuaj, zgjidhni ikonën e redaktimit për ta hapur atë.

Shablloni që ngarkuam ka një seksion me imazhin e paraqitur. Ne do ta heqim këtë seksion dhe do të shtojmë një Seksioni me gjerësi të plotë në vendin e saj.

zgjedh Titulli i postimit me gjerësi të plotë në listën e moduleve me gjerësi të plotë.

Të gjithë artikujt janë zgjedhur si parazgjedhje. Lërini ato të aktivizuara. Lëvizni te Vendosja e imazhit të veçuar dhe zgjidh Mbi titullin.

• Vendosja e imazhit të veçuar: Mbi titull

Shkoni te Ngjyrë e sfondit dhe vendosni ngjyrën në #fff9f2

• Sfondi: #fff9f2

Teksti i titullit

Zgjidhni skedën Dizajn. Për tekstin e titullit, mbani H1 dhe zgjidhni Playfair Display. Vendoseni në Left Justified dhe zgjidhni #34332e për ngjyrën.

• Titulli:
  • Niveli i titullit: H1
  • Fonti: Playfair Display
  • Rreshtimi i tekstit: majtas i justifikuar
  • Ngjyra e tekstit: #34332e

Hidh la madhësia e tekstit , vendosni versionin e desktopit në 65px, versionin celular në 42px dhe lartësinë e rreshtit në 1,2em.

• Madhësia e tekstit të titullit (Desktop): 65px (Desktop), 42px (Telefon)
• Lartësia e linjës së titullit: 1,2 em

Meta tekst

Shkoni te Meta Tekst. Zgjidhni Montserrat për fontin dhe vendoseni në rreshtim mesatar, të madh, djathtas për versionin e desktopit dhe shtrirje majtas për versionin celular. Zgjidhni #7b7975 për ngjyrën.

• MetaFont:
  • Fonti: Montserrat
  • Pesha: e mesme
  • Stili: TT
• Meta Teksti:
  • Shtrirja: djathtas (Desktop), majtas (Telefon)
  • Ngjyra: #7b7975

Vendos përmasa e germave për versionin desktop në 14 px, për versionin celular në 10 px, hapësira e shkronjave në 1 px dhe lartësia e rreshtit në 1,6 em. Mbyllni cilësimet tuaja dhe ruani shabllonin tuaj.

• Meta Teksti:
  • Madhësia (Desktop): 14 px
  • Madhësia (Telefon): 10px
• Hapësira e shkronjave: 1 px
• Lartësia e linjës: 1,6 em

Titulli në imazhin e sfondit

Nëse vendosni që dëshironi që titulli të shfaqet në imazhin e paraqitur, përdorni të njëjtat cilësime të dizajnit dhe kthehuni te skeda Përmbajtja. 

zgjedh Titulli/Imazhi i sfondit meta për Vendosja e imazhit të veçuar.

• Vendosja e imazhit të veçuar: Titulli/Imazhi i sfondit meta

Shkoni te Sfond dhe zgjidh Gradienti i Sfondit. Vendosni ngjyrën e majtë në #fff9f2, ngjyrën e djathtë në rgba (255,255,255,0), drejtimin në 90 gradë, pozicionin e fillimit në 30% dhe zgjidhni po për të vendosur gradientin mbi imazhin e sfondit. Mbyllni dhe ruani cilësimet tuaja.

• Ndalesat e gradientit:
  • 30%: #fff9f2
  • 100%: rgba (255,255,255,0)
• Drejtimi i gradientit: 90 gradë
• Gradient katror mbi sfond Imazhi: PO

Metoda 2: Seksioni i heroit në ekran të plotë me metadata

Kjo metodë do të përdorë modulet e tekstit me përmbajtje dinamike për informacionin. Ky është një opsion i mirë nëse dëshironi të shfaqni të gjithë artikujt në vende të ndryshme. 

Së pari, shkarkoni shabllonin dhe fshini seksionin e parë. Ne do t'i rikrijojmë modulet dhe cilësimet e tyre në kolonën e majtë, por do t'i kalojmë nëpër to që të mund t'i konfiguroni.

Cilësimet e seksionit të heroit në ekran të plotë me metadata

Hapni cilësimet e seksion dhe shkoni te Historiku i sfondit. Zgjidhni Gradienti i Sfondit dhe ndryshoni cilësimet si më poshtë:

• Ndalesat e gradientit:
  • 30%: #fff9f2
  • 100%: rgba (255,255,255,0)
• Drejtimi i gradientit: 90 gradë
• Gradient katror mbi sfond Imazhi: PO

zgjedh Historiku i sfondit dhe zgjidhni opsionin Përdorni përmbajtje dinamike.

Zgjedh Featured Image në opsionet.

Zgjidhni skedën Projektimidhe shkoni te sizing. Shtoni 100 Vh në lartësinë minimale. Mbyllni cilësimet e seksionit.

• Lartësia minimale: 100 Vh

Cilësimet e seksionit të heroit në ekran të plotë me metadata

Më pas, shtoni një rresht të dyfishtë kolone në seksion.

Shtoje nje Moduli i tekstit në kolonën e djathtë.

Për të tijën përmbajtje, zgjidhni Përdorni përmbajtje dinamike.

Zgjedh Titulli i postimit/arkivës në listën e opsioneve.

• Përmbajtja Dinamike: Titulli i Postimit/Arkivit

Shkoni te skeda Projektimit.

• Titulli:
  • Teksti: H1
  • Fonti: Playfair Display
  • Rreshtimi i tekstit: majtas i justifikuar
  • Ngjyra e tekstit: #34332e

Për madhësinë e tekst , vendosur për versionin desktop në 65 pikselë, për versionin celular në 42 pikselë dhe lartësinë e rreshtit në 1,2 pikselë.

• Titulli:
  • Madhësia e tekstit: 65 px (Desktop), 42 px (Telefon)
  • Lartësia e linjës: 1,2 em

Shkoni te ndarje dhe vendosni 50% për mbushjen e sipërme. Mbyllni Cilësimet.

• Mbushje: 50% (sipër)

Ju gjithashtu mund ta lexoni këtë artikull në: Si të krijoni një seksion heroik me modulin e titullit të plotë të gjerësisë së Divi

Seksioni i heroit me kategorinë e meta të dhënave

Shto një seksion të ri e rregullt nën seksionin Hero.

Hapni cilësimet e tij dhe vendosni couleur sfond në #fff9f2. Mbyllni Cilësimet.

• Ngjyra e sfondit: #fff9f2

Më pas shtoni një linjë nga 4 kolona në seksionin e ri.

Heroi i ekranit të plotë me tekst të kategorisë së meta të dhënave

Shtoje nje Moduli i tekstit në kolonën e majtë.

Hapni cilësimet e modulit dhe zgjidhni Përdorni përmbajtje dinamike për trupin e tekstit.

zgjedh Kategoritë e kaluara në listë.

• Përmbajtja dinamike: Kategoritë e postimeve

Zgjidhni skedën Projektimi dhe lëvizni poshtë te Teksti i titullit. Zgjidhni H4. Zgjidhni Playfair Display për fontin dhe vendoseni në rreshtim mesatar, të madh, djathtas për versionin e desktopit dhe shtrirje majtas për versionin e telefonit. Zgjidhni #7b7975 për ngjyrën.

• Titulli:
  • Shfaqja e tekstit
  • Fonti: Playfair Display
  • Pesha e shkronjave: mesatare
  • Stili: TT
  • Rreshtimi i tekstit: Qendër
  • Ngjyra e tekstit: #7b7975

Vendosni madhësinë e shkronjave për versionin e desktopit në 14 px, për versionin celular në 10 px, hapësirën e shkronjave në 1 px dhe lartësinë e rreshtit në 1,6 em. Mbyllni cilësimet tuaja dhe ruani shabllonin tuaj.

• Kreu 4:
  • Madhësia (Desktop): 14 px
  • Madhësia (Telefon): 10px
  • Hapësira e shkronjave: 1 px
  • Lartësia e linjës: 1,6 em

Shkoni te ndarje dhe shtoni 0px në kufirin e poshtëm. Mbyllni Cilësimet.

• Marzhi (poshtë): 0 px

Seksioni "Hero i ekranit të plotë" me meta të dhëna të tekstit "Meta".

Më pas, kopjoni modulin Kategoria dhe tërhiqeni atë në kolonën tjetër. Secili prej moduleve Meta ka të njëjtat cilësime. Ne do të tregojmë se si të krijojmë modulin e parë dhe më pas ta kopjojmë dy herë për të krijuar modulet e tjera.

Autor

Hapni cilësimet dhe fshini përmbajtje dinamike.

Kliko në Përdorni përmbajtje dinamike dhe zgjidhni Autori i postimit.

• Përmbajtja dinamike: Autori i postimit

Në skedën Projektimi, Ndryshoni cilësimet e mëposhtme. 

• Kreu 4:
• Fonti: Montserrat
• Pesha e shkronjave: mesatare
• Stili: TT
• Rreshtimi i tekstit (Desktop): Qendër
• Rreshtimi i tekstit (Telefon): majtas
• Ngjyra: #7b7975

Parametrat e përmasa e germave përfshijnë:

• Madhësia e tekstit: 14 px (Desktop), 10 px (Telefon)
• Hapësira e shkronjave: 1 px
• Lartësia e linjës: 1,6 em

La marzhi i poshtëm duhet të ketë 0px.

• Marzhi (poshtë): 0 px

data

kopje modulin Autori dhe tërhiqeni atë në kolonën tjetër.

Fshije përmbajtje dinamik aktuale, zgjidhni Përdorni përmbajtje dinamike dhe zgjidh Data e publikimit të postimit. Mbyll Cilësimet.

• Përmbajtja dinamike: Data e publikimit

komente

Enfin, kopje modulin Post Publish Date dhe tërhiqeni atë në kolonën e fundit.

Ashtu si me modulet e tjera, hiqni përmbajtjen dinamike dhe zgjidhni Përdorni përmbajtje dinamike .

Zgjedh Numri i komenteve të postimeve nga zgjedhjet tuaja.

• Përmbajtja dinamike: Numri i komenteve të postimeve

Këtë herë shtoni një hapësirë ​​dhe fjalën Komente në fushë pas . Mbyllni modalin e vogël dhe më pas mbyllni cilësimet. Ruani punën tuaj.

• Pas: Komentet

Lexo gjithashtu: Divi: Si të shfaqni modulin Fullwidth Header në ekran të plotë

Résultats

Seksioni Hero me modulin e versionit të Titullit të Postimit në Desktop

Seksioni Hero me modulin e versionit celular të titullit të postimit

Alternoni paraqitjen e seksionit Hero me modulin e versionit desktop të Titullit të Postimit

Struktura alternative e seksionit Hero me modulin celular të Titullit të Postimit

Seksioni Hero me versionin e desktopit të meta të dhënave

Seksioni i heroit me meta të dhënat e versionit celular

Shkarkoni DIVI tani!!!

Përfundim

Kjo është ajo është e gjitha! Ky është vështrimi ynë se si të shtoni një seksion Hero me ekran të plotë në shabllonin tuaj të postimit në blog. Divi. 

Modulet Divi dhe Theme Builder ofrojnë disa opsione për krijimin e seksioneve Hero në ekran të plotë. Të gjitha metodat funksionojnë shumë mirë dhe të gjitha kanë avantazhet e tyre. 

Duke përdorur këto metoda, mund të shtoni një seksion Hero në ekran të plotë në çdo shabllon të postimit të blogut Divi.

Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.

Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.

Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...