CMS juhend

Kuidas ehitada CMS-is sisulehti ja blogipostitusi

See juhend aitab sul samm-sammult luua Erply CMS-is sisulehti ja blogisid. Alustame õigetest seadistustest, liigume edasi editori kasutamise juurde ning lõpetame widgetite, piltide ja bännerite lisamisega.

NB! AI-ga sisu loomise reegel: kogu sisulehe kujundus (CSS) tuleb luua ainult konkreetse klassinime skoobis, mitte globaalselt. Kuna kogu sisu kuulub koodis .cms klassi, peavad kõik uued stiilid olema kapseldatud .cms klassi sisse. Kui seda ei tee, võivad teised lehe elemendid nagu header või footer tahtmatult disaini muuta. Lisaks loo ainult lehekülje põhisisu – headerit, menüüd ja footerit ei ole vaja genereerida, sest need on juba olemas.

Navigeerimine Page Settings Editor Koodi lisamine Ekraanivaated Tõlked Widgetid Pildid ja bannerid

1. Navigeerimine CMS-i

CMS-i jõuad kahel viisil:

Variant 1

Erply Back-Office → Rakendused (Apps) → Lumav B2B V3 Admin → CMS → Pages või Blogs

Variant 2

Erply Back-Office → Lumav E-COM → Admin → CMS → Pages või Blogs

2. Page Settings – alusta õigetest seadistustest

Uue sisulehe või blogipostituse loomisel tuleb kõigepealt paika panna lehe seaded.

Uue lehe lisamisel: CMS → Pages → Add
Olemasoleva lehe muutmisel: CMS → Pages → Page Settings

Kohustuslikud väljad

Name
Url Key
Preview Name

Preview Name tuleb täita kõigis keeltes, milles plaanid lehte kuvada.

Soovituslikud, kuid mitte kohustuslikud väljad

Meta Title
Meta Description

Meta Description on SEO jaoks kasulik – sinna tasub lisada lühike sisukirjeldus.

Piltide ja kuvamisega seotud väljad

Preview Image
Preview Image Alt Text
Availability

Availability juures peab valima vähemalt ühe skoobi. Avalehe puhul vali kõik skoobid, sest olenemata keelest on alati üks koduleht, kuhu tagasi suunatakse. Kõigi avalehtede Url Key on home.

Redirect From

Kui lehekülg esineb mitmes keeles, lisa siia teiste keelte url-path lõpud (relative path), eraldatuna komadega. Tühikuid ei ole vaja kasutada.

Url Key: privaatsustingimused Redirect From: privacy-policy,privatuma-noteikumi,privatumo-politika,datenschutzbestimmungen,integritetspolicy,tietosuojakaytanto

Display Page At

Siin valid, kas lehe linki kuvatakse päises (Header), jaluses (Footer) või töölaual (Workspace). Workspace variant kehtib ainult sisse loginud kasutajale.

Pärast seadistuste täitmist vajuta kindlasti Add.

3. Editor – kus sisu tegelikult ehitad

Kui Page Settings on paigas, mine edasi editorisse:

CMS → Pages → Editor

Pärast muudatuste tegemist vajuta alati Save Template.

Enne AI abil loodud koodi kasutamist kontrolli uuesti, et:
1) kogu CSS oleks .cms skoobis;
2) loodud oleks ainult lehe põhisisu, mitte header, menüü ega footer.

4. Koodi lisamine CMS Editori

4.1 HTML-kood (komponendi struktuur)

Paremal menüüs vali Open Blocks (+ sümbol) → Custom Code.
Lohista komponent soovitud asukohta.
Lisa avanevasse aknasse üksiku komponendi HTML-kood.

4.2 CSS-kood (komponendi stiil)

Kui HTML on paigas, lisa sellele ka stiil.

Ülemisel ribal vajuta allanoolega nuppu Import Template.
Seal on järjest kogu lehe HTML-struktuur ja allpool kogu lehe stiil.
Keri kõige alla.
Lisa AI käest saadud CSS-komponent kõige lõppu, enne märki.

