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.
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.
Přiřaďte šablonu ke stránce nebo ke stránkám, na kterých chcete zobrazit reklamní panel.
Na novém modelu klikněte na oblast „Přidat vlastní tělo“ a poté vyberte „Vytvořit vlastní tělo“.
Poté vyberte možnost „Sestavit od začátku“.
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.
Přidejte modul pro publikování obsahu
Poté přidejte modul obsah zveřejnění na linku.
Nastavení linky
Poté aktualizujte parametry linky následovně:
- Šířka: 100%
- Maximální šířka: 100%
- Výplň: 0px vysoká, 0px nízká
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.
Přidejte řádek do sloupce
Poté dejte sekci řádek sloupce.
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;
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á
Přidejte modul výzvy k akci
Do řádku přidejte modul Výzva 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 #]
Poté odeberte výchozí barvu pozadí a odhalte pozadí sekce, kterou jsme přidali dříve.
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ř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.
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)
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ňů
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;
Výsledek
Zde je zatím výsledek.
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.
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;
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;
Výsledek
Nyní uvidíte výzvu k akci jako snímek v pravém horním rohu šablony stránky.
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.
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.
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>
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í.
Skvělé, tento článek! To je přesně to, co hledám!
Merci beaucoup.
Malá doplňující otázka, je možné, že se tato výzva k akci otevírá automaticky pouze na určitém místě při posouvání stránky?
Dobrý den!