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

Mindannyian nagy rajongói vagyunk a WooCommerce-nek. Egyszerű beállítani és testreszabni. A csomag olyan funkciókat is tartalmaz, amelyek megkönnyítik egy dinamikus és hatékony e-kereskedelmi áruház létrehozását és kezelését.

Azonban egy sikeres e-kereskedelmi oldal létrehozásához több kell, mint pusztán népszerű termékek hozzáadása. Minden oldalnak vizuálisan is vonzónak kell lennie. Minél vonzóbb a vizuális megjelenése és felhasználóbarátabb a weboldalad, annál nagyobb a valószínűsége, hogy több ügyfelet vonzol.

• A felugró ablak konfigurációja
• Felugró ablakokat az Elementor vizuális szerkesztőjével is létrehozhatsz
• Közzétételi beállítások

Bár a WooCommerce létrehozza a bevásárlókosarat és a fizetési oldalt a webhely építésekor, az Elementor vonzóbbá teszi őket a testreszabásukkal.

Lehetősége van újratervezni őket, vagy mindent elölről kezdeni. A folyamatot megismételheti webhelye összes többi oldalával is.

Egy kedves köszönőoldal létrehozásával, valamint a Fiókom és a Szolgáltatási Feltételek oldalak frissítésével megnyerheted ügyfeleid szívét és eszét.

Az Elementor drag and drop funkciója, ezzel az oktatóanyaggal kombinálva, biztosítja a problémamentes élményt az oldalak létrehozásakor.

Miután beállítottad a wooCommerce áruházadat, érdemes lehet vonzóbbá tenned a látogatóid és vásárlóid számára. A felugró ablakok hozzáadása új benyomást kelt a felhasználóban, és új vágyat ébreszt arra, hogy az áruházadban maradjon.

 Felugró ablak létrehozásához lépjen a Sablonok > Felugró ablakok menüpontra a menüsorban. Ekkor megjelenik az összes felugró ablak listája, és ha még nem hozott létre egyet, akkor valami hasonlót fog látni:

Miután rákattintott az ÚJ FELÚJÓGÓ ABLAK HOZZÁADÁSA gombra (ami elég magától értetődő), a rendszer felkéri, hogy adjon neki egy nevet, majd válasszon egy sablont a megjelenített előre elkészítettampközül. Különböző sablonok állnak rendelkezésre többféle célra; némelyik bejelentésekhez alkalmas, mások kedvezmények népszerűsítésére, megint mások ideálisak a felhasználók regisztrációjára való ösztönzésére. Vannakampmég a felhasználók sütik használatára vagy más GDPR értesítésekre való figyelmeztetésére is. Amint talált valamit, ami tetszik, kattintson rá a nagyobb előnézet megtekintéséhez, majd nyomja meg a Beszúrás gombot.

A gombra kattintás után a WordPress backend felugró ablak készítőjébe jutsz.

Ha korábban már dolgoztál az Elementorral, akkor otthonosan fogod érezni magad a kezelőfelülettel, a lehetőségekkel és azzal, ahogyan minden el van rendezve számodra. 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, amelyen az aktuálisan végzett munka előnézete látható. Az egyes elemeket egyenként szerkesztheti és testreszabhatja a Szerkesztés > Elemek szerkesztése menüpont kiválasztásával. Ha elkészült, a bal oldali oldalsávon megjelennek a vezérlők és beállítások, valamint a „Munka közzététele” lehetőség.

A felugró ablak konfigurációja

 Ekkor kell megjelennie a felugró ablak előnézetének – vagy egy üres lapnak, vagy a kiválasztott sablonnak.

A Felugró ablak beállításai, amelyek alapértelmezés szerint mindig meg vannak nyitva, lehetővé teszik a felugró ablak működésének testreszabását. Ezek a következők:

• Itt érdemes a legtöbb időt tölteni, mert itt tudsz majd különböző típusú felugró ablakokat létrehozni. Más szóval, ezen beállítások módosításával a következő hatásokat érheted el:

• A modális felugró ablakok egyfajta modális ablakok.
• Bevezető elemek, értesítési sávok és így tovább.

Ezenkívül számos más fontos beállítást is testreszabhat.

Beállítások a következő lehetőségek érhetők el :

• 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 (amprögzítheti felülre vagy alulra, hogy értesítési sávot hozzon létre)
• Döntsd el, hogy használsz-e átfedést (ez lehetővé tesziamp, hogy szürkítsd a hátteret, amikor a felugró ablak aktív)
• Tiltsd le a bezárás gombot a böngésződben.
• Mellékelj egy animációt a bejárathoz.

Stílus lapon a következőket teheti:

• Megváltoztathatod a háttér színét, beállíthatod színátmenetként, vagy használhatsz képet háttérként.
• Ha az átfedés engedélyezve van, konfigurálja.
• Ha engedélyezve van a bezárás gomb, akkor azt konfigurálnia kell.

Végül a Speciális lapon található néhány egyéb importálási beállítás, amelyekkel például a következőket teheti:

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

• Tiltsa le az oldal lefelé görgetésének lehetőségét.
• Kerüld a több felugró ablakot (ha ugyanarra az oldalra több felugró ablakot is beillesztettél, ez megakadályozza, hogy a látogatóid bosszúsak legyenek).

Hogy képet kapj arról, hogyan befolyásolják ezek a beállítások a felugró ablakot, íme, hogyan néz ki, ha a pozíciót az ablak jobb alsó sarkába helyezed:

