Chtěli byste zlepšit své blogové příspěvky? divi přidáním sekce Hrdina do něj?
Sekce hrdinů na celé obrazovce vypadají skvěle na jakékoli webové stránce, ale obzvláště skvělé jsou na příspěvcích na blogu.
Přestože je zobrazený obrázek na celou obrazovku, existuje spousta možností designu pro umístění názvu a metatextu. Je snadné to udělat s Divi Theme Builder .
V tomto článku uvidíme několik způsobů, jak do šablony příspěvku na blogu přidat sekci Hrdina na celou obrazovku. Divi.
Začněme.
přehled
Zde je náhled toho, co budeme v tomto tutoriálu navrhovat.
Čtěte také: Divi: Jak používat "Gradient Builder" ke zkrášlení vašich obrázků
Sekce hrdiny s modulem verze Post Title Desktop
Sekce hrdiny s modulem mobilní verze Post Title
Rozvržení sekce Alternativní hrdina s modulem verze pro stolní verzi Post Title
Stáhněte si DIVI hned teď!!!
Rozvržení sekce Alternativní hrdina s mobilním modulem Název příspěvku
Sekce hrdiny s metadaty Desktop verze
Sekce hrdiny s metadatovou mobilní verzí
Stáhněte si DIVI hned teď!!!
Šablony blogových příspěvků pro vaši sekci hrdinů na celé obrazovce
Šablonu blogových příspěvků můžete vytvořit v divi Theme Builder od začátku nebo si stáhněte šablonu z blogu Elegant Themes Blog. Chcete-li je najít, hledejte na blogu „Šablona příspěvku na blog zdarma“. Pokud si stáhnete šablonu, nezapomeňte ji rozbalit.
Pro naše příklady použijeme bezplatná šablona blogového příspěvku pro Divi's Fashion Designer Layout Pack . Používáme také layout pack zdarma Záhlaví a zápatí módní návrhářka .
Stáhněte si nebo vytvořte šablonu příspěvku na blogu pro sekci Hrdina na celé obrazovce
Šablonu příspěvku na blogu si můžete stáhnout nebo si ji vytvořit úplně od začátku. Jeden nahrajeme, ale proces vytvoření sekce Hrdina na celou obrazovku je stejný.
Viz také: Divi: Jak používat masky a vzory pozadí pro sekci Hrdina
Metoda 1: Modul Název příspěvku na celé obrazovce
Tato metoda bude používat Modul PostTitle . Je to dobrá volba, pokud chcete zobrazit všechny informace dohromady. Jakmile budete mít šablonu, otevřete ji výběrem ikony úprav.
Šablona, kterou jsme nahráli, má část s doporučeným obrázkem. Tuto sekci odstraníme a přidáme a Sekce v plné šířce na svém místě.
vybrat Název příspěvku v plné šířce v seznamu modulů s plnou šířkou.
Ve výchozím nastavení jsou vybrány všechny položky. Nechte je povolené. Přejděte na Umístění doporučeného obrázku a zvolte Nad nadpisem.
- Umístění doporučeného obrázku: Nad názvem
Přejděte na Barva pozadí a nastavte barvu na #fff9f2
- Pozadí: #fff9f2
Název textu
Vyberte kartu Design. Pro text titulku ponechte H1 a zvolte Playfair Display. Nastavte ji na zarovnané doleva a jako barvu vyberte #34332e.
- Název:
- Úroveň nadpisu: H1
- Písmo: Playfair Display
- Zarovnání textu: zarovnání doleva
- Barva textu: #34332e
K velikost textu , nastavte verzi pro stolní počítače na 65 pixelů, mobilní verzi na 42 pixelů a výšku řádku na 1,2 em.
- Velikost textu nadpisu (počítač): 65 pixelů (počítač), 42 pixelů (telefon)
- Výška řádku nadpisu: 1,2 em
Meta text
Přejděte na Meta Text. Jako písmo vyberte Montserrat a nastavte jej na střední, velká, zarovnání doprava pro verzi pro stolní počítače a zarovnání doleva pro mobilní verzi. Vyberte barvu #7b7975.
- MetaFont:
- Písmo: Montserrat
- Hmotnost: Střední
- Styl: TT
- Metatext:
- Zarovnání: vpravo (počítač), vlevo (telefon)
- Barva: #7b7975
Nastav velikost písma u desktopové verze 14 px, u mobilní verze 10 px, mezera mezi písmeny 1 px a výška řádku 1,6 em. Zavřete nastavení a uložte šablonu.
- Metatext:
- Velikost (počítač): 14 pixelů
- Velikost (telefon): 10px
- Mezera mezi písmeny: 1px
- Výška řádku: 1,6 em
Název na obrázku na pozadí
Pokud se rozhodnete, že chcete, aby se název objevil na doporučeném obrázku, použijte stejné nastavení návrhu a vraťte se na kartu Obsah.
vybrat Název/obrázek na pozadí metadat pro Umístění doporučeného obrázku.
- Doporučené umístění obrázku: Název/obrázek na pozadí metadat
Přejděte na Pozadí a zvolte Přechod na pozadí. Nastavte levou barvu na #fff9f2, pravou barvu na rgba(255,255,255,0), směr na 90 stupňů, počáteční pozici na 30 % a zvolte ano pro umístění přechodu nad obrázek pozadí. Zavřete a uložte nastavení.
- Přechodové zastávky:
- 30 %: #fff9f2
- 100 %: rgba (255,255,255,0)
- Směr gradientu: 90 stupňů
- Čtvercový přechod nad obrázkem pozadí: ANO
Metoda 2: Sekce hrdiny na celou obrazovku s metadaty
Tato metoda bude používat textové moduly s dynamický obsah pro informaci. Toto je dobrá volba, pokud chcete zobrazit všechny položky na různých místech.
Nejprve si stáhněte šablonu a odstraňte první sekci. Znovu vytvoříme moduly a jejich nastavení v levém sloupci, ale projdeme si je, abyste je mohli nakonfigurovat.
Nastavení sekce hrdiny na celou obrazovku s metadaty
Otevřete nastavení sekce a přejděte na Obrázek na pozadí. Vybrat Přechod na pozadí a změňte nastavení následovně:
- Přechodové zastávky:
- 30 %: #fff9f2
- 100 %: rgba (255,255,255,0)
- Směr gradientu: 90 stupňů
- Čtvercový přechod nad obrázkem pozadí: ANO
vybrat Obrázek na pozadí a vyberte možnost Používejte dynamický obsah.
Vybrat Vybraný obrázek v možnostech.
Vyberte kartu Designa přejděte na Rozměry. Přidejte 100vh k minimální výšce. Zavřete nastavení sekce.
- Minimální výška: 100vh
Nastavení sekce hrdiny na celou obrazovku s metadaty
Dále do sekce přidejte řádek se dvěma sloupci.
Přidat Textový modul v pravém sloupci.
Pro jeho obsah, vyberte Používejte dynamický obsah.
Vybrat Název příspěvku/archivu v seznamu možností.
- Dynamický obsah: Název příspěvku/archivu
Přejděte na kartu Design.
- Nadpis:
- Text: H1
- Písmo: Playfair Display
- Zarovnání textu: zarovnání doleva
- Barva textu: #34332e
Pro velikost texty , nastaveno pro desktopovou verzi na 65px, pro mobilní verzi na 42px a výšku řádku na 1,2em.
- Nadpis:
- Velikost textu: 65 pixelů (počítač), 42 pixelů (telefon)
- Výška řádku: 1,2 em
Přejděte na Vzdálenost a zadejte 50 % pro horní výplň. Zavřete Nastavení.
- Polstrování: 50 % (nahoře)
Tento článek si můžete přečíst také na: Jak vytvořit sekci hrdiny pomocí modulu Divi Fullwidth Header Module
Sekce hrdiny s kategorií metadat
Přidat novou sekci pravidelně v sekci Hrdina.
Otevřete jeho nastavení a nastavte barva pozadí na #fff9f2. Zavřete Nastavení.
- Barva pozadí: #fff9f2
Poté přidejte a řádek 4 sloupců do nové sekce.
Hrdina na celou obrazovku s textem kategorie metadat
Přidat Textový modul v levém sloupci.
Otevřete nastavení modulu a vyberte Používejte dynamický obsah pro tělo textu.
vybrat Minulé kategorie v seznamu.
- Dynamický obsah: Kategorie příspěvků
Vyberte kartu Design a přejděte dolů na Text nadpisu. Vyberte H4. Vyberte Playfair Display pro písmo a nastavte jej na střední, velká, zarovnání vpravo pro verzi pro stolní počítače a zarovnání doleva pro verzi pro telefon. Vyberte barvu #7b7975.
- Nadpis:
- Textové zobrazení
- Písmo: Playfair Display
- Tloušťka písma: střední
- Styl: TT
- Zarovnání textu: Střed
- Barva textu: #7b7975
Nastavte velikost písma pro desktopovou verzi na 14 px, pro mobilní verzi na 10 px, mezery mezi písmeny na 1 px a výšku řádku na 1,6 em. Zavřete nastavení a uložte šablonu.
- Nadpis 4:
- Velikost (počítač): 14 pixelů
- Velikost (telefon): 10px
- Mezera mezi písmeny: 1px
- Výška řádku: 1,6 em
Přejděte na Vzdálenost a přidejte 0px na spodní okraj. Zavřete Nastavení.
- Okraj (dole): 0px
Sekce hrdiny na celou obrazovku s metadaty Meta Text
Dále zkopírujte modul Kategorie a přetáhněte jej do dalšího sloupce. Každý z modulů Meta má stejné nastavení. Ukážeme si, jak vytvořit první modul a poté jej dvakrát zkopírovat pro vytvoření dalších modulů.
Autor
Otevřete nastavení a odstraňte obsah dynamický.
Klepněte na tlačítko Používejte dynamický obsah a zvolte Autor příspěvků.
- Dynamický obsah: Autor příspěvku
V záložce Design, Změňte následující nastavení.
- Nadpis 4:
- Písmo: Montserrat
- Tloušťka písma: střední
- Styl: TT
- Zarovnání textu (počítač): Střed
- Zarovnání textu (telefon): doleva
- Barva: #7b7975
Parametry velikost písma zahrnout:
- Velikost textu: 14px (počítač), 10px (telefon)
- Mezera mezi písmeny: 1px
- Výška řádku: 1,6 em
La spodní okraj musí mít 0px.
- Okraj (dole): 0px
Datum
kopie modulu Autor a přetáhněte jej do dalšího sloupce.
Smazat to obsah dynamique proud, vyberte si Používejte dynamický obsah a zvolte Datum publikování příspěvku. Zavřete Nastavení.
- Dynamický obsah: Datum zveřejnění
commentaires
A konečně, kopie modul Datum publikování příspěvku a přetáhněte jej do posledního sloupce.
Stejně jako u jiných modulů odeberte dynamický obsah a vyberte Používejte dynamický obsah .
Vybrat Počet komentářů z vašich voleb.
- Dynamický obsah: Počet komentářů k příspěvkům
Tentokrát přidejte do pole mezeru a slovo Komentáře Po . Zavřete malý modal a poté zavřete nastavení. Uložte si práci.
- Po: Komentáře
Čtěte také: Divi: Jak zobrazit modul Fullwidth Header na celou obrazovku
Résultats
Sekce hrdiny s modulem verze Post Title Desktop
Sekce hrdiny s modulem mobilní verze Post Title
Rozvržení sekce Alternativní hrdina s modulem verze pro stolní verzi Post Title
Rozvržení sekce Alternativní hrdina s mobilním modulem Název příspěvku
Sekce hrdiny s metadaty Desktop verze
Sekce hrdiny s metadaty mobilní verze
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
To je vše! Toto je náš pohled na to, jak do šablony příspěvku na blogu přidat sekci Hrdina na celou obrazovku. divi.
Moduly divi a Theme Builder nabízí několik možností pro vytváření sekcí hrdinů na celé obrazovce. Všechny metody fungují velmi dobře a všechny mají své výhody.
Pomocí těchto metod můžete přidat sekci Hrdina na celou obrazovku do jakékoli šablony blogového příspěvku Divi.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
