Olet varmasti joskus nähnyt linkin verkkosivulla, joka ei vie minnekään toiselle sivulle kuten normaalisti linkit tekevät, vaan linkki viekin sinut saman sivun sisällä toiseen kohtaan. Tällaista linkkiä kutsutaan ankkurilinkiksi. Ankkurilinkki on linkki, joka linkkaa saman sivun sisällä johonkin tiettyyn kohtaan.

Tässä esimerkki ankkurilinkistä käytännössä:

Ankkurilinkin tekeminen vaatii pienen HTML-kielellä tehdyn koodin pätkän. Mutta sen käyttäminen on helppoa kun tietää vain minne sijoittaa mikäkin tieto. Tässä postauksessa näytän miten ankkurilinkin voi tehdä Squarespace -palvelussa. Squarespace tekee tästäkin helppoa, eli tämän postauksen lukemisen jälkeen osaat tehdä sivun sisällä olevia linkkejä noin vain!

Miksi käyttää ankkurilinkkejä?

• Ankkurilinkit ovat erittäin hyödyllisiä etenkin sellaisilla sivuilla, joilla on paljon sisältöä tai muuten vaan pitkät skrollausvälit, jotta sivuilla kävijä pääsee nopeammin haluamansa sisällön pariin

• Ankkurilinkit helpottavat yhden sivun sisällä navigoimista ja liikkumista käyttäjälle

• Ankkurilinkki on esimerkiksi sivun alareunassa oleva linkki, jota klikkaamalla pääsee siirtymään takaisin sivun yläosaan, joka tekee sivuston käyttämisestä sujuvampaa

Näin teet ankkurilinkin Squarespacessa

Ankkurilinkin teko hyödyntää HTML-kieltä ja se tehdään Squarespacessa Code blockilla. Jotta voit hyödyntää Code blockkia tulee sinulla olla Squarespace palvelusta Business plan tai korkeampi. Squarespacen sivuilta näet palvelun eri tasot hintoineen.

1) LISÄÄ CODE BLOCK SIIHEN KOHTAAN SIVUA JOHON HALUAT LINKATA

1. Lisää uusi block sisältöelementti ‘Add block’ -kohdasta.

2. Valitse ilmestyneestä listasta CODE BLOCK.

3. Liikuta CODE BLOCK haluamaasi kohtaan. Linkki tulee viemään siihen kohtaan missä code block sijaitsee. Klikkaa code blockkia ja sen jälkeen sen yläpuolelle ilmestyvää kynäikonia.

4. Poista CODE BLOCKissa oleva pieni koodin pätkä ja lisää sen tilalle seuraava HTML-koodi:
   
   <div id="linkin-nimi"></div>
   

   Vaihda ‘linkki-kohdan-nimi’ tilalle omaan tilanteeseesi sopiva nimi linkille. Huomaathan, että nimessä ei voi olla sanavälejä. Käytä sanojen välissä viivaa kuten yllä olevassa esimerkissä jos haluat erotella sanoja.

2) LISÄÄ LINKKI

Kun HTML-koodi on lisätty siihen kohtaan mihin halutaan linkata, pitää vielä lisätä se linkki mikä vie juuri luotuun kohtaan sivulla.

Voit katsoa tarpeen mukaan myös aiemmin tekemäni ohjeen siitä miten Squarespacessa tehdään linkkejä. Tässä esimerkissä lisätään linkki olemassaolevaan BUTTON BLOCK:iin menemällä sen blockin asetuksiin klikkaamalla blockkia ja painamalla kynäikonista (1.).

Klikkaa ‘ATTACH LINK’ (2.) ja sen jälkeen lisätään linkki avoimeen kenttään niin, että ennen linkin nimeä on risuaita merkki.

Tässä esimerkissä linkki on: #linkin-nimi (3.)

Muista painaa lopuksi SAVE sivun vasemmassa laidassa, jotta tallennat tekemäsi muutokset.

Näin ankkurilinkki on valmis. Linkkaus kannattaa aina vielä testata sivun esikatselunäkymässä, että se varmasti toimii eikä siihen ole jäänyt esimerkiksi kirjoitusvirheitä.

Miten sinä voisit hyödyntää ankkurilinkkejä omalla sivustollasi?

Haluatko oppia käyttämään Squarespace optimaalisesti?

Jos kaipaat Squarespacen perusohjeistusta, että saat rakennettua verkkosivut itse niin, että ne oikeasti toimivat ja tukevat markkinointiasi, tutustu Squarespace Perusta -kurssiin:

Tallenna ankkurilinkin teko-ohje talteen Pinterestiin: