1. Giv siden en overskrift, relevant preheading (Modul eller Funktionalitet) og intro
    1. Supplér eventuelt med brødtekst, hvis der er information udover Sådan gør du-guide
  2. Udfyld relevant Sådan gør du-accordion
    1. Tre overelementer - læseren skal grundlæggende kunne sætte modulet op/bruge funktionen blot ved at læse disse tre trin
      1. Videoer lægges i underelementer
        1. Undgå at bruge billeder så vidt det er muligt. Videoerne skal være det primære visuelle element i guiden - eventuelle billeder skal blot flettes ind i brødteksten*
      2. Yderligere information, der ikke direkte er nødvendig for at kunne bruge modulet/funktionen lægges også i underelementer
  3. For modulartikler opsættes eksempel i Eksempel på modul i brug-containeren
    1. Opsætning herunder er valgfri, så længe eksempelelementerne ligger under disclaimer-boksen
      1. Du kan fx sætte eksempel op for sig selv, eller i sin egen container, accordion, etc. Du må gøre hvad du vil i dette område, så længe man kan se modulet i praksis, og i flere versioner hvor relevant
  4. Husk at tilføje brugsscenarier i boksen i højrekolonnen
  5. Hvis der er et godt tip eller anden god, ekstra viden omkring modulet eller funktionen, kan du tilføje i Godt at vide...-boksen. Den ligger som standard i højrekolonnen, men kan rykkes alt efter hvad der giver mening
  6. Husk at kategorisere siden inden lancering

*Kan faktisk godt lide at supplere brødtekst med billeder, synes bare det ser ret kluntet ud lige nu, fordi man ikke kan strømline eller styre billedstørrelser i CMS'et. Hvis vi kan sætte et system op, hvor billeder altid produceres på samme måde og i samme størrelse og opløsning, så måske. Det vil nok være et projekt i sig selv.

Modul

Accordion & Tab-modulet

03-07-2025
Modul Content & Layout

Du kan bruge dette modul til at præsentere større mængder af information i mindre bidder på samme side. Opdelingen gør det nemmere for besøgende at danne sig et overblik over informationen og kan være med til at øge brugeroplevelsen.

Sådan bruger du modulet

Denne guide gennemgår en standardopsætning af modulet og hjælper dig godt i gang med de mest centrale felter og funktioner. Husk at du også i mange tilfælde kan læse mere om specifikke felter via hjælpeteksterne i GoPublic. Hvis du ikke ved, om eller hvordan du slår hjælpetekster til, så kan du læse om dem i introforløbet.

Du kan trække modulet ind i hvilket som helst felt på siden, og ændre bredden som det passer dig.

Du finder modulet i oversigten under Content & Layout.

Dobbeltklik på modulet for at åbne redigeringsvinduet, og fortsæt til Trin 2: Redigér modulet  i denne guide.

Når du har dobbeltklikket på modulet og åbnet det grundlæggende redigeringsvindue, kan du gå i gang med at opsætte indhold. Modulerne i GoPublic er typisk strukturet med to overordnede faner (typisk Content og Settings), hvor det reelle indhold, som modulet skal vise frem opsættes i Content-fanen, og indstillinger, der påvirker aspekter rundt om indholdet, aktiveres i Settings-fanen. 

Det er primært i Content-fanen, hvor du opsætter indholdet i modulet, og hvor de fleste indstillingsmuligheder som har direkte indflydelse eller som udgør en del af indholdet som brugeren ser, befinder sig.

I Structure-sektionen har du et overblik over de individuelle accordion-elementer

  • Du kan tilføje et nyt element via [+ Add section]-knappen. Disse elementer svarer til hver "skuffe" i din accordion, eller hver fane i din tab.
    • Når du opretter et nyt element, bliver du bedt om at give det en titel, som også er den der bliver vist for brugeren på siden. Det er "navnet" og overskriften på den givne skuffe eller fane. Husk at bekræfte oprettelsen, og vær opmærksom på, at du altid kan ændre elementets titel senere.
    • Når elementet er oprettet, kan du dobbeltklikke på det i oversigten for at åbne elementets redigeringsvindue. 
      • I Content kan du oprette tekstbaseret indhold i elementet, altså det indhold, som brugeren ser, når du folder det givne accordion-element ud. Derudover er der en række andre muligheder som du kan bruge til at tilpasse indholdet i elementet.
        • Du kan tilføje brødtekst i teksteditoren, som du måske også kender det fra Content Box-modulet og det generelle artikelredigeringsvindue. 
        • Du kan vælge et visuelt udtryk for elementet i panelet, altså den del, der kan åbnes og lukkes
        • Du kan give det enkelte element et anchor, som bruges til at linke til specifikke accordion-elementer i stedet for blot til siden i sig selv. Hvis du vil vide mere om anchor-links, så kan du læse vores artikel, hvor du kan få en uddybende vejledning i opsætning og oplagte brugsscenarier.
        • Du kan sætte kryds i "Display item as regular block of text" for at vise elementet som almindelig brødtekst i stedet for at blive lagt ind i et accordion-panel
        • Du kan indsætte et link på det givne element, som lægger sig ved siden af elementets titel, altså ved "skuffens" overskrift
      • I Layout har du et grid, hvor du kan tilføje andre moduler. Her er rig mulighed for at tilpasse elementet efter behov, og brug af andre moduler kan give et brugervenligt afbræk fra det ellers muligvis teksttunge indhold.
  • Du kan tilføje et underelement til et eksisterende element ved først at klikke på dét element, som underelementet skal ligge under, og derefter oprette underelementet via [+ Add subsection]-knappen
    • Underelementer har præcis de samme redigeringsmuligheder som standardelementerne. Underelementerne giver dig blot mulighed for mere intuitivt at opdele meget komplekst indhold i flere relevante niveauer, hvilket giver et bedre overblik og en mere brugervenlig oplevelse for brugeren.

