Näin teet ankkurilinkin Squarespacessa
Olet varmasti joskus nähnyt linkin verkkosivulla, joka ei vie 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 voi tehdä Squarespacessa joko koodin avulla tai ilman koodia.
Koodilla tehty keino on myös helppoa kun tietää vain minne sijoittaa mikäkin tieto. Tässä postauksessa näytän miten ankkurilinkin voi tehdä Squarespace -palvelussa sekä koodin avulla, että ilman. On nimittäin joitakin tilanteita missä koodin avulla versiota vielä tarvitaan, kuten blogipostauksissa, jossa ei ole valmista ankkurilinkkiominaisuutta. 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 voi olla 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 koodin avulla Squarespacessa
Ankkurilinkin teko koodin avulla hyödyntää HTML-kieltä ja se tehdään Squarespacessa hyödyntämällä Code blockia. Jotta voit hyödyntää Code blockia 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
Lisää uusi block sisältöelementti ‘Add block’ -kohdasta.
Valitse ilmestyneestä listasta CODE BLOCK.
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.
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 blockia 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ä.
Näin teet ankkurilinkin ilman koodia Squarespacessa
Ankkurilinkin tekeminen ilman koodi noudattelee samaa logiikkaa. Eli ensin annetaan sille osiolle nimi minne halutaan linkata ja linkkikohtaan kirjataan se nimi. Ilman koodia ankkurilinkille nimi annetaan antamalla sectionille nimi.
1) LISÄÄ NIMI SIIHEN SECTIONIIN MIHIN KOHTAAN HALUAT LINKATA
Mene sen sectionin kohdalle minne haluat linkata, tässä esimerkissä section ‘Kohta X’ ja klikkaa sen sectionin kohdalla ‘EDIT SECTION’:
Anna sectionille nimi kohdassa ‘ANCHOR LINK’ kuten tässä esimerkissä on annettu #kohta-x
2) LISÄÄ LINKKI
Mene siihen kohtaan mihin haluat linkin lisätä. Tässä esimerkissä lisätään linkki olemassaolevaan BUTTON BLOCK:iin menemällä sen blockin asetuksiin klikkaamalla blockia ja painamalla kynäikonista ja klikkaamalla ‘ATTACH LINK’ ja sen jälkeen lisätään linkki linkkikenttään linkin nimi, jonka edessä on risuaita merkki.
Tässä esimerkissä linkki on: #kohta-x
Huom! Kun teet ankkurilinkin #-merkillä, oletuksena linkille on, että ‘Open link in new tab’ on päällä (vihreänä). Tämä kannattaa täpätä poista päältä, koska muuten linkki avaa ankkurilinkin uudessa välilehdessä selaimessa.
Miten sinä voisit hyödyntää ankkurilinkkejä omalla sivustollasi?
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:
