Sivuston headerin eli yläosan muokkaaminen Squarespacessa
Sivuston header eli yläosa on yksi verkkosivuston tärkeimmistä alueista. Siellä sijaitsevat yleensä yrityksen logo, sivuston päänavigaatio ja mahdollisesti esimerkiksi painike, sosiaalisen median linkit tai verkkokaupan ostoskori.
Header näkyy yleensä sivuston kaikilla sivuilla, joten sen kannattaa olla sekä visuaalisesti selkeä että helppokäyttöinen.
Squarespacessa headerin sisältöä, asettelua ja ulkoasua voi muokata pitkälle ilman koodaamista. Voit esimerkiksi vaihtaa logon, muuttaa navigaation järjestystä, lisätä headeriin elementtejä sekä määrittää sen taustan ja yleisen asettelun.
Tässä ohjeessa käydään läpi tärkeimmät Squarespace 7.1:n header-asetukset ja se, mistä löydät ne.
Mistä Squarespacen headerin asetukset löytyvät?
Avaa mikä tahansa sivu Squarespacen muokkaustilaan.
Vie hiiri sivuston yläosan eli headerin päälle ja klikkaa Edit Site Header.
Täältä pääset muokkaamaan headerin sisältöä ja ulkoasua.
Header on sivuston globaali elementti. Tämä tarkoittaa, että siihen tehdyt muutokset vaikuttavat lähtökohtaisesti koko sivuston headeriin, eivät vain siihen sivuun, jota satut parhaillaan muokkaamaan.
Elementtien lisääminen headeriin
Jos haluat lisätä headeriin uusia elementtejä, valitse Add Elements.
Valikosta voit ottaa käyttöön headeriin saatavilla olevia elementtejä, kuten esimerkiksi:
painikkeen
sosiaalisen median linkit
verkkokaupan ostoskorin
Kaikkia mahdollisia elementtejä ei tietenkään tarvitse lisätä. Header kannattaa yleensä pitää melko yksinkertaisena, jotta kävijä löytää sivuston tärkeimmät asiat nopeasti.
Jos esimerkiksi yhteydenotto tai ajanvaraus on yrityksesi tärkein tavoite, headeriin lisättävä painike voi toimia hyvänä toimintakehotuksena eli CTA:na.
Headerin ulkoasun ja asettelun muokkaaminen
Kun haluat muuttaa headerin visuaalista ilmettä, valitse Edit Design.
Täältä voit muokata esimerkiksi headerin yleistä asettelua sekä elementtien sijoittelua ja välistyksiä.
Eri layout-vaihtoehdoilla voit määrittää, miten esimerkiksi logo ja navigaatio sijoittuvat suhteessa toisiinsa.
Headerin suunnittelussa kannattaa miettiä ennen kaikkea käytettävyyttä. Luovakin asettelu voi näyttää hienolta, mutta kävijän pitäisi silti tunnistaa nopeasti, mistä navigaatio löytyy ja miten sivustolla pääsee eteenpäin.
Headerin taustan ja värien muokkaaminen
Headerin asetuksista voit vaikuttaa myös sen taustaan ja värimaailmaan.
Header voi esimerkiksi olla visuaalisesti yhteydessä sivun ensimmäiseen osioon tai sillä voi olla selkeä oma taustansa.
Tässä kannattaa kiinnittää erityisesti huomiota kontrastiin. Navigaation linkkien, logon ja muiden tärkeiden elementtien pitää erottua riittävän selkeästi headerin taustasta.
Jos esimerkiksi käytät läpinäkyvää headeria kuvan päällä, tarkista että logo ja navigaation tekstit erottuvat hyvin myös kyseisestä kuvasta.
Logon vaihtaminen Squarespacessa
Kun olet headerin muokkaustilassa, klikkaa logoa ja avaa sen asetukset kynäkuvakkeesta.
Täältä voit lisätä sivustolle oman logon tai vaihtaa nykyisen logokuvan.
Voit määrittää tarvittaessa myös mobiilissa käytettävän logon erikseen. Tästä on hyötyä esimerkiksi silloin, jos desktopissa käyttämäsi leveä logo ei toimi hyvin puhelimen pienemmällä näytöllä.
Logon koossa kannattaa välttää kahta ääripäätä: liian pieni logo voi jäädä huomaamattomaksi, mutta valtavan suuri logo vie turhaan tilaa sivuston varsinaiselta sisällöltä.
Navigaation järjestyksen muuttaminen
Myös headerissa näkyvien navigaatiolinkkien järjestystä voi muuttaa headerin muokkaustilassa.
Klikkaa navigaatiota ja avaa sen asetukset kynäkuvakkeesta.
Näet listan navigaatiossa olevista linkeistä. Voit muuttaa niiden järjestystä vetämällä linkit haluamaasi järjestykseen.
Navigaation järjestystä kannattaa miettiä myös kävijän näkökulmasta. Tärkeimpien sivujen pitäisi löytyä helposti ilman, että navigaatiosta muodostuu pitkä lista kaikista sivustolla olevista sivuista.
Muista tarkistaa header myös mobiilissa
Desktopilla hyvältä näyttävä header ei automaattisesti tarkoita, että kokonaisuus toimii yhtä hyvin puhelimella.
Mobiilissa navigaatio muuttuu tyypillisesti avattavaksi mobiilivalikoksi. Squarespace 7.1:ssä headerin ja mobiilivalikon asetteluun löytyy omia sisäänrakennettuja asetuksia.
Tarkista ainakin:
näyttääkö logo sopivan kokoiselta
onko mobiilivalikko helppo löytää
erottuuko valikon kuvake taustasta
ovatko navigaation linkit helposti luettavia
toimiiko header myös sivuilla, joiden ensimmäisen osion tausta on erilainen
Mobiilinäkymä kannattaa tarkistaa aina ennen sivuston julkaisemista.
Millainen on hyvä verkkosivuston header?
Squarespace antaa headerin ulkoasuun paljon vaihtoehtoja, mutta kaikkia mahdollisuuksia ei tarvitse käyttää.
Hyvä header auttaa ennen kaikkea kävijää ymmärtämään nopeasti, kenen sivustolla hän on ja minne hän voi seuraavaksi siirtyä.
Pidä navigaatio selkeänä, varmista tekstien ja taustan riittävä kontrasti ja nosta tärkein toiminto tarvittaessa esille esimerkiksi painikkeella.
Jos rakennat ensimmäistä Squarespace-sivustoasi, eri header-layoutien kokeileminen on hyvä tapa löytää omaan sivustoon sopiva ratkaisu. Vaihda asettelua, tarkista kokonaisuus sekä desktopilla että mobiilissa ja arvioi ulkoasua aina myös kävijän näkökulmasta.
Kun perusasetukset eivät enää riitä, Squarespacen headeria voidaan personoida vielä pidemmälle Custom CSS:n avulla. Koodilla voidaan muokata esimerkiksi navigaation linkkejä, logoa, painiketta, sosiaalisen median kuvakkeita ja mobiilivalikkoa.
Useimmissa tapauksissa kannattaa kuitenkin aloittaa Squarespacen omista header-asetuksista ja käyttää koodia vasta niihin yksityiskohtiin, joita editorilla ei pysty toteuttamaan.
Jos haluat lisätä headerin alueelle jotain elementtejä kuten buttonin, somelinkkejä tai verkkokaupan ostoskärryikonin, teet sen klikkaamalla ADD ELEMENTS. Sinulle aukeaa valikko mistä voit täpätä päälle ne elementit mitä haluat.
Jos puolestaan haluat muokata sivuston yläosan visuaalisuutta, klikkaa EDIT DESIGN. Sinulle aukeaa melko laaja valikko mistä voit valita välilehden ‘Design’ tai ‘Color’. Design -välilehdellä on paljon erilaisia vaihtoehtoja visuaaliseen muokkaamiseen. Voit esimerkiksi valita headerin layoutin (eli yleisen asettelun), linkkien välistyksen määrän, elementtien välissä olevaa tilaa jne. Color -välilehdellä valitaan yläosan taustan tyyli, eli onko siellä sama taustakuva mikä ylimmäisessä sectionissa on, vai onko sillä aina sama taustaväri jne.