Kui soovid olemasolevat lehte kopeerida ja hakata selle põhjal uut lehte ehitama, saad samast Import Template vaatest kogu koodi kopeerida ja järgmise lehe sisse kleepida. See sisaldab kogu lehe sisu.

5. Ekraanivaadete optimeerimine

Üleval vasakul nurgas saad valida, millise ekraani jaoks muudatusi teed:

PC → Tablet → Mobiil

Kõik uued muudatused tehakse arvutivaates.
Kujunduse reguleerimisel kehtib loogika suuremast väiksemale.
Kui muudad kujundust Tablet vaates, kajastuvad need muudatused ka mobiilivaates.
Arvutivaade jääb seejuures puutumata.

6. (Avalehe) tõlked

Kui soovid tekstielementidele erinevate keelte tõlkeid lisada:

Klikka tekstielemendile.
Vajuta paremal menüüribal mutrivõtmele.
Lisa erinevate keelte tõlked vastavatele väljadele.

7. Widgetid

Widgetite avastamiseks ava paremal menüüribal Blocks (“+”-märk) ja keri alla jaotiseni Widgets.

Näiteks leiad sealt widgetid nagu Latest Products, Blog, Custom Products ja Best Selling Products.

Widgeti lisamine lehele

Lohista soovitud widget sobivasse kohta lehel.

Widgetide seadistused

Paremal menüüribal ava Component Settings (mutrivõti). Seal saad määrata Records ehk mitu toodet, blogipostitust või muud elementi widgetis kuvatakse.

Soovitus: optimaalseks kasutuseks märgi 20 records. Kui arv on suurem, muutub widget liiga pikaks ja lehe laadimine võib aeglustuda.

Product Group Widget

Product Group Widgeti puhul märgi samas kohas grupi ID-d, eraldatuna komaga ja ilma tühikuteta.

Näide: 2,6,10

Custom Products Widget

Custom Products Widgetisse saad siduda ise vabalt valitud tooted. Selle loogika on veidi teistsugune:

Mine: Admin → Modules → Custom Product Widgets
Sisesta uue widgeti nimetus ja vajuta Create.
Ava Manage.
Täida Display Name soovitud keeles ja vajuta Save Names.
Lisa või kustuta soovitud tooted.
Pärast muudatusi vajuta all paremal nuppu Update Widget.
Kopeeri Widgeti ID.
Mine CMS äpis: Widgets → Custom Products → Component settings.
Lisa kopeeritud Widget ID ja näidatav toodete kogus.

8. Pildid

Uue pildi lisamisel vali kõigepealt arvutist soovitud fail ja seejärel klikka ilmunud failile.

Soovi korral saad valida pilte ka Uploaded images alt, kui need on juba varem Erply CDN-i üles laetud.

Neid pilte saab hallata Erply rakenduse Image Storage App kaudu, mille saab App Store’ist Erplysse laadida.

Olemasoleva pildi muutmiseks tee pildielemendi peal topeltklõps.

Suurtele banneritele on optimaalne pildisuurus umbes 300–400 kB. Mida vähem võtab pilt lehel ruumi, seda väiksem võiks olla ka faili suurus.

9. Banner

Bänner koosneb kahest komponendist.

9.1 Banner Swiper

Esmalt lohista paika Banner Swiper. See on konteiner, mille sisse hakkad bänneri sisu ehitama.

9.2 Banner Slide

Banner Swiper elemendi sisse tuleb lohistada Banner Slide. Kui soovitud bänneris on näiteks kolm slaidi või pilti, tuleb seda teha kolm korda.

Banner Slide’ile pildi lisamine

Klikka slaidile.
Paremal menüüs ava Open Style Manager (pintsel).
Vali Decorations → Background → + → Image → Images.
Vali soovitud pilt bänneri slaidile.

Soovi korral lohista slaidile juurde ka tekstiblokk, link, nupp või mõni muu element.