Chceli by ste zlepšiť svoje blogové príspevky? divi pridaním sekcie Hrdina?
Celoobrazovkové sekcie hrdinov vyzerajú skvele na každej webovej stránke, no obzvlášť skvelé sú na blogových príspevkoch.
Aj keď je zobrazený obrázok na celú obrazovku, existuje veľa možností dizajnu na umiestnenie názvu a meta textu. Je ľahké robiť s Divi Theme Builder .
V tomto článku uvidíme niekoľko spôsobov, ako do šablóny blogového príspevku pridať sekciu Hrdina na celú obrazovku. Divi.
Začnime.
prehľad
Tu je ukážka toho, čo budeme v tomto návode navrhovať.
Čítajte tiež: Divi: Ako používať "Gradient Builder" na skrášlenie vašich obrázkov
Sekcia Hrdina s modulom verzie Post Title Desktop
Sekcia Hrdina s modulom mobilnej verzie Názov príspevku
Alternatívne rozloženie sekcie hrdinu s modulom pracovnej verzie Post Title
Stiahnite si DIVI teraz!!!
Rozloženie sekcie Alternatívny hrdina s mobilným modulom Názov príspevku
Hrdinská sekcia s metadátami Desktop verzia
Hrdinská sekcia s metadátovou mobilnou verziou
Stiahnite si DIVI teraz!!!
Šablóny blogových príspevkov pre vašu sekciu hrdinu na celú obrazovku
Šablónu blogových príspevkov môžete vytvoriť v divi Theme Builder od začiatku alebo si stiahnite šablónu z blogu Elegant Themes. Ak ich chcete nájsť, hľadajte na blogu „bezplatná šablóna blogového príspevku“. Ak si stiahnete šablónu, nezabudnite ju rozbaliť.
Pre naše príklady použijeme bezplatná šablóna blogového príspevku pre Divi's Fashion Designer Layout Pack . Používame aj balík rozloženia zadarmo Hlavička a päta módna návrhárka .
Stiahnite si alebo vytvorte šablónu blogového príspevku pre sekciu Hrdina na celú obrazovku
Šablónu blogového príspevku si môžete stiahnuť alebo si ju vytvoriť úplne od začiatku. Jednu nahráme, ale proces vytvorenia sekcie hrdinu na celú obrazovku je rovnaký.
Pozri tiež: Divi: Ako používať masky a vzory pozadia pre sekciu hrdinov
Metóda 1: Modul Názov príspevku na celú obrazovku
Táto metóda bude používať Modul PostTitle . Je to dobrá voľba, ak chcete zobraziť všetky informácie spolu. Keď máte šablónu, otvorte ju výberom ikony úprav.
Šablóna, ktorú sme odovzdali, obsahuje sekciu s odporúčaným obrázkom. Túto sekciu odstránime a pridáme a Sekcia na celú šírku na svojom mieste.
vybrať Názov príspevku na celú šírku v zozname modulov s plnou šírkou.
Všetky položky sú predvolene vybraté. Nechajte ich povolené. Prejdite na Umiestnenie odporúčaného obrázka a vyberte položku Nad nadpisom.
- Odporúčané umiestnenie obrázka: Nad názvom
Prejdite na položku Farba pozadia a nastavte farbu na #fff9f2
- Pozadie: #fff9f2
Názov textu
Vyberte kartu Dizajn. Pre text nadpisu ponechajte H1 a vyberte Playfair Display. Nastavte ju na Zarovnané doľava a ako farbu vyberte #34332e.
- Názov:
- Úroveň nadpisu: H1
- Písmo: Playfair Display
- Zarovnanie textu: zarovnané doľava
- Farba textu: #34332e
pre veľkosť textu , nastavte verziu pre počítač na 65px, mobilnú verziu na 42px a výšku riadku na 1,2em.
- Veľkosť textu nadpisu (počítač): 65 pixlov (počítač), 42 pixlov (telefón)
- Výška riadku nadpisu: 1,2 em
Meta text
Prejdite na položku Meta Text. Pre písmo vyberte Montserrat a nastavte ho na stredné, veľké, zarovnanie doprava pre verziu pre stolné počítače a zarovnanie doľava pre mobilnú verziu. Pre farbu vyberte #7b7975.
- MetaFont:
- Písmo: Montserrat
- Hmotnosť: Stredná
- Štýl: TT
- Meta Text:
- Zarovnanie: vpravo (stolný počítač), vľavo (telefón)
- Farba: #7b7975
Nastaviť veľkosť písma pre desktopovú verziu 14 px, pre mobilnú verziu 10 px, medzera medzi písmenami 1 px a výška riadku 1,6 em. Zatvorte nastavenia a uložte šablónu.
- Meta Text:
- Veľkosť (počítač): 14 pixelov
- Veľkosť (telefón): 10 pixelov
- Medzera medzi písmenami: 1px
- Výška riadku: 1,6 em
Názov na obrázku na pozadí
Ak sa rozhodnete, že chcete, aby sa názov zobrazil na odporúčanom obrázku, použite rovnaké nastavenia dizajnu a vráťte sa na kartu obsah.
vybrať Názov/obrázok meta pozadia pre Umiestnenie odporúčaného obrázka.
- Odporúčané umiestnenie obrázka: názov/obrázok meta pozadia
Prejdite na položku pozadia a vyberte položku Prechod pozadia. Nastavte ľavú farbu na #fff9f2, pravú farbu na rgba(255,255,255,0), smer na 90 stupňov, počiatočnú pozíciu na 30 % a výberom možnosti áno umiestnite prechod nad obrázok pozadia. Zatvorte a uložte nastavenia.
- Zarážky prechodu:
- 30 %: #fff9f2
- 100 %: rgba (255,255,255,0)
- Smer gradientu: 90 stupňov
- Štvorcový prechod nad obrázkom na pozadí: ÁNO
Metóda 2: Sekcia hrdinu na celú obrazovku s metadátami
Táto metóda bude používať textové moduly s dynamický obsah pre informáciu. Toto je dobrá voľba, ak chcete zobraziť všetky položky na rôznych miestach.
Najprv si stiahnite šablónu a odstráňte prvú časť. Znovu vytvoríme moduly a ich nastavenia v ľavom stĺpci, ale prejdeme si ich, aby ste ich mohli nakonfigurovať.
Nastavenia sekcie hrdinu na celú obrazovku s metadátami
Otvorte nastavenia časť a prejdite na Obrázok na pozadí. Vyberte Prechod pozadia a zmeňte nastavenia takto:
- Zarážky prechodu:
- 30 %: #fff9f2
- 100 %: rgba (255,255,255,0)
- Smer gradientu: 90 stupňov
- Štvorcový prechod nad obrázkom na pozadí: ÁNO
vybrať Obrázok na pozadí a vyberte možnosť Použite dynamický obsah.
Vybrať vybraný obrázok v možnostiach.
Vyberte kartu dizajna prejdite na Dimenzovanie. Pridajte 100vh do minimálnej výšky. Zatvorte nastavenia sekcie.
- Minimálna výška: 100vh
Nastavenia sekcie hrdinu na celú obrazovku s metadátami
Potom do sekcie pridajte riadok s dvoma stĺpcami.
Pridaj Textový modul v pravom stĺpci.
Pre jeho obsah, vyberte položku Použite dynamický obsah.
Vybrať Názov príspevku/archívu v zozname možností.
- Dynamický obsah: Názov príspevku/archívu
Prejdite na kartu Design.
- nadpis:
- Text: H1
- Písmo: Playfair Display
- Zarovnanie textu: zarovnané doľava
- Farba textu: #34332e
Pre veľkosť texty , nastavená pre desktopovú verziu na 65px, pre mobilnú verziu na 42px a výšku riadku na 1,2em.
- nadpis:
- Veľkosť textu: 65px (počítač), 42px (telefón)
- Výška riadku: 1,2 em
Prejdite na položku riadkovanie a zadajte 50 % pre hornú výplň. Zatvorte Nastavenia.
- Výplň: 50 % (horná časť)
Tento článok si môžete prečítať aj na: Ako vytvoriť sekciu hrdinu s modulom Divi Fullwidth Header Module
Sekcia hrdinu s kategóriou metadát
Pridať novú sekciu pravidelne v sekcii Hrdina.
Otvorte jeho nastavenia a nastavte farba pozadie na #fff9f2. Zatvorte Nastavenia.
- Farba pozadia: #fff9f2
Potom pridajte a linka 4 stĺpcov do novej sekcie.
Hrdina na celú obrazovku s textom kategórie metadát
Pridaj Textový modul v ľavom stĺpci.
Otvorte nastavenia modulu a vyberte Použite dynamický obsah pre telo textu.
vybrať Minulé kategórie v zozname.
- Dynamický obsah: kategórie príspevkov
Vyberte kartu dizajn a prejdite nadol na Text nadpisu. Vyberte H4. Pre písmo vyberte Playfair Display a nastavte ho na stredné, veľké, zarovnanie doprava pre verziu pre stolné počítače a zarovnanie doľava pre verziu pre telefón. Pre farbu vyberte #7b7975.
- nadpis:
- Textové zobrazenie
- Písmo: Playfair Display
- Hmotnosť písma: stredná
- Štýl: TT
- Zarovnanie textu: Stred
- Farba textu: #7b7975
Veľkosť písma pre desktopovú verziu nastavte na 14 px, pre mobilnú verziu na 10 px, medzery medzi písmenami na 1 px a výšku riadku na 1,6 em. Zatvorte nastavenia a uložte šablónu.
- Nadpis 4:
- Veľkosť (počítač): 14 pixelov
- Veľkosť (telefón): 10 pixelov
- Medzera medzi písmenami: 1px
- Výška riadku: 1,6 em
Prejdite na položku riadkovanie a pridajte 0px na spodný okraj. Zatvorte Nastavenia.
- Okraj (dole): 0px
Sekcia Hrdina na celú obrazovku s metadátami Meta Text
Potom skopírujte modul Kategória a presuňte ho do ďalšieho stĺpca. Každý z modulov Meta má rovnaké nastavenia. Ukážeme si, ako vytvoriť prvý modul a potom ho dvakrát skopírovať, aby sa vytvorili ďalšie moduly.
Autor
Otvorte nastavenia a odstráňte obsah dynamický.
Kliknite na Použite dynamický obsah a vyber si Autor príspevku.
- Dynamický obsah: Autor príspevku
V záložke dizajn, Zmeňte nasledujúce nastavenia.
- Nadpis 4:
- Písmo: Montserrat
- Hmotnosť písma: stredná
- Štýl: TT
- Zarovnanie textu (počítač): Stred
- Zarovnanie textu (telefón): doľava
- Farba: #7b7975
Parametre veľkosť písma zahŕňajú:
- Veľkosť textu: 14px (počítač), 10px (telefón)
- Medzera medzi písmenami: 1px
- Výška riadku: 1,6 em
La spodný okraj musí mať 0px.
- Okraj (dole): 0px
dátum
kópie modul Autor a presuňte ho do ďalšieho stĺpca.
Vymaž to obsah dynamický prúd, vyberte si Použite dynamický obsah a vyberte položku Dátum zverejnenia príspevku. Zatvorte Nastavenia.
- Dynamický obsah: Dátum zverejnenia
Komentáre
Enfin, kópie modul Dátum zverejnenia príspevku a presuňte ho do posledného stĺpca.
Rovnako ako pri iných moduloch odstráňte dynamický obsah a vyberte Použite dynamický obsah .
Vybrať Počet komentárov z vašich možností.
- Dynamický obsah: Počet komentárov
Tentoraz pridajte do poľa medzeru a slovo Komentáre Po . Zatvorte malý modál a potom zatvorte nastavenia. Uložte si prácu.
- Po: Komentáre
Prečítajte si tiež: Divi: Ako zobraziť modul Fullwidth Header na celej obrazovke
résultats
Sekcia Hrdina s modulom verzie Post Title Desktop
Sekcia Hrdina s modulom mobilnej verzie Názov príspevku
Alternatívne rozloženie sekcie hrdinu s modulom pracovnej verzie Post Title
Rozloženie sekcie Alternatívny hrdina s mobilným modulom Názov príspevku
Hrdinská sekcia s metadátami Desktop verzia
Sekcia Hrdina s metadátami mobilnej verzie
Stiahnite si DIVI teraz!!!
záver
To je všetko! Toto je náš pohľad na to, ako pridať sekciu Hrdina na celú obrazovku do vašej šablóny blogového príspevku. divi.
Moduly divi a Theme Builder ponúkajú niekoľko možností na vytváranie sekcií hrdinov na celú obrazovku. Všetky metódy fungujú veľmi dobre a všetky majú svoje výhody.
Pomocou týchto metód môžete pridať sekciu Hero na celú obrazovku do akejkoľvek šablóny blogového príspevku Divi.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
