Divi: Hogyan adjunk Hero részt egy blogbejegyzéshez

Szeretnéd javítani a blogbejegyzéseiden? Divi egy Hero szekció hozzáadásával?

A teljes képernyős Hero szakaszok bármely weboldalon jól mutatnak, de különösen a blogbejegyzéseknél. 

Annak ellenére, hogy a kiemelt kép teljes képernyős, rengeteg tervezési lehetőség kínálkozik a cím és a metaszöveg elhelyezésére. Könnyű megtenni a Divi Theme Builder . 

Ebben a cikkben számos módot fogunk látni, hogyan adhat hozzá teljes képernyős Hero részt a blogbejegyzéssablonjához. Divi.

Kezdjük.

felmérés

Íme egy előnézet arról, hogy mit fogunk tervezni ebben az oktatóanyagban.

Olvassa el: Divi: Hogyan használd a "Gradient Buildert" a képek szebbé tételéhez

Hero szekció Post Title Desktop verzió modullal

Hero szekció Post Title mobilverziós modullal

Alternatív Hero szakaszelrendezés a Post Title asztali verzió modullal

Töltse le a DIVI-t most!!!

Alternatív Hero szakaszelrendezés mobil bejegyzés címe modullal

Hős rész metaadatokkal Asztali verzió

Hős rész metaadatok mobil verzióval

Töltse le a DIVI-t most!!!

Blogbejegyzés-sablonok a teljes képernyős hősrészhez

A blogbejegyzések sablonját itt hozhatja létre Divi Témakészítő a semmiből, vagy töltsön le egy sablont az Elegant Themes Blogról. Megtalálásukhoz keressen a blogon ingyenes blogbejegyzés sablon. Ha letölt egy sablont, mindenképpen csomagolja ki.

Példáinkhoz a  ingyenes blogbejegyzéssablon a Divi divattervezői elrendezési csomagjához . Használjuk az elrendezési csomagot is ingyenes Fejléc és lábléc divattervező .

Töltse le vagy hozza létre a blogbejegyzéssablont a teljes képernyős Hero részhez

Letöltheti blogbejegyzéssablonját, vagy létrehozhat egyet a semmiből. Feltöltünk egyet, de a teljes képernyős Hero Section létrehozásának folyamata ugyanaz.

Lásd még: Divi: Hogyan használjunk maszkokat és háttérmintákat egy hősszekcióhoz

1. módszer: Teljes képernyős bejegyzés címe modul

Ez a módszer a PostTitle modul . Jó választás, ha az összes információt együtt szeretné megjeleníteni. Ha megvan a sablon, kattintson a szerkesztés ikonra a megnyitáshoz.

Az általunk feltöltött sablonnak van egy része a kiemelt képpel. Eltávolítjuk ezt a részt, és hozzáadjuk a Teljes szélességű szakasz a helyén.

választ Teljes szélességű bejegyzés címe a teljes szélességű modulok listájában.

Alapértelmezés szerint minden elem ki van választva. Hagyja őket bekapcsolva. Görgessen ide Kiemelt képelhelyezés és válassza a lehetőséget Cím felett.

• Kiemelt kép elhelyezése: Cím felett

Lapozzon a Háttérszín és állítsa a színt #fff9f2-re

• Háttér: #fff9f2

Címszöveg

Válassza ki a lapot Tervezés. A címszövegnél tartsa meg a H1-et, és válassza a Playfair Display lehetőséget. Állítsa balra igazított értékre, és válassza ki a #34332e színt.

• Title:
  • Rovatszint: H1
  • Betűtípus: Playfair Display
  • Szöveg igazítása: balra igazítva
  • Szöveg színe: #34332e

A Szövegméret , állítsa az asztali verziót 65 képpontra, a mobil verziót 42 képpontra, a sor magasságát pedig 1,2 em-re.

• Cím szövegének mérete (asztali): 65 képpont (asztali), 42 képpont (telefon)
• Címsor magassága: 1,2 em

Meta szöveg

Lapozzon a Meta szöveg. Válassza ki a Montserrat betűtípust, és állítsa közepesre, nagybetűre, jobbra igazításra az asztali verzióhoz és balra igazításra a mobil verzióhoz. Válassza a #7b7975 színt.

• MetaFont:
  • Betűtípus: Montserrat
  • Súly: Közepes
  • Stílus: TT
• Metaszöveg:
  • Igazítás: jobbra (asztali), balra (telefon)
  • Szín: #7b7975

