Hero og topkomponenter

Åbn den sektionsside eller forside, hvor heroen skal være. Klik på Tilføj indhold, og vælg Hero. Du kan skrive 'hero' i søgefeltet for at finde den hurtigt.

Heroen skal normalt stå øverst på siden.

Først vælger du de indstillinger, der gælder for hele komponenten:

• Aktiv – slå fra, hvis du vil skjule heroen uden at slette den.
• Vis julepynt over billede/video og Julepynt – en vinterfunktion, der lægger fx dalende sne eller julekugler oven på heroen.
• Margin bund – giver ekstra luft ned til næste komponent.
• Vælg hero – her indsætter du selve hero-typen (se næste punkt).

Klik på Tilføj indhold ud for Vælg hero, og vælg en af de fem typer:

• Hero med søgebar – et stort billede med en søgebar. Bruges ofte på kommunale forsider.
• Hero med linksamling – en hero med søgebar kombineret med linkbokse, der hæver sig ind over billedet.
• Hero m. Tekstboks – et stort billede eller en video med en overskrift, tekst og et link (kaldes også 'Hero m. tekst og titel').
• Multiboks-hero – flere bokse med tekst, links eller søgefelt oven på billedet.
• Hero-slider – en karrusel med flere billeder og tekster.

• Billede, video eller farve – alle heroes kan have et billede, en video eller en baggrundsfarve. Vælger du en video, skal du også vælge et billede. Billedet vises, mens videoen indlæses, eller hvis den ikke kan afspilles.
• Baggrundsfarve – du vælger mellem sitets primære og sekundære farve.
• Vælg vandmærke – du kan lægge et dekorativt vandmærke fra det globale bibliotek oven på heroen.
• Brug overskrift som H1 – slå kun denne til, hvis heroens overskrift skal være sidens hovedoverskrift. Der må kun være én H1 pr. side, ellers giver det fejl i webtilgængeligheden.

• Søgeside – vælg, hvilken søgeside søgningen skal bruge. Vælger du ingen, bruges den første søgeside i sidestrukturen.
• Smal version – gør heroen lavere.
• Fremhæv søgeknappen – fylder søgeknappen ud med farve.
• Placering af søgefelt – i midten, til venstre eller til højre.
• Placeholder-tekst – den grå tekst i søgefeltet, fx 'Hvad søger du?'.

Du kan skrive en Overskrift over søgefeltet og tilføje genveje under Links. Feltet Overskrift til links er den lille titel, der står over linkene.

Rul ned under artiklen for at se rigtige eksempler på denne hero.

Heroen kombinerer en Hero med søgebar med komponenten Linkbokse. Linkboksene bliver hævet en smule op over billedet (position absolute). Det giver et godt flow og samler søgning og genveje i én stor visning.

Læs om komponenten Linkbokse

Øverst indstiller du billede/video og indholdet oven på billedet – søgeside, overskrift, placeholder-tekst og links, ligesom på Hero med søgebar. Med Højde på hero kan du justere, hvor høj heroen er.

Nederst klikker du på Tilføj indhold ud for Linksamling og opsætter linkboksene, som du kender det fra komponenten Linkbokse.

Vælger du Linkknapper (m. ikon) i linksamlingen, kan du slå 'folde sammen' til. Så kan linksamlingen foldes sammen på mobil. Det kræver, at du også udfylder titelfeltet.

Rul ned under artiklen for at se rigtige eksempler på denne hero.

Heroen bruges til ét tydeligt budskab med et stort billede eller en video. To indstillinger styrer udseendet:

• Fuld højde – heroen fylder hele skærmens højde. Slået fra fylder den cirka halvdelen.
• Centrér – teksten placeres lodret i midten af billedet. Slået fra står den nederst.

Er både Fuld højde og Centrér slået fra, lapper tekstboksen lidt ned over billedets underkant. Med Reducér marginbunden bliver afstanden ned til næste komponent mindre.

Udfyld Overskrift, Tekst og evt. et Link. Du kan også vælge Tags fra det globale tagbibliotek og en farve til tekstboksen under Boks - baggrundsfarve.

Under Billeder skal du altid vælge mindst ét billede. Slår du Billede-slider til, vises billederne i en karrusel.

Læs om tags fra det globale tagbibliotek

Under CTA link design kan du vælge et knapdesign, du har oprettet i det globale bibliotek – fx en udfyldt knap med pil, ikon, ekstern pil eller download-pil. Vælger du intet, følger linket sitets generelle indstillinger for pile og links.

Om tekstboksen svæver som en tydelig boks, eller teksten står direkte på billedet med et mørkt overlay, bestemmes for hele sitet af en administrator i de globale indstillinger (knappen 'Overlay hero m. tekst og titel - fuld højde').

Rul ned under artiklen for at se rigtige eksempler på denne hero.

Multiboks-heroen formidler flere budskaber på én gang. Vælg et eller flere billeder, evt. en baggrundsvideo eller en baggrundsfarve. Slår du Billede-slider fra, vises billederne i tilfældig rækkefølge.

