Když zefektivníte způsob vytváření blogových příspěvků na vašem Webové stránky, je pravděpodobné, že chcete někam do svého článku zahrnout atraktivní CTA. Nyní s novou integrací Divi Gutenberg Layout Block můžete snadno přidat nový blok vytvořený Divi kamkoli do svého příspěvku na blogu Gutenberg. To vám umožní zachovat obsah celkový příspěvek na blogu v prostředí Gutenberg, přičemž stále vytváříte vlastní výzvu k akci Divi pomocí vestavěných možností Divi. Nejlepší z obou světů! V tomto tutoriálu vám ukážeme, jak přidat vložený, animovaný blok rozvržení Divi CTA do vašeho příspěvku Gutenberg. Budeme také zdarma sdílet soubor JSON s blokem rozložení Divi CTA!
Pojďme.
Možný výsledek
Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.
Import bloku rozvržení JSON
Stáhněte si rozvržení v knihovně Divi
Chcete-li importovat soubor JSON, který jste si mohli stáhnout výše, přejděte do knihovny Divi na zadní straně řídicího panelu WordPress a klikněte na možnost Importovat a exportovat.
Poté vyberte soubor JSON ve složce pro stahování a klikněte na „Import rozvržení Divi Builderu“.
Přidejte nový Divi blok uvnitř Gutenbergu
Po importu rozložení získáte přístup ke své zprávě Gutenberg a přidáte nový blok rozložení Divi.
Importujte soubor JSON z uložených prezentací
Poté klikněte na „Načíst z knihovny“, přejděte na „Vaše uložená rozložení“ a vyberte rozložení pro import bloku rozložení Divi CTA do vašeho příspěvku na blogu. A je to!
Začněme znovu!
Použijte publikační šablonu pro třetí sadu témat
Použijte třetí sadu tvůrců motivů
Je čas začít vytvářet od nuly! Za prvé, design, který znovu vytváříme, odpovídá třetímu balíčku pro vytváření motivů, který byl publikován na blogu Divi. Přejít na článek a stáhněte si soubory JSON pro tuto sadu pro vytváření motivů.
Přejít na Divi Theme Builder
Jakmile stáhnete třetí balíček pro vytváření motivů, získáte přístup k nástroji Divi Theme Builder.
Stáhněte si publikační šablonu
Stáhněte si šablonu příspěvku Theme Builder Pack kliknutím na ikonu v pravém horním rohu.
Poté vyberte šablonu příspěvku a klikněte na „Importovat šablony šablony Divi Theme Builder“. Nezapomeňte také uložit změny do nástroje pro tvorbu motivů. V tomto okamžiku jsme ke všem našim příspěvkům přiřadili šablonu blogového příspěvku z Theme Building Pack.
Otevřete existující publikaci Gutenberg nebo vytvořte novou
Dalším krokem je přidání bloku rozložení Divi CTA do našeho příspěvku Gutenberg. Chcete-li to provést, otevřete existující článek nebo vytvořte nový.
Přidejte nový blok Divi online
Jakmile jste uvnitř zprávy, můžete přidat nový blok rozložení Divi.
Vytvořte nové rozvržení uvnitř bloku Divi
Pak budete mít dvě možnosti. Vyberte možnost „Vytvořit nové rozložení“.
Nastavení sekce
vzdálenost
Jakmile se dostanete do editoru bloků rozložení Divi, všimnete si sekce. Otevřete tuto sekci a přidejte vlastní hodnoty okrajů, abyste vytvořili prostor kolem kontejneru sekce.
- Horní okraj: 50px
- Dolní okraj: 50px
- Levý okraj: -10%
- Pravý okraj: -10%
Přidat řádek # 1
Struktura sloupců
Pokračujte v přidávání nového řádku pomocí následující struktury sloupců:
dimenzování
Bez přidání dalších modulů otevřete parametry linky a zvyšte šířku a maximální šířku.
- Šířka: 100%
- Maximální šířka: 100%
Do sloupce přidejte oddělovač # 1
viditelnost
Je čas přidat moduly, počínaje separačním modulem. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.
- Zobrazit oddělovač: Ano
Linka
Přepněte na kartu návrhu modulu a změňte nastavení řádků následujícím způsobem:
- Barva čáry: # fc526e
- Styl čáry: pevná
- Poloha řádku: vysoká
dimenzování
Změňte také parametry velikosti.
- Hmotnost děliče: 3px
- Šířka: 30%
- Zarovnání modulu: vpravo
- Výška: 3px
Animace
Podle toho změňte nastavení animace:
- Styl animace: Snímek
- Směr animace: vlevo
- Délka animace: 2000 XNUMX ms
- Zpoždění animace: 500 XNUMX ms
- Intenzita animace: 100%
- Neprůhlednost začátku animace: 0%
Do sloupce přidejte oddělovač # 2
viditelnost
Pojďme k dalšímu separačnímu modulu. Opět se ujistěte, že je zapnutá možnost „Zobrazit oddělovač“.
- Zobrazit oddělovač: Ano
Linka
Poté přejděte na kartu Návrh modulu a změňte nastavení řádků následujícím způsobem:
- Barva čáry: # e1e3e8
- Styl čáry: pevná
- Poloha řádku: vysoká
dimenzování
Poté upravte parametry pro dimenzování modulu.
- Hmotnost děliče: 3px
- Výška: 3px
vzdálenost
Přidejte také vlastní hodnoty mezer.
- Levý okraj: 10%
- Pravý okraj: -20%
Animace
A dokončete nastavení modulu změnou nastavení animace následujícím způsobem:
- Styl animace: Snímek
- Směr animace: vlevo
- Délka animace: 2000 XNUMX ms
- Zpoždění animace: 500 XNUMX ms
- Intenzita animace: 100%
- Neprůhlednost začátku animace: 100%
Můžete přidat tolik oddělovačů, kolik chcete vyladit.
Přidejte řádek # 2
Struktura sloupců
Přidejte do řádku další řádek pomocí následující struktury sloupců:
dimenzování
Bez přidání dalších modulů otevřete parametry linky a upravte parametry velikosti takto:
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Šířka: 70%
- Zarovnání čáry: střed
Do sloupce přidejte textový modul # 1
Přidat obsah H2
Dále přidejte první textový modul do sloupce řádku pomocí obsah H2 dle vašeho výběru.
Nastavení textu H2
Přepněte na kartu design a odpovídajícím způsobem změňte nastavení textu H2:
- Barva textu položky 2: # fc526e
- Záhlaví 2 Velikost textu: 28 px
vzdálenost
Poté přidejte vlastní hodnoty výplně.
- Horní výplň: 50px
- Spodní výplň: 50px
- Levá výplň: 50px
hraniční
Používáme také levý rámeček.
- Šířka levého okraje: 2px
- Barva levého okraje: # fc526e
Animace
A dokončete parametry modulu přidáním přizpůsobené animace.
- Styl animace: Flip
- Směr animace: Střed
- Zpoždění animace: 1500 XNUMX ms
Do sloupce přidejte textový modul # 2
Přidat obsah
Přidejte další textový modul těsně pod předchozí pomocí obsah De votre choix.
vzdálenost
Přesuňte se na kartu návrhu modulu a podle toho změňte hodnoty výplně:
- Horní výplň: 50px
- Spodní výplň: 50px
- Pravá výplň: 50px
Hranice
Poté přidejte horní a pravý okraj.
- Horní a pravý okraj: 2 pixely
- Barva horního a pravého okraje: # fc526e
Animace
A dokončete nastavení modulu změnou nastavení animace následujícím způsobem:
- Styl animace: Flip
- Směr animace: Střed
- Zpoždění animace: 1700 XNUMX ms
Do sloupce přidejte modul tlačítek
Přidat kopii
Další a poslední modul, který v tomto řádku potřebujeme, je modul s tlačítky. Přidejte kopii podle vašeho výběru.
Nastavení tlačítek
Přepněte na kartu návrhu modulu a změňte nastavení tlačítek následujícím způsobem:
- Pro tlačítko použijte vlastní styly: Ano
- Velikost textu tlačítka: 13px
- Barva textu tlačítka: #ffffff
- Barevný přechod 1: # ff5b84
- Barevný gradient 2: # f94857
- Typ přechodu: lineární
- Směr přechodu: 165deg
- Šířka ohraničení tlačítka: 0px
- Poloměr ohraničení tlačítka: 0px
- Mezery mezi tlačítky: 1px
- Tlačítko písmo: Montserrat
- Hmotnost tlačítka: Semi bold
- Styl písma tlačítka: velká písmena
vzdálenost
Poté přidejte vlastní horní a dolní výplň.
- Horní výplň: 16px
- Spodní výplň: 16px
Animace
A dokončete parametry modulu přidáním následující animace:
- Styl animace: Flip
- Zpoždění animace: 1900 XNUMX ms
Klonujte řádek č. 1 a umístěte jej do dolní části sekce
Jakmile dokončíte první a druhý řádek, můžete klonovat první řádek a umístit duplikát do dolní části sekce.
Změňte pořadí oddělovačů
Změňte místa pro první a poslední oddělovací moduly.
Závěrečné myšlenky
V tomto článku jsme vám ukázali, jak využít výhod nové integrace Divi Gutenberg a přidat do svého blogu Gutenberg inline, animovaný blok CTA CTA Divi. Je to skvělý způsob, jak zvýraznit vaši oblíbenou výzvu k akci Návštěvníci přečtěte si obsah svého příspěvku na blogu.
