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

Mindannyian nagy rajongói vagyunk a WooCommerce -nek. A beállítás és a testreszabás egyszerű. A csomag tartalmazza azokat a funkciókat, amelyek megkönnyítik a dinamikus és hatékony e-kereskedelmi áruház létrehozását és kezelését.

A sikeres e-kereskedelmi oldal létrehozásában azonban több van, mint egyszerűen népszerű termékek hozzáadása. Minden oldalnak vizuálisan is vonzónak kell lennie. Minél vizuálisan vonzóbb és felhasználóbarátabb a webhelye, annál valószínűbb, hogy több ügyfelet vonz.

• A felugró ablak konfigurálá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 a bevásárlókosárt és a pénztár oldalt az Ön webhelyének létrehozásakor, az Elementor személyre szabásával teszi vonzóbbá őket.

Lehetősége van arra, hogy újratervezze őket, vagy kezdje elölről. Megismételheti a folyamatot a webhely összes többi oldalán.

A meleg Köszönöm oldal létrehozásával, valamint a Saját fiók és az Általános Szerződési Feltételek oldalak frissítésével megnyerheti ügyfelei szívét és elméjét.

Az Elementor drag and drop funkciója ezzel az oktatóanyaggal együtt biztosítja, hogy problémamentes élményben legyen része az oldalak létrehozásakor.

A wooCommerce üzlet beállítása után érdemes lehet vonzóbbá tenni a látogatókat és az ügyfeleket. Az előugró ablakok hozzáadásával a felhasználó újabb benyomást kelthet, és új vágyat kaphat arra, hogy a boltban maradjon.

 Előugró ablak létrehozásához menjen a Sablonok> Előugró ablakok menüpontra. Megjelenik az összes előugró ablak listája, és ha még nem hozta létre, akkor az alábbiakhoz hasonlót lát:

Miután rákattintott az ÚJ POPUP HOZZÁADÁSA gombra (ami elég magától értetődő), a rendszer megkéri, hogy adjon neki nevet, majd válasszon ki egy sablont a megjelenített előre elkészített amp . Különféle sablonok állnak rendelkezésre több célra; egyesek alkalmasak a bejelentésekre, mások a kedvezmény népszerűsítésére, mások ideálisak arra, hogy ösztönözzék a felhasználókat, hogy iratkozzanak fel valamire. Vannak még olyan amp amelyek figyelmeztetik a felhasználókat a cookie -k használatára vagy más GDPR -értesítésekre. Amint talált valamit, ami tetszik, kattintson rá, és tekintse meg az előnézetet, majd nyomja meg a Beszúrás gombot.

Erre a gombra kattintás után a WordPress háttérprogram felugró ablakok készítőjébe kerül.

Ha már korábban együtt dolgozott az Elementorral, akkor otthon fogja érezni magát a kezelőfelülettel, a lehetőségekkel és azzal, ahogyan mindent elrendeznek. Lényegében ugyanaz a folyamat, mint az Elementor oldalsablonok létrehozása a WordPress -ben.

A képernyő jobb oldalán található a fővászon, amely előnézetet jelenít meg arról, amin éppen dolgozik. Az egyes elemeket külön -külön szerkesztheti és testreszabhatja, ha kiválasztja őket, és kiválasztja a Szerkesztés> Elemek szerkesztése lehetőséget. Ha elkészült, a vezérlők és beállítások a bal oldali oldalsávon jelennek meg, valamint a munka közzétételének lehetősége.

A felugró ablak konfigurálása

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

A felugró ablakok beállításai, amelyek alapértelmezés szerint mindig nyitva vannak, lehetővé teszik a felugró vászon működésének személyre szabását. Ezek a következők:

• Itt szeretné a legtöbb időt tölteni, mert itt különböző típusú előugró ablakokat hozhat létre. Más szóval, a beállítások módosításával a következő hatásokat érheti el:

• A modális előugró ablakok egyfajta modális ablakok.
• Bővítmények, értesítési sávok és így tovább.

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

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

• Módosítsa a kép magasságát és szélességét.
• Változás a függőleges vagy vízszintes helyzetben a tárgy (ex amp le, akkor rögzítse a felső vagy alsó létrehozásához értesítési sáv)
• Döntse el, hogy használ -e fedvényt vagy sem (ez lehetővé teszi, hogy például amp esetén szürke legyen a háttér, amikor az előugró ablak aktív)
• Tiltsa le a bezárás gombot a böngészőben.
• A bejárathoz animációt is mellékeljen.

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

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

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

• Jelenítse meg a bezárás gombot, vagy bizonyos idő elteltével zárja be automatikusan az előugró ablakot.
• A fedvényre kattintva vagy az Esc billentyű megnyomásával megakadályozhatja az ablak bezáródását.