Állítsa be a betűméret az asztali verziónál 14 px, a mobil verziónál 10 px, a betűköz 1 px és a sormagasság 1,6 em. Zárja be a beállításokat, és mentse el a sablont.

• Metaszöveg:
  • Méret (asztali): 14 képpont
  • Méret (telefon): 10 képpont
• Betűtávolság: 1 képpont
• Vonalmagasság: 1,6 em

Cím a háttérképen

Ha úgy dönt, hogy a címet a kiemelt képen szeretné látni, használja ugyanazokat a tervezési beállításokat, és térjen vissza a lapra Tartalom. 

választ Cím/meta háttérkép mert Kiemelt képelhelyezés.

• Kiemelt kép elhelyezése: Cím/meta háttérkép

Lapozzon a Háttér és válassza a lehetőséget Háttér színátmenet. Állítsa a bal színt #fff9f2-re, a jobb színt az rgba-ra (255,255,255,0), az irányt 90 fokra, a kiindulási pozíciót 30%-ra, és válassza az igen lehetőséget, hogy a színátmenetet a háttér képe fölé helyezze. Zárja be és mentse el a beállításokat.

• Gradiens megállók:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• Lejtési irány: 90 fok
• Négyzetes színátmenet a háttérkép felett: IGEN

2. módszer: Teljes képernyős hős rész metaadatokkal

Ez a módszer a szöveg modulokat fogja használni dinamikus tartalom az információért. Ez egy jó lehetőség, ha az összes elemet különböző helyeken szeretné megjeleníteni. 

Először töltse le a sablont, és törölje az első részt. A bal oldali oszlopban újra létrehozzuk a modulokat és azok beállításait, de végigjárjuk őket, hogy konfigurálhassa őket.

Teljes képernyős Hero Section beállítások metaadatokkal

Nyissa meg a beállításait szakasz és görgessen a következőhöz: Háttérkép. Válassza a lehetőséget Háttér színátmenet és módosítsa a beállításokat az alábbiak szerint:

• Gradiens megállók:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• Gradiens iránya: 90 fok
• Négyzetes színátmenet a háttérkép felett: IGEN

választ Háttérkép és válassza az opciót Dinamikus tartalom használata.

Választ Kiemelt kép a lehetőségek között.

Válassza ki a lapot Designés görgessen a következőhöz: Méretezése. Adjon hozzá 100 V-t a minimális magassághoz. Zárja be a szakasz beállításait.

• Minimális magasság: 100vh

Teljes képernyős Hero Section beállítások metaadatokkal

Ezután adjon hozzá egy dupla oszlopsort a szakaszhoz.

Add hozzá a Szöveg modul a jobb oldali oszlopban.

Az ő tartalom, válassza ki Dinamikus tartalom használata.

Választ Bejegyzés/archívum címe az opciók listájában.

• Dinamikus tartalom: bejegyzés/archívum címe

Ugrás a lapra Design.

• Cím:
  • Szöveg: H1
  • Betűtípus: Playfair Display
  • Szöveg igazítása: balra igazítva
  • Szöveg színe: #34332e

Méretéhez szövegek , asztali verziónál 65 képpontra, mobil verziónál 42 képpontra és sormagasságra 1,2 em.

• Cím:
  • Szövegméret: 65 képpont (asztali), 42 képpont (telefon)
  • Vonalmagasság: 1,2 em

Lapozzon a térköz és adja meg az 50%-ot a felső párnázáshoz. Zárja be a Beállításokat.

• Bélés: 50% (felül)

Ezt a cikket ezen is olvashatod: Hogyan készítsünk hősszelvényt a Divi teljes szélességű fejlécmoduljával

Hős rész metaadat kategóriával

Új szakasz hozzáadása rendszeres a Hero rész alatt.

Nyissa meg a beállításait, és állítsa be a szín háttér a #fff9f2 oldalon. Zárja be a Beállításokat.

• Háttérszín: #fff9f2

Ezután adjunk hozzá a vonal 4 oszlopból az új szakaszba.

Teljes képernyős hős metaadat-kategória szövegével

Add hozzá a Szöveg modul a bal oszlopban.

Nyissa meg a modul beállításait, és válassza ki Dinamikus tartalom használata a szöveg törzséhez.

választ Múltbeli kategóriák a listában.

• Dinamikus tartalom: bejegyzés kategóriák

Válassza ki a lapot Design és görgessen le a Címsor szövegéhez. Válassza a H4 lehetőséget. Válassza a Playfair Display lehetőséget a betűtípushoz, és állítsa be közepesre, nagybetűre, jobbra igazításra az asztali verzióhoz és balra igazításra a telefonos verzióhoz. Válassza a #7b7975 színt.

