Výzva k akci na vašem webu je jedním z nejméně rušivých způsobů, jak upoutat vaši pozornost Návštěvníci. Většinou budou výzvu k akci ignorovat nebo ji zavřou, aby mohli pokračovat v procházení stránky, ale někdy je získáte. Skvěle poslouží snímek s výzvou k akci podporovat prostě cokoliv na vstupní stránce.

V tomto tutoriálu navrhneme uzavíratelnou výzvu k akci, kterou lze přidat do libovolného rohu stránky pomocí Divi Theme Builder. Jakmile to uděláte, budete mít možnost podporovat vaše produkty a speciální nabídky kdekoli na stránce, aniž byste museli používat plugin.

Začněme!

přehled

Zde je rychlý pohled na čtyři vložené CTA, které přidáme do čtyř rohů šablony stránky. Samozřejmě nebudete muset nasadit všechny čtyři najednou. Všimněte si, jak lze každý z nich zavřít kliknutím na ikonu „x“. Poté můžete kliknout na ikonu „plus“ znovu povolit CTA.

výzva k akci divi 1

Co potřebujete, abyste mohli začít

Chcete-li začít, budete muset nainstalovat a aktivovat téma Divi . Ujistěte se, že máte nejnovější verzi Divi.

Budete také potřebovat alespoň jednu stránku vytvořenou pomocí nástroje Divi Builder pro účely testování, abyste této stránce přiřadili novou šablonu pro zobrazení výsledku.

Vytvoření posuvné výzvy k akci se šablonou stránky v Divi

Vytvoření nového modelu

Na řídicím panelu WordPress přejděte na Divi> Generátor motivů. Poté klikněte na pole „Přidat novou šablonu“ a vytvořte novou šablonu.

Vytvořte šablonu stránky

Přiřaďte šablonu ke stránce nebo ke stránkám, na kterých chcete zobrazit reklamní panel.

Přiřaďte šablonu stránky stránkám

Na novém modelu klikněte na oblast „Přidat vlastní tělo“ a poté vyberte „Vytvořit vlastní tělo“.

Přidejte vlastní tělo

Poté vyberte možnost „Sestavit od začátku“.

Budování od nuly

Vytvoření sekce obsahu publikace

Sekce obsah příspěvek je nezbytnou součástí každé šablony stránky, aby bylo možné zobrazit obsah skutečná stránka nebo příspěvek vložený do Divi nebo WordPress. Toto přidáme do naší šablony před vytvořením naší první výzvy k akci k vložení.

Přidejte řádek do sloupce

Nejprve přidejte řádek sloupce do normální sekce.

Jednořádkový úsek

Přidejte modul pro publikování obsahu

Poté přidejte modul obsah zveřejnění na linku.

Obsah položky

Nastavení linky

Poté aktualizujte parametry linky následovně:

  • Šířka: 100%
  • Maximální šířka: 100%
  • Výplň: 0px vysoká, 0px nízká
Konfigurace divi linky

Vytváření výzvy k akci vlevo nahoře

Nyní, když máme zaveden náš modul obsahu příspěvku, jsme připraveni začít přidávat naši první výzvu k akci, kterou chceme vložit do levého horního rohu šablony stránky.

Přidejte sekci

Každá nová výzva k akci bude vytvořena ve zcela nové sekci. To vám umožní přidat jakékoli rozvržení nebo modul potřebný k návrhu výzvy k akci.

Přidejte do rozvržení šablony novou pravidelnou sekci.

Výběr nové divi sekce

Přidejte řádek do sloupce

Poté dejte sekci řádek sloupce.

Vyberte divi sloupec

Nastavení sekce

Přetáhněte (nebo přesuňte) sekci nad sekci obsahu příspěvku a aktualizujte nastavení sekce takto:

  • Přechod levého barevného pozadí:
  • Přechod na pravé pozadí:
  • Zobrazit přechod nad obrázkem: ANO
  • Obrázek na pozadí: [vložte obrázek]
  • Šířka: 320px
  • Marže: zbývá 320 pixelů
  • Výplň: 0px vysoká, 0px nízká
  • Styl animace: Snímek
  • Směr animace: vpravo
  • Zpoždění animace: 2000 XNUMX ms

Poté přejděte na kartu Upřesnit a přidejte následující třídu CSS a index Z:

  • Třída CSS: slide-in-cta
  • Z Index: 999

A přidejte vlastní fragment CSS za hlavním prvkem:

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

Přizpůsobit sekci

Třída CSS je nutná, abychom mohli později zacílit sekci s kódem. Vlastní CSS umístí levou horní část šablony stránky na pevnou (nebo lepivou) pozici. Poloha „vlevo: -320 pixelů“ by měla přesunout celou část (která je široká 320 pixelů) mimo okno prohlížeče (tedy mimo náš pohled). Ale máme levý okraj 320 pixelů, abychom jej vrátili zpět k zobrazení. Důvod, proč je konstruován tímto způsobem, je ten, že můžeme hodnotu okraje zapnout nebo vypnout, když kliknete na ikonu „x“. To způsobí, že CTA sklouzne dovnitř a ven z dohledu.

Nastavení linky

Nyní aktualizujte parametry řádku následujícím způsobem:

  • Použijte vlastní šířku okapu: ANO
  • Šířka okapu: 1
  • Šířka: 100%
  • Výplň: 0px vysoká, 0px nízká
