Erilaiset liikkuvat elementit ja etenkin verkkosivuston tyyliin istuvat hienovaraiset, ei häiritsevät elementit ovat todella tervetulleita vaihtoehtoja verkkosivujen tekijöille ja verkkosivuja päivittäville.

Squarespaceen on tullut keväällä 2024 uusi ominaisuus nimeltä ‘Pinning’, jonka voi asettaa erilaisile blockeille eli sivuston eri “palikoille”. Squarespace sivujen sisältö koostetaan erilaisista blockeista eli tavallaan sivujen rakennuspalikoista. Näitä palikoita ovat mm. jokainen kuva, teksti, lomake jne. Jos haluat tutustua mikä Squarespace ylipäätään on, kannattaa lukaista Squarespace esittely.

Pinning -ominaisuus viittaa siihen, että joku tällainen block / elementti saadaan pysymään paikoillaan sille asetetuilla säädöksillä kun käyttäjä skrollaa verkkosivua alas ja ylös.

Kun pinning -ominaisuus laitetaan kuville, voi luoda esimerkiksi tällaisen efektin, että tausta liikkuu ja sen päällä olevat kuvat (demossa tennispallot), pysyvät paikoillaan:

Tällainen kiinnitys eli ‘pinning’ mahdollistaa siis erilaisia visuaalisia ja skrollaukseen sidottuja efektejä. Pinning ominaisuus on mahdollista lisätä Fluid Engine editorilla tehtyjen sectionien eli osioiden elementteihin.

Elementti voidaan kiinnittää yhden sectionin eli osion sisällä sen ylä-, keski- tai alareunaan niin, että se pysyy paikallaan kun käyttäjä skrollaa verkkosivua.

Video-ohje miten käytät ‘pinning’ ominaisuutta:

TEKSTI/KUVAohje miten käytät ‘pinning’ ominaisuutta:

1) Lisää haluamasi blockki

2) Esimerkiksi kuva (image) kuten tässä esimerkissä on valittu

3) Lisää kuva koneeltasi kohdasta ‘upload file’

4) Klikkaa kuva blockkia ja valitse ‘pin’ ikoni

5) Valitse haluatko kiinnittää eli ‘pinnata’ elementin (tässä tapauksessa tennispallon kuvan) kyseisen sectionin (eli osion) ylä-, keski-, vai alareunaan. Ja anna kiinnitykselle haluamasi ‘offset’ (eli kuinka kaukana ylä-, keski-, tai alareunasta elementti on).

6) Jos haluat poistaa joltain elementiltä kiinnityksen eli pin -ominaisuuden, kun olet valinnut elementin aktiiviseksi klikkaamalla sitä, valitse pin -kohdassa poistoikonia.

HUOM! Pinning ominaisuus elementille tehdään mobiilissa erikseen. Eli se mitä muokkaat desktop näkymässä käsittelee vain sitä ruutukokoa. Jos haluat lisätä liikkeen myös mobiilinäkymään, tee sille mobiilinäkymässä omat asettelut.

Aiotko laittaa tämän ominaisuuden kokeiluun?