• Cím:
  • Szöveg megjelenítése
  • Betűtípus: Playfair Display
  • Betűsúly: Közepes
  • Stílus: TT
  • Szöveg igazítása: Középre
  • Szöveg színe: #7b7975

Állítsa a betűméretet az asztali verziónál 14 px-re, a mobil verziónál 10 px-re, a betűközt 1 px-re és a sormagasságot 1,6 em-re. Zárja be a beállításokat, és mentse el a sablont.

• 4. címsor:
  • Méret (asztali): 14 képpont
  • Méret (telefon): 10 képpont
  • Betűtávolság: 1 képpont
  • Vonalmagasság: 1,6 em

Lapozzon a térköz és adjunk hozzá 0 képpontot az alsó margóhoz. Zárja be a Beállításokat.

• Margó (alul): 0 képpont

Teljes képernyős hős rész metaszöveg metaadatokkal

Ezután másolja ki a Kategória modult, és húzza a következő oszlopba. A Meta modulok mindegyike ugyanazokkal a beállításokkal rendelkezik. Megmutatjuk, hogyan kell létrehozni az első modult, majd kétszer másolni a többi modul létrehozásához.

Szerző

Nyissa meg a beállításokat, és törölje a tartalom dinamikus.

Kattintson Dinamikus tartalom használata és válasszon Szerző írója.

• Dinamikus tartalom: bejegyzés szerzője

A lapon Design, Módosítsa a következő beállításokat. 

• 4. címsor:
• Betűtípus: Montserrat
• Betűsúly: Közepes
• Stílus: TT
• Szöveg igazítása (Asztal): Középre
• Szöveg igazítása (telefon): balra
• Szín: #7b7975

A paraméterei betűméret tartalmazza:

• Szöveg mérete: 14 képpont (asztali), 10 képpont (telefon)
• Betűtávolság: 1 képpont
• Vonalmagasság: 1,6 em

La alsó margó 0 képpontnak kell lennie.

• Margó (alul): 0 képpont

találka

másolat a Szerző modult, és húzza a következő oszlopba.

Töröld tartalom dynamique aktuális, válassz Dinamikus tartalom használata és válassza a lehetőséget Közzététel dátuma. Zárja be a Beállításokat.

• Dinamikus tartalom: Közzététel dátuma

észrevételek

Különben is, másolni a Közzététel dátuma modult, és húzza az utolsó oszlopba.

Más modulokhoz hasonlóan távolítsa el a dinamikus tartalmat, és válassza ki Dinamikus tartalom használata .

Választ Hozzászólások száma a választásaidból.

• Dinamikus tartalom: hozzászólások száma

Ezúttal adjon meg egy szóközt és a Megjegyzések szót a mezőben Után . Zárja be a kis modált, majd zárja be a beállításokat. Mentse el munkáját.

• Utána: Megjegyzések

Olvassa el: Divi: A Fullwidth Header modul teljes képernyős megjelenítése

Résultats

Hero szekció Post Title Desktop verzió modullal

Hero szekció Post Title mobilverziós modullal

Alternatív Hero szakaszelrendezés a Post Title asztali verzió modullal

Alternatív Hero szakaszelrendezés mobil bejegyzés címe modullal

Hős rész metaadatokkal Asztali verzió

Hős rész a mobilverzió metaadataival

Töltse le a DIVI-t most!!!

Következtetés

Ennyi, ennyi! Így nézzük meg, hogyan adhat hozzá teljes képernyős Hero részt a blogbejegyzéssablonjához. Divi. 

Modulok Divi és a Theme Builder számos lehetőséget kínál a teljes képernyős Hero szakaszok létrehozására. Minden módszer nagyon jól működik, és mindegyiknek megvan a maga előnye. 

Ezekkel a módszerekkel bármely Divi blogbejegyzéssablonhoz hozzáadhat egy teljes képernyős Hero részt.

Reméljük, hogy ez az oktatóanyag inspirációt ad a következő Divi projektjeihez. Ha bármilyen aggálya vagy javaslata van, keressen minket a megjegyzések szakasz hogy megbeszéljük.

Konzultálhat is forrásaink, ha további elemekre van szüksége az internetes oldalak létrehozására irányuló projektek végrehajtásához.

Ne habozzon, tekintse meg útmutatónkat is a WordPress blog létrehozása vagy az egyiket Divi: minden idők legjobb WordPress témája.

De időközben ossza meg ezt a cikket a különböző közösségi hálózatokon.

...