Tips til en enkel måte å endre utseende på innholdselementer

21. juni 2021 av Linda Fermann

Alle tilleggsprodukter som er innholdselementer har et standard utseende. Dersom du kan CSS, så er det fullt mulig å selv justere på hvordan det skal se ut på hvert enkelt element.

Men det er nok de færreste som bestitter denne kompetansen, og da er et tips at vi utvikler denne CSS-koden for dere. Vi kan til og med utvikle flere ulike utrykk på samme element, og så velger du hvilket utseende du ønsker å benytte i de ulike tilfellene, eller om du ønsker standard utseende. På denne måten kan dere skape et livlig og rikt uttrykk i nettbutikken.

Måten dette løses på, er at vi i samarbeid med deg utvikler det utseende du ønsker på elementet, og så knyttes dette utseende til et "kodeord". Hver gang du ønsker å benytte det utseende, så legger du inn det "kodeordet" på elementet.

Vi skal se litt konkret på et par eksempler på hvor vi endrer på utseende på innholdselementet "Bilde med knapper". (Disse eksemplene ligger som bilder, da de bare ble manipulert rett i nettleseren for eksemplets skyld - og det er utallige variasjoner for hvordan det kan se ut).

Standard utseende på "Bilde med knapper":

Eksempel hvor alle kanter er avrundet og tekstboksen er gjort litt større:

Eksempel på hvor tekstboksen dekker mesteparten av bildet, overskrift og tekst er midtstilt, knapper er gjort noe større:

Hvordan legge til "kodeordet" for å benytte endret utseende?

Hvis vi ser på det siste eksemplet, og tenker oss at vi har avtalt at det utseende heter "full-textbox". Det eneste du da behøver å gjøre for å benytte dette utseende på et spesifikt element, er å legge til "full-textbox" som "CSS Klasse" under "Avansert" på elementet, se skjermbilde nedenfor.

Eksempler fra kunder som har fått utviklet "sitt" uttrykk på elementer

Oluf Lorentzen arbeider aktivt med uttrykket i nettbutikken og her er et par eksempel på hvor vi har utviklet en slik CSS-kode, og som de benytter når de ønsker dette utseende. Se gjerne nettbutikken deres for inspirasjon, https://www.oluf.no, og her er også litt bakgrunnsinformasjon om de og nettbutikken.

Eget design på "Bilde med knapper":

Eget design på "Kampanjebanner":

Espegard arbeider også mye med design og uttrykk, og på bildet under vises den tilpasningen som er utviklet for de på "Kampanjebanner". Se gjerne deres nettbutikk, https://www.espegard.no, for mer inspirasjon, og her er også litt bakgrunnsinformasjon om de og nettbutikken.

Mer inspirasjon?

I demobutikken for tilleggsprodukter så har vi også laget noen eksempler hvor vi har lagt inn CSS-kode. Disse finner du som undersider til de ulike innholdselementene. (I den første dialogboksen som dukker opp, så er både brukernavn og passord: test).

Er dette noe for dere?

Da anbefaler vi at dere bestiller et oppdrag hos oss, og så utvikler vi akkurat det utseende som dere ønsker. Ta kontakt med kundeservice eller din prosjektleder, så bistår vi gjerne! Merk at en forutsetning er at dere har kjøpt tilleggsproduktet.