Lepkavé postranní pruhy jsou extrémně účinné při přitahování pozornosti Návštěvníci aniž by byl rušivý nebo rušivý. Trik spočívá v tom, že do postranního panelu zahrnete jeden nebo dva prvky, které „zůstanou viditelné“ nebo budou připevněny ke straně obsah příspěvku, když uživatel posouvá stránku. Jedná se o osvěžující alternativu k tradičnímu rozvržení postranního panelu, protože působí dojmem moderního rozvržení v plné šířce (bez postranního panelu) s výhodou zobrazení důležitých výzev k akci na straně stránky, když je to nutné.
V tomto výukovém programu vám ukážeme, jak přidat rychlé výzvy k akci do šablony blogového příspěvku pomocí nástroje Divi Theme Builder. Použití tohoto rozvržení je značné. Bude fungovat téměř pro každou stránku nebo šablonu příspěvku. Navíc se nemusíte omezovat na CTA; můžete si vybrat přidat moduly Divi podle vašeho výběru.
Co potřebujete, abyste mohli začít
Chcete-li začít, musíte nainstalovat a aktivovat téma Divi . Ujistěte se, že máte nejnovější verzi Divi.
K testování požadovaného výsledku budete také potřebovat alespoň jednu zprávu vytvořenou pomocí Divi Builderu.
Poté jste připraveni odejít.
přehled
Zde je rychlý přehled lepivých ACTů, které byly přidány do šablony příspěvku na blogu v Divi.
Jak přidat pevné výzvy k akci do šablony blogového příspěvku v Divi
Přidání šablony tvůrce motivu
Prvním krokem je import naší předdefinované šablony na náš web. Budeme používat publikační šablonu Divi Theme Builder Pack # 1.
Chcete-li začít, přejděte na Divi > Generátor témata. Klikněte na ikonu přenositelnosti v pravé horní části stránky. V modálu přenositelnosti vyberte kartu import a ze složky vyberte soubor divi-theme-builder-pack-1-post-template.json. Pokud máte na webu aktuálně nainstalované šablony, nezapomeňte zrušit zaškrtnutí všech možností, které mohou přepsat vaše aktuální šablony. Poté klikněte na tlačítko importovat.
Vytvořte šablonu příspěvku na blogu
Jakmile je šablona importována, jsme připraveni přidat naše nové CTA do postranního panelu, který je lepivý k rozložení šablony. Chcete-li to provést, klikněte na ikonu úprav vlastní oblasti těla.
Přidáno rozložení duálního postranního panelu pro uchování CTA postranního panelu
V Editoru rozvržení modelu najděte řádek obsahující modul Publikovat. obsah a nahradit rozvržení sloupců strukturou sloupců jedna pětina na tři pětiny na jednu pětinu (1/5 3/5 1/5). To nám umožní udržet sloupec vystředěný pro obsah příspěvku a zároveň poskytuje dvě sekce na každé straně pro naše lepivé CTA.
Po změně struktury sloupce přetáhněte modul publikování obsahu do středního sloupce.
Aktualizujte parametry linky
Otevřete nastavení linky a aktualizujte následující možnosti návrhu:
- Použijte vlastní šířku okapu: ANO
- Šířka okapu: 2
- Šířka: 100% (desktop), 90% (tablet)
- Maximální šířka: 1500px
To nám poskytne prostor, který potřebujeme pro naši konfiguraci dvojitého postranního panelu.
Aktualizujte nastavení sloupce 1
Poté otevřete nastavení sloupce 1 a přidejte tomuto sloupci vlastní třídu CSS:
- Třída CSS: sticky-cta
Přidání postranního panelu CTA do levého sloupce
Nyní jsme připraveni na první výzvu k akci. Přidejte hovor do akčního modulu v levém sloupci.
Stylizovat postranní panel CTA
Aktualizujte nastavení následovně:
Obsah
- Tlačítko: «Klikněte zde»
- Body: „Váš obsah jde sem. Upravte nebo odstraňte tento text online nebo v nastavení obsahu modulu. “
- URL odkazu na tlačítko: #
Návrh textu těla
- Body Font: Montserrat
- Hmotnost písma: polotučné
- Text těla: Správné zarovnání
- Barva těla textu: # 444444
- Velikost textu těla: 22px (desktop), 18px (tablet)
- Výška těla: 1.3em
knoflík
- Velikost textu tlačítka: 14px
- Barva textu tlačítka: #ffffff
- Barva pozadí tlačítka: # 6148df
- Šířka okraje tlačítka: 0px
- Poloměr tlačítka: 80px
- Hmotnost písma: tučné
- Styl písma tlačítka: TT
- Výplň tlačítek: 12px nahoře, 12px dole, 22px vlevo, 22px vpravo
Šířka, zarovnání, čalounění a obrubníky
- Šířka: 100%
- Maximální šířka: 320px
- Zarovnání modulu: vpravo
- Výplň: 10px vlevo, 10px vpravo
- Šířka horního okraje: 10px
- Barva horního okraje: #eeeeee
- Šířka spodního okraje: 10px
- Barva dolního okraje: #eeeeee
Přidání postranního panelu CTA do pravého sloupce
Chcete-li vytvořit CTA pro pravý sloupec, zkopírujte ten, který jsme právě vytvořili, a vložte jej do sloupce zcela vpravo. Poté aktualizujte nastavení duplikátu následujícím způsobem:
- Zarovnání textu: vlevo
- Zarovnání modulu: vlevo
Aktualizujte nastavení sloupce 3
U této CTA v pravém sloupci přidáme do sloupce horní okraj, abychom určili počáteční polohu postranního panelu CTA ve spodním bodě stránky.
Začněte otevřením parametrů sloupce 3 a přidejte do třídy 1 stejnou třídu CSS, kterou jsme přidali:
- Třída CSS: sticky-cta
Pak přidejte následující vlastní CSS do hlavního prvku:
Kancelář
margin-top: 50%
tableta
margin-top: 0%
To nám dá jiný výchozí bod pro lepivou CTA v pravém sloupci, což je 50% šířky řádku. Nebojte se upravit tuto hodnotu podle potřeby pro svůj vlastní blogový příspěvek.
Přidejte vlastní CSS do šablony s modulem kódu
Abychom získali naše „lepkavé“ umístění pro CTA na postranním panelu, musíme přidat vlastní CSS. Chcete-li to provést, vytvořte nový modul kódu v modulu publikování obsahu (nebo kdekoli na stránce).
Poté vložte následující kód CSS do kódového pole:
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
Horní posun v tomto kódu je výpočet, který při posouvání umístí CTA svisle na střed stránky. 50vh je polovina výšky okna prohlížeče a 130px je polovina výšky CTA. Pokud je vaše CTA vyšší nebo nižší, budete muset upravit 130 pixelů nahoru nebo dolů.
Uložte nastavení
Po dokončení uložte rozložení šablony.
Poté uložte nastavení tvůrce motivů
Konečný výsledek
Chcete-li zobrazit konečný výsledek, navštivte článek v blogu pomocí šablony.
A tak zůstanou lepkavé CTA přilepené na rolování. Můžete vidět, jak by to nejlépe fungovalo pro delší obsah.
Závěrečné myšlenky
Tyto lepkavé postranní výzvy k akci jsou osvěžující alternativou k tradičnímu postrannímu panelu. Fungují dobře pro minimalistický design, protože jsou méně rušivé a nezpůsobují, že příspěvek je přeplněný. Kromě toho můžete CTA umístit níže na stránku, aby se objevovala postupně a držela se posouvání, takže bude pro lidi viditelnější. Návštěvníci. A nezapomeňte. CTA můžete nahradit libovolným modulem Divi nebo kombinací modulů a vytvořit tak cokoliv, co chcete. Můžete se také rozhodnout ponechat pouze jednu výzvu k akci na jedné straně. Zdá se, že má mnoho aplikací.
