Ebből a szövegből megtudhatja, hogyan hozhatja létre online áruházát az Elementor Pro bővítmény és az Ocean WP téma használatával. Az első dolog, amire szükséged van, hogy frissítsd az Elementor-t Pro verzióra, mert minden olyan lehetőség megvan benne, ami egy WooCommerce áruház létrehozásához szükséges, és kell még az Ocean WP téma, ami ingyenes, valamint a WooCommerce bővítmény.
Online áruház – alkotás
Létre kell hoznod egy új oldalt és el kell nevezned boltot vagy bármit, amit akarsz, ebben a példában a Saját bolt neve lesz, majd a témabeállításokban, a lehetőségek között Tartalom elrendezése 1-re kell állítani00% teljes szélesség, valamint a margók kikapcsolásához, és kattintson a gombra Szerkesztés Elementorral.
Miután megnyílik az oldalszerkesztő az Elementorban, elkezdjük létrehozni az oldalt. Kezdjük a cím hozzáadásával, amelyet az opció alatt stílusozunk Stílus, színét, betűméretét és minden mást tetszés szerint módosítva, szóközt és szövegszerkesztőt adva, és megkapjuk a cím részt, amit elmenthetünk sablonként és jelenleg úgy néz ki, mint az alábbi képen.
Miután ezt megtettük, ideje elkezdeni WooCommerce elemek hozzáadását. Keressük meg az elem kódját. Woo termékek elemet, és adja hozzá az oldalhoz. Alapértelmezés szerint 4 termék van 4 oszlopban, és aszerint változtatjuk, hogy hány termékünk van és hány oszlopot (1-től 6-ig állítható) szeretnénk.
Annak érdekében, hogy beállítsuk, mely termékeket szeretnénk utoljára megjeleníteni, az opció alatt változtatunk Tartalom, a munkahelyen Lekérdezés. Az utolsó termékeket alapból választhatjuk ki, vagy manuálisan, majd a szerző alatt választhatunk, ebben a példában kifejezetten azért, mert zene, de a szerző lehet például producer is. majd termékkategóriák, címkék, szűrők és hasonlók szerint. Rajtad múlik a választás. Az opció alatt Fejlett módosíthatja a margókat, a térközt, a hátteret, a kereteket és egyebeket.
Miután ezt megtettük, elmentjük az oldalt, és a vezérlőpultra lépünk. Ott a WooCommerce bővítménynél termékeket hozunk létre, és beállítjuk a kategóriákat, az árat, a címkéket és azt, hogy elkülönüljenek-e vagy sem.
A csillagokra kattintva kiválasztjuk, hogy a termék kiemelésre kerüljön, és ha beállítottuk a kiemelt termékek megjelenítését a rovatban, akkor minden olyan termék megjelenik, amelynél a csillagot aktiváltuk.
A következő dolog, amit létrehozunk, egy új, 2 oszlopos szakasz. A kiválasztott termékeket elkülönítjük a többitől, és elkészítjük az úgynevezett Call To Action szekciót. Az egyik oszlophoz képet adunk, a másikhoz pedig szöveget. Egy oszlophoz hozzáadunk egy opciókód képet Stílus, de amikor hozzáadjuk, nem jelenik meg. Ennek megoldására egy új elemet adunk az oszlophoz Távtartó, vagy szóköz. Amikor ezt megtettük, a kép megjelent, ahhoz, hogy teljes egészében, vagy amennyit szeretnénk, a Spaser méreteit kell beállítani, és a kép kitágul. Ezután ismét kiválasztjuk az oszlopot, és stílusozzuk a kép megjelenését. A második oszlopban hozzáadunk egy címet, szöveget és egy gombot, amely cselekvésre hívja fel az embereket. Természetesen ezt az oszlopot is stílusozzuk, a színt, a betűket, a betűméretet, a szóközöket, a margókat, a hátteret és egyebeket tetszés szerint módosítjuk az opció alatt Stílus.
Miután létrehoztuk a CTA (Call To Action) szakaszt, a következő, amit létrehozunk, az értékesítési rész. A munkánk megkönnyítése érdekében hozzáadjuk a címrész már elmentett sablonját, amit a szöveg elejére hoztunk létre, és csak úgy módosítjuk, hogy ne legyenek egyformák. Ezután hozzáadjuk a Woo Products elemet, és beállítjuk, hogy mely termékeket szeretnénk megjeleníteni ebben a részben. Változtassuk meg a Lekérdezés opció alatt, hogy mit kell az előző alkalommal, és kapjunk egy részt, mint az alábbi képen.
Ha módosítani szeretnénk a Kosárba helyezés gombot, hogy az jobban illeszkedjen az oldal többi részéhez, akkor a vezérlőpultra kell lépnünk, majd a Testreszabás és rákattintunk üzletünk oldalára és utána az opcióra Egyedi CSS/JS. Itt beírunk egy rövid CSS-kódot, hogy módosítsuk a gombokat meghatározott WooCommerce címkék, például utcai termékek és li.termék, és ezekkel alakíthatja ki a gombokat.
