Knapper og links

Bliv klogere på, hvordan du opretter, redigerer og fjerner et link. Få et overblik over den bedste måde at lave knapper og links på, så de er brugervenlige og følger vores design.

Når du laver et link, skal du både være opmærksom på, hvordan du opretter, redigerer og fjerner det samt linkets styling og placering. Bliv klogere på, hvordan du laver links på den rigtige måde i de forskellige afsnit.

Sådan opretter du et link

Vi kan lave forskellige typer af links på hjemmesiden, som du kan læse mere om her. Sørg også for at læse retningslinjerne for linkets styling, placering og beskrivende linktekster.

Hvis du vil indsætte et link i din tekst, klikker du på link-ikonet i tekstredigeringsmenuen:

"indsæt link" knap er den tredje fra højre i menuen.

  1. Lav en beskrivende linktekst og marker teksten
  2. Tryk på link-ikonet ('Insert/edit link') i tekstredigeringsmenuen
  3. Gå til fanen 'Internal'
  4. Find siden, du vil linke til i strukturen (den valgte side bliver farvet blå)
  5. Vælg linkets styling under Css klasse. Du kan læse mere om, hvilken styling du skal bruge i næste afsnit.
  1. Lav en beskrivende linktekst og marker teksten
  2. Tryk på link-ikonet ('Insert/edit link') i tekstredigeringsmenuen
  3. Bliv på fanen 'External'
  4. Indsæt linket i feltet URL
  5. I Titel-feltet skal du skrive "Åbner i ny fane" - det er af hensyn til webtilgængelighed
  6. Vælg linkets styling under Css klasse. Du kan læse mere om, hvilken styling du skal bruge i næste afsnit.
  7. Kryds af i feltet 'Åbn i ny fane'
  1. Upload dit dokument i en passende mappe i mediebiblioteket
  2. Gå tilbage til websiden, lav en beskrivende linktekst og marker teksten
  3. Tryk på link-ikonet ('Insert/edit link') i tekstredigeringsmenuen
  4. Gå til fanen 'Media'
  5. Find dokumentet, du vil linke til i strukturen (det valgte dokument bliver farvet blåt)
  6. I Titel-feltet skal du skrive "Åbner i ny fane" - det er af hensyn til webtilgængelighed
  7. Vælg linkets styling under Css klasse. Du kan læse mere om, hvilken styling du skal bruge i næste afsnit.
  8. Kryds af i feltet 'Åbn i ny fane'.

Du kan tilføje et link til en e-mailadresse. Det gør, at brugerens mailprogram åbner, når hun klikker på linket.

Sådan tilføjer du linket:

  1. Indsæt mailadressen og marker teksten
  2. Tryk på link-ikonet ('Insert/edit link') i tekstredigeringsmenuen
  3. Gå til fanen 'Email'
  4. Udfyld feltet 'Mailadresse'
  5. Udfyld emnefeltet hvis det er relevant - teksten kommer til at stå i emnefeltet i brugerens mail.

Undgå at style linket. Her er der tale om en særlig type link, som fungerer bedst uden styling.

Anchorlinks er links til specifikke sektioner på samme eller andre sider. Når du opretter linket, skal du gøre det i to trin og på to forskellige sider.

Trin 1 - lav ankeret på siden, du vil linke til

Inden du kan oprette et anchorlink, skal du opsætte et unikt ID for den sektion, du gerne vil linke til:

  1. Naviger til siden, ankeret skal være på, og vælg, hvor på siden ankeret skal være: Det kan være en overskrift eller tekstbid i en artikel, men det kan også være et helt modul som en tekstboks, en accordion eller et element i en accordion.
  2. Du kan oprette ankeret på forskellige måder:
    • Lav et anker til en overskrift eller tekstafsnit: Marker teksten, som anchoret skal bindes op på, og klik derefter på anchor-knappen i panelet (bogmærket). Lav et unikt ID, der lever op til kravene og tryk OK. Nu kan du se et lille anker-ikon ud fra teksten, du har opmærket. 
    • Lav et anker i en tekstboks eller accordion: Hvis du vil bruge et helt modul som anchor, skal du udfylde feltet ‘Element ID’. Det ligger i bunden eller under modulets indstillinger. Nogle gange hedder feltet 'Anchor link'.
      Du kan for eksempel lave et anker i en bestemt bjælke i en accordion, der folder ud, når man følger linket.
  3. Gem dine ændringer og send siden til godkendelse og publicering hos Webredaktionen.

