Výzva na akciu na vašom webe je jedným z najmenej rušivých spôsobov, ako upútať vašu pozornosť Návštevníci. Väčšinu času budú výzvu na akciu ignorovať alebo ju zatvoria, aby mohli pokračovať v prehliadaní stránky, no niekedy ich získate. Skvele poslúži snímka s výzvou na akciu podporovať takmer čokoľvek na vstupnej stránke.

V tomto návode navrhneme uzavretú výzvu na akciu, ktorú možno pridať do ktoréhokoľvek rohu stránky pomocou Divi Theme Builder. Akonáhle to urobíte, budete mať možnosť podporovať vaše produkty a špeciálne ponuky kdekoľvek na stránke bez toho, aby ste museli použiť plugin.

Začnime!

prehľad

Tu je rýchly pohľad na štyri vložené CTA, ktoré pridáme do štyroch rohov šablóny stránky. Samozrejme, nebudete musieť nasadiť všetky štyri naraz. Všimnite si, ako je možné každú z nich zavrieť kliknutím na ikonu „x“. Potom môžete kliknutím na ikonu „plus“ znova povoliť výzvu na akciu.

Čo potrebujete, aby ste začali

Ak chcete začať, budete musieť nainštalovať a aktivovať tému Divi . Uistite sa, že máte najnovšiu verziu aplikácie Divi.

Na priradenie novej šablóny k tejto stránke na zobrazenie výsledku budete tiež potrebovať najmenej jednu stránku vytvorenú pomocou nástroja Divi Builder na účely testovania.

Vytvorenie posuvnej výzvy na akciu so šablónou stránky v Divi

Vytvorenie nového modelu

Na hlavnom paneli WordPress prejdite na ikonu Divi> Generátor tém. Potom kliknite na políčko „Pridať novú šablónu“ a vytvorte novú šablónu.

Priraďte šablónu k stránke alebo stránkam, na ktorých chcete zobraziť reklamnú lištu.

V novom modeli kliknite na oblasť „Pridať vlastné telo“ a potom vyberte „Vytvoriť vlastné telo“.

Potom vyberte možnosť „Vytvoriť od začiatku“.

Vytvorenie sekcie obsahu publikácie

Sekcia obsah príspevok je nevyhnutnou súčasťou každej šablóny stránky na zobrazenie obsah skutočná stránka alebo príspevok vložený do Divi alebo WordPress. Toto pridáme do našej šablóny pred vytvorením našej prvej výzvy na akciu na vloženie.

Pridajte riadok do stĺpca

Na začiatok pridajte riadok stĺpca do normálnej sekcie.

Pridajte modul na publikovanie obsahu

Potom pridajte modul obsah zverejnenie na linku.

Nastavenie linky

Potom aktualizujte parametre linky nasledujúcim spôsobom:

• Šírka: 100%
• Maximálna šírka: 100%
• Výplň: vysoká 0px, nízka 0px

Vytvára sa výzva na akciu vľavo hore

Teraz, keď máme zavedený modul obsahu príspevku, sme pripravení začať pridávať našu prvú výzvu na akciu, ktorú vložíme do ľavého horného rohu šablóny stránky.

Pridajte časť

Každá nová výzva na akciu bude vytvorená s úplne novou sekciou. To vám umožní pridať akékoľvek rozloženie alebo modul potrebný na návrh výzvy na akciu.

Pridajte do rozloženia šablón novú pravidelnú sekciu.

Pridajte riadok do stĺpca

Potom dajte sekcii riadok stĺpca.

Nastavenia sekcií

Pretiahnite (alebo presuňte) sekciu nad časť s obsahom príspevku a aktualizujte nastavenia sekcie takto:

• Prechod ľavého farebného pozadia:
• Pravý gradient pozadia:
• Zobraziť gradient nad obrázkom: ÁNO
• Obrázok na pozadí: [vložiť obrázok]
• Šírka: 320px
• Marža: zostáva 320 pixelov
• Výplň: vysoká 0px, nízka 0px
• Štýl animácie: Snímka
• Smer animácie: vpravo
• Oneskorenie animácie: 2000 ms

Potom skočte na kartu pokročilých a pridajte nasledujúcu triedu CSS a index Z:

• Trieda CSS: slide-in-cta
• Z Index: 999

A po hlavnom prvku pridajte vlastný útržok CSS:

position: fixed;top: 80px;left: -320px;

Trieda CSS je potrebná, aby sme mohli neskôr zamerať sekciu s kódom. Vlastné CSS umiestni ľavú hornú časť šablóny stránky na pevnú (alebo lepivú) pozíciu. Poloha „vľavo: -320 pixelov“ by mala presunúť celú časť (ktorá je široká 320 pixelov) mimo okno prehliadača (teda mimo nášho pohľadu). Máme ale ľavý okraj 320 pixelov, aby sme ho vrátili späť na zobrazenie. Dôvod, prečo je to konštruované, je ten, že môžeme hodnotu marže zapnúť alebo vypnúť, keď kliknete na ikonu „x“. To spôsobí, že CTA sa zasunie a stratí z dohľadu.

Nastavenie linky

Teraz aktualizujte parametre linky takto:

• Použite vlastnú šírku odkvapov: ÁNO
• Šírka odkvapov: 1
• Šírka: 100%
• Výplň: vysoká 0px, nízka 0px