• Vertikalt layout – boksene står under hinanden i stedet for ved siden af hinanden.
• Tilpas billede til indhold – heroens højde tilpasser sig antallet af bokse og tekstmængden.
• CTA link design – genbrug et knapdesign fra det globale bibliotek.

Klik på Tilføj indhold ud for Bokse, og vælg:

• Multiboks – overskrift, tekst, links og tags. Du kan skrive selv eller vælge en side, så boksen henter overskrift, tekst og tags fra den og linker dertil.
• Boks med søgefelt – som en multiboks, men med en søgebar. Den er altid bred.

Slår du Fremhæv til, får boksen en baggrundsfarve. Bred boks gør boksen dobbelt så bred.

Rul ned under artiklen for at se rigtige eksempler på denne hero.

• Fuld højde – slideren fylder mere af skærmen.
• Centrér – tekstboksen flyttes op i midten.

Klik på Tilføj indhold for at tilføje et slide, og vælg:

• Hero-Slider Auto – henter billede, overskrift og tekst automatisk fra en side, du vælger.
• Hero-Slider Manuel – du udfylder selv billede eller video, overskrift, tekst og link.

Tilføj mindst to slides, så karrusel-effekten virker. Feltet til slides hedder lige nu '#HeroSlides' i backoffice.

Rul ned under artiklen for at se rigtige eksempler på denne hero.

Et topmodul til sektionssider, der kan være helt enkelt med en overskrift og en manchet – ligesom toppen af en artikelside – eller have et billede, en video og en brødkrummesti.

Indsæt den via Tilføj indhold på sektionssiden, og vælg Hero m. Billede over tekst.

• Vis billede – slå til, hvis billedet eller videoen skal vises.
• Position absolute – overskrift, tekst og brødkrummesti hæves lidt op over billedet.
• Smalt billede – gør billedet smallere.
• Vis brødkrumme og Fremhæv brødkrummestien – viser sidens brødkrummesti, så de besøgende kan se, hvor de er.
• Skjul titel og Skjul tekst – skjuler overskrift eller tekst.

Udfyld Title (overskriften) og Tekst (manchetten). Teksten kan ikke formateres – det er gjort for dig. Med Trompet kan du sætte en lille indledende tekst over overskriften, og Trompet - sidebeskrivelse/manchet står før manchetten.

Vælg til sidst et Billede eller en Video fra mediearkivet.

Denne komponent kan ikke indsættes under en artikel. Derfor er der ingen eksempler på den nederst på siden.

Når position absolute er slået til, bliver noget indhold hævet lidt op over det, der står ovenover. Det skaber et flot flow mellem komponenterne.

Funktionen findes på komponenten Banner og på Hero m. billede over tekst, og den er indbygget i Hero med linksamling.

Indhold under banneret bliver trukket en smule op over bannerets billede. Placerer du fx Linkbokse under banneret, lapper boksene ind over billedet.

Obs! Placér ikke en komponent, der kun består af tekst eller har en overskrift, under et banner med position absolute. Teksten bliver trukket ind over billedet og er ikke tilgængelig for alle. Brug i stedet Hero m. billede over tekst.

Se, hvordan du opsætter et banner

Overskrift, tekst og brødkrummesti hæves en smule op over billedet eller videoen.

På en kreativ artikelside klikker du på Tilføj indhold og vælger Hero m. baggrundsbillede eller Hero m. position absolute. De to har de samme felter – forskellen er, at billedet i Hero m. position absolute står under teksten og hæves ind over den farvede baggrund.

Her vælger du Baggrundsbilleder (vises skiftevis, hvis du vælger flere) eller en Video og skriver Overskrift og Tekst. Du kan også vælge et Tag og en Sidedato. Med Brug metadata kan heroen bruge sidens egne oplysninger.

• Margin bund – luft ned til næste komponent. På den kreative artikelside styrer du det selv for hver komponent.
• Skjul dato, Skjul forfatter, Skjul tekst og Skjul tags på artiklen.
• Billede i fuld størrelse – bestemmer, hvor meget af billedet der vises (og hvor meget baggrundsfarve).
• Vis billede og Farve – en baggrundsfarve. Bruger du en video, må der ikke være valgt en farve, ellers vises videoen ikke.

Disse heroes kan ikke indsættes under en almindelig artikel, så her er billeder af dem.

Hero m. baggrundsbillede med billede – og med en farve i stedet for billede:

Hero m. position absolute med Billede i fuld størrelse slået til – og slået fra:

Slå kun 'Brug overskrift som H1' til på én komponent – den øverste. Flere H1'ere giver fejl i webtilgængeligheden.

Selvom du bruger en video, skal der være et billede. Det vises, mens videoen indlæses, og hvis den ikke kan afspilles.

En hero skal kunne læses på et øjeblik. Brug en kort overskrift og en eller to linjer tekst – resten hører hjemme på siden.

Giv billederne en beskrivende alt-tekst i mediearkivet, og tjek, at teksten er let at læse oven på billedet – også på mobil.