Du kan derudover flytte rundt på de oprettede elementer ved at trække dem op eller ned i oversigten. Du kan også slette elementer ved først at markere dem med et venstreklik, og derefter trykke på [Delete]-knappen.

  • Vær opmærksom på, at sorteringen af elementer er afgrænset til det samme hierarkiske niveau. Det betyder, at du eksempelvis ikke kan trække et underelement fra Sektion A hen at ligge under Sektion B, men du kan trække Sektion B op, så den ligger før Sektion A, og du kan rykke op og ned i alle underelementerne i hver sektion for sig.
  1. Du kan give din accordion en overskrift, hvis du ønsker, at der skal være en overordnet titulering til accordion-elementet. Det kan være nyttigt, når accordion'en skal fungere som en selvstændig indholdssektion, eksempelvis for FAQ-sektioner eller trin-for-trin guides.
  2. Du kan også give din accordion brødtekst, hvilket eksempelvis kan benyttes til en introducerende tekst eller lignende.

Overskrift og brødtekst til accordion'en kan tilføjes i Content-sektionen af redigeringsvinduet, det vil sige det vindue, der dukker op, når du dobbeltklikker på modulet.

I Settings finder du de redigeringsmuligheder, der typisk ikke udgør reelt indholdsmateriale i sig selv, men som visuelt eller på anden vis har en indflydelse på, hvordan dette indhold præsenteres for brugeren.

I Appearance finder du de mere avancerede indstillinger, der påvirker den visuelle fremtoning af din accordion eller tab.

Du kan vælge at vise indholdet enten i en Accordion (der folder ud vertikalt) eller i Tabs (der folder ud horisontalt i faneblade).

Du kan tilføje en “Vis alle”-knap til din accordion, hvis du vil give brugerne mulighed for at åbne alle sektioner på én gang. Det gør det lettere at få overblik over hele indholdet og kan være en hjælp for brugere, der hurtigt leder efter et bestemt svar. Brug det dog med omtanke, da meget indhold kan gøre siden lang at scrolle igennem.

Du kan tilføje et søgefelt som er forbundet til din accordion, så brugere kan søge i indholdet heri. Vær opmærksom på, at denne funktion kun fungerer i Accordion-mode.

Du kan markere din accordion som en FAQ, hvis indholdet reelt er spørgsmål og svar. Det hjælper søgemaskiner med at forstå indholdet og kan gøre, at siden vises med FAQ-udvidelser i søgeresultaterne, hvilket øger synligheden. Brug det kun, når det faktisk er FAQ-indhold – ellers kan det virke misvisende og blive ignoreret af søgemaskinerne, hvilket vil skade sidens rangering i søgeresultaterne.

Du har mulighed for automatisk at vise både accordion og tabs med en timeline-markør. 

I dette eksempel opsætter vi en accordion med en timeline-visning.

Her kan du tilpasse det visuelle udtryk for modulet. Her finder du muligheder for layout, farver, grid og spacing samt typografi. Udvalget af indstillinger afhænger både af nogle generelle standardvalg (fx at fjerne spacing i top eller bund) og af de specifikke designvalg, der er aftalt i det enkelte projekt. Valgmulighederne kan også variere mellem de forskellige moduler. 

Når du er færdig med at redigere i modulet, skal du gemme modulopsætningen, og herefter kan du:

  • Gemme og publicere indholdssiden på ny, hvis du er klar til at lancere modulet på live-versionen af siden
  • Blot gemme indholdssiden, hvis du vil sikre, at modulet og dets opsætning forbliver på siden, men uden at besøgende på live-versionen kan se eller tilgå det endnu

