Vytvářejte vyskakovací okna Elementor ve WooCommerce

Všichni jsme velkými fanoušky WooCommerce. Nastavení a přizpůsobení je snadné. Součástí balíčku jsou funkce, které usnadňují vytváření a správu dynamického a výkonného elektronického obchodu.

Vytvoření úspěšné stránky elektronického obchodu však znamená více než pouhé přidávání oblíbených produktů. Všechny stránky musí být také vizuálně přitažlivé. Čím vizuálně atraktivnější a uživatelsky přívětivější je váš web, tím větší je pravděpodobnost, že přilákáte více zákazníků.

• Konfigurace vyskakovacího okna
• Vyskakovací okna můžete také vytvářet pomocí vizuálního tvůrce v Elementoru
• Předvolby publikování

Přestože WooCommerce vytváří nákupní košík a stránku pokladny za vás, když vytváříte svůj web, Elementor je činí atraktivnějšími tím, že je přizpůsobí.

Máte možnost je buď předělat, nebo začít znovu od začátku. Proces můžete opakovat pro všechny ostatní stránky na vašem webu.

Vytvořením vřelé stránky s poděkováním a aktualizací stránek Můj účet a Smluvní podmínky si můžete získat srdce a mysl svých zákazníků.

Funkce drag and drop programu Elementor v kombinaci s tímto tutoriálem vám zajistí bezproblémový zážitek při vytváření vašich stránek.

Po nastavení vašeho obchodu wooCommerce možná budete chtít, aby byl pro vaše návštěvníky a zákazníky přitažlivější. Přidání vyskakovacích oken dává uživateli další dojem a novou touhu zůstat ve vašem obchodě.

 Chcete-li vytvořit vyskakovací okno, přejděte na položku Šablony > Vyskakovací okna na panelu nabídek. Zobrazí se seznam všech vašich vyskakovacích oken, a pokud jste žádné ještě nevytvořili, uvidíte něco podobného následujícímu:

Jakmile kliknete na PŘIDAT NEW POPUP (což je docela samozřejmé), budete požádáni, abyste mu dali název a poté vyberte šablonu ze zobrazených předpřipravených amp . Pro různé účely jsou k dispozici různé šablony; některé jsou vhodné pro oznámení, jiné pro propagaci slevy, jiné jsou ideální pro povzbuzení uživatelů, aby se k něčemu přihlásili. Existují dokonce amp varování uživatelů před používáním souborů cookie nebo jinými oznámeními GDPR. Jakmile najdete něco, co se vám líbí, kliknutím na to zobrazíte větší náhled a poté stiskněte tlačítko Vložit.

Po kliknutí na toto tlačítko budete přesměrováni na tvůrce vyskakovacích oken v backendu WordPress.

Pokud jste v minulosti pracovali s Elementorem, budete se cítit jako doma s rozhraním, možnostmi a způsobem, jakým je pro vás vše uspořádáno. Je to v podstatě stejný proces jako vytváření šablon stránek Elementor ve WordPressu.

Na pravé straně obrazovky je hlavní plátno, které zobrazuje náhled toho, na čem právě pracujete. Každý prvek můžete upravit a přizpůsobit jednotlivě tak, že jej vyberete a vyberete Upravit > Upravit prvky. Po dokončení se na postranním panelu vlevo zobrazí ovládací prvky a předvolby spolu s možností Publikovat svou práci.

Konfigurace vyskakovacího okna

 V tomto okamžiku byste měli vidět náhled vyskakovacího okna – buď prázdný list nebo šablonu, kterou jste si vybrali.

Nastavení vyskakovacího okna, které je ve výchozím nastavení vždy otevřené, vám umožňuje přizpůsobit fungování samotného vyskakovacího plátna. Jsou následující:

• Zde budete chtít strávit nejvíce času, protože zde budete moci vytvářet různé typy vyskakovacích oken. Jinými slovy, úpravou těchto nastavení budete moci provést následující efekty:

• Modální vyskakovací okna jsou typem modálního okna.
• Zásuvné moduly, oznamovací lišty a tak dále.

Kromě toho můžete upravit několik dalších důležitých nastavení.

Nastavení jsou k dispozici následující možnosti :

• Změňte výšku a šířku obrázku.
• Změňte svislou nebo vodorovnou orientaci objektu (můžete jej amp opravit nahoře nebo dole a vytvořit tak oznamovací lištu)
• Rozhodněte se, zda chcete použít překryvnou vrstvu (umožní vám to amp zašednout pozadí, když je vyskakovací okno aktivní)
• Zakažte ve svém prohlížeči tlačítko Zavřít.
• Zahrňte animaci pro vstup.

Styl můžete provádět následující akce :

• Můžete změnit barvu pozadí, udělat z něj přechod nebo použít obrázek jako pozadí.
• Pokud je překrytí povoleno, nakonfigurujte jej.
• V případě, že máte zapnuté tlačítko pro zavření, musíte jej nakonfigurovat.

Nakonec karta Upřesnit obsahuje různá nastavení importu, která vám umožňují provádět například následující akce:

• Zobrazte zavírací tlačítko nebo nechte vyskakovací okno po určité době automaticky zavřít.
• Kliknutím na překrytí nebo stisknutím klávesy Escape můžete zabránit zavření okna.

• Zakázat možnost posouvání stránky dolů.
• Vyhněte se více vyskakovacím oknům (pokud jste zacílili více vyskakovacích oken na stejnou stránku, zabráníte tím tomu, aby byli vaši návštěvníci naštvaní).

