Knapper

Når du gerne vil opfordre til en handling og føre brugeren videre til nyt indhold - en anden side, en formular eller andet - har du mulighed for at gøre det med en knap. 

Knapper på web er links, hvor du giver det enkelte link en større opmærksomhed på din side. Det er derfor altid en vurderingssag, om det er et almindeligt link eller en knap, der bedst understøtter det, brugeren skal gøre på din side.

Du har mulighed for at lave knapper i fire størrelser, i 12 forskellige farver, vælge mellem 43 ikoner, med en højrestillet pil, med eller uden tekst og i den bredde du ønsker. Det er bedst at holde udtrykket på en knap meget simpelt, så den ikke blot forvirrer brugeren. Det skal være kort, præcist og tydeligt, hvad knappen fører til. Er det ikke muligt, skal du bruge andre virkemidler som fx et bannerelement.

Indsæt knapelement

  1. Indsæt et element
    Billedet viser et screenshot af backend i CMS'et TYPO3, hvor en pil peger på ikonet 'indsæt element'
  1. Klik på fanebladet Grid elements
  2. Vælg herefter elementet Button

Billedet viser hvordan knapelementet vælges i backend i CMS'et TYPO3

  1.   Navngiv dit element ved at udfylde Overskrift. Så kan det altid genfindes i forskellige visninger i backend.
  2. Klik Gem
Billedet viser, hvor man navngiver et element og gemmer det i CMS'et TYPO

Rediger knapelement

Når du skal redigere et knapelement, skal du åbne elementet og gå ned til området for Plugin valg.

  1. Indsæt link til den side, som knappen skal føre til.
  2. Knappens bredde følger som udgangspunkt længden på knappens tekst eller indhold. Du kan angive en anden bredde i procent eller pixels - fx 100% af den kolonne, som du anvender eller fx 150 px.
  3. Skriv en kort og præcis tekst på din knap.
  4. Markér, hvis du ønsker en pil i højre side af knappen.
  5. Vælg knappens størrelse: Stor, Almindelig, Lille eller Mindst. Se størrelserne på Eksempel 1-4 herunder.
  6. Vælg justering af teksten på knappen: Venstrejusteret, Centreret eller Højrejusteret.
  7. Hvis knappen ikke fylder 100% af kolonnebredden, kan du vælge, om knappen skal være Venstrestillet eller Højrestillet i kolonnen.
  8. Du kan vælge mellem 43 forskellige ikoner på din knap. Du skal altid vurdere, om ikonet er sigende i forhold til knappens formål. Hvis ikke, skal du ikke anvende et ikon. Se nogle af ikonerne på eksemplerne herunder. (Der er en oversigt over alle ikonerne på vej.)
  9. Du kan vælge mellem 12 farver til din knap. Se nogle af farverne på eksemplerne herunder. 
Billedet viser, hvor man udfylder knapelementet i backend af CMS'et TYPO3
Klik på billedet for at få det vist i større format
Billedet viser knappen i frontend med de indstillinger, der er i forrige billede. Knappen er grøn, teksten er Sammensæt din uddannelser og knappen har et pileikon på
Med valgene ovenfor vil knappen se sådan her ud

Knapper i nyheder og arrangementer

I nyheder og arrangementer kan kan kun indsætte knapper ved at lave dem som HTML.

Til det formål er der en knapgenerator, så du kan designe en knap, generere HTML og indsætte det i din nyhed eller arrangement.

Anbefalinger til farver på knapper

Det anbefales at holde et moderat farvevalg på knapper. Hvis det er muligt, er det en fordel at bruge en farve, der guider brugeren og signalerer noget genkendeligt.

Fx bruges den grønne farve typisk til at signalere studerende.au.dk, da det er AU's grønne univers. Cyan-farvede knapper signalerer medarbejdere.au.dk, da universet har den farve og phd.au.dk er lilla. På de eksternt rettede sider - au.dk, eksterne institutsider m.fl. - bruges ofte mørkeblå og grå, Gymnasieportalen er gul og brun ect.

Nogle enheder eller samarbejder brander sig i en udvalgt farve. Fx har AU og Region Midtjylland et samarbejde, hvor farven er orange.

Oversigt over ikoner

plus
minus
calendar
pencil
user
print-1
download-1
upload
trash
search
floppy
chat
bullet
logo
blackboard
facebook
home
linkedin
footer_logo
mail
phone
instagram
twitter
udays
vimeo
youtube
apply
read
close
download
email
find
info
legal
menu
burger
pin
question
rss
subscribe
settings
www
bullet_rounded

Knapper, der 'hopper ud' af elementer

Har du indsat en knap til sidst i en container, der fungerer som fold-ud-element, kan det ske, at knappen placerer sig udenfor elementet.  

Lige nu er eneste løsning at indsætte et tomt element i containeren efter knappen. Så vil den lægge sig inden for den grå baggrund. 

1007 / {$plugin.au_config.installationId}