̽»¨¾«Ñ¡

Bannerbilde eller -video med tittel og innledning

En spesial starter (alltid) med et bilde eller film i fullbreddeformat med tittel enten oppå eller under bildet. Innledning er valgfritt, men legges i første boks hvis den skal brukes.

Innstillingene nedenfor legges i feltet "Spesielle innstillinger" i første boks i spesialen. Hvis innstillingen legges i andre bokser overstyrer dette innholdet slik at den opprinnelige innledningen forsvinner.

Størrelse pÃ¥ bilde/video

• Mellom 1920x400px og 1920x820px. Pass pÃ¥ at bildet er høyt nok hvis tittel og innledning skal ligge oppÃ¥ bildet.

• Bildet skal legges i feltet "Bilde", mens videoen mÃ¥ legges inn i feltet "Innhold" ved hjelp av "Embed media"-knappen.

• Skal spesialen ha smal header kan bilde/video være inntil 1920x1080px.

Hvis du ønsker skarpere bilde pÃ¥ skjermer med høy oppløsning (4K) kan du gange bredde og høyde med to (pass pÃ¥ at aspekt-ratioen for anbefalte størrelser bevares). Eksempel: 1920x820 => 1920 * 2 x 820 * 2 = 3840x1640px

Hvit tittel og innledning oppå

• Bilde: special-logo-video special-logo-image special-logo-intro-over
• Video: special-logo-video special-logo-video-wide special-logo-intro-over

Svart tittel og innledning oppå

• Bilde: special-logo-video special-logo-image special-logo-intro-over special-logo-black-text-over
• Video: special-logo-video special-logo-video-wide special-logo-intro-over special-logo-black-text-over

Tittel og innledning under

• Bilde: special-logo-video special-logo-image
• Video: special-logo-video special-logo-video-wide

Hvit tittel oppÃ¥ og innledning under

• Bilde: special-logo-video special-logo-image special-logo-h1-over
• Video: special-logo-video special-logo-video-wide special-logo-h1-over

Svart tittel oppå og innledning under

• Bilde: special-logo-video special-logo-image special-logo-h1-over special-logo-black-text-over
• Video: special-logo-video special-logo-video-wide special-logo-h1-over special-logo-black-text-over

Overskrifter

Kapitteloverskrift uten innrykk

Brukes for Ã¥ lage overskrift til kapitler i større spesialer.

• Innstilling pÃ¥ boksen: special-lead
• Tittel: Tittelfeltet i boksen blir overskriften pÃ¥ kapittelet. Overskriften blir rød uten innrykk.
• Innhold: Tekst i innholdsfeltet blir innledning pÃ¥ kapittelet med litt større skrift. Første forbokstav blir rød.
• Underoverskrift "Hundens livsløp": Overskriften legges i egen boks hvor overskriften legges i innholdsfeltet med format H3 (altsÃ¥ ikke som tittel pÃ¥ boksen).

Kapitteloverskrift med innrykk

• Her brukes ingen spesielle innstillinger pÃ¥ boksen. Kapitteloverskriften har samme innrykk som resten av brødteksten i spesialen.
• Underoverskrift "Hundens livsløp": Overskriften legges i egen boks hvor overskriften legges i innholdsfeltet med format H3 (altsÃ¥ ikke som tittel pÃ¥ boksen).

Pinning – tekst som scroller ved siden av bilder/video

For Ã¥ fÃ¥ en penest mulig animasjon, bør du ikke skrive for mye tekst i hver boks. Hvis du har en lang tekst bør du heller dele opp i flere bokser. Du mÃ¥ ha minst to fullbreddebokser med bilder og tekst for Ã¥ fÃ¥ scrolling til Ã¥ fungere. PÃ¥ mobil legges bilder/videoer og tekst under hverandre.

Bilde

Lag minst to fullbreddebokser hvor du gjør følgende:

• Spesielle innstillinger: special-pinned

• Bilde: legges i bildefeltet med bredde mellom 400-800px. Bildene blir automatisk skalert ned til ca. 50% av skjermbredde pÃ¥ desktop.

• Tittel: legges i innholdsfeltet sammen med teksten. BÃ¥de H2 og H3 fungerer.

Video

Lag minst to fullbreddebokser hvor du gjør følgende:

• Spesielle innstillinger: special-pinned-video

• Video: legges øverst i innholdsfeltet ved bruk av "Embed media"-knappen. Bredde kan være mellom 400-800px. Video blir automatisk skalert ned til ca. 50% av skjermbredde pÃ¥ desktop.

• Tittel: legges i innholdsfeltet under videoen. BÃ¥de H2 og H3 fungerer.

Pinning – tekst som scroller over fullbreddebilde/-video

Lag minst to fullbreddebokser hvor du gjør følgende:

Spesielle innstillinger:

• Hvit tekst: special-pinned-big

• Hvit tekst med ekstra kontrast: special-pinned-big special-logo-text-shadow

• Hvit tekst med skyggeboks for ekstra kontast: special-pinned-big special-logo-black-text-over

• Svart tekst: special-pinned-big special-logo-black-text-over

• Svart tekst med ekstra kontrast: special-pinned-big special-logo-black-text-over special-logo-text-shadow

• Tekst i halv bredde venstre, legg til følgende klasse: special-logo-text-left

• Tekst i halv bredde høyre, legg til følgende klasse: special-logo-text-right

• Bilde eller video: Bilde legges i bildefeltet (1920x1080), men video mÃ¥ legges øverst i innholdsfeltet foran teksten du vil at skal scolle.

• Tittel: legges i innholdsfeltet sammen med teksten. BÃ¥de H2 og H3 fungerer.

• Prioritere vise venstrekant av bilde/video: special-pinned-big-media-aligned-left

• Prioritere vise høyrekant av bilde/video: special-pinned-big-media-aligned-right

• Prioritere vise toppen av bilde/video: special-pinned-big-media-aligned-top

• Prioritere vise bunnen av bilde/video: special-pinned-big-media-aligned-bottom
  
  Prioritere to hjørner:

• Prioritere vise høyrekant og bunn av bilde/video: special-pinned-big-media-aligned-right-bottom

• Prioritere vise høyrekant og topp av bilde/video: special-pinned-big-media-aligned-right-top

• Prioritere vise venstrekant og bunn av bilde/video: special-pinned-big-media-aligned-left-bottom

• Prioritere vise venstrekant og topp av bilde/video: special-pinned-big-media-aligned-left-top

Fullbredde bilde eller video

Lag en fullbreddeboks. Bildet legges i bildefeltet i boksen, mens video legges i innholdsfeltet ved bruk av "Embed Media"-knappen. Teksten legges under videoen i innholdsfeltet.

• Bilde med hvit tekst: special-logo-image

• Bilde med svart tekst: special-logo-image special-logo-black-text-over

• Video med hvit tekst: special-logo-video-wide

• Video med svart tekst: special-logo-video-wide special-logo-black-text-over

• Størrelse pÃ¥ bilde/video: Mellom 1920x400px og 1920x1080px

Bildegalleri

Lag en boks med full bredde og legg til disse innstillingene:

• Spesielle innstillinger: special-content-fullwidth

Anbefalt bildestørrelse er 970px i bredden. Dette er maksimal bredde for visning pÃ¥ desktop.

Koden som er brukt i eksemplet ser slik ut:

${include:image-listing uri=[/url/] limit=[7] type=[gallery]}

Ekstra bredt innhold (970px)

1. Lag en boks med "special-extra-wide-content"-klasse (typisk kompinert med Figure-lister)

2. Legg inn i innholdsfeltet innhold som skal være ekstra bredt

Figure-lister (bilder med bildetekst)

Fire eller fem kolonner

1. Legg inn i innholdsfeltet en div med klasse "figure-list" (fire kolonner) eller "figure-list-five-column" (fem kolonner)

2. Legg til et eller flere bilde med bildetekst inne i denne (må ha bildetekst / være figure)

Ekstra klasse for runde bilder 

1. Legg til ekstra "figure-list-circle"-klasse for å få runde bilder

Ekstra klasse for stor tittel (lenke eller fet tekst i starten)

1. Legg til ekstra "figure-list-big-title"-klasse for Ã¥ fÃ¥ stor tittel

2. Legg til en lenke eller fet tekst i starten av bildetekstene (figcaption)