Tidslinje

Med tidslinjen kan du give brugeren en visuel præsentation af et ansøgningsforløb eller en anden proces, hvor det er vigtigt, at brugeren hurtigt kan få overblik over fx. vigtige deadlines.

Tidslinje desktop
Tidslinje desktop

Tidslinjen er interaktiv. Når brugeren klikker på et punkt i tidslinjen, bliver den markeret med en anden farve og en ekstra tekstboks åbnes med flere informationer om punktet. Nederst i tekstboksen kan der linkes videre til uddybende informationer.

Tidslinjen er responsiv, hvilket betyder, at den også kan anvendes på små skærme som mobiltelefoner.

Tidslinje desktop
Tidslinje desktop med punktet "1 Feb" aktiveret

BEMÆRK:

  • For at oprette eller redigere en tidslinje, skal du arbejde med html-kode, så det skal du have mod på. Det kræver dog ingen særlig viden herom, da vejledningen beskriver meget præcist, hvad du skal gøre. 
  • Tidslinjen virker kun med 2016-skabeloner. Hvis du er i tvivl om, hvilke skabeloner du bruger på dine websider, kan du få hjælp hos din lokale websupport.

Indsæt en tidslinje

1. Opret nyt element


2. Vælg ”Ren HTML” på fanebladet specielle elementer.


3. Kopier koden i nedenstående felt. Det gør du nemmest ved at sætte curseren i feltet, trykke ctrl + A og herefter ctrl + C.



4. Sæt den kode, du lige har kopieret, ind i feltet HTML-kode i dit element.


5. Nu er du klar til at redigere indholdet i tidslinjen. Se næste afsnit.

Rediger indholdet i tidslinjen

Når du skal redigere indholdet i din tidslinje - hvad enten du lige har oprettet den, eller du skal rette i en, der allerede er lavet - skal du arbejde direkte i html-koden. For hvert punkt i tidslinjen udfyldes følgende oplysninger:

1.a item: Kan være år, dato eller lignende. Vises over punktet. Max. 16 tegn.
1.b title: Titlen. Vises under punktet. Max. 20 tegn.
1.c text: Uddybende tekst i boksen, der åbner, når man har klikket på et punkt.
1.d link: URL til den side, der skal linkes til.

Udskift den tekst, der er markeret med gult på billedet nedenfor med din egen tekst, dvs. der hvor der står 5 Feb, Min overskrift 2 etc. Bemærk, at du skal være meget præcis med kun at udskifte den tekst, der står mellem tegnene " ". Alle øvrige tegn har nemlig en bestemt funktion, og koden vil derfor ikke virke, hvis du retter eller sletter bare et enkelt tegn.

Tidslinjen består som udgangspunkt af 5 punkter, når du har oprettet en ny tidslinje. I næste afsnit får du en vejledning i, hvordan du kan slette eller oprette flere punkter.

Indsæt din egen tekst i html-koden
Indsæt din egen tekst i html-koden
Her vises indholdet i tidslinjen
Her vises indholdet i tidslinjen

Tilføj eller fjern punkter i tidslinjen

Hvert punkt i tidslinjen består af nedenstående html-kode. Når du vil tilføje et ekstra punkt til tidslinjen, kopier du denne kode (sæt curseren i feltet, tryk ctrl + A og herefter ctrl + C). Herefter indsætter du koden i tidslinjen der, hvor du gerne vil have punktet.

Du fjerner et punkt i tidslinjen ved at slette koden for punktet.

Tidslinje mobil
Tidslinje mobil
1422 / typo3