Hozzon létre Elementor előugró ablakokat a WooCommerce-ben

Mindannyian hatalmas WooCommerce rajongók vagyunk. Egyszerűen beállítható és testreszabható. A csomag tartalmazza azokat a funkciókat, amelyek egyszerűvé teszik a dinamikus és hatékony e-kereskedelmi áruház létrehozását és kezelését.

Egy sikeres e-kereskedelmi oldal létrehozása azonban többről szól, mint egyszerűen csak népszerű termékek hozzáadása. Minden oldalnak vizuálisan is tetszetősnek kell lennie. Minél tetszetősebb és felhasználóbarátabb a webhely, annál nagyobb a valószínűsége annak, hogy több ügyfelet vonz.

• A felugró ablak beállítása
• Előugró ablakokat is létrehozhat az Elementor vizuális készítőjével
• Közzétételi beállítások

Bár a WooCommerce létrehozza Ön helyett a bevásárlókosarat és a fizetési oldalt, amikor Ön webhelyét építi, az Elementor még vonzóbbá teszi őket a testreszabással.

Lehetősége van újratervezni őket, vagy elölről kezdeni. A folyamatot megismételheti a webhely összes többi oldalán.

Egy meleg Köszönöm oldal létrehozásával, valamint a Saját fiók és a Szolgáltatási feltételek oldalának frissítésével megnyerheti ügyfelei szívét és elméjét.

Az Elementor drag and drop funkciója ezzel az oktatóanyaggal kombinálva biztosítja, hogy problémamentesen hozzon létre oldalakat.

A wooCommerce üzlet létrehozása után érdemes lehet vonzóbbá tenni látogatói és vásárlói számára. Az előugró ablakok hozzáadásával a felhasználó új benyomást kelt, és új vágyat ébreszt az üzletében.

 Előugró ablak létrehozásához lépjen a Sablonok > Felugró ablakok menüpontra a menüsorban. Megjelenik az összes előugró ablak listája, és ha még nem hozott létre egyet, a következőhöz hasonlót fog látni:

Miután rákattintott az ÚJ POPUP HOZZÁADÁSA lehetőségre (ami eléggé magától értetődő), a rendszer megkéri, hogy adjon nevet, majd válasszon ki egy sablont a megjelenített előre elkészített amp közül. Különféle sablonok állnak rendelkezésre többféle célra; egyesek hirdetményekre, mások kedvezmények népszerűsítésére alkalmasak, mások pedig arra, hogy a felhasználókat valamire feliratkozásra ösztönözzék. Még arra is van amp , hogy figyelmeztesse a felhasználókat a cookie-használatra vagy más GDPR-értesítésekre. Amint talált valamit, ami tetszik, kattintson rá a nagyobb előnézet megtekintéséhez, majd nyomja meg a Beszúrás gombot.

Miután rákattintott erre a gombra, a WordPress háttérrendszer előugró ablak-készítőjébe kerül.

Ha már dolgozott az Elementorral, otthon érezheti magát a kezelőfelülettel, a beállításokkal és azzal, ahogyan minden az Ön számára van kialakítva. Ez lényegében ugyanaz a folyamat, mint az Elementor oldalsablonok létrehozása a WordPressben.

A képernyő jobb oldalán található a fő vászon, amely egy előnézetet jelenít meg arról, amin éppen dolgozik. Az egyes elemeket külön-külön szerkesztheti és testreszabhatja, ha kijelöli őket, majd a Szerkesztés > Elemek szerkesztése menüpontot választja. Ha végzett, a bal oldali oldalsávban megjelennek a vezérlők és beállítások, valamint a Munka közzététele lehetőség.

A felugró ablak beállítása

 Ekkor látnia kell az előugró ablak előnézetét – vagy üres lap, vagy a választott sablon.

Az alapértelmezés szerint mindig nyitva lévő előugró ablakok beállításai lehetővé teszik a felugró vászon működésének testreszabását. Ezek a következők:

