Guider/Redigera din webbplats/Redigerare/Webbplatslayout/Skapa sidhopp

Skapa sidhopp

Sidhopp, även kallade ankarlänkar eller hopplänkar, är när du klickar på en länk och direkt flyttas lite längre upp eller ner på en lång sida. Innehållsförteckningen till höger är ett exempel på sidhopp.

Varför använda sidhopp?

Ett sidhopp är ett bra sätt att länka till en sektion på en sida. Dina webbplatsbesökare kan klicka för att gå från en del av en lång sida till en annan del av samma sida.

Låt säga att du till exempel har en lista med sektionsnamn överst på en sida. Du kan länka respektive namn till en relevant sektion längre ner på sidan så att besökare kan hoppa till sektionen om den specifika information de är intresserade av. Du kan sedan länka läsarna direkt tillbaka till den ursprungliga listan med alla sektioner i början av sidan.

💡

Du kan också använda innehållsförteckningsblocket för att automatiskt skapa sidhopp från alla rubriker i ditt inlägg/på din sida och ett fotnotsblock för att automatiskt formatera fotnoter i din text.

Videohandledning

Den här videon är på engelska.
YouTube har automatiska översättningsfunktioner så att du kan se videon på ditt eget språk:

För att visa undertexter med automatisk översättning:

  1. Spela upp videon.
  2. Klicka på ⚙️ Inställningar (längst ner till höger i videon).
  3. Välj Undertexter/CC.
  4. Välj Automatisk översättning.
  5. Välj önskat språk.

För att lyssna med automatisk dubbning (experimentell):

  1. Klicka på ⚙️ Inställningar.
  2. Välj Ljudspår.
  3. Välj språket du vill lyssna på:

ℹ️ Översättningar och dubbning genereras automatiskt av Google, kan innehålla fel och den automatiska dubbningen är fortfarande under test, så den är inte tillgänglig för alla språk.

Steg 1: Skapa en ankarlänk

Det första steget är att välja den sektion som du vill att dina läsare ska komma fram till när de klickar på sidhoppet. För att göra detta kan vi skapa vad som kallas ett ”ankare” på blocket som du vill hoppa till.

  1. Klicka på det block som du vill lägga till ankaret för. Många vanliga block stöder ankare, inklusive blocken Stycke, Rubrik, Bild, Kolumner och Knappar.
  2. Visa blockinställningarna i sidopanelen till höger. Om du inte ser sidopanelen till höger, klicka på ikonen för Inställningar längst upp till höger för att öppna inställningarna. Ikonen ser ut som en kvadrat med två ojämna kolumner:
Inställningsikonen längst upp i WordPress-redigeraren markerad.
Ikonen för inställningar i det övre högra hörnet
  1. Längst ner i blockinställningarna klickar du på Avancerat.
  2. Skriv ett ord i rutan HTML-ankare. Detta kommer att bli ditt ankare. Se till att använda ett unikt ord som inte redan används som ankare någon annanstans på sidan. Om du vill använda mer än ett ord infogas automatiskt ett bindestreck (-) mellan orden, så här: två-ord:
Lägga till två ord med bindestreck mellan sig i sektionen HTML-ankare för att skapa ett sidhopp.

Steg 2: Länka till ditt ankare

Därefter kommer vi att skapa själva sidhoppslänken. Dina besökare kommer att klicka på denna för att komma till sektionen du skapade i steg 1.

  1. Skriv lite text eller lägg till en bild, en knapp eller ett navigeringsmenyval som dina läsare kan klicka på.
  2. Markera texten/bilden/knappen/menyvalet och klicka på länkalternativet i blockets verktygsfält. Länkalternativet är en ikon som ser ut som den faktiska länken i en kedja, såsom visas här:
  3. Skriv in det HTML-ankare som du skapade i steg 1, börja med hashtaggsymbolen (#). Om du till exempel skapade ett ankare med namnet skapa-ett-sidhopp så skulle du skriva din länk som #skapa-ett-sidhopp
  4. Klicka på Spara/Uppdatera/Publicera i det övre högra hörnet av redigeraren för att spara dina ändringar.

Det var det! Du kan nu testa din länk på den offentliga sidan för att se till att länken du skapade i steg 2 leder dig till ankaret som du skapade i steg 1. Observera att sidhoppslänkarna inte fungerar när du förhandsgranskar en sida eller ett inlägg, så testa på den publicerade versionen.

Sidhopp i en navigeringsmeny

Du kan skapa sidhopp från din navigeringsmeny som länkar till en specifik del av en sida. Detta är vanligt för webbplatser som har en lång startsida med mycket bläddrande. Sidhopp gör det enklare för besökare att visa den sektion på startsidan som de vill komma åt.

  1. Det första steget är att skapa ett ankare som platsen att hoppa till.
  2. Lägg till ett nytt objekt som är en anpassad länk i din meny.
  3. I fältet Text skriver du vad du vill att menyvalet ska heta. Detta påverkar inte sidhoppet.
  4. I URL-fältet skriver du ditt ankare med en hashtaggsymbol (#) framför det.
Hur man lägger till ett sidhopp till navigeringsmenyn med alternativet Anpassad länk.
Lägga till ett sidhopp i menyn

Tänk på att ett sidhopp som #mitt-ankare bara fungerar på samma sida som ankaret finns på. Om du vill hoppa till en sektion på en annan sida, se nästa avsnitt i den här guiden.

Hoppa till en annan sida

Sidhopp kan användas till mer än att bara länka till sektioner på samma sida. Du kan använda ett sidhopp för att länka från en sida till ett specifikt område på en annan sida.

Skillnaden är att istället för att bara länka till ankaret, som när vi skrev vår länk som #skapa-ett-sidhopp i steg 2 ovan, skulle vi då länka till URL:en för hela sidan plus ankaret.

Om din sida till exempel har följande URL:

https://yourgroovydomain.com/example/

och du skapar ett ankare med namnet unik-identifierare på den sidan, då skulle den fullständiga hopplänken vara:

https://yourgroovydomain.com/example/#unik-identifierare

Så här skapar du en hopplänk tillbaka till toppen av sidan:

  1. Lägg till ett ankare till ett block i början av din sida.
  2. Längre ner på sidan skriver du text som ”Tillbaka till toppen” eller ”Hoppa till början”.
  3. Länka den texten till ditt ankare.
Copied to clipboard!