Pridajte modul výzvy k akcii

Vo vnútri riadku pridajte modul Výzva k akcii.

Nastavenia výzvy na akciu

Potom aktualizujte nastavenia výzvy na akciu.

Obsah

• Názov: [zadajte text podľa vášho výberu]
• Tlačidlo: [zadajte požadovaný text]
• Telo: [zadajte text podľa vášho výberu]
• URL odkazu na tlačidlo: [zadajte skutočnú adresu URL alebo #]

Potom odstráňte predvolenú farbu pozadia, aby ste odhalili pozadie sekcie, ktorú sme pridali skôr.

Parametre návrhu (text, tlačidlo a výplň)

Na karte Návrh aktualizujte nasledujúce položky:

• Písmo názvu: Lato
• Hmotnosť písma názvu: ťažké
• Výška riadku nadpisu: 1,3 em
• Body Police: Lato
• Hmotnosť písma tela: tučné
• Pre tlačidlo použite vlastné štýly: ÁNO
• Veľkosť textu tlačidla: 15px
• Šírka okraja tlačidla: 0px
• Rozstup písmen tlačidla: 1px
• Písmo tlačidla: Lato
• Hmotnosť písma gombíka: ťažká
• Štýl písma tlačidla: TT
• Polstrovanie tlačidiel: 12 pixelov hore, 12 pixelov dole, 32 pixelov vľavo, 32 pixlov vpravo
• výplň: 40 pixelov hore, 40 pixelov dole, 40 pixelov vľavo, 40 pixlov vpravo

Pridajte ikonu otvorenia a zatvorenia pomocou modulu Blurb

Po dokončení výzvy na akciu musíme vytvoriť tlačidlo, ktoré sa používa na otváranie a zatváranie posuvnej výzvy na akciu. Vytvoríte to tak, že pod modul s výzvou na akciu pridáte reklamný modul.

Nastavenia textu prezentácie

Aktualizujte nasledujúce konštrukčné parametre.

Obsah

• odstráňte predvolený názov a text tela
• Použite ikonu: ÁNO
• Ikona: viac (pozri snímku obrazovky)

Koncepcia

• Farba ikony: # 000000
• Použiť veľkosť písma ikony: ÁNO
• Veľkosť písma ikony: 40 pixelov
• Šírka: 40px
• Výška: 40px
• Zaoblené rohy: 50%
• Transformácia osi Z rotácie: 135 stupňov

Rozšírené nastavenia

Na kartu rozšírené pridajte nasledujúcu triedu CSS:

• Trieda CSS: slide-in_target

Potom pridajte tento vlastný CSS do hlavného prvku.

position: absolute;bottom: 0px;right: -40px;

Pridajte do obrázka Blurb nasledujúce vlastné CSS.

margin-bottom: 0px;

výsledok

Tu je zatiaľ výsledok.

Nezabúdajte, že stále musíme pridať nejaký kód, aby sme pridali funkčnosť otvorenia a otvorenia po kliknutí na ikonu „x“. Kód pridáme po vytvorení výzvy na akciu v každom zo štyroch rohov modelu.

Vytvorenie výzvy na akciu vpravo hore

Vďaka prvej zabudovanej výzve na akciu môžeme zrýchliť proces vytvárania zvyšných CTA duplikovaním už vytvorenej sekcie. Ďalej vytvoríme výzvu na akciu v pravom hornom rohu.

Duplikovať časť

Nasaďte režim zobrazenia drôteného modelu a potom vľavo hore duplikujte sekciu výzvy na akciu.

Aktualizujte nastavenia sekcie

Potom aktualizujte nové parametre sekcie nasledovne:

• okraj: 320px doprava
• smer animácie: vľavo

Potom aktualizujte vlastné CSS v hlavnom prvku nahradením výrazu „vľavo“ výrazom „vpravo“. Tu je celý výňatok:

position: fixed;top: 80px;right: -320px;

Aktualizujte parametre modulu Blurb

Ďalej otvorte nastavenia modulu Blurb a aktualizujte vlastný úryvok CSS v hlavnom prvku nahradením slova „right“ výrazom „left“. Tu je celý výňatok:

position: absolute;bottom: 0px;left: -40px;

výsledok

Výzva na akciu sa teraz zobrazí ako snímka v pravom hornom rohu šablóny stránky.

Rovnaké operácie vykonajte pre zvyšné časti „Pravá dolná časť“, „Ľavá dolná časť“. Tiež budete musieť upraviť kód CSS pre každý z modulov, aby bol výsledok podobný nasledujúcemu.

Pridávanie vlastných úryvkov jQuery a CSS pomocou modulu kódu

Ako posledný krok musíme pridať nejaké vlastné jQuery a CSS, aby sme mohli získať funkcionalitu otvárania a zatvárania jednotlivých CTA snímok.

Pridajte modul kódu

Pridajte kódový modul do jednej z častí prezentácie.

Prilepte kód

Potom otvorte nastavenia kódu a vložte nasledujúci kód do oblasti kódu.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

záverečné myšlienky

S Divi nie je vôbec ťažké vytvoriť výzvu k akcii. A keďže pomocou nástroja na tvorbu tém môžete do šablóny stránky pridať výzvu na akciu, budete mať väčšiu kontrolu nad tým, ktoré stránky tieto výzvy na akciu zobrazujú.