Krav til det unikke ID:

  • Brug kun små bogstaver
  • Lav ikke mellemrum
  • Brug ikke specialtegn
  • Lav ikke identiske ID'er på samme side

Trin 2 - lav dit anchorlink

Når du har lavet det forberedende arbejde, kan du oprette dine anchorlinks:

  1. Naviger til siden, som linket skal være på.
  2. Lav en beskrivende linktekst og marker teksten.
  3. Tryk på link-ikonet ('Insert/edit link') i tekstredigeringsmenuen.
  4. Gå til fanen 'Internal'.
  5. Find siden, du vil linke til i strukturen (den valgte side bliver farvet blå).
  6. Indsæt det unikke ID i feltet 'Anchor link'.
  7. Husk at vælge linkets styling under Css klasse.
  8. Gem dine ændringer og send siden til godkendelse og publicering hos Webredaktionen.

Sådan redigerer du et link

Du kan redigere et link ved at åbne linkindstillinger. Det gør du sådan her:

  1. Placer din cursor (musemarkøren) i linket.
  2. Tryk på link-ikonet ('Insert/edit link') i tekstredigeringsmenuen - ligesom når du opretter et link.
  3. I linkindstillingerne kan du ændre, hvilke side du linker til eller redigere linkteksten.

Sådan fjerner du et link

Det er vigtigt, at du fjerner et link på den rigtige måde. Ellers kan rester af linket være skjult i websidens kode.

Du fjerner et link sådan her:

  1. Placer din cursor (musemarkøren) i linket.
  2. Tryk på Remove link-knappen - det er ved siden af link-ikonet.
  3. Slet linkteksten.
"bryd-link" ikonet er det andre fra højre i menuen

Sådan laver du en god linktekst

Et link skal have en beskrivende linktekst. En beskrivende linktekst fortæller læseren, hvad de kan bruge linket til, og hvor linket fører dem hen.

Linkteksten må ikke udelukkende være "Klik her", "Link", "Læs mere", linkets URL (hjemmesideadresse) og lignende, fordi det ikke fortæller læseren, hvad der bliver linket til.

Man kan gøre sin linktekst beskrivende ved at følge tre trin:

  1. Hvor? Fortæl din læser, hvor linket fører dem hen. Hvis linket fører til en anden hjemmeside eller åbner en pdf, skal linkets destination være tydeligt i linkteksten.
  2. Hvad? Fortæl din læser lidt om, hvad dit link indeholder. Det gør du med et par ord eller en kort sætning i linkteksten.
  3. Hvilken handling? Fortæl, hvad læseren kan gøre med linket. Nogle læsere ser på en tekst med det ene formål at gøre noget bestemt, for eksempel ansøge om noget eller bestille et eller andet. Deres øjne scanner simpelthen teksten for links for at se, om de tilbyder den relevante handling.

Se eksempler på beskrivende linktekster

Læs mere om symptomerne på norovirus hos Statens Serum Institut

Læs rapport om listeria fra Københavns Universitet (pdf)

Brug vores blanket til at registrere din fødevarevirksomhed

Sådan styler du linket

Du vælger linkets styling under 'Css klasse' i linkindstillingerne. Vi har følgende retningslinjer for, hvordan vi bruger styling til links:

  • Link med pil: Hvis brugeren kan læse mere på en anden side. Vi bruger oftest denne styling.
  • Knap med farvet baggrund: Når vi opfordrer til handling (call to action). For eksempel hvis brugeren skal registrere sig eller udfylde en blanket.
  • Knap med omrids: Når vi opfordrer til handling (call to action) - men vi bruger oftere knap med farvet baggrund.

Knapper er designet på en måde, som påkalder sig mere opmærksomhed end et traditionelt link. Derfor bruger vi knapper til handlingsanvisende links.

Sådan placerer du linket i teksten

Placér altid linket efter et tekstafsnit i stedet for som en del af teksten. Det er nemmere for læseren at få øje på linket, hvis det er trukket ud af teksten. Derudover sikrer vi også, at brugeren læser afsnittet færdigt, før han eller hun trykker på linket.

Vi anbefaler, at du samler dine links i en Læs mere-boks i bunden af siden for at skabe overblik og hjælpe brugeren videre.

Anbefales: På en linje for sig selv

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Læs mere om fødevarer

Anbefales ikke: En del af teksten

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Læs mere om fødevarer eget risus varius blandit sit amet non magna.