Elementin kiinnitysominaisuus eli pinning squarespacessa
Erilaiset liikkuvat elementit voivat tuoda verkkosivuille kiinnostavaa visuaalisuutta ja tehdä sivujen selaamisesta elämyksellisempää. Parhaimmillaan efektit ovat hienovaraisia, sivuston visuaaliseen tyyliin sopivia eivätkä häiritse itse sisällön käyttämistä.
Squarespacessa tähän löytyy Pinning-ominaisuus, jonka avulla sivulla olevan elementin voi kiinnittää paikoilleen skrollauksen ajaksi.
Pinning tuli Squarespaceen keväällä 2024, ja sitä voidaan käyttää Fluid Engine -osioissa oleviin sisältöblokkeihin.
Jos Squarespacen termit eivät vielä ole tuttuja, sivujen sisältö rakennetaan erilaisista blokeista (blocks) eli sisältöelementeistä. Esimerkiksi teksti, kuva, painike ja lomake ovat omia blokkejaan.
Jos itse Squarespace alustana ei ole vielä tuttu, lue ensin mikä Squarespace on.
Mikä Squarespacen Pinning-ominaisuus on?
Pinning tarkoittaa käytännössä elementin kiinnittämistä tiettyyn kohtaan sivulla skrollauksen ajaksi.
Kun kävijä vierittää sivua alas tai ylöspäin, pinnattu elementti pysyy määritellyssä kohdassa samalla, kun muu sisältö liikkuu sen ympärillä.
Esimerkiksi kuvia pinnaamalla voidaan luoda efekti, jossa sivun tausta ja muu sisältö liikkuvat, mutta niiden päällä olevat kuvat – tässä esimerkissä tennispallot – pysyvät paikoillaan:
Pinning mahdollistaa siis erilaisten visuaalisten, skrollaukseen sidottujen efektien rakentamisen Squarespacessa ilman erillistä koodia.
Ominaisuutta voidaan käyttää Fluid Engine -editorilla rakennettujen osioiden elementteihin.
Miten Pinning toimii Squarespacessa?
Elementti voidaan kiinnittää sen oman sivuosion eli sectionin yläosaan, keskelle tai alaosaan. Elementti pysyy määritellyssä kohdassa, kun kävijä skrollaa kyseisen osion läpi.
Voit lisäksi määrittää elementille offset-arvon, jolla säädetään sen tarkempaa sijaintia suhteessa valittuun kiinnityskohtaan.
Pinning sopii esimerkiksi koristekuvien, graafisten elementtien ja muiden visuaalisten yksityiskohtien liikuttamiseen suhteessa sivun muuhun sisältöön.
Video-ohje: näin käytät Pinning-ominaisuutta
Kuvallinen ohje: näin kiinnität elementin Squarespacessa
1) Lisää sivuosioon haluamasi sisältöblokki.
2) Tässä esimerkissä käytetään Image Blockia eli kuvablokkia.
3) Lisää haluamasi kuva valitsemalla Upload File.
4) Klikkaa kuvablokki aktiiviseksi ja valitse Pin-kuvake.
5) Valitse, mihin kohtaan sivuosiota haluat kiinnittää elementin: ylös, keskelle tai alas. Määritä tarvittaessa offset, jolla säädät elementin tarkempaa sijaintia suhteessa valitsemaasi kiinnityskohtaan.
6) Jos haluat myöhemmin poistaa kiinnityksen, klikkaa elementti aktiiviseksi, avaa Pin-asetukset ja valitse kiinnityksen poistava kuvake.
Muista tehdä Pinning-asetukset erikseen mobiilille
Pinning-asetukset tehdään desktop- ja mobiilinäkymille erikseen.
Desktop-näkymässä tekemäsi asettelu koskee siis desktop-näkymää. Jos haluat käyttää pinnausta myös mobiilissa, siirry Squarespacen mobiilinäkymään ja määritä elementille siellä oma asettelu.
Tämä on myös hyvä asia: sama pinning-efekti ei välttämättä toimi pienellä puhelimen näytöllä yhtä hyvin kuin desktopilla. Voit siis suunnitella efektin erikseen kummallekin ruutukoolle.
Milloin Pinning-ominaisuutta kannattaa käyttää?
Pinning on helppo tapa lisätä Squarespace-sivuille liikettä ja kerroksellisuutta ilman erillistä koodia. Sillä voi rakentaa esimerkiksi sivun päällä leijuvia koriste-elementtejä tai muita yksityiskohtia, jotka reagoivat visuaalisesti sivun skrollaukseen.
Efektien kanssa kannattaa kuitenkin pitää käyttäjäkokemus mielessä. Liikkeen tarkoitus on tukea sivuston sisältöä ja visuaalista ilmettä – ei viedä kaikkea huomiota niiltä.
Parhaimmillaan pieni ja harkittu yksityiskohta tekee muuten yksinkertaisesta sivusta huomattavasti kiinnostavamman.
Aiotko laittaa Pinning-ominaisuuden kokeiluun omalla Squarespace-sivustollasi?