Nézd meg, hogyan rögzült mostantól véglegesen a felugró ablak a jobb alsó sarokban. Egy görgetőbillentyű és egy belépési animáció együttes használatával szép, diszkrét becsúsztatási hatást érhetsz el.

Felugró ablakokat az Elementor vizuális szerkesztőjével is létrehozhatsz

Amint elvégezted a felugró ablak alapvető beállításait, elkezdheted a felugró ablak tényleges tartalmának megtervezését az elemek vizuális drag and drop felületre való húzásával.

Bármelyik Elementor widgetet használhatod, amivel nagyfokú kontrollt biztosítasz a végső design felett. Az Űrlap widget az egyetlen dolog, amit feltétlenül meg kell adnod, mert csak ez teszi lehetővé az e-mail feliratkozási űrlap létrehozását.

Az Űrlap widgettel teljes mértékben szabályozhatod a feltölteni kívánt mezőket, valamint a küldés gomb szövegét és megjelenését.amp:

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

Ahogy korábban említettük, nagy mértékben befolyásolhatod a webhelyed megjelenését, és hozzáférhetsz néhány hasznos widgethez is, amelyek segíthetnek a konverziós arány növelésében.

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

Amikor elégedett vagy az alkotásoddal, meg akarod osztani a világgal. A KÖZZÉTÉTEL gomb megnyomása után egy sor kérdést fogsz kapni. Szemléltetésül:

Meg lehet adni azokat a feltételeket, amelyek teljesülése esetén a felugró ablak megjelenjen? Kiválaszthatod, hogy mely oldalakat szeretnéd megjeleníteni a keresési eredmények között, vagy kizárni belőlük. Annyi feltételt adhatsz meg, amennyit csak szeretnél.

Mi akkor az az esemény, ami a felugró ablakot megjeleníti? Kiválaszthatod, hogy a felugró ablak azonnal megjelenjen-e az oldal betöltésekor, görgetéskor, vagy amikor a felhasználó egy adott elemre görget, többek között. Mindezeknek a beállításoknak megvannak a sajátjuk, így teljes testreszabást tesznek lehetővé.

Végül, de nem utolsósorban, néhány speciális szabályt is láthatsz, például hogy a felugró ablak csak a visszatérő látogatóknak jelenjen meg, csak meghatározott számú alkalommal jelenjen meg, vagy esetleg csak akkor jelenjen meg, ha a látogató egy adott URL-címről érkezik a webhelyedre. Van még néhány további szabály is. Ezek a beállítások 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ók igényeinek figyelembevételével tervezd meg azt.

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 gombra kattintás utánamp, hogyan fog kinézni a felugró ablak.

A felugró ablakok testreszabhatók, és dinamikus tartalmat is hozzáadhatunk hozzájuk.

Emeljük a következő szintre, jó? Eddig kiválasztottunk egy sablont, és egy-két alkalommal módosítottunk rajta, és nagyjából ennyi. Képzeljük el azt a forgatókönyvet, amelyben tovább szeretnénk testreszabni a felugró ablakunkat.

Visszatértünk a folyamat ÚJ FELÚJÓ ABLAK HOZZÁADÁSA szakaszához, ahol ismét megadhatunk egy címet és választhatunk egy sablont.

Ezután kiválaszthatjuk, elvégezhetjük a szükséges módosításokat az alapbeállításokon, és ismét a KÖZZÉTÉTEL gombra kattinthatunk.

Oké, itt kezdenek érdekessé válni a dolgok. Az Elementor segítségével dinamikus adatokat kérhetünk le a WordPress telepítésünkből, és beilleszthetjük azokat a felugró ablakba. Olyan információkat is megadhatunk, mint a felhasználó neve, az oldal címe és így tovább.

Vegyük figyelembe a következő forgatókönyvet: WooCommerce-t futtatunk, és szeretnénk tájékoztatni egy felhasználót arról, hogy kedvezmény érhető el az általa jelenleg megtekintett termékre. Kezdéshez jelöljön ki egy szövegrészt a sablonból, majd kattintson a Dinamikus gombra az oldalsávon:

Széles választék közül választhatunk, beleértve a bejegyzésből származó információkat, az oldal egészéről származó információkat, médiainformációkat, szerzői információkat, sőt még a WooCommerce információkat is. Kiválasztunk egy termékcímet, és a kiválasztás eredményeként az hozzáadódik a szöveges tartalomblokkhoz.

Tegyük fel, hogy az adatbázis adatait nem sikerült megfelelően lekérni. Ebben az esetben megadható néhány szöveg a szöveg előtt, néhány szöveg után, és egy tartalék szöveg (arra az esetre, ha az adatbázis adatait nem sikerült megfelelően lekérni).

Ismételjük meg ezt a folyamatot a gombbal, amely megjeleníti a termék árát. Az előző szöveget megfogalmazhatjuk úgy, hogy VÁSÁROLJON MOST, hogy meggyőző cselekvésre ösztönözzön minket:

Sőt, tovább is mehetünk, és a termék képét használhatjuk a felugró ablak háttereként.

Amikor a KÖZZÉTÉTEL gombra kattintunk, ismét a közzétételi beállítások jelennek meg, ahol megadhatjuk, hogy a felugró ablak csak a WooCommerce oldalakon jelenjen meg. Az időzítőt 15 másodperc inaktivitás utáni aktiválásra állítjuk be. Végül így alakult:

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