Abyste měli představu, jak tato nastavení ovlivní vaše vyskakovací okno, takto to vypadá, když změníte pozici v pravém dolním rohu okna:

Podívejte se, jak je nyní vyskakovací okno trvale opraveno v pravém dolním rohu. Pomocí rolovací spouště ve spojení se vstupní animací můžete dosáhnout pěkného, ​​diskrétního zasouvacího efektu.

Vyskakovací okna můžete také vytvářet pomocí vizuálního tvůrce v Elementoru

Jakmile dokončíte základní nastavení vyskakovacího okna, můžete začít navrhovat skutečný obsah vyskakovacího okna přetažením prvků do vizuálního rozhraní přetahování.

Můžete použít jakýkoli widget Elementor, který chcete, což vám dává velkou kontrolu nad konečným návrhem. Widget Formulář je jediná věc, kterou musíte bezpodmínečně zahrnout, protože jako jediná vám umožňuje vytvořit formulář pro přihlášení k e-mailu.

S widgetem Formulář máte úplnou kontrolu nad poli, která chcete nabízet, a také nad textem a vzhledem tlačítka pro odeslání. amp :

Kromě toho vám důrazně doporučuji, abyste se seznámili se všemi widgety a možnostmi návrhu Elementor.

Jak již bylo řečeno, máte velkou kontrolu nad vzhledem svého webu a máte také přístup k některým užitečným widgetům, které vám mohou pomoci zvýšit míru konverze.

Předvolby publikování

Až budete spokojeni s tím, co jste vytvořili, budete to chtít sdílet se světem. Po stisknutí tlačítka PUBLIKOVAT se vám zobrazí řada otázek. Pro ilustraci:

Je možné specifikovat podmínky, za kterých se má vyskakovací okno zobrazovat? Můžete si vybrat, které stránky chcete zahrnout nebo vyloučit z výsledků vyhledávání. Můžete mít tolik podmínek, kolik chcete.

Co je tedy událost, která způsobuje zobrazení vyskakovacího okna? Kromě jiných možností si můžete vybrat, zda se má vyskakovací okno zobrazovat okamžitě při načtení stránky, při posouvání nebo když uživatel posouvá konkrétní prvek. Všechny tyto možnosti mají svá nastavení, která umožňují úplné přizpůsobení.

V neposlední řadě uvidíte některá pokročilá pravidla, jako je zobrazení vyskakovacího okna pouze vracejícím se návštěvníkům, zobrazení vyskakovacího okna pouze stanoveným počtem opakování nebo možná zobrazení vyskakovacího okna pouze tehdy, když je návštěvník odkázán na váš web z konkrétního URL. Existuje také několik dalších. Tyto možnosti mohou výrazně zlepšit uživatelský dojem z vyskakovacího okna, což vám umožní navrhnout jej se skutečnou integritou a ohleduplností k vašim uživatelům.

Dokončete nastavení požadovaným způsobem a poté klikněte na SAVE & CLOSE. Po kliknutí na toto tlačítko se dostanete k amp toho, jak bude vaše vyskakovací okno vypadat.

Vyskakovací okna lze přizpůsobit a lze do nich přidat dynamický obsah.

Pozvedneme věci na další úroveň, ano? Do této chvíle jsme vybrali šablonu a upravili jedno nebo dvě sezení, a to je vše. Zvažte scénář, ve kterém chceme naše vyskakovací okno dále přizpůsobit.

Jsme zpět ve fázi ADD NEW POPUP procesu, kde můžeme zadat název a vybrat šablonu ještě jednou.

Poté jej můžeme vybrat, provést potřebné změny v základním nastavení a znovu stisknout PUBLISH.

Dobře, tady to začíná být zajímavé. Elementor můžeme použít k načtení dynamických dat z naší instalace WordPress a jejich vložení do vyskakovacího okna v našem vyskakovacím okně. Můžeme zahrnout informace, jako je jméno uživatele, název stránky a tak dále.

Zvažte následující scénář: provozujeme WooCommerce a chceme uživatele informovat, že je k dispozici sleva na konkrétní produkt, který si právě prohlíží. Chcete-li začít, vyberte část textu ze šablony a poté klikněte na Dynamický na postranním panelu:

Na výběr máme širokou škálu možností, včetně informací ze samotného příspěvku, informací z webu jako celku, informací o médiích, informací o autorech a dokonce i informací o WooCommerce. Vybereme název produktu a bude přidán do našeho bloku textového obsahu jako výsledek našeho výběru.

Předpokládejme, že údaje o databázi nejsou správně načteny. V takovém případě je možné zadat některé před textem, některé za textem a záložní text (pokud nejsou údaje o databázi správně načteny).

Zopakujme tedy tento proces pro tlačítko, které zobrazí cenu produktu. Předchozí text můžeme formulovat jako KOUPIT HNED PRO, abychom dostali působivou výzvu k akci:

Můžeme to udělat ještě o krok dále a použít obrázek produktu jako pozadí samotného vyskakovacího okna.

Když stiskneme PUBLISH, zobrazí se nám ještě jednou nastavení publikování, což nám umožňuje určit, že chceme, aby se vyskakovací okno zobrazovalo pouze na stránkách WooCommerce. Jako spouštěč nastavíme časovač na 15 sekund nečinnosti. Takhle to nakonec dopadlo:

I když lze design vylepšit, můžete vidět, že jako pozadí vyskakovacího okna zobrazujeme název produktu, jeho cenu a obrázek produktu. Brilantní!