Dijelovi stranice (sekcije)
Stranice dućana slažu se od gotovih dijelova. U CMS-u se zovu sekcije. Ima ih dvadeset (15 slobodnih + 3 obavezne + 2 u paru zaglavlje/podnožje).
Petnaest slobodno biraš hoćeš li ih i gdje staviti, tri (na dnu ovog popisa) su obavezna srž naplate i stranice proizvoda (postoje na svakoj trgovini, ne mogu se ukloniti), a zaglavlje i podnožje su poseban par: slažu se kao sekcije, ali dućan ih uvijek prikazuje, bilo tvoje bilo ugrađeno zadano.
Svaka sekcija ima nekoliko izgleda (varijanti) i vlastite postavke, i nijedna ne traži poznavanje koda.
Kako se slažu, kako se pregledaju prije objave i što smije koji paket, vidiš na stranici Izgled dućana.
Redoslijed stavki unutar sekcije
Šest sekcija ne prima jednu vrijednost nego listu stavki: Česta pitanja, Galerija slika, Pojas povjerenja, Prednosti, Mreža kategorija (kod ručnog odabira kategorija) i Podnožje (stupci, i poveznice unutar svakog stupca). Kod svih šest svaki redak liste ima dvije strelice (gore i dolje) uz gumb za uklanjanje. Prva strelica gore i zadnja strelica dolje su onemogućene, jer tu nema kamo pomaknuti.
Redoslijed redaka u builderu je točno redoslijed kojim se pojavljuju u dućanu. Sekcija ništa sama ne sortira, nego sprema popis onim redom u kojem ga vidiš. Kod Podnožja je lista ugniježđena: stupci imaju svoje strelice, a poveznice unutar svakog stupca imaju vlastite, neovisne o ostalim stupcima.
Uvodni i tekstualni dijelovi
Traka najave
Uska traka iznad zaglavlja s jednom porukom i neobaveznom poveznicom. Bira se ide li preko cijele širine ili unutar sadržaja.
Biraš i boju pozadine (primarna, svijetla ili boja površine) i boju teksta: zadano je „automatski", koji uvijek jamči čitljivost uz odabranu pozadinu. Druge dvije opcije su ručni odabir koji SMIJEŠ napraviti nečitkim, pa ih biraj oprezno i provjeri u pregledu nacrta. Prekidačem biraš i smije li je kupac zatvoriti (X gumb).
Primjer: „Besplatna dostava iznad 50 € →".
Posebno: ovo je jedini dio koji se pojavljuje na svakoj stranici dućana, zato se uređuje pod stranicom „Okvir", a ne pod pojedinom stranicom. Koliko ih smije biti: 1.
Naslovni blok
Primjer: naslovnica koja otvara s „Domaći med iz Slavonije" i gumbom „Pogledaj ponudu".
Gdje ide: početna, kategorija, content stranica, blog i stranica 404. Namjerno ne ide na stranicu proizvoda (gurnuo bi „Dodaj u košaricu" ispod ruba), na rezultate pretrage ni na naplatu. Koliko ih smije biti: 2.
Bogati tekst
Odlomak proze s naslovom. Tijelo se piše u Markdownu, isto kao content stranice i blog, pa smiješ podebljati, dodati popis ili poveznicu. Tri izgleda: usko, puna širina, dva stupca.
Primjer: „O nama" odlomak na dnu početne.
Koliko ih smije biti: do granice stranice (20).
Slika i tekst
Slika uz naslov, tekst i gumb. Slika ide lijevo, desno ili naizmjenično. U tom slučaju svaki sljedeći takav dio okrene stranu, pa se dobije cik-cak. Uz sliku upisuješ i alt tekst (opis za čitače ekrana i tražilice) i biraš omjer slike (kvadrat, 4∶3 ili 16∶9).
Primjer: tri bloka jedan ispod drugoga koji objašnjavaju proizvodni proces.
Koliko ih smije biti: 4.
Razdjelnik
Vodoravna crta ili prazan prostor između dva dijela. Treći izgled je crta s tekstom u sredini. Biraš i visinu razmaka koji dio ostavlja.
Primjer: zrak između kampanjskog bloka i mreže proizvoda.
Koliko ih smije biti: do granice stranice (20).
Povjerenje i uvjeravanje
Pojas povjerenja
Dvije do pet kratkih tvrdnji s ikonom. Tri izgleda: pilule, ikone u redu, s rubom.
Primjer: „Brza dostava · Povrat 14 dana · Sigurna naplata".
Koliko ih smije biti: 2. Treći pojas nije naglašavanje nego šum.
Prednosti
Dva do četiri stupca, svaki s ikonom, naslovom i kratkim opisom. Izgled bira broj stupaca. Neobavezan naslov iznad stupaca.
Primjer: „Ručna izrada · Dostava u 24 h · Poklon pakiranje".
Koliko ih smije biti: do granice stranice (20).
Poziv na akciju
Pojas u boji s naslovom, kratkim tekstom i jednim gumbom. Tri izgleda: puna boja, samo obrub, s pozadinskom slikom. Boju pojasa biraš od tri ponuđene (primarna, svijetla, boja površine), nije slobodan odabir boje (hex), nego zatvoren popis koji jamči čitljivost teksta na pozadini u svakoj od gotovih tema.
Primjer: „Prijavi se na newsletter i dobij 10 % popusta".
Koliko ih smije biti: 2. Treći poziv na akciju na istoj stranici nije jači poziv nego slabiji.
Česta pitanja
Uz prikaz, ova sekcija dućanu dodaje i strukturirane podatke za tražilice: pitanja i odgovori idu Googleu u obliku koji zna prikazati kao prošireni rezultat. Više o tome na stranici SEO.
Primjer: „Koliko traje dostava?", „Mogu li vratiti proizvod?".
Koliko ih smije biti: 1. Dva bloka čestih pitanja na istoj stranici tražilica ne bi ispravno pročitala.
Slike i video
Galerija slika
Primjer: fotografije s radionice na content stranici „O nama".
Koliko ih smije biti: 2.
Video
Jedan video, na dva načina: ugrađeni (YouTube ili Vimeo, zalijepi se puna adresa videa, oznaka se izvlači sama) ili vlastita datoteka. Uz video ide neobavezna naslovna slika i naslov.
Za vlastite datoteke postoji i sklopka „pokreni automatski". Video tada kreće bez zvuka, jer preglednici zvuk koji krene sam blokiraju.
Primjer: YouTube video s predstavljanjem dućana na početnoj.
Vlastita datoteka se učitava kroz istu medijsku biblioteku
kao slike. Birač prihvaća isključivo MP4 (video/mp4), do 100 MB po
datoteci. Slike u istoj biblioteci ostaju na 5 MB, video ima vlastitu, veću
granicu. Video troši istu prostornu kvotu kao slike (vidi
Paketi).
Koliko ih smije biti: 1 (video je težak za učitavanje stranice).
Dijelovi koji dohvaćaju podatke
Sljedeća tri dijela pri izradi stranice traže nešto iz baze. Zato ih na jednoj stranici smije biti najviše 10 ukupno. U toj se granici zbrajaju sva tri zajedno.
Uz tu granicu postoji i zaseban budžet od 6 različitih izvora podataka po stranici. Sekcije koje čitaju isti izvor (npr. dvije mreže proizvoda s izvorom „najnoviji") dijele jedno mjesto u tom budžetu, a svaka s drukčijim izvorom (npr. svaka svojom kategorijom) troši svoje. Objava može pasti na ovom budžetu i kad je broj sekcija ispod granice od 10.
Mreža proizvoda
Artikli iz kataloga. Izvor biraš: najnoviji, najprodavaniji, jedna kategorija ili ručni odabir artikala. Broj artikala je od 4 do 24, u koracima od 4 (zadano 12). Tri izgleda: mreža, karusel, istaknuti. Neobavezan naslov iznad mreže. Dva prekidača: „Prikaži cijenu" (zadano uključeno) i „Prikaži ocjenu" (zadano isključeno). Isključi cijenu ako ne želiš da se cijena vidi prije klika na artikl.
Primjer: „Novo u ponudi": najnovijih 8 artikala na početnoj.
Koliko ih smije biti: 10.
Izdvojene recenzije
Najbolje objavljene recenzije dućana, uz potvrđenu kupnju. Biraš koliko ih se prikazuje (1–6) i najmanju ocjenu (zadano 4). Dva izgleda: kartice ili citat. Neobavezan naslov iznad njih.
Primjer: tri petice ispod mreže proizvoda na početnoj.
Koliko ih smije biti: 1.
Najnovije s bloga
Zadnje objave s bloga, kao kartice ili kao popis. Od 2 do 6 objava. Neobavezan naslov iznad njih.
Primjer: „Iz našeg dnevnika" na dnu početne.
Gdje ide: na sve stranice osim same stranice bloga. Ondje bi popis objava stajao iznad popisa objava. Koliko ih smije biti: 1.
Navigacija po ponudi
Mreža kategorija
Kategorije dućana kao kartice sa slikom, pilule ili popis. Izvor: sve kategorije, podkategorije jedne kategorije, ili ručni odabir (uz svaku ručno odabranu kategoriju možeš staviti vlastitu sliku). Neobavezan naslov iznad mreže (prazno = bez naslova), i broj koliko kategorija se prikazuje (od 2 do 24, zadano 12).
Primjer: šest kartica kategorija odmah ispod naslovnog bloka.
Posebno: ova sekcija se ne broji u granicu od deset gornjih dijelova. Radi s popisom kategorija koji stranica ionako već ima, bez novog upita. Koliko ih smije biti: 2.
Zaglavlje i podnožje
Ova dva dijela se, za razliku od ostalih petnaest slobodnih, uređuju isključivo na stranici „Okvir (zaglavlje i podnožje)" naprednog načina, i svaki smije imati najviše jednu sekciju: dva zaglavlja na istom dućanu builder ne nudi. Dok jedno od njih ne složiš sam, dućan servira ugrađeno zadano zaglavlje/podnožje. Nema praznine ni greške. Više o ovom mehanizmu na stranici Izgled dućana.
Zaglavlje
Tri izgleda: dvoredno (zadano: logo, pretraga i akcije u gornjem redu, kategorije u traci ispod), jednoredno (logo, padajući izbornik kategorija i akcije u jednom redu, pretraga ispod) i centrirano (sve elementi centrirani jedan ispod drugoga).
Postavke: neobavezan logo (bez njega zaglavlje prikazuje naziv dućana), „Prikaži pretragu" (zadano uključeno), „Prikaži kategorije" (zadano uključeno, traka se svejedno ne prikazuje ako dućan nema nijednu kategoriju), „Ljepljivo zaglavlje" (ostaje na vrhu pri skrolanju, zadano uključeno) i boja pozadine.
Boja pozadine je ovdje iznimka: za razliku od ostalih
sekcija koje boju biraju sa zatvorenog popisa, ovdje je polje slobodan unos:
naziv CSS tokena teme, hex kod ili nazivna boja. Zadana vrijednost je
var(--boja-zaglavlje).
Uvijek prikazano, bez postavke za sakrivanje: košarica s brojačem i poveznica na račun. Ako je uključeno prebacivanje svijetlog/tamnog načina za dućan, gumb za prebacivanje se prikazuje u sve tri varijante.
Podnožje
Tri izgleda: jednostavno (zadano: samo naziv dućana i pravni linkovi), sa stupcima (stupci s poveznicama plus pravni linkovi) i prošireno (tekst o dućanu, stupci, društvene mreže, ikone plaćanja i pravni linkovi, sve zajedno).
Postavke: stupci (od 2 do 4, svaki s naslovom i od 1 do 8 poveznica: tekst plus adresa. Strelice gore/dolje su opisane u odjeljku „Redoslijed stavki unutar sekcije" na vrhu ove stranice), tekst o dućanu (višeredni, najviše 400 znakova), društvene mreže (višestruki izbor između Facebooka, Instagrama, TikToka, YouTubea i LinkedIna) i „Ikone plaćanja" (zadano uključeno).
Koje od tih postavki se stvarno vide ovisi o odabranom izgledu. Jednostavni izgled npr. stupce, tekst o dućanu i mreže uopće ne iscrtava, iako ih smiješ popuniti.
Uvijek prikazano, bez postavke za sakrivanje: tri pravna linka (uvjeti korištenja, privatnost, povrat). Natpis „Pokreće WebShopHR" ne kontrolira ova sekcija nego paket dućana. Free ga ne može ukloniti čak ni kad podnožje sam složiš.
Srž naplate i proizvoda
Tri sekcije ne pripadaju gornjim skupinama jer nisu slobodan izbor. Bez njih se raspored te stranice ne može spremiti. Svaka i dalje ima svoje postavke koje smiješ mijenjati. Samo je ne smiješ ukloniti ni premjestiti na drugu stranicu.
Sažetak košarice
Stavke košarice i iznos koji kupac na naplati stvarno plaća. Jedini izgled: popis stavki i zbroj. Jedina postavka je neobavezan naslov iznad sažetka. Prazno polje znači bez naslova.
Gdje ide: isključivo naplata. Posebno: ne može se ukloniti s naplate. Kupac mora vidjeti koliko plaća PRIJE nego potvrdi narudžbu: to je zakonska obveza obavješćivanja potrošača o cijeni, ne stvar izgleda stranice, pa alat taj klik ne dopušta. Koliko ih smije biti: 1.
Podaci i plaćanje
Cijela forma naplate: polja za kupca, dostavu, plaćanje i gumb koji šalje narudžbu. Jedini izgled: jedan stupac. Jedina postavka je neobavezan naslov iznad forme.
Gdje ide: isključivo naplata. Posebno: ne može se ukloniti s naplate. Bez nje kupac ne može naručiti. Polja forme su ugovor s naplatom (poslužitelj čita točno određena imena polja iz jednog slanja), pa se pojedina polja ne mogu dodavati ni micati. Koliko ih smije biti: 1.
Kupnja proizvoda
Cijena, izbor varijante, količina i gumb „Dodaj u košaricu" na stranici proizvoda. Jedini izgled: uz galeriju. Jedina postavka je natpis gumba. Prazno polje vraća zadani „Dodaj u košaricu".
Gdje ide: isključivo stranica proizvoda. Posebno: ne može se ukloniti sa stranice proizvoda. Bez nje se s te stranice ne može kupiti. Ocjena, opis i recenzije NISU dio ove sekcije, to je zaseban sadržaj stranice koji uređuješ kao i druge dijelove. Koliko ih smije biti: 1.
Napredno: uređivanje pojedine sekcije kroz kod
Svih dvadeset sekcija iznad uređuješ kroz obrasce u builderu, bez ijedne linije koda. Za nešto što obrazac ne nudi postoji i teži put: izravno uređivanje predloška sekcije u editoru koda teme. Predlošci sekcija su ondje namjerno skriveni (traže se izričito) jer bi inače dvije trećine popisa predložaka bile nešto što gotovo nitko ne treba otvoriti.
Što znači "forkati" sekciju
Čim jednom spremiš izmjenu na predlošku POJEDINE sekcije (npr. predlošku Naslovnog bloka), ta sekcija za tvoju trgovinu prestaje primati platformska poboljšanja: nadogradnje i ispravke koje WebShopHR ubuduće doda toj sekciji tebe više ne dotiču, sve dok se ne vratiš na platformsku verziju. Ostale sekcije koje nisi dirao i dalje se ažuriraju normalno. Forkanje je PO SEKCIJI, ne po cijeloj temi odjednom.
Ovo je odluka s posljedicom, isto kao grupiranje varijanti: jednom kad kreneš uređivati kod, sam preuzimaš odgovornost da izmijenjeni predložak i dalje razumije oblik postavki koji mu obrazac buildera šalje.
Vraćanje na platformsku verziju
Vraćanje pojedine sekcije na platformsku verziju smije samo vlasnik, ne upravitelj, jer je nepovratno. Prije potvrde provjeri razliku između svoje i platformske verzije, da znaš točno što gubiš.
⚠ Tvoja izmjena se NE ČUVA nigdje na poslužitelju. Vraćanje na platformsku verziju prepiše tvoj kod platformskim. Stari kod dobiješ NAZAD u odgovoru tog istog poziva: to je jedina prilika da ga sam sačuvaš, prije nego potvrdiš. WebShopHR čuva povijest OBJAVA izgleda (vidi Izgled dućana), ali NE i povijest izmjena predložaka. Nakon potvrde je tvoja verzija nepovratno izgubljena.
Boja u postavkama sekcija
Od svih dvadeset sekcija, tri imaju postavku boje pozadine (opisano kod svake od njih gore): Traka najave, Poziv na akciju i Zaglavlje.
Kod prve dvije izbor je zatvoren popis gotovih opcija teme, ne slobodan odabir boje (hex). Zatvoren popis jamči čitljivost teksta na pozadini u svakoj gotovoj temi, dok bi slobodan odabir to mogao pokvariti. Zaglavlje je iznimka: polje boje pozadine je slobodan unos (naziv CSS tokena, hex ili nazivna boja), naslijeđen iz vremena prije nego je zaglavlje postalo sekcija. Pripazi pri mijenjanju da tekst i ikone ostanu čitljivi.
Slike u sekcijama
Svaka sekcija koja prima sliku uzima je iz medijske biblioteke i pamti ključ datoteke, ne njezinu adresu. Zato prelazak na drukčiji način posluživanja slika (npr. automatski WebP i smanjivanje) ne traži da išta prepravljaš. Slike se same počnu posluživati na nov način.
Povezane stranice
