Når du lager en nettside i et CMS-system, får du som regel tilgang til en rekke elementer / widgets som du kan legge inn på en side. Dette er diverse funksjoner som er ferdig laget av systemet som tekst, bilder, overskrifter, bildegallerier osv.
Det er bare det at det ikke ser så bra ut etter at du har lagt det inn. Kanskje er fonten feil, det er for bredt, ligger på feil side, har feil farge eller ligger klistret inntil et annet element.
Heldigvis har du muligheten til å style elementene slik som du vil.
Men, hva betyr alle disse settingene og hva gjør de?
Designpanelet varierer fra system til system, men de inneholder stort sett de samme innstillingene. De har som regel litt annerledes utforming og navn på fanene i panelet, som du ser her på bildene av designpanelet i Webflow og Wordpress/Elementor
I CMS-systemer er det sjelden at du har direkte tilgang til HTML men du legger inn ny HTML automatisk i DOM for hvert element du legger inn på en side.
For å forstå hvordan en nettside fungerer, kan du tenke på HTML som selve byggetegningen (eller oppskriften), mens DOM er det ferdige huset som nettleseren bygger ut fra tegningen.
Her er forskjellen kort fortalt:
HTML (HyperText Markup Language) er den rå koden du skriver når du lager en nettside. Det er en statisk tekstfil full av koder (tags) som bestemmer innholdet.
DOM (Document Object Model) er det som skjer når nettleseren leser HTML-filen din. Nettleseren oversetter kodene dine til et levende, digitalt familietre (et objekttre).
Når HTML-koden er gjort om til DOM, blir hvert eneste element (overskrifter, bilder og knapper) til et eget "objekt" som kan endres live.
Uten DOM ville nettsider vært helt låste og kjedelige. DOM gjør det nemlig mulig for JavaScript eller nettside-byggere å gå inn og endre på tingenes tilstand etter at siden er lastet inn, uten at brukeren må laste inn nettsiden på nytt.
Et enkelt eksempel: Når en kunde klikker på "Kjøp"-knappen i nettbutikken din, og tallet på handlekurv-ikonet øverst i hjørnet plutselig endrer seg fra 0 til 1:
Kort sagt: HTML er koden du skriver i editoren din. DOM er den levende strukturen nettleseren jobber med i kulissene for å vise siden til kunden din.
I CMS-system legger du inn HTML i DOM treet hver gang du legger inn et element/widget.
Når du bygger i et CMS, gjør systemet mye av denne kodingen for deg. Men hvis noe først 'sprekker' i DOM-treet, kreves det dyp teknisk forståelse for å rette det opp igjen uten å ødelegge hele siden.
Widgeter kommer med noe styling, men overlater det meste av stylingen til deg slik at du kan tilpasse det til designet pål nettsiden din. Du har muligheter til å endre på ting som
Det er forskjell på Global styling, som gjelder utseende på hele nettsiden din, og individuell styling som gjelder elementene du legger inn.
Med globale innstillinger kan du f,eks. sette en størrelse på brødteksten for hele nettsiden slik at du ikke behøver å gjøre det hver gang du legger inn et tekstelement på en side. Eller bestemme størrelsen på overskriftene, slik at de blir like over hele nettsiden din.
Hvordan du legger inn de globale settingene varierer fra system til system, men hva du kan legge inn er stort sett det samme uansett system.
Her er noe av det som det lønner seg å legge inn i de globale settingene
Når du har funnet hvilke farger du ønsker å bruke på nettsiden, legger du dem inn som variabler. Dette er slik systemet husker fargen i bakgrunnen: var(--e-global-color-primary);
Variabler fungerer slik at dersom du endrer på en farge, så oppdaterer den seg slik at alle elementene som bruker fargen automatisk vil skifte til den nye fargen, så sant du ikke har satt en annen farge på et element med individuell styling.
Å legge inn farger er veldig enkelt. Du behøver ikke å skrive variablen selv, det gjør systemet for deg. Du velger farge fra en fargevelger, eller skriver inn HEX koden i et felt. (som du ser der teksten er markert i bildet under)
Her ser du de globale fargeinnstillingene i Wordrpess/Elementor
Og her i Webflow panel for variabler
I de globale settingene velger du fontene som gjelder for hele nettsiden. Som regel har du valg mellom mange «ferdige» fonter som ligger i systemet, men du har også muligheten til å laste opp egne fonter. Det finnes utallige fonter å velge mellom, men du bør alltid tenke på at den skal være lesbar for alle. For brødteksten er det lurt å velge en sans serif font da den er lettere enn en serif font. Du kan bruke serif fonter på overskrifter.
Unngå også fonter der bokstaver kan bli misforstått som f.eks liten a og o som du ser under.
Du setter også størrelsen på brødteksten i de globale settingene, slik at den blir lik over hele nettstedet. Siden du vil at nettsiden din skal kunne sees på alle typer skjermer, bruker du REM, EM eller % istedenfor px.
Brødtekst pleier å være satt til 16px som er det samme som 1 REM, 1EM eller 100%. Som regel settes fontens innstillinger på body elementet (Webflow) eller i det globale setting panelet (Elementor)
Du setter også høyden på teksten globalt. Normal standard for god lesbarhet på nett er en linjehøyde på 1.4 til 1.6 (altså 140% til 160% av fontstørrelsen).
Når du setter linjehøyden så sjekk at det ser bra ut på tekst som går over flere linjer, ikke bare en og juster så det ser bra ut og er lett å lese. Her ser du eksempler linjehøyde og forholdet mellom font størrelsen og linjehøyden.
Det er sjelden at du setter avstand mellom bokstaver i de globale settingene. Du setter dem på det individuelle elementet der du ønsker at avstanden skal være større eller mindre.
Kerning kan være av stor betydning i enkelte tilfeller, kanskje mer i trykk enn for web, men her er et eksempel på at bokstav avstanden burde vært litt større.
Det er sjelden at man legger inn tekst tykkelse, stil som f.eks skråstrek eller understreking eller store bokstaver på brødteksten. Så sant du ikke har valgt en font som blir for tynn eller tykk og derfor blir vanskelig å lese. Tekst tykkelse nummereres fra 200 til 900 der 900 er tykkest og 200 tynnest
Når du skal velge farge på brødteksten til nettstedet ditt, så vær nøye med at den er godt leselig. Den må ha riktig kontrast til bakgrunnen. Dersom nettsiden din skal være mørk, så er det ikke sikkert at helt hvit tekst er det beste. Det kan være mer behagelig å lese teksten dersom den var tonet litt ned til f.eks. lysegrå.
Overskrifter har de samme settingene som teksten, men størrelsen skal helst være nedad stigende fra H1 (størst) til H6 (minst).
Hvor store de skal være, er litt avhengig av hvilken font du har valgt og hvilken stil du vil ha på designet ditt. Det som er viktig å huske er at H1 kun skal opptre en gang pr. side og at de resterende skal ha nedad stigende størrelse, slik at man lett kan se hva som tilhører hvilken overskrift på siden.
Dersom du legger inn lenker i tekst, bør du markere dem med en annen farge enn resten av teksten, og helst også med en understreking, slik at man tydelig ser at det er en lenke man kan trykke på. For å gjøre dem like, så kan du sette dem globalt. Bare vær obs på at du da ofte må endre farge på fanene i hovedmenyen lokalt, slik at de ikke også blir understreket og får en annen farge enn du ønsket. Det samme gjelder tekst i linkbokser og på knapper.
I både Webflow og Elementor kan du style knapper globalt med farge, font farge, font størrelse, padding osv. Det fungerer fint dersom du vil at alle knappene skal se like ut. Dersom du ønsker knapper med f.eks. forskjellig farge, velger du ikke noen farge i de globale settingene, men gjør det lokalt.
En bedre måte å style knapper på, er å gi dem en class, f.eks. .blue-button og .white-button. Da behøver du ikke å huske settingene, men kan bare legge inn riktig class for hver enkel knapp.
Et godt CMS-system gir deg også muligheten til å legge inn egen kode. Det kan spare deg for mye jobb, da du legger du inn styling på en class i Custom code, og så gir alle elementer som skal se likt ut samme classen. Men, det er da viktig at du vet hva du gjør. CMS-system validerer ikke custom code for deg, så du må vite hva du legger inn.
Siden CMS-systemet ikke feilsøker koden din, kan én feilkodet linje her gjøre at nettsiden din blir helt hvit eller slutter å fungere. Dette er grunnen til at de fleste bedrifter overlater akkurat denne biten til profesjonelle.
Som regel består innstillingene som omfatter nettstedets identitet av en logo, et favicon og et webclip.
For at nettsiden ikke skal strekke seg over en viss bredde, kan du sette en maks bredde på f.eks. 1920px. Dette blir gjort slik at lesbarheten og den visuelle kontrollen på store skjermer opprettholdes.
Her er de fire viktigste grunnene til hvorfor en maksbredde (f.eks. på 1200px, 1440px eller 1920px) er helt nødvendig:
Forskning på typografi viser at den menneskelige hjerne trives best når en tekstlinje har mellom 45 og 75 tegn (inkludert mellomrom).
Hvis du ikke setter en maksbredde, vil elementene på siden din oppføre seg kaotisk hvis noen åpner den på en stor skjerm:
Når du designer en nettside, bygger du et visuelt hierarki der tekst, bilder og knapper skal fungere sammen. Ved å sette en max-width og sentrere denne "boksen" på skjermen (det gjør du ved å sette margin høyre og margin venstre til auto), vet du nøyaktig hvordan siden ser ut for de aller fleste.
Skjermer som er større enn maksbredden din, vil bare få nøytrale "tomrom" (whitespace) på flankene, noe som bare ser ryddig og profesjonelt ut.
Hvorfor akkurat 1920 piksler? Full HD (1920x1080) er fortsatt den mest dominerende skjermoppløsningen for stasjonære og bærbare PC-er globalt.
Å få en nettside til å se like bra ut på en gigantisk 4K-skjerm, en bærbar Mac og en liten iPhone-skjerm kalles responsivt design. Det er her de fleste timene flyr for en webdesigner – og hvor det er lettest å gå seg vill i innstillingene.
I Elementor setter du maks bredde i nettstedsinstillingene (globale innstillinger) under Oppsett
I Webflow gjøres det litt annerledes. Der lønner det seg å legge inn en liten kode i custom code(som du finner under site settings): .w-container {max-width: 1920px;}
Deretter legger du inn en maks bredde på 1920 px på container elementet og legger det inn i alle seksjoner der du ønsker å begrense bredden
Når de globale settingene er satt, vil mange av elementene som headinger være ferdig stylet når du legger dem inn på siden. Men det er likevel behov for individuelle tilpasninger av de fleste elementene.
De individuelle settingene har mange av de samme settingene som de globale. Men du kan overstyre de globale settingene for et element. Så om du f.eks har en overskrift som er stylet som svart globalt, kan du endre den til å være rød lokalt. Da vil kun denne ene headingen ha en annen farge enn de andre.
Alle elementer har sine individuelle innstillinger, men de har også innstillinger som gjelder for alle.
Flexbox (kort for Flexible Box Layout) er et kjempesmart verktøy i CSS og nettsidebyggere (som Webflow og Elementor) som brukes til å plassere, justere og fordele elementer i en boks eller på en linje.
Før Flexbox kom, var det utrolig kronglete å plassere ting ved siden av hverandre på en nettside uten at designet sprakk på ulike skjermer. Flexbox løste dette ved å gjøre oppsettet "fleksibelt".
Det som gjør Flexbox så genialt, er at du bare gir foreldrecontaineren en kommando, så oppfører barna (elementene inni) seg automatisk slik du vil.
Her er et eksempel: Tenk på en hovedmeny (navigasjonsbar) øverst på en nettside. På PC bruker du Flexbox til å legge logoen helt til venstre og menylenkene helt til høyre. Når brukeren åpner siden på mobil, endrer du bare retningen i Flexbox til "kolonne", og vipps så stabler menyen seg ryddig nedover i stedet!
Kort sagt: Flexbox er nettsidens usynlige dirigent som sørger for at elementene dine flytter på seg, krymper eller vokser automatisk for å passe perfekt på alle skjermstørrelser. Du kan posisjonere alt nøyaktig der du ønsker å ha det.
I Elementor finner du settingene til Flexbox under fanen Oppsett i panelet for innstillinger.
I Webflow finner du det under fanen Style - Layout
For å gi elementer luft legger du inn paddings og margins på elementene.
Her ser du et eksempel på en container som har to mindre containere inne i seg, en blå og en grå. Ingen av boksene har hverken padding eller margin satt
På dette bildet har jeg lagt 2 rem padding på den blå boksen og en 6% padding på foreldrecontaineren.
Den blå og grå boksen er nå begge satt til 50% bredde. Her ser du hva som skjer dersom jeg legger inn en marg på 2 rem på høyre side av den blå boksen. Da tar den blå boksen og margen mer plass enn 50% til sammen (50% + 2 rem), så den skyver den grå boksen ned til neste linje.
Her har jeg lagt på en 2 rem marg under den blå boksen for å lage litt luft mellom dem
I Elementor finner du settingene for margins og paddings under fanen Avansert i redigeringspanelet.
I Webflow finner du dem under Style fanen
Når du designer for web, regnes nettsidens bredde som 100% uansett om du har satt den totale bredden for nettsiden til 1920px eller 1200px under globale innstillinger. Det vil si at du har en bredde på 100% og må tilpasse elementene du legger inn i forhold til det.
I eksempelet med paddings og margins som du nettopp leste om, var den blå og den grå boksen begge 50% brede.
For at nettsiden din skal tilpasse seg alle skjermbredder er det mest hensiktsmessig å bruke % når du angir bredden på et element. Altså hvor mye av 100% bredden den skal ta. Det gjør det også lettere for deg da du ikke behøver å regne om px eller rem til %.
Som regel behøver du ikke å sette noen høyde på et element siden den reguleres etter hva som ligger inne i elementet (eks andre elementer). Men, du kan avgrense høyden ved å sette en høyde på f.eks et bakgrunnsbilde. Høyde setter du alltid i px eller rem. % fungerer ikke så bra for høyden, da høyden på siden ikke er satt til en bestemt maks høyde.
For å hindre at bilder blir strukket eller klemt sammen, men likevel vil avgrense hvor høyt det skal være, setter du bredden til auto. (eller omvendt dersom du vil bestemme bredden på bildet)
Å designe en nettside i et moderne CMS-system gir deg fantastiske muligheter. Det er fullt mulig å gjøre det selv – men som du ser i denne guiden, krever det at du setter deg inn i alt fra typografi og linjeavstander, til boks-modeller, maksbredder og responsivitet.
En feilmargin her eller en feil fontstørrelse der, kan være forskjellen på om en potensiell kunde tar kontakt med deg, eller klikker seg frustrert ut av siden fordi teksten var umulig å lese på mobilen.
Hvis du vil være helt sikker på at det visuelle hierarkiet stemmer, at koden i bakgrunnen er ren, og at designet ditt oppleves profesjonelt på absolutt alle skjermer, hjelper jeg deg gjerne.
Jeg tar meg av alt det tekniske og det visuelle, slik at du kan fokusere på det du er best til: din bedrift.
