Kan du HTML og CSS? - Designmuligheter i adminverktøyet.
Her er noen tips til ulike måter du kan bruke dette i adminverktøyet for å designe det du ønsker.
8. mars av Linda Fermann
Denne artikkelen er skrevet med forutsetning om at du vet hva HTML og CSS er og at du behersker det. Dersom det som står her er litt "gresk", så vil nok ikke denne artikkelen gi deg så mye. Men dersom du selv, eller eventuelt en av deres andre partnere som et markedsbyrå, behersker dette området, får dere en enorm frihet og mulighet til å styre utseendet og innholdet i nettbutikken deres.
Designmuligheter i adminverktøyet
Dersom du behersker HTML og CSS, så kan du designe det du ønsker på alle sider, artikler, og bunnmeny i adminverktøyet.
Merk at med stor frihet kommer også stort ansvar. Det er også fullt mulig å ødelegge visningen eller til og med hele nettbutikken dersom du skulle ha funnet på noe skikkelig galt. Så vær sikker på hva du driver med.
Tips: Bruk alltid 'Lagre og forhåndsvis'. Da vil du se om det er noen potensielle problemer du har skapt før du lagrer det.
Startoppsett
Her har jeg lagt til noen elementer, "Tittel" og "Banner", "Horisontal linje" og to "HTML"-elementer med innhold.
Disse ser slik ut i admin og i nettbutikken:
Vi skal nedenfor se på ulike måter vi kan legge på design og vi benytter en side som eksempel.
Legge på en klasse på raden
Under design-fanen så finner du en oversikt over de rader som er lagt til under layout-fanen. Her kan du legge på en klasse på denne raden, og gjennom denne få tak i det elementet du ønsker å style. Vi skal her endre på fargen på "Tittel"-elementet.
Legge på en klasse direkte på elementet
På de statiske elementene kan du legge til en klasse direkte på elementet. Trykk på redigeringsikonet på elementet, trykk på "avansert", og legg til så den klassen du ønsker. Denne kan du så benytte under design-fanen for å style elementet.
Her endrer vi på den horisontale streken, hvor vi gjør den oransje og tykkere.
Bruke HTML-element og benytte inline CSS
Du kan skrive din egen HTML ved å benytte HTML-elementet. I ytterste konsekvens kan du lage alt innhold på en side i ett HTML-element. I dette eksemplet har vi benyttet inline CSS.
Bruk HTML-element og "Design"-fanen for å legge til CSS
Skriv HTML og legg på klasser eller id'er på de ulike elementene. Disse skriver du så CSS til under design-fanen.
Vær forsiktig med hvordan du benytter CSS i "Bunnmeny". Du bør definere egne id'er eller custom-klasser, og så benytte disse for å style.
Årsak: Bunnmenyen opptrer på alle sidene i nettbutikken, og det vil si at dersom du styler en klasse som benyttes i løsningens standard kode, så vil det du gjør i bunnmenyen endre på dette overalt.
Gjøre endringer på tilleggsprodukter
På samme måte kan endringer gjøres på tilleggsprodukter som er innholdselementer. Ta gjerne en titt i demobutikken under "Innholdselementer", hvor det er mange av disse tilleggsproduktene som har en egen underside hvor vi har gjort CSS-endringer (i dialogboksen som kommer opp, legger du inn "test" på brukernavn og passord).
Kurs: Designmuligheter i adminverktøyet og nettbutikken
Dersom du ønsker å lære mer om ulike designmuligheter, så tilbyr vi kurs i dette også.
I dette kurset vil vi vise dere:
- Hvor og hvordan dere kan endre designet selv, blant annet ved hjelp av CSS og HTML
- Side layout
- Cloudinary og hvordan bruke det
Klikk på kurset for å se nærmere detaljer om det.