Vytvořte vyskakovací okna Elementor ve WooCommerce

Všichni jsme velkými fanoušky WooCommerce. Nastavení a přizpůsobení je jednoduché. Balíček obsahuje funkce, které usnadňují vytváření a správu dynamického a výkonného obchodu s elektronickým obchodem.

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

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

Přestože vám WooCommerce při vytváření webu vytvoří nákupní košík a stránku s pokladnou, Elementor je díky přizpůsobení učiní přitažlivějšími.

Máte možnost je buď přepracovat, nebo začít od začátku. Tento postup můžete zopakovat 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 Podmínky služby si můžete získat srdce a mysl svých zákazníků.

Funkce drag and drop Elementoru v kombinaci s tímto tutoriálem zajistí, že při vytváření stránek budete mít bezproblémové zážitky.

Po nastavení svého obchodu wooCommerce možná budete chtít, aby byl pro vaše návštěvníky a zákazníky atraktivně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, v pruhu nabídky přejděte na Šablony> Vyskakovací okna. Zobrazí se seznam všech vašich vyskakovacích oken, a pokud jste si je ještě nevytvořili, uvidíte něco podobného následujícímu:

Po kliknutí na Přidat nový POPUP (což je docela samozřejmé), budete vyzváni k jejímu názvu a vyberte šablonu z premade ex amp les zobrazeny. Různé šablony jsou k dispozici pro různé účely; některé jsou vhodné pro oznámení, jiné pro propagaci slevy, další jsou ideální pro povzbuzení uživatelů, aby se k něčemu přihlásili. Existují dokonce i ex amp soubory pro upozornění uživatelů na používání souborů cookie nebo jiná oznámení GDPR. Jakmile najdete něco, co se vám líbí, kliknutím na něj 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 do nástroje pro tvorbu vyskakovacích oken v backendu WordPress.

Pokud jste v minulosti spolupracovali s Elementorem, budete se cítit jako doma s rozhraním, možnostmi a způsobem, jakým je vše pro vás připraveno. 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 upravovat a přizpůsobovat jednotlivě tak, že jej vyberete a vyberete Úpravy> Upravit prvky. Až budete hotovi, uvidíte ovládací prvky a předvolby zobrazené na postranním panelu vlevo spolu s možností Publikovat svou práci.

Konfigurace vyskakovacího okna

 V tu chvíli byste měli vidět náhled vyskakovacího okna - buď prázdnou břidlici, nebo šablonu, kterou jste si vybrali.

Nastavení vyskakovacích oken, která jsou ve výchozím nastavení vždy otevřená, vám umožňují přizpůsobit si, jak samotné vyskakovací plátno funguje. 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ádět následující efekty:

• Modální vyskakovací okna jsou typem modálního okna.
• Prezentace, oznamovací lišty atd.

Kromě toho můžete přizpůsobit několik dalších důležitých nastavení.

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

• Změňte výšku a šířku obrázku.
• Změna svislé nebo vodorovné orientaci objektu (pro ex amp le, můžete jej opravit do horní nebo dolní vytvořit notifikační lištu)
• Učinit rozhodnutí o tom, zda použít překrytí (to vám umožní, za ex amp le, šedě na pozadí, když je aktivní pop-up)
• Zakažte ve svém prohlížeči tlačítko Zavřít.
• Zahrnout animaci ke vstupu.

Na kartě Styl můžete provádět následující věci :

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

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

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

• Zakažte možnost posouvání stránky dolů.
• Vyhněte se více vyskakovacím oknům (pokud jste na stejnou stránku cílili více vyskakovacích oken, zabráníte tím otravování svých návštěvníků).

Abyste měli představu o tom, 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 vyskakovací okno nyní trvale opraveno v pravém dolním rohu. Pomocí spouštěcí spouště ve spojení se vstupní animací můžete dosáhnout pěkného, ​​diskrétního efektu zasunutí.

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

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

Můžete použít jakýkoli widget Elementor, který chcete, což vám dává velkou kontrolu nad konečným designem. Widget Formulář je jediná věc, kterou musíte absolutně zahrnout, protože je jediný, který 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ídnout, stejně jako nad textem a vzhledem tlačítka Odeslat. Pro ex amp le:

Kromě toho vám důrazně doporučujeme seznámit se se všemi widgety a možnostmi návrhu Elementoru.

Jak již bylo řečeno, máte velkou kontrolu nad vzhledem svých webových stránek 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 ZVEŘEJNIT se vám zobrazí řada otázek. Pro ilustraci:

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

Jaká je tedy událost, která způsobuje zobrazení vyskakovacího okna? Můžete si vybrat, zda mimo jiné zobrazí vyskakovací okno okamžitě při načtení stránky, při posouvání nebo když uživatel přejde na konkrétní prvek. Všechny tyto možnosti mají svá nastavení, což umožňuje úplné přizpůsobení.

V neposlední řadě uvidíte některá pokročilá pravidla, například zobrazování vyskakovacího okna pouze vracejícím se návštěvníkům, zobrazování vyskakovacího okna pouze několikrát nebo možná pouze vyskakovací okno, když je návštěvník na váš web odkazován z konkrétního URL. Existuje také několik dalších. Tyto možnosti mohou výrazně zlepšit uživatelskou zkušenost s vyskakovacím oknem, což vám umožní navrhnout jej s opravdovou integritou a ohleduplností pro vaše uživatele.

Dokončete nastavení požadovaným způsobem a poté klikněte na ULOŽIT A ZAVŘÍT. Budete brát jako amp le toho, co vaše pop-up bude vypadat po klepnutí na toto tlačítko.

Vyskakovací okna lze přizpůsobit a lze k nim přidat dynamický obsah.

Pozvedněte věci na další úroveň, ano? Až do tohoto bodu jsme vybrali šablonu a upravili jedno nebo dvě sezení, a to je asi tak všechno. Zvažte scénář, ve kterém chceme naše vyskakovací okno dále přizpůsobit.

Jsme zpět ve fázi procesu PŘIDAT NOVÝ POPUP, kde můžeme zadat název a vybrat šablonu ještě jednou.

Poté jej můžeme vybrat, provést nezbytné změny v základním nastavení a znovu kliknout na PUBLIKOVAT.

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

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

Na výběr máme z široké škály možností, včetně informací ze samotného příspěvku, informací z webu jako celku, mediálních informací, informací o autorovi a dokonce i informací WooCommerce. Vybereme název produktu a v důsledku našeho výběru bude přidán do našeho bloku textového obsahu.

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

Zkopírujme tedy tento proces u tlačítka, které zobrazí cenu produktu. Předchozí text můžeme zformulovat jako KOUPIT NYNÍ, abychom nám poskytli přesvědčivou 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 PUBLIKOVAT, zobrazí se nám znovu nastavení publikování, což nám umožní určit, že chceme, aby se vyskakovací okno zobrazovalo pouze na stránkách WooCommerce. Nastavíme časovač na 15 sekund nečinnosti, aby byl spouštěčem. Takto to nakonec dopadlo:

Ačkoli by design mohl být vylepšen, můžete vidět, že jako pozadí vyskakovacího okna zobrazujeme název produktu, jeho cenu a obrázek produktu. Brilantní!