Parametr Divi Line

Přidejte modul výzvy k akci

Do řádku přidejte modul Výzva k akci.

Přidejte modul výzvy k akci

Nastavení výzvy k akci

Poté aktualizujte nastavení výzvy k akci.

Obsah
  • Název: [zadejte požadovaný text]
  • Tlačítko: [zadejte požadovaný text]
  • Tělo: [zadejte požadovaný text]
  • URL odkazu na tlačítko: [zadejte skutečnou adresu URL nebo #]
Přizpůsobte si nabídku modulu divi

Poté odeberte výchozí barvu pozadí a odhalte pozadí sekce, kterou jsme přidali dříve.

Odstraňte barvu pozadí
Parametry návrhu (text, tlačítko a výplň)

Na kartě Návrh aktualizujte následující:

  • Písmo názvu: Lato
  • Titulek písma: těžký
  • Výška řádku nadpisu: 1,3 em
  • Body Police: Lato
  • Hmotnost písma: tučné
  • Pro tlačítko použijte vlastní styly: ANO
  • Velikost textu tlačítka: 15px
  • Šířka ohraničení tlačítka: 0px
  • Mezery mezi tlačítky: 1px
  • Tlačítko písmo: Lato
  • Hmotnost tlačítka: těžká
  • Styl písma tlačítka: TT
  • Polstrování tlačítek: 12 pixelů nahoře, 12 pixelů dole, 32 pixelů vlevo, 32 pixelů vpravo
  • výplň: 40 pixelů nahoře, 40 pixelů na dně, 40 pixelů vlevo, 40 pixelů napravo
Přizpůsobte modul fontu výzva k akci divi

Přidejte ikonu pro otevření a zavření pomocí modulu Blurb

Jakmile je výzva k akci hotová, musíme vytvořit tlačítko s ikonou, které slouží k otevírání a zavírání posuvné výzvy k akci. Chcete-li to vytvořit, přidejte modul reklamy pod modulem výzvy k akci.

Informační modul Divi Bubble

Nastavení textu prezentace

Aktualizujte následující konstrukční parametry.

Obsah
  • odeberte výchozí název a základní text
  • Použijte ikonu: ANO
  • Ikona: více (viz screenshot)
Přidejte ikonu divi
Design
  • Barva ikony: # 000000
  • Použijte velikost písma ikony: ANO
  • Velikost písma ikony: 40 pixelů
  • Šířka: 40px
  • Výška: 40px
  • Zaoblené rohy: 50%
  • Otočení osy Z transformace: 135 stupňů
Přizpůsobte ikonu divi
Pokročilá nastavení

Na kartě Upřesnit přidejte následující třídu CSS:

  • Třída CSS: slide-in_target

Poté přidejte tento vlastní CSS do hlavního prvku.

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

Přidejte následující vlastní CSS do obrazu Blurb.

margin-bottom: 0px;

Přizpůsobte si styl css divi modul

Výsledek

Zde je zatím výsledek.

Výsledek nyní dosažen

Mějte na paměti, že stále musíme přidat nějaký kód, abychom přidali funkci zavření a otevření po kliknutí na ikonu „x“. Kód přidáme po vytvoření výzvy k akci v každém ze čtyř rohů modelu.

Vytvoření výzvy k akci vpravo nahoře

Díky první integrované výzvě k akci můžeme urychlit proces vytváření zbytku CTA duplikováním již vytvořené sekce. Dále vytvoříme výzvu k akci v pravém horním rohu.

Duplicitní sekce

Nasaďte režim zobrazení drátového modelu a poté duplikujte sekci CTA vlevo nahoře.

Vytvořte dvojité oddíly

Aktualizujte nastavení sekce

Poté aktualizujte nové parametry sekce takto:

  • okraj: 320px vpravo
  • směr animace: vlevo

Poté aktualizujte vlastní CSS v hlavním prvku tak, že nahradíte výraz „left“ výrazem „right“. Zde je celý výňatek:

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

Upravit zarovnání divi sekce

Aktualizujte parametry modulu Blurb

Poté otevřete nastavení modulu Blurb a aktualizujte vlastní fragment CSS v hlavním prvku nahrazením slova „right“ slovem „left“. Zde je celý výňatek:

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

Přidejte divi kód

Výsledek

Nyní uvidíte výzvu k akci jako snímek v pravém horním rohu šablony stránky.

Posuvník vpravo nahoře

Stejné operace proveďte pro zbývající části „Pravá dolní část“, „Levá dolní část“. Budete také muset upravit kód CSS pro každý z modulů, aby měl výsledek podobný následujícímu.

Konečný výsledek divi

Přidávání vlastních úryvků jQuery a CSS pomocí modulu kódu

V posledním kroku musíme přidat nějaké vlastní jQuery a CSS, abychom mohli získat funkce otevírání a zavírání každé z CTA snímků.

Přidejte modul kódu

Přidejte modul kódu do jedné z částí prezentace.

Přidejte divi kód js

Vložte kód

Potom otevřete nastavení kódu a vložte následující 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>

Přidejte kód jQuery

Závěrečné myšlenky

S Divi není vůbec těžké vytvořit výzvu k akci. A protože můžete použít nástroj pro tvorbu motivů k přidání výzvy k akci do šablony stránky, budete mít větší kontrolu nad tím, které stránky tyto výzvy k akci zobrazují.