V tem besedilu se boste naučili, kako ustvariti svojo spletno trgovino z uporabo vtičnika Elementor Pro in teme Ocean WP. Prva stvar, ki jo potrebujete, je, da nadgradite Elementor na različico Pro, saj ima vse možnosti, ki jih potrebujemo za ustvarjanje trgovine WooCommerce, potrebujete pa tudi temo Ocean WP, ki je brezplačna, ter vtičnik WooCommerce.
Spletna trgovina - izdelava
Ustvariti morate novo stran in jo poimenovati trgovina ali kakor koli želite, v tem primeru se bo imenovala Moja trgovina, nato pa v nastavitvah teme v možnostih Postavitev vsebine morate ga nastaviti na 100% Polna širina, kot tudi za izklop robov in klik na Urejanje z Elementorjem.
Ko se v Elementorju odpre urejevalnik strani, začnemo ustvarjati stran. Začnemo z dodajanjem naslova, ki ga stiliziramo pod možnostjo Slog, tako da mu spremenimo barvo, velikost pisave in vse ostalo po želji, dodamo presledke in urejevalnik besedil ter dobimo naslovni razdelek, ki ga lahko shranimo kot predlogo in trenutno izgleda kot na spodnji sliki.
Ko to storimo, je čas, da začnemo dodajati elemente WooCommerce. Poiščimo kodo elementa. Woo izdelki element in ga dodajte na stran. Privzeto so 4 izdelki v 4 stolpcih in to bomo spremenili glede na to, koliko izdelkov imamo in koliko stolpcev (lahko nastavite od 1 do 6) želimo.
Za nastavitev, katere izdelke želimo prikazati nazadnje, spremenimo stvari pod možnostjo Vsebina, v službi Poizvedba. Zadnje izdelke lahko izberemo privzeto ali pa jih izberemo ročno, potem lahko izberemo pod avtorjem, v tem primeru posebej zato, ker je glasba, lahko pa je avtor npr. producent. nato po kategorijah izdelkov, po oznakah, po filtrih in podobno. Na vas je, da izberete. Pod opcijo Napredno spremenite lahko robove, razmike, ozadje, obrobe in drugo.
Ko to storimo, shranimo stran in gremo na nadzorno ploščo. Tam v vtičniku WooCommerce ustvarimo izdelke in nastavimo kategorije, ceno, oznake in ali so ločeni ali ne.
S klikom na zvezdice bomo izbrali, da bo izdelek označen in če smo v rubriki nastavili prikaz označenih izdelkov, se bodo prikazali vsi izdelki, ki smo jim zvezdico aktivirali.
Naslednja stvar, ki jo bomo ustvarili, je nov razdelek z 2 stolpcema. Izbrane izdelke bomo ločili od ostalih in naredili tako imenovani razdelek Call To Action. V en stolpec bomo dodali sliko, v drugega pa besedilo. V en stolpec bomo dodali sliko kode možnosti Slog, a ko ga dodamo, ni prikazan. Da bi to rešili, bomo v stolpec dodali nov element Distančnikali preslednico. Ko smo to naredili, se je slika prikazala, da jo nastavimo, da jo vidimo v celoti ali kolikor želimo, je treba Spaserju prilagoditi dimenzije in slika se bo razširila. Nato ponovno izberemo stolpec in stiliziramo, kako bo videti slika. V drugem stolpcu bomo dodali naslov, besedilo in gumb, ki bo ljudi pozival k dejanjem. Seveda bomo stilizirali tudi ta stolpec, spremenili bomo barvo, črke, velikost pisave, presledke, robove, ozadje in ostalo po želji pod možnostjo Slog.
Ko ustvarimo razdelek CTA (Call To Action), je naslednja stvar, ki jo ustvarimo, prodajni del. Da si olajšamo delo, dodamo že shranjeno predlogo naslovnega dela, ki smo jo ustvarili na začetku besedila in jo le spremenimo, da nista enaki. Nato dodamo element Woo Products in nastavimo, katere izdelke želimo prikazati v tem razdelku. Spremenimo tisto, kar je potrebno pod možnostjo Poizvedba kot prejšnjič in dobimo razdelek, kot je na spodnji sliki.
Če želimo gumb Dodaj v košarico spremeniti tako, da se bolje ujema z ostalo stranjo, moramo iti na nadzorno ploščo, nato na Prilagodite in kliknemo na stran naše trgovine in nato na možnost CSS/JS po meri. Tam vnesemo kratko kodo CSS za spreminjanje gumbov s ciljanjem na specifične oznake WooCommerce, kot je npr ulični izdelki in li.productin jih uporabite za oblikovanje gumbov.
