Priľnavé bočné panely sú mimoriadne efektívne pri upútavaní pozornosti Návštevníci bez toho, aby bol rušivý alebo rušivý. Trik spočíva v tom, že do bočného panela zahrniete jeden alebo dva prvky, ktoré „zostanú viditeľné“ alebo pripevnené k bočnej strane obsah príspevku, keď používateľ posúva stránku. Toto je osviežujúca alternatíva k tradičnému rozloženiu bočného panela, pretože pôsobí dojmom moderného rozloženia na celú šírku (bez bočného panela), s výhodou prezentovania výziev na akciu dôležitých na bočnej strane stránky, keď je to potrebné.
V tomto tutoriále vám ukážeme, ako pridať šteklivé výzvy k akcii do šablóny blogového príspevku pomocou nástroja Divi Theme Builder. Aplikácia tohto usporiadania je značná. Funguje takmer pre každú stránku alebo šablónu príspevku. Navyše sa nemusíte obmedzovať na CTA; môžete si zvoliť pridať Divi moduly podľa vášho výberu.
Čo potrebujete, aby ste začali
Na začiatok musíte nainštalovať a aktivovať tému Divi . Uistite sa, že máte najnovšiu verziu aplikácie Divi.
Aby ste mohli zobraziť požadovaný výsledok, budete potrebovať aspoň jednu správu vytvorenú v aplikácii Divi Builder na účely testovania.
Potom ste pripravení ísť.
prehľad
Tu je rýchle zhrnutie lepkavých CTA, ktoré boli pridané do šablóny blogového príspevku v Divi.
Ako pridať pevné výzvy na akciu do šablóny blogového príspevku v aplikácii Divi
Pridanie modelu generátora tém
Prvým krokom je import našej preddefinovanej šablóny na našu stránku. Budeme používať publikačnú šablónu Divi Theme Builder Pack # 1.
Ak chcete začať, prejdite na Divi > Generátor témy. Kliknite na ikonu prenosnosti v pravej hornej časti stránky. V režime prenosnosti vyberte kartu importu a z priečinka vyberte súbor divi-theme-builder-pack-1-post-template.json. Ak máte na svojej lokalite aktuálne nainštalované šablóny, nezabudnite zrušiť začiarknutie všetkých možností, ktoré môžu prepísať vaše aktuálne šablóny. Potom kliknite na tlačidlo importovať.
Vytvorenie modelu príspevku na blogu
Po importovaní šablóny sme pripravení pridať naše nové výzvy na akciu do bočného panela, ktorý je prilepený k rozloženiu šablóny. Ak to chcete urobiť, kliknite na ikonu úprav vlastnej oblasti tela.
Bolo pridané dvojité rozloženie bočného panela, aby sa do nich mohli ukladať výzvy na akciu
V Editore rozloženia modelu nájdite riadok obsahujúci modul Publikovať. obsah a nahradiť rozloženie stĺpcov štruktúrou stĺpcov jedna pätina krát tri pätiny krát jedna pätina (1/5 3/5 1/5). To nám umožní udržať stĺpec vycentrovaný pre obsah príspevku a zároveň poskytujeme dve sekcie na každej strane pre naše lepivé výzvy na akciu.
Po zmene štruktúry stĺpca pretiahnite modul publikovania obsahu do centrálneho stĺpca.
Aktualizujte parametre linky
Otvorte nastavenia linky a aktualizujte nasledujúce možnosti dizajnu:
- Použite vlastnú šírku odkvapov: ÁNO
- Šírka odkvapov: 2
- Šírka: 100% (stôl), 90% (tablet)
- Maximálna šírka: 1500px
Toto nám poskytne priestor, ktorý potrebujeme pre našu konfiguráciu dvojitého bočného panela.
Aktualizácia parametrov stĺpca 1
Potom otvorte parametre stĺpca 1 a zadajte do tohto stĺpca vlastnú triedu CSS:
- Trieda CSS: sticky-cta
Pridanie bočného panela s výzvou na akciu do ľavého stĺpca
Teraz sme pripravení na prvú výzvu na akciu. Pridajte výzvu akčnému modulu v ľavom stĺpci.
Štýl bočného panela CTA
Aktualizujte nastavenia nasledovne:
Obsah
- Tlačidlo: „Kliknite sem“
- Body: „Váš obsah bude smerovať sem. Tento text môžete upraviť alebo odstrániť online alebo v nastaveniach obsahu modulu. “
- URL odkazu na tlačidlo: #
Návrh textu tela
- Polícia: Montserrat
- Hmotnosť písma: polotučné
- Text tela: zarovnanie doprava
- Farba tela textu: # 444444
- Veľkosť textu: 22px (desktop), 18px (tablet)
- Výška tela: 1.3em
gombík
- Veľkosť textu tlačidla: 14px
- Farba textu tlačidla: #ffffff
- Farba pozadia tlačidla: # 6148df
- Šírka okraja tlačidla: 0px
- Radius tlačidla: 80px
- Hmotnosť písma: tučné
- Štýl písma tlačidla: TT
- Polstrovanie tlačidiel: 12px hore, 12px dole, 22px vľavo, 22px vpravo
Šírka, zarovnanie, čalúnenie a obrubníky
- Šírka: 100%
- Maximálna šírka: 320px
- Zarovnanie modulu: vpravo
- Výplň: 10px vľavo, 10px vpravo
- Šírka horného okraja: 10px
- Farba horného okraja: #eeeeee
- Šírka dolného okraja: 10px
- Farba dolného okraja: #eeeeee
Pridanie bočného panela CTA do pravého stĺpca
Ak chcete vytvoriť výzvu na akciu pre pravý stĺpec, skopírujte ten, ktorý sme práve vytvorili, a vložte ho do stĺpca úplne vpravo. Potom aktualizujte nastavenia duplikátu takto:
- Zarovnanie tela: vľavo
- Zarovnanie modulu: vľavo
Aktualizujte parametre stĺpca 3
Pre túto CTA v pravom stĺpci pridáme horný okraj do stĺpca, aby sme určili východiskovú pozíciu bočného panela CTA v dolnom bode stránky.
Najskôr otvorte parametre stĺpca 3 a do stĺpca 1 pridajte rovnakú triedu CSS, akú sme pridali:
- Trieda CSS: sticky-cta
Potom pridajte do hlavného prvku tieto vlastné CSS:
kancelária
margin-top: 50%
tableta
margin-top: 0%
Toto nám dá iný východiskový bod pre lepkavú CTA v pravom stĺpci, ktorá predstavuje 50% šírky riadku. Túto hodnotu môžete podľa potreby pre svoj vlastný blogový príspevok upraviť.
Pridajte vlastnú šablónu CSS do šablóny s modulom kódu
Aby sme získali „lepkavé“ umiestnenie pre naše výzvy na akciu na bočnom paneli, musíme pridať vlastné CSS. Za týmto účelom vytvorte nový modul kódu v module publikovania obsahu (alebo kdekoľvek na stránke).
Potom vložte nasledujúci kód CSS do kódového poľa:
<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óde predstavuje výpočet, ktorý pri posúvaní umiestňuje CTA vertikálne na stred stránky. 50vh je polovica výšky okna prehliadača a 130px je polovica výšky CTA. Ak je vaša výzva na akciu vyššia alebo nižšia, budete musieť upraviť 130 pixelov nahor alebo nadol.
Uložte nastavenia
Po dokončení uložte rozloženie šablóny.
Potom uložte nastavenia nástroja na tvorbu tém
Konečný výsledok
Ak chcete zobraziť konečný výsledok, prejdite na blogový článok pomocou šablóny.
A takto zostanú prilepené CTA prilepené na rolovaní. Môžete vidieť, ako by to najlepšie fungovalo pri dlhšom obsahu.
záverečné myšlienky
Tieto lepkavé bočné výzvy na akciu sú osviežujúcou alternatívou k tradičnému bočnému panelu. Pracujú dobre pre minimalistický dizajn, pretože sú menej rušivé a nespôsobujú, že príspevok je preplnený. Okrem toho môžete výzvu na akciu umiestniť nižšie na stránku, aby sa zobrazovala postupne a prilepila sa k zvitku, vďaka čomu bude pre ľudí viditeľnejšia. Návštevníci. A nezabudnite. CTA môžete nahradiť akýmkoľvek modulom Divi alebo kombináciou modulov a vytvoriť tak čokoľvek, čo chcete. Môžete sa tiež rozhodnúť ponechať iba jednu výzvu na akciu na jednej strane. Zdá sa, že má veľa aplikácií.