• Itt kell a legtöbb időt töltenie, mert itt hozhat létre különféle típusú felugró ablakokat. Más szóval, ezen beállítások módosításával a következő hatásokat érheti el:

• A modális előugró ablakok a modális ablakok egy fajtája.
• Becsúsztatások, értesítési sávok és így tovább.

Ezen kívül számos más fontos beállítást is testre szabhat.

A következő lehetőségek állnak rendelkezésre a Beállítások lapon:

• Módosítsa a kép magasságát és szélességét.
• Módosítsa az objektum függőleges vagy vízszintes tájolását ( amp rögzítheti a tetejére vagy aljára, hogy értesítési sávot hozzon létre)
• Döntse el, hogy használ-e fedvényt (ez lehetővé teszi amp , hogy kiszürkítse a hátteret, amikor az előugró ablak aktív)
• Tiltsa le a bezárás gombot a böngészőjében.
• Tartalmazzon animációt a bejárathoz.

Stílus a következőket teheti :

• Módosíthatja a háttérszínt, színátmenetet állíthat be, vagy használhat egy képet háttérként.
• Ha az átfedés engedélyezve van, konfigurálja azt.
• Ha engedélyezve van a bezárás gomb, akkor konfigurálnia kell.

Végül a Speciális lap különféle importálási beállításokat tartalmaz, amelyek lehetővé teszik a következőket:

• Jelenítse meg a bezárás gombot, vagy állítsa be az előugró ablakot egy bizonyos idő elteltével.
• Az átfedésre kattintva vagy az escape billentyű megnyomásával megakadályozhatja az ablak bezárását.

• Tiltsa le az oldalon lefelé görgetés lehetőségét.
• Kerülje el a több előugró ablakot (ha több előugró ablakot célzott ugyanarra az oldalra, ez megakadályozza, hogy a látogatók bosszankodjanak).

Annak érdekében, hogy képet kapjon arról, hogy ezek a beállítások hogyan befolyásolják az előugró ablakot, a következőképpen néz ki, ha az ablak jobb alsó sarkába Pozíciót

Vessen egy pillantást arra, hogy a felugró ablak most már véglegesen rögzítve van a jobb alsó sarokban. A görgető trigger és a bejárati animáció együttes használatával szép, diszkrét becsúsztatható hatás érhető el.

Előugró ablakokat is létrehozhat az Elementor vizuális készítőjével

Amint elvégezte az alapvető előugró beállításokat, megkezdheti az előugró ablak tényleges tartalmának megtervezését az elemek áthúzásával a vizuális fogd és vidd felületre.

Bármilyen Elementor widgetet használhat, amivel nagy mértékben irányíthatja a végső tervezést. Az Űrlap widget az egyetlen olyan dolog, amelyet feltétlenül fel kell vennie, mert ez az egyetlen, amely lehetővé teszi az e-mail feliratkozási űrlap létrehozását.

Az Űrlap widget segítségével teljes mértékben irányíthatja a felajánlani kívánt mezőket, valamint a küldés gomb szövegét és megjelenését. amp :

Ezen túlmenően azt javaslom, hogy ismerkedjen meg az Elementor összes widgetjével és tervezési lehetőségével.

Amint azt korábban említettük, nagymértékben szabályozhatja webhelye megjelenését, és néhány hasznos widgethez is hozzáférhet, amelyek segítségével növelheti konverziós arányát.

Közzétételi beállítások

Ha elégedett vagy azzal, amit létrehoztál, meg szeretnéd osztani a világgal. A KÖZZÉTÉTEL gomb megnyomása után egy sor kérdés jelenik meg. Mint egy illusztráció:

Megadható, hogy milyen feltételek mellett jelenjen meg a felugró ablak? Kiválaszthatja, hogy mely oldalakat vegye fel vagy zárja ki a keresési eredmények közül. Annyi feltétele lehet, amennyit csak akar.