Eksempel

I dette område kan du se et eller flere eksempler på det opsatte modul, så du kan få en fornemmelse for, hvordan det kan se ud på din hjemmeside.

Dette er den “harmonika”-lignende opsætning, der ofte bruges til FAQ’er, hvor du kan folde overskrifterne ud for at læse mere. Det er også udbredt på mange mobile sites, hvor det komprimerede design fungerer rigtig godt til at samle store mængder af information på mindre plads. På Accordions er det også muligt at tilføje søgning.

Overskrift på accordion

Denne accordion bliver vist med modulets standardindstilling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut purus vel justo porta hendrerit. Duis a eros sit amet ipsum tempor vulputate. Proin sed sapien ac orci fermentum aliquet. Donec vel mi id ex pellentesque suscipit.

Cras convallis, augue sit amet interdum aliquam, risus tortor consequat nisi, in euismod lectus ligula nec velit. Morbi ultricies efficitur justo, non luctus lectus porta et. Phasellus euismod felis non libero malesuada, vel tincidunt elit hendrerit.

Aliquam vitae odio augue. Sed imperdiet sem in lacus sollicitudin, nec fermentum velit finibus. Pellentesque non justo erat. Suspendisse interdum nisl ut lacus ultricies lacinia.

Denne opsætning bruges til at dele indhold op vertikalt i en slags faneblade. Det fungerer fabelagtigt til at præsentere indhold relateret til hinanden, men som skal ses adskilt.

Integer elementum

Nunc eget consequat faucibus, risus sapien condimentum velit, et porta elit felis at neque. Sed tincidunt magna vel risus scelerisque, sed pharetra felis cursus. Etiam sit amet sapien a mi commodo varius.

Sed vitae

Orci porttitor, condimentum quam non, gravida arcu. Sed nec nisi nec elit cursus eleifend. Vivamus imperdiet nibh eget felis elementum dapibus. Nulla sit amet pretium augue. Donec ultrices semper malesuada. Duis rhoncus magna at justo viverra, nec fermentum tortor congue.

Vestibulum

Vitae lorem et nisl feugiat sodales. Ut at mattis sem, vel euismod lacus. Integer eu orci vitae justo malesuada dictum. Pellentesque egestas tellus non diam sodales, sit amet suscipit libero egestas. Vestibulum lacinia tortor nec semper aliquam. Vivamus vestibulum, eros vel laoreet commodo, sapien nisi ullamcorper turpis, vel pulvinar lacus augue sed nibh. Morbi dignissim vel orci a pellentesque. Aliquam sed massa diam.

Tidslinjer er nyttige til at visualisere historiefortællinger, guides, e-læring, og processer som eksempelvis onboarding eller salgsflows, hvor man vil præsentere udvikling og milepæle på en overskuelig og brugervenlig måde. Dette eksempel er sat op med modulets standard accordion-visning.

Overskrift på tidslinje

Dette er en tidslinje opsat med tre sektioner.

Curabitur sed mi nec lectus elementum vestibulum. Sed blandit quam sed enim bibendum, sed blandit ex luctus. Cras fringilla, tortor a rhoncus euismod, mauris ipsum imperdiet nunc, a porta ipsum eros non nulla.

Etiam posuere mi non lorem efficitur, nec porttitor purus tincidunt. Suspendisse fringilla mi a lectus faucibus mattis.

Phasellus a mi a dolor blandit tincidunt. Sed nec luctus sem, et venenatis risus. Donec et neque posuere, facilisis augue a, elementum nisl. Sed vestibulum nunc eget nunc faucibus, vel dignissim lectus sodales. Integer eget blandit risus.

Dette eksempel er en tidslinje sat op med modulets Tabs-visning.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. 

Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam.

Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.

Aliquam convallis sollicitudin purus

Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.

Nyttig til...

  • Ofte stillede spørgsmål (FAQ)
  • Regler og vejledninger
  • Tjenestebeskrivelser eller selvbetjeningsløsninger
  • Tidslinjer for processer
  • Kontaktinformation
  • Politikker og dokumentation
Godt at vide

Om CSS-klasser

I modulets indstillinger har du mulighed for at vælge mellem op til flere forskellige CSS-klasser, som påvirker modulets visuelle udtryk. Vær opmærksom på, at valgmulighederne varierer mellem moduler, og hvad der er indgået af aftaler i forbindelse med hjemmesidens design.

Har du brug for hjælp?

Fandt du ikke hvad du søgte, eller har du brug for hjælp, kan du kontakte vores supportteam.

Opret sag i Zendesk

Er problemet akut?

Så tøv ikke med at ringe til os:

+45 6169 9796

Telefontider:


Man-fre: 9.00 - 16.00