Hovedoverskrift på Tips = H1

Bilde av hvordan man oppretter en ny tips-side på www.klubben.no

Dette er ingressteksten: Malen som brukes her heter "Tips artikkel" og er den som skal brukes øverst på alle tips. Hovedoverskriften settes inn i Artikkel tittel, og det velges Team (css klasse) = Theme 5. Theme 5 gjør at margene blir riktig på mobilvisning.

Tekster (H2)

Alle artikler etter hovedoverskriften skal bruke malen Simple article, og evt. Article with background når du f.eks. skal lage en lenke til produkter etc. Alle artikler SKAL ha Theme 5 (for mobilvennlighet). Se lengre ned i tipset for å se hvordan disse lages.

Ingress tekst (H3)

Ingressteksten som legges inn sammen med bilde og artikkel tittel bør ikke overskride to linjer - da denne teksten er den som følger med i dynamiske artikler.

Brødtekst (H3)

Brødtekster bør bygges opp riktig i forhold til overskriftsstrukturen

H1 er hovedoverskriften på siden og skal brukes én gang. Den forteller hva siden handler om og gir både leseren og søkemotoren en tydelig pekepinn på hovedtemaet.
H2 brukes som underoverskrifter til å dele innholdet i logiske seksjoner. Dette gjør teksten lettere å lese og gir struktur.
H3 kan brukes under H2 for ytterligere å bryte ned informasjon i underseksjoner, spesielt når innholdet er omfattende.

Bilder (H2)

Bilder gjør innholdet mer levende og engasjerende. De fanger oppmerksomheten raskere enn tekst, og hjelper besøkende med å forstå budskapet ditt på et øyeblikk. I tillegg bidrar bilder til å formidle stemning, identitet og profesjonalitet.

Bilde format (H3)

De fleste bildene som ligger inn under tips-sidene har en størrelse på 1170 x 780 pixels. Bildene settes til en Bredde = 100% og ingen verdi på høyde.
Viktig at bildet har samme navn som tipset, og at det lagres som en WebP, slik at det tar så lite plass som mulig.
Bildet skal alltid ha en alternativ tekst som beskriver hva som er på bildet

Bildet viser et eksempel på hvordan våre tips-sider vises som dynamiske artikler

Layout på siden

Det er mulig å velge forskjellig layout på siden - under tips er det vanlig å bruke fullbredde (D4x1) eller to spalter (D4x2).

D4x1 (hel bredde)

Layout D4x1 - Passer godt både for mobil, pad, laptop og desktop.

D4x2 (to spalter)

Layout D4x2 - Passer fint for laptop og desktop - men kan bli litt lite oversiktlig på mobil og pad.

TIPS!

Bruk gjerne en kombinasjon av D4x1 og D4x2 på desktop og laptop, men bruk kun D4x1 på mobil og pad.

Whitespace (luft)

Er de tomme områdene mellom elementene på en nettside – som mellom overskrifter og brødtekst, rundt bilder, knapper og i margene.

Whitespace gjør det lettere å lese og skanne innhold. Når teksten får puste, blir det enklere for øyet å følge med, og brukeren finner raskere den informasjonen de leter etter.

På våre nettsider kan dette løses ved å bruke kommandoen "big-gap" i feltet du jobber med.

Gjør slik:

Høyreklikk i feltet du ønsker å legge inn whitespace og skriv inn big-gap i feltet Ekstra CSS-klasser (se bilde)

Bildet viser hvor på våre nettsider man legger inn Whitespace

Lenkefelt på nettsidene

Følg denne oppskriften får å lage en lenke boks

Opprett et nytt felt med malen Article with background.
Skriv inn ønsket tekst i feltet HTML Innhold (teksten som skal stå i den grå boksen)
Sett Maksimal høyde til 100
Velg tema - Theme 5
Sett bakgrunnsfarge til #d1d3d6
Legg inn lenken du vil linke til i feltet: Les mer lenke URL.

NB! Her er det viktig at du legger inn relativ lenke (dvs. fjerner www.klubben.no) En relativ lenke kan se slik ut: /tips (lenker til tips-sidene hos Klubben.no

LENKE TIL VÅRE PRODUKTER >>

Til slutt - husk å sjekk sidene på mobil

Det er en enkel og effektiv måte å kontrollere at du har brukt for eksempel Theme 5 riktig. Dersom det mangler whitespace i venstre marg på mobilen, er det ofte et tegn på at noe ikke er satt opp riktig i teksten.

Produkter

Kategorier

Merker

Merkenavn

Artikler

Tilbehør

Alternativer