Squarespace-painikkeiden hover-suurennusanimaatio ilman koodia

Kaipaisivatko verkkosivusi jotain pientä ekstraa? Sellaista yksityiskohtaa, joka korostaa sivujen linkkejä?

Kokeile buttoneiden hover-animaatiota!

Hover-animaatio tarkoittaa efektiä, joka aktivoituu, kun kävijä vie hiiren jonkin elementin päälle. Esimerkiksi painike voi vaihtaa väriä, muuttaa muotoaan tai kasvaa hieman suuremmaksi (kuten tässä).

Ja mikä parasta, Squarespacessa voit lisätä buttoneihin eli linkkipainikkeisiin tällaisia animaatioita nykyään ilman riviäkään koodia.

Tässä pikkuohjeessa laitetaan painikkeet kasvamaan kun hiiri menee niiden päälle. Hommaan menee vain muutama minuutti! This is how you do it:

Näin lisäät suurennusanimaation buttoniin Squarespacessa

1) Avaa se sivu mille haluat tehdä buttonille hover-efektin.

2) Etsi se button block mille haluat tehdä hover-efektin.

3) Klikkaa sitä button blockia mitä haluat muokata niin, että näet kynäikonin sen päälle ilmestyvässä valikossa ja klikkaa sitä:

4) Klikkaa Animation -välilehteä ja klikkaa + merkkiä aloittaaksesi animaation luomisen:

5) Valitse valikosta ‘On hover’

6) ja klikkaa ‘Grow’ ja sen kohdalla asetukset ikonia (edit):

7) Valitse Scale kohdassa prosentti kuinka paljon haluat buttonin kasvavan kun hiiri menee päälle. Tässä esimerkissä kasvu hoverilla on 105%. Voit myös säätää tästä buttonia muuttamaan opasiteettia eli läpinäkyvyyttä (opacity), kiertämään (rotate), siirtyminen vaaka- tai pystysuunnassa (offset) tai kallistumaan (skew).

8) Klikkaa vielä Timing että pääset säätämään mm. animaation kestoa. Tässä esimerkissä kesto on aika hidas 0.9 sekuntia, mutta voit laittaa minkä vain keston haluat.

Voit myös määrittää liiketyyliä (ease), “pomppua” (bounce) ja viivettä (delay). Voit testailla näille eri kestoja ja löytää sun tilanteeseen sopivan.

9) Klikkaamalla preview, saat buttonin hoverista esikatselun, mutta voit vielä erikseen testata lopputuloksen klikkaamalla pois tästä asetukset ikkunasta ja tallentamalla sivun editoinnit normaaliin tapaan (save). Siirry sivun preview näkymään, vie hiiri painikkeen päälle ja katso, miltä efekti näyttää.

Ja tadaa!

Nyt painikkeesi saa luomasi animaation aina, kun kävijä vie hiiren sen buttonin päälle.

Miksi painikkeiden hover-animaatio on kiva lisä?

Painikkeilla on verkkosivuilla tärkeä tehtävä: ne ohjaavat kävijöitä esimerkiksi tutustumaan palveluihin, varaamaan ajan tai tekemään ostoksia.

Pieni hover-animaatio voi tehdä painikkeista viimeistellymmän näköisiä ja antaa kävijälle visuaalisen merkin siitä, että painike on klikattava.

Mutta ihan kaikkea ei tarvitse miettiä aina myynnin tai konversioiden kautta. Joskus verkkosivuille saa lisätä jotain ihan vain siksi, että se näyttää mageelta!

Muutama vinkki ennen kuin innostut liikaa

Pidä animaatio maltillisena. Pieni ja pehmeä suurennus toimii yleensä paremmin kuin valtava pomppaus. Painikkeen pitäisi edelleen tuntua luontevalta osalta sivustoa.

Muista mobiilikävijät. Hover-animaatiot on tarkoitettu ensisijaisesti hiirellä käytettäville laitteille. Kosketusnäytöillä efekti ei välttämättä näy samalla tavalla, joten painikkeen pitää näyttää selkeästi klikattavalta myös ilman animaatiota.

Tarkista sivuston kokonaisuus. Jos sivuilla on jo paljon liikkuvia elementtejä, yksi lisäanimaatio voi olla liikaa. Pienet yksityiskohdat toimivat parhaiten, kun ne eivät kilpaile jatkuvasti kävijän huomiosta.

Haluatko saman hover-animaation kaikkiin sivustosi buttoneihin kerralla?

Squarespacen omilla animaatioasetuksilla voit lisätä suurennusefektin yksittäisiin buttoneihin ilman koodaamista. Mutta jos sivustollasi on paljon buttoneita, animaation lisääminen jokaiseen erikseen voi olla työlästä.

Valmiilla CSS-koodilla saat saman suurennusefektin sivustosi kaikkiin buttoneihin yhdellä copy-pastella! Sinun tarvitsee vain kopioida koodi ja liittää se Squarespaceen – jokaista buttonia ei tarvitse käydä muokkaamassa erikseen.

Tämä on erityisen kätevää isommilla sivustoilla, joilla on paljon painikkeita.

Jäikö tuunausinto päälle?

Squarespacen omilla työkaluilla voi tehdä yllättävän paljon hauskoja visuaalisia juttuja ilman koodaamista.

Mutta jos haluat viedä sivustosi tuunauksen vielä vähän pidemmälle, Squaremarketin hyllyiltä löytyy myös valmiita koodipaloja ja ohjeita pieniin erikoistehosteisiin kuten esimerkiksi:

Musiikkinappula verkkosivuille

Haluaisitko lisätä verkkosivuillesi musiikkia, jonka kävijä voi itse laittaa soimaan? Musiikkinappulalla tuot sivustollesi aivan uudenlaisen yksityiskohdan.

Tuunaa sivustosi vierityspalkki

Kyllä, myös sivuston vierityspalkkia eli scroll baria voi tuunata! Valmiin koodipalan avulla saat muokattua sen ulkoasua paremmin sivustosi tyyliin sopivaksi.

Kaikki verkkosivujen parannukset eivät vaadi isoa remonttia. Joskus jo yksi pieni animaatio tai hauska yksityiskohta tekee sivustosta astetta enemmän sun näköisen.