• Tiltsa le az oldal lefelé görgetésének lehetőségét.
• Kerülje a több előugró ablakot (ha több előugró ablakot célozott meg ugyanazon az oldalon, 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, amikor az ablak jobb alsó sarkába Pozíciót

Vessen egy pillantást arra, hogy az előugró ablak hogyan rögzült véglegesen a jobb alsó sarokban. A görgetőkapcsoló és a bejárati animáció együttes használatával szép, diszkrét becsúsztatási hatást érhet el.

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

Amint elvégezte az előugró ablakok alapbeállításait, elkezdheti a felugró ablak tényleges tartalmának tervezését az elemek áthúzásával a vizuális drag-and-drop felületre.

Bármelyik Elementor widgetet használhatja, ami nagyban befolyásolja a végső kialakítást. Az Űrlap widget az egyetlen dolog, amit feltétlenül tartalmaznia kell, mert ez az egyetlen, amely lehetővé teszi az e-mail engedélyezési űrlap létrehozását.

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

Ezen túlmenően erősen javaslom, hogy ismerkedjen meg az Elementor összes kütyüjével és tervezési lehetőségével.

Amint azt korábban említettük, nagymértékben irányíthatja webhelye megjelenését, és néhány hasznos kütyühöz is hozzáférhet, amelyek segíthetnek a konverziós arány növelésében.

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

Ha elégedett azzal, amit létrehozott, akkor szeretné megosztani a világgal. A PUBLISH gomb megnyomását követően kérdések sora jelenik meg. Mint egy illusztráció:

Meg lehet határozni, hogy milyen feltételek mellett szeretné megjeleníteni az előugró ablakot? Kiválaszthatja, hogy mely oldalakat vegye fel vagy zárja ki a keresési eredményekből. Annyi feltétellel rendelkezhet, amennyit csak akar.

Mi tehát az az esemény, amely miatt a felugró ablak megjelenik? Kiválaszthatja, hogy az előugró ablak azonnal megjelenjen -e az oldalbetöltéskor, görgetéskor, vagy amikor a felhasználó egy adott elemre görget, vagy nem. Mindezeknek a beállításoknak megvan a maga beállítása, ami lehetővé teszi a teljes testreszabást.

Végül, de nem utolsósorban látni fog néhány speciális szabályt, például az előugró ablak megjelenítését csak a visszatérő látogatóknak, csak az előugró ablak megjelenítését meghatározott számú alkalommal, vagy talán csak akkor, ha a látogatót egy meghatározott webhelyről irányítják a webhelyére URL. Van még néhány ilyen is. Ezek az opciók jelentősen javíthatják az előugró ablak felhasználói élményét, lehetővé téve a valódi integritás és a felhasználók figyelembevételével történő tervezést.

Végezze el a kívánt módon a beállításokat, majd kattintson a MENTÉS és ZÁRÁS gombra. Erre a gombra kattintva megjelenik az előugró ablak megjelenésének amp .

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

Emeljük a dolgokat a következő szintre, ugye? Eddig egy sablont választottunk ki, és egy -két ülést módosítottunk, és ennyi. Tekintsük azt a forgatókönyvet, amelyben tovább szeretnénk szabni a felugró ablakot.

Visszatértünk a folyamat ÚJ POPUP HOZZÁADÁSA szakaszához, ahol megadhatjuk a címet és kiválaszthatunk egy sablont.

Ezt követően kiválaszthatjuk, elvégezhetjük az alapvető beállítások szükséges módosításait, és még egyszer megnyomhatjuk a PUBLISH 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 beszúrhatjuk azokat a felugró ablakba. Olyan információkat tartalmazhatunk, mint a felhasználó neve, az oldal címe stb.

Vegye figyelembe a következő forgatókönyvet: a WooCommerce szolgáltatást futtatjuk, és szeretnénk tájékoztatni a felhasználót, hogy az éppen megtekintett termékre kedvezmény áll rendelkezésre. A kezdéshez válassza ki a szöveg egy részét a sablonból, majd kattintson az 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édiaadatokat, a szerzői információkat és még a WooCommerce -információkat is. Kiválasztjuk a termék címét, és a kiválasztás eredményeként hozzáadjuk a szöveges tartalom blokkunkhoz.

Tegyük fel, hogy az adatbázis részletei nincsenek megfelelően lekérve. Ebben az esetben lehetséges néhányat megadni a szöveg előtt, néhányat a szöveg után és egy tartalék szöveget (ha az adatbázis részletei nem megfelelően kerülnek lekérésre).

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ÁRJ MOST, hogy meggyőző cselekvésre ösztönözzünk:

Akár egy lépéssel tovább is léphetünk, és a termékképet használhatjuk magának az előugró ablaknak a háttereként.

Amikor megnyomjuk a PUBLISH gombot, ismét megjelennek a közzétételi beállítások, így megadhatjuk, hogy csak azt szeretnénk, ha az előugró ablak a WooCommerce oldalain jelenjen meg. Az időzítőt 15 másodperc tétlenségre állítjuk, hogy kiváltó ok legyen. Így alakult végül:

Bár a kialakítás javítható lenne, láthatja, hogy a felugró ablak hátterében a termék nevét, árát és a termék képét jelenítjük meg. Ragyogó!