Vytváření cenných blogových příspěvků vyžaduje čas a úsilí. Spolu s hledáním nejlepších témat, která můžete ve svém oboru psát, je také důležité udržet čtenáře v záběru a umožnit jim rychle najít informace, které hledají.
Dobrým způsobem, jak přistupovat k tomuto typu uživatelského zážitku, je nyní sdílet vizuální souhrnné pole na konci příspěvku na blogu, těsně před závěrečnými myšlenkami.
S novými bloky rozložení Divi můžete nyní bez námahy vytvořit souhrnné pole s integrovanými možnostmi Divi. V tomto kurzu vás provedeme procesem a budete si také moci zdarma stáhnout soubor JSON s rozložením!
Začněme znovu!
Použijte šablonu publikace pro šestou tematickou sadu
Stáhněte si Sixth Theme Builder Pack
Souhrnný rámeček, který v tomto tutoriálu znovu vytvoříme, dokonale odpovídá šabloně příspěvku Sixth Theme Builder Pack zdarma. Přístup kblog článek a stáhněte si celé balení.
Přejít na Divi Theme Builder
Pak jděte do Divi Theme Builder.
Stáhněte si publikační šablonu
Klikněte na ikonu v pravém horním rohu a stáhněte si šablonu příspěvku z balíčku Theme Building Pack. Poté nezapomeňte upravit jakékoli změny v nástroji pro tvorbu motivů.
Otevřete existující publikaci Gutenberg nebo vytvořte novou
Jakmile přidáte odpovídající šablonu příspěvku, je čas vytvořit souhrnné pole. Otevřete nebo vytvořte nový příspěvek pomocí Gutenberga.
Přidejte shrnutí názvu H2
Ke konci blogového příspěvku přidáme nový nadpis H2.
Přidejte nový blok Divi online
Dále přidáme nový blok rozvržení Divi.
Vytvořte nové rozvržení uvnitř bloku Divi
Jakmile přidáte blok, budete mít dvě možnosti. Zvolte vytvoření nového rozložení.
Nastavení sekce
Barva pozadí
V editoru bloků rozložení Divi si všimnete části. Otevřete tuto část a použijte pro ni bílé pozadí.
- Barva pozadí: #FFFFFF
vzdálenost
Přepněte na kartu Návrh sekce a přidejte vlastní hodnoty okrajů a výplně.
- Horní okraj: 100px
- Levý okraj: -10% (kancelář), 0% (tablet a telefon)
- Pravý okraj: -10% (kancelář), 0% (tablet a telefon)
- Horní výplň: 0px
- Spodní výplň: 0px
hraniční
Přidejte také poloměr ohraničení.
- Vlevo dole: 16px
- Vpravo dole: 16px
Stínová krabička
S jemným stínem z krabice.
- Síla stínění stínu: 60px
- Síla šíření stínu rámečku: 10px
- Barva stínu: rgba (0,0,0,0,08)
Přidat nový řádek
Struktura sloupců
Pokračujte v přidávání nového řádku do sekce pomocí následující struktury sloupců:
dimenzování
Bez přidání modulu ještě otevřete nastavení řádku a nechte řádek zabírat celou šířku kontejneru sekce.
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Vyrovnání výšek sloupců: Ano
- Šířka: 100%
- Maximální šířka: 100%
vzdálenost
Poté z řádku odstraňte výchozí horní a dolní výplň.
- Horní výplň: 0px
- Spodní výplň: 0px
Nastavení sloupce 1
Barva pozadí
Poté otevřete nastavení ve sloupci 1 a použijte k tomu bílou barvu pozadí.
- Barva pozadí: #FFFFFF
vzdálenost
Přidejte také vlastní hodnoty výplně.
- Horní výplň: 70px
- Spodní výplň: 70px
- Levé čalounění: 70 px
- Pravá výplň: 70px
Stínová krabička
Pokračujte přidáním jemného stínu rámečku s jinou výchozí barvou stínu a podržením kurzoru.
- Síla stínění stínu: 50px
- Výchozí barva stínu: rgba (0,0,0,0)
- Barva stínu kurzoru: rgba (0,0,0,0,15)
Měřítko transformace ukazatele myši
Při přechodu myší také chceme mírně změnit měřítko sloupce.
- Vpravo: 105%
- Nejnižší: 105%
Vznášející se Z index
Doplňte parametry sloupce přidáním ukazatele vznášení z.
- Hover Index Z: 11
Do sloupce přidejte textový modul # 1
Přidejte číslo do oblasti obsahu
Je čas přidat moduly, počínaje prvním textovým modulem. Přidejte do pole číslo obsah.
Přechodové pozadí
Poté přidejte pozadí přechodu.
- Barva 1: # ff5e92
- Barva 2: # ffd4b6
- Směr přechodu: 165deg
Nastavení textu
Přejděte na kartu Návrh modulu a změňte nastavení textu následujícím způsobem:
- Textové písmo: Poppins
- Barva textu: #ffffff
- Velikost textu: 26px
- Zarovnání textu: střed
dimenzování
Poté přiřaďte šířku a výšku.
- Šířka: 150px
- Výška: 150px
hraniční
Přidejte také poloměr ohraničení.
- Vlevo dole, vpravo nahoře a vpravo dole: 100 pixelů
Hlavní prvek CSS
K vycentrování textu v našem kontejneru budeme muset přidat několik řádků kódu CSS do prvku hlavního modulu na kartě Upřesnit.
display: flex;align-items: center;justify-content: center;
Pozice
A parametry modulu ukončíme přemístěním modulu.
- Pozice: absolutní
- Umístění: vlevo nahoře
Do sloupce přidejte textový modul # 2
Přidat obsah H3
Přejděme k dalšímu textovému modulu. Přidejte nějaké obsah H3 dle vašeho výběru.
Nastavení textu H3
Poté upravte velikost textu H3 modulu.
- Název 3 Velikost textu: 23px
vzdálenost
Změňte také nastavení mezer.
- Horní okraj: 100px
- Dolní okraj: 20px
Přidejte do sloupce separační modul
viditelnost
Další modul, který potřebujeme, je separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.
- Zobrazit oddělovač: Ano
Nastavení linky
Přepněte na kartu návrhu modulu a změňte nastavení řádků následujícím způsobem:
- Barva čáry: # ff5e92
- Styl čáry: pevná
- Poloha řádku: vysoká
dimenzování
Upravte také velikost modulu.
- Hmotnost děliče: 2px
- Šířka: 20%
Do sloupce přidejte textový modul # 3
Přidat obsah
Přejděme k dalšímu a poslednímu textovému modulu. Přidejte nějaké obsah De votre choix.
Klonovací sloupec
Po dokončení sloupce a všech jeho modulů můžete klonovat celý sloupec.
Změňte barvu stínu výchozího pole
Otevřete nastavení ve sloupci 2 a změňte výchozí barvu stínu.
- Barva stínu: rgba (0,0,0,0,06)
Změňte pozadí přechodu textového modulu č. 1
Otevřete první textový modul v dalších 2 sloupcích a změňte pozadí přechodu.
- Barva 1: # 7e5ce6
- Barva 2: # 25b8ee
Změňte ohraničení textového modulu č. 1
Také změňte nastavení ohraničení modulu.
- Vlevo nahoře, vlevo dole a vpravo dole: 100 pixelů
Změňte polohu textového modulu # 1
A přemístěte modul na záložce Upřesnit.
- Umístění: vpravo nahoře
Změňte barvu oddělovače
Pokračujte otevřením nastavení separačního modulu. Změňte barvu čáry tak, aby odpovídala novému barevnému schématu.
- Barva čáry: # 7e5ce6
Změňte veškerý obsah
Nakonec upravte celý obsah modulu ve sloupci 2.
Klonovat celou sekci dvakrát
Jakmile dokončíte první část, můžete ji klonovat dvakrát.
Změňte řádkování prvního duplicitního oddílu
Otevřete nastavení v první duplicitní sekci a podle toho změňte hodnoty okrajů:
- Levý okraj: -5% (stolní počítač), 0% (tablet a telefon)
- Pravý okraj: -5% (kancelář), 0% (tablet a telefon)
Změňte řádkování druhého duplicitního oddílu
Otevřete také druhý duplikát, odstraňte všechny hodnoty okrajů a místo toho přidejte dolní okraj.
- Dolní okraj: 100px
Změňte veškerý obsah
Nakonec upravte celý obsah modulu.
Uložte rozložení do knihovny Divi pro opětovné použití
Pokud plánujete použít toto shrnutí v jiných příspěvcích na blogu, nezapomeňte jej uložit do své knihovny Divi, abyste k němu měli snadný přístup! A je to !
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Závěrečné myšlenky
V tomto článku jsme vám ukázali, jak přidat souhrnné pole do vašeho příspěvku Gutenberg pomocí nových bloků rozložení Divi. Souhrnné rámečky jsou skvělým vizuálním způsobem, jak vám pomoci Návštěvníci aby našli informace, které hledají.
Můžete si také stáhnout soubor JSON pro rozvržení zdarma! Pokud máte nějaké dotazy, neváhejte zanechat komentář v sekci komentářů níže.
