/
Knapp

Knapp

Owned by Elin Lindeberg
Last updated: Jun 05, 2024
4 min read

Komponenten kommer den 11 juni 2024.

Webbredaktör och lättredaktör kan skapa och redigera.

Sidans innehåll

Om Knapp

Komponenten knapp kan du använda när du vill lyfta en extra viktig länk som besökaren ska klicka på. Det kan till exempel vara om besökaren ska logga in i ett system, fylla i ett formulär eller leda besökaren till alla nyheter.

Knappen ska ses som ett komplement till puffar och andra länkar och användas med varsamhet eftersom för många knappar inte underlättar för besökaren.

Förstå hur du arbetar i Layoutbuilder

Vill du förstå hur du arbetar i Layoutbuilder? Manualen Layoutbuilder

Riktlinjer

Rekommendationen är att du använder knapp på följande sätt:

Kombinerat med puffar

I samband med puffar kan du lägga komponenten knapp för att leda besökaren till att hitta allt inom det ämne som puffarna handlar om. Till exempel nyheter på startsidan:

image-20240523-125535.png

I sektionstypen information

Du kan lägga knapp i sektionstypen information när du vill uppmärksamma en särskilt viktig länk i sitt sammanhang. Rekommendationen är att vara sparsam med komponenten knapp eftersom för många knappar gör det svårare för besökaren att veta vilken knapp hen ska välja.

Till exempel länk till vårt rekryteringssystem på sidan “Så blir du en av oss”. I samband med informationen om att besökaren behöver ha ett konto i systemet synliggör en knapp hur besökaren skapar ett konto.

image-20240523-131959.png

 

Eftersom för många knappar gör det svårt för besökaren att veta vilken knapp som hen ska klicka på så finns det situationer där du inte ska använda knappen.

Istället för puffar

Har du flera länkar som du vill uppmärksamma ska du använda komponenterna för puff istället - inte knapp. I exemplet nedan ser du hur en sådan lösning hade sett ut och därför ska vi använda puffar istället.

Använd istället puffar:

Istället för vanliga länkar

I sektionstypen information kan du ha flera olika länkar. Majoriteten av dessa är inte extra viktiga för alla som besöker sidan. Därför ska du inte använda komponenten knapp för dessa länkar utan istället bara skapa vanliga länkar i editorn. Detta för att inte ta fokus från den viktigaste länken.

 

Använd istället “vanliga länkar”: Manual för länk i editor

 

Länktexten ska göra det tydligt för besökaren vart hen hamnar om hen klickar på länken. Kom ihåg att besökare med uppläsande hjälpmedel navigerar på sidan genom att få en lista med länktexter. Det innebär att länktexten måste vara unik och självständig från innehållet. Länkar du till samma innehåll på flera ställen använder du samma länktext.

Länkar du till en sida utanför den webbplats du är på, ska det tydligt framgå av länktexten. Exempel på länktexter på gu.se:

Använd inte texten ”läs mer”, ”mer information” eller liknande som länktext, det är varken bra ur tillgänglighetsperspektiv eller ur sökmotoroptimering.

Skapa knapp

  1. I redaktörsgränssnittet väljer du “Layout” och lägger till en sektion med layout “Information”, spaltbred eller där “66” finns.

  2. Klicka på “Lägg till komponent” och välj “Knapp.

  3. Lägg in din länk:

a) extern länk: klistra in url:en

b) Intern länk: skriv titeln på sidan du vill länka till.

  1. Under “Knapptext” skriver du din länktext. Kom ihåg att länktexten ska vara tydlig och unik.

  2. Klicka på “Lägg till komponent”.

Redigera befintliga länkar i knapp

  1. I redaktörsmenyn väljer du “Layout” och vid komponenten “Knapp” klickar du på redigeringspennan.

  2. Nu kan du redigera den befintliga länk som du vill ändra. Till exempel kan du ta bort länken, ändra url:en eller ändra länktexten.

  3. Klicka på “Uppdatera” och spara sidan.

Flytta knapp

Du kan flytta en knapp på två sätt:

  1. Ta tag i knappen och dra den till den sektion du vill flytta knappen till.

  2. Välja Flytta under redigeringspennan. Väl där kan du sedan välja vilken sektion samt region dit du vill flytta innehållet. Gör ditt val och klicka sedan på Flytta.

Ta bort knapp

  1. I redaktörsmenyn väljer du “Layout” och vid knappen klickar du på redigeringspennan.

  2. Klicka på “Radera komponent”. En raderad komponent går inte att återställa.

  3. Klicka på “Ta bort”.

Spara ändringar du har gjort

När du är färdig scrollar du längst ner på sidan för att spara dina ändringar.

  • Publicerad: Ändringarna sparas och visas för besökare.

  • Utkast: Ändringarna sparas, men visas inte för besökare förrän du väljer att ändra till Publicerad.

  • Avpublicerat: Sidan finns kvar i redigeringsläget, men en besökare kan inte se den alls.

Kom ihåg att klicka på “Spara” för att ändringarna ska slå genom.

Goda exempel

Kommer inom kort.