Akkor mi az az esemény, ami miatt megjelenik a felugró ablak? Többek között kiválaszthatja, hogy az előugró ablak azonnal megjelenjen-e az oldal betöltésekor, görgetéskor, vagy amikor a felhasználó egy adott elemre görget, vagy sem. Mindegyik opciónak megvannak a beállításai, amelyek lehetővé teszik a teljes testreszabást.

Végül, de nem utolsósorban, látni fog néhány speciális szabályt, például a felugró ablak megjelenítését csak a visszatérő látogatóknak, csak meghatározott számú alkalommal, vagy esetleg csak akkor jeleníti meg az előugró ablakot, ha egy látogatót egy adott webhelyről irányítanak. URL. Van még néhány. Ezek az opciók jelentősen javíthatják a felugró ablak felhasználói élményét, lehetővé téve, hogy valódi integritással és a felhasználókra való tekintettel tervezze meg.

Végezze el a beállításokat a kívánt módon, majd kattintson a MENTÉS ÉS BEZÁRÁS gombra. A gomb megnyomása után amp , hogyan fog kinézni a felugró ablak.

A felugró ablakok testreszabhatók, és dinamikus tartalom adható hozzájuk.

Emeljük a dolgokat a következő szintre, jó? Eddig a pontig kiválasztottunk egy sablont, és egy-két ülést módosítottunk, és nagyjából ennyi. Fontolja meg azt a forgatókönyvet, amelyben tovább szeretnénk személyre szabni a felugró ablakunkat.

Újra a folyamat HOZZÁADÁSA ÚJ POPUP szakaszához értünk, ahol megadhatunk egy címet és még egyszer kiválaszthatunk egy sablont.

Ezt követően kiválaszthatjuk, elvégezhetjük a szükséges változtatásokat az alapbeállításokon, és még egyszer megnyomhatjuk a KÖZZÉTÉTEL gombot.

Oké, itt kezdenek érdekessé válni a dolgok. Az Elementor segítségével lekérhetjük a dinamikus adatokat a WordPress-telepítésünkből, és beilleszthetjük azokat a felugró ablakunkba. Tartalmazhatunk olyan információkat, mint a felhasználó neve, az oldal címe és így tovább.

Vegyük fontolóra a következő forgatókönyvet: WooCommerce-t futtatunk, és szeretnénk tájékoztatni a felhasználót, hogy az éppen megtekintett termékre kedvezmény érvényes. Kezdésként jelöljön ki egy szövegrészt a sablonból, majd kattintson a Dinamikus elemre az oldalsávon:

Számos lehetőség közül választhatunk, beleértve a bejegyzésből származó információkat, a webhely egészéről származó információkat, a médiainformációkat, a szerzői információkat és még a WooCommerce információkat is. Kiválasztunk egy termékcímet, és a kiválasztás eredményeként bekerül a szöveges tartalomblokkba.

Tegyük fel, hogy az adatbázis részletei nincsenek megfelelően lekérve. Ebben az esetben meg lehet adni néhányat a szöveg előtt, néhányat a szöveg után, és egy tartalék szöveget (ha az adatbázis részleteit nem kéri le megfelelően).

Tehát ismételjük meg ezt a folyamatot a gombhoz, amely megjeleníti a termék árát. Az előző szöveget úgy fogalmazhatjuk meg, hogy VÁSÁROLJON MOST, hogy lenyűgöző cselekvésre ösztönözzünk:

Még egy lépéssel tovább is léphetünk, és magának a felugró ablaknak a háttereként használhatjuk a termékképet.

Amikor megnyomjuk a PUBLISH gombot, ismét megjelennek a közzétételi beállítások, amelyek lehetővé teszik, hogy megadjuk, hogy csak a WooCommerce oldalakon jelenjen meg a felugró ablak. Az időzítőt 15 másodpercnyi tétlenségre állítjuk be, hogy kiváltó legyen. Így alakult végül:

Bár a dizájn még javítható, látható, hogy a felugró ablak háttereként a termék nevét, árát és a termék képét jelenítjük meg. Ragyogó!