Innstillinger p? bokser for ? lage en spesial

Det er kun innstillinger p? bokser i forsidemal beskrevet i denne veiledningen som fungerer n?r du lager en spesial. Andre spesielle innstillinger fungerer ikke i denne malen. Alle bokser m? v?re i fullbreddeformat hele spesialen gjennom. 

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

 

St?rre versjon av bildet

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

St?rre versjon av bildet

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

St?rre versjon av bildet.

Tittel og innledning under

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

St?rre versjon av bildet

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

St?rre versjon av bildet

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

St?rre versjon av bildet.

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).

St?rre versjon av bildet.

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:

Bildet kan inneholde: under vann, himmel, vann, hav.
St?rre versjon av bildet
Bildet kan inneholde: marinbiologi, organisme, under vann, tilpasning, dyreliv.
St?rre versjon av bildet

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

St?rre versjon av bildet.

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

St?rre versjon av bildet.

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)

Publisert 1. juli 2019 10:08 - Sist endret 9. des. 2022 04:21