Hero with background color and image

Content elementet 'Hero with background color and image' viser et billede i højre af skærmen (på desktop) med en baggrundsfarve og et label eller en kort introduktionstekst. Det kan kun sættes ind på en site-forside.

Trin 1

  1. Start med at stille dig i ‘Page’-modulet.
  2. Brug sidetræet til at finde og klikke på forsiden for det site, du vil sætte ‘Hero with background color and image’ ind på.
  3. Klik på ‘+ Create new content’ under den øverste ‘Front page top’-colPos.

Trin 2

  • Klik på ‘Hero with background color and image’ for at sætte din Hero ind på sitets forside.

Trin 3

Overvej at give content elementet en backend-header.

Det kan for eksempel være en fordel, hvis du skal bruge flere Hero-versioner med forskelligt indhold, som du kan skifte i mellem.

  • Der kan kun være 1 aktiv Hero på forsiden ad gangen.
  • Hvis du vil arbejde med flere versioner, skal et være enabled (aktivt) og de andre være disabled (inaktive).

Trin 4

  1. Vælg om du vil have et label eller en introduktionstekst under ‘Choose text layout’:
    1. Label: 65 tegn inklusive mellemrum.
    2. Introduktionstekst: 155 tegn inklusive mellemrum.
  2. Link til sitets ‘Om’-side under ‘Hero text link’.

Trin 5

Sæt det billede ind, der skal være øverst på sitets forside:

  • Klik på ‘Add image’ under ‘Add hero image’.
  • Find billedet i sitets billedmapper eller upload et nyt billede, du vil bruge.

Placering af billeder til Hero-content elementer

TYPO3 komprimerer automatisk alle uploadede billeder, så de fylder mindst muligt. Det kan der være brug for at undgå med billeder, der skal være i Hero-content elementet på instituttets forside.

Derfor er der oprettet en mappe per site, som ikke komprimerer uploadede billeder: ‘__no_resize__’.

Her kan I lægge billeder til Hero-content elementet på forsiden og billeder til andre udvalgte billeder, som kræver visning i fuld størrelse.

Trin 6

Du har mulighed for at lave jumpboard-knapper i dit Hero-content element, som leder brugeren videre til nogle af sitets mest besøgte eller relevante sider:

  1. Klik på ‘+ Add featured link’ under ‘Add featured links to Hero’ for hver jumpboard-knap, du vil tilføje.
  2. Vælg, om dine jumpboard-knapper skal have kontrastfarve eller ej i frontend.

For hver jumpboard-knap skal du:

  1. Skrive en link-tekst
  2. Sætte et link ind.

Du har også mulighed for at skrive en kort teasertekst til hver jumpboard-knap.

Der kan være 4 jumpboard-knapper i Hero-content elementet. Hvis du skriver teasertekster til jumpboard-knapperne, kan der kun være 3 knapper.

Eksempel på 'Hero with background color and image' uden jumpboard-knapper

Eksempel på 'Hero with background color and image' med jumpboard-knapper