Accordion: et harmonika-element

Lær hvordan du bruger Accordion-elementet og find inspiration til, hvordan elementet kan bruges nederst i artiklen. Du kan læse om følgende:

Hvad er en accordion

Sådan opretter du en accordion

Inspiration til måder at bruge elementet på

Hvad er en Accordion?

Ofte går en accordion også under navne som et FAQ- (Frequently Asked Questions) eller et harmonika-element. Grundlæggende er det et grafisk element, der består af en række overskrifter, som skal foldes ud for, at man se brødteksten. Klikker du igen, folder brødteksten sig sammen. Det er en måde at komprimere en række informationer, så det bliver let og overskueligt. 

Elementet er en god løsning, hvis du har meget indhold, du gerne vil præsentere overskueligt på en side. Vær dog opmærksom på, at indhold, der ligger i en accordion, vil blive set i mindre grad end det, som er umiddelbart synligt på siden. 

Brug kun en accordion, hvis du har en større mængde indhold - da små mængder af tekst blot bør fremstå direkte på siden. 

Værd at vide om din hjemmesides accordion

Overskrifterne er fastsat til at være "Overskrift 2" og tager farve, skrifttype og størrelse derfra. Den vil dog altid være sat til at være "fed".

Du kan vælge mellem to udseender - en med gennemsigtig baggrund og ramme omkring (som i eksemplet øverst), men du kan også vælge en variant, der i stedet er en baggrundsfarve. Farven sættes generelt i indstillingerne for udseendet af hjemmesiden, således at den bliver ens alle steder.

Sådan opretter du en Accordion

1. Gå til den specifikke side du ønsker at oprette din Accordion.

2. Tryk på "+ Indhold" på den placering du ønsker at tilføje en Accordion

3. Vælg fanen "Specielle elementer og elementet Accordion

4. Nu kan du oprette de enkelte faner i din accordion. For hvert fold-ud-element du har brug for, skal du trykke på "+ Opret ny".

NB: Du kan i feltet "Overskrift" lave en generel overskrift for alle dine faner, hvis du har behov for dette. 

5. Udfyld "Overskrift" (det, der kommer til at stå inden, man folder ud) og skriv/indsæt din brødtekst. 

Du kan bruge de almindelige formateringsmuligheder for brødtekst: Fed, kurssiv, punktopstillinger osv. Du kan naturligvis også indsætte links. Det er ikke muligt at indsætte et billede sammen med din tekst. 

6. Gentag punkt 5 indtil du har det antal fold-ud-elementer, du har brug for. Du kan justere rækkefølgen på de enkelte fold-ud-elementer ved at bruge pil-ikonerne øverst til højre og dermed organisere rækkefølgen. 

7. Nederst kan du slå baggrundsfarve til, hvis du ønsker, at din accordion fremstår med en baggrundsfarve. Og du kan vælge hvilket overskrift niveau de enkelte overskriver skal være for at sikre den korrekte overskriftsopbygning på siden. 

8. Gem og se resultatet ved at klikke på de to ikoner øverst på siden.

Baggrundsfarven er en generel farve indstillet under menupunktet "Udseende" og fanen "Accordion". Vær opmærksom på at vælge en farve hvor kontrastforholdet mellem tekst og baggrund ikke giver udfordringer for den besøgende mht. læsbarhed (webtilgængelighed). 

Farve på tekst indstiller den farve brødteksten vises med i accordionen. Vær opmærksom på at indstilles tekstfarven, så bruges denne farve også til rammen rundt om hvert element.

Inspiration til måder at bruge Accordion-elementet

Grundlæggende kan accordion-elementet bruges i de forskellige kolonneopdelinger, men du bør som udgangspunkt undlade at bruge den i en 25% og 33% kolonne for at få det bedst mulige visuelle resultat. Den kan placeres i en række forskellige scenarier, og i det følgende har vi samlet en række eksempler med noget beskrivelse på, hvordan det er lavet.

Brug den som et FAQ-element, der giver overblik over en række spørgsmål og svar

Her som en række spørgsmål og svar omkring dåben. Den er indsat på siden om dåb i en 66% kolonne, og der er valgt, at den ikke skal have gennemsigtig farve, men den baggrundsfarve man kan sætte generelt under "Udseende". 

Brug den til at komprimere links til dine referater og andet listeligende indhold

Her som en oversigt over takster på kirkegården. Her er valgt den gennemsigtige baggrund, og den er indsat i en 66% kolonne. 

Her i en anden variant hvor det er referater. Accordion-elementet er indsat i en kasse til indhold, som giver den blå baggrundsfarve. Begge dele ligger i en 33% kolonne. 

Brug den til at friste med flere aktiviteter eller anden viden

Her indsat i bunden af en underside (indhold bund) i det farvede bånd. Der ligger i en 66% kolonne.
NB. Dette kræver, at det farvede bånd er slået til og sat til "Indhold bund". 

Brug den som genvej til indholdet på hjemmesiden fra forsiden

Her indsat i det farvede bånd på forsiden. En kolonnefordeling på 50/50% og en accordion i hver kolonne.