Publicerad 29 november 2022

Hero-knapp

Riktlinjer och lathund för Hero-knapp.

Om huvudsyftet med sidan är att besökaren ska klicka på en länk kan man använda en så kallad Hero-knapp. Det är en särskild länktyp som är utformad för att dra blickarna till sig.

Exempel på när en Hero-knapp kan användas är anmälan till ett seminarium, ladda ner ett avtal, starta en prenumeration och liknande aktiva handlingar.

Riktlinjer

Hero-knappen ska inte användas slentrianmässigt för att länka till andra sidor på webbplatsen.
Det får bara finnas en Hero-knapp på en sida.
Hero-knappen ska alltid ha en ikon. Rådfråga din huvudredaktör innan du väljer ikon, så det blir konsekvent över hela webbplatsen.
Länktexten i en Hero-knapp ska vara uppmanande, exempel på länktexter:
- Ladda ner rapporten
- Anmäl dig
- Se webbsändningen

Gör så här (kräver lägst behörighet Webbredaktör)

Utgå från exempelsidan. Öppna den i en ny flik så har du tillgång till den och lathunden samtidigt.

Exempel, Hero-knappar

Växla till redigeringsläget på exempelsidan.
Kopiera den Hero-knapp du ska använda.
Gå till den sida där du ska använda knappen.
Högerklicka på Mittenspalt och välj Klistra in.
Flytta modulen till det ställe på sidan där den ska ligga.
Dubbelklicka på modulen för att ange målsida för knappen.
Tryck OK.

Inställningar Hero-knapp

Länktyp

Om knappen ska leda till en intern eller extern sida/resurs.

Länkmål

Vad som ska hända när besökaren klickar på knappen.

Text på knappen

Länktexten som visas efter ikonen.

Välj ikon

Den ikon som ska visas framför länktexten. Observera att inte ändra källan, utan den ska alltid vara SVG-ikon från SVG-bibliotek och lp-icons.svg.

Välj tema

Hur knappen ska synas mot webbsidans bakgrundsfärg. Normalt används alltid Knapp på vit bakgrund. Ändra inte utan att stämma av med huvudredaktör först.

Tänk på

På skr.se får du bara ändra text och ikon på knappen om det är absolut nödvändigt. Stäm av med en huvudredaktör innan du gör ändringar.
På andra webbplatser kan du vid behov ändra ikon och länktext. Var däremot noga med att vara konsekvent och inte använda för många olika varianter på webbplatsen.

Förstora bilden

Inställningar för Hero-knapp