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)
-
Lag en boks med "special-extra-wide-content"-klasse (typisk kompinert med Figure-lister)
-
Legg inn i innholdsfeltet innhold som skal v?re ekstra bredt
Figure-lister (bilder med bildetekst)
Fire eller fem kolonner
-
Legg inn i innholdsfeltet en div med klasse "figure-list" (fire kolonner) eller "figure-list-five-column" (fem kolonner)
-
Legg til et eller flere bilde med bildetekst inne i denne (m? ha bildetekst / v?re figure)
Ekstra klasse for runde bilder
-
Legg til ekstra "figure-list-circle"-klasse for ? f? runde bilder
Ekstra klasse for stor tittel (lenke eller fet tekst i starten)
-
Legg til ekstra "figure-list-big-title"-klasse for ? f? stor tittel
-
Legg til en lenke eller fet tekst i starten av bildetekstene (figcaption)