Taru Salokangas

View Original

Miten muokkaat sivuston yläosaa eli headeria squarespacessa

Squarespacella on ihanan vaivatonta rakentaa kotisivuja. Se on alustan yksi isoimmista plussista, että kuka tahansa voi ilman koodaustaitoja rakentaa itselleen kotisivut. Toki verkkosivuihin liittyen on aina oma oppimiskäyrä siihen liittyvissä asioissa - ihan vain siksi, että siihen liittyy niin paljon asioita. Mutta on ihanaa, että on olemassa keino miten voi saada simppelit sivut kasaan melko kevyestikin. Toki sitten kun halutaan kehittää kotisivuja ja saada niistä enemmän hyötyjä irti, on syytä panostaa joko asian itse opetteluun tai ammattilaisen tukeen.

Squarespace on myös siitä mahtava, että se kehittää jatkuvasti erittäin kovaa tahtia palveluaan vastaamaan asiakkaidensa tarpeisiin entistä paremmin. Ja se on i-ha-naa! Mutta täytyy myöntää, että se luo omat haasteensa heille, jotka eivät käytä palvelua samalla tasolla kuin minä ammattilaisena (eli lähes päivittäin). Jos olet sivuja rakentaessa lisännyt logon ja haluat vaihtaa sen vuoden päästä, se mistä se tehdään voi näyttää hieman erilaiselta. Hyvä puoli on se, että systeemi on sen verran intuitiviinen, että kyllä sen uudenkin tavan aika nopeasti hiffaa jos on aiemminkin sitä asiaa osannut muokata.

Alkuvuodesta 2024 Squarespace uudisti tapaa miten sivuston headeria eli sivun yläosaa ja siinä olevia elementtejä muokataan. Headerin elementteihin yleisesti kuuluu: logo ja navigaatio. Mutta myös muita elementtejä kuten ostoskori ikoni, somelinkit tai vaikkapa linkkinappi. Squarespacessa tästä kohdasta asetetaan myös sen alueen visuaalinen tyyli.

Oletpa sitten etsimässä opastusta aiheeseen siksi, että tämä osio näyttää erilaiselta kuin ennen tai tekemässä ylipäätään ensimmäistä kertaa Squarespacessa sivuja ja haluat muokata sivun yläosaa, tämä ohje on sinulle.

Let’s go!

Sivun yläosan eli headerin muokkaamisen ohje Squarespace -sivuille:

Pääset käsiksi kaikkiin sivun yläosan eli headerin osioiden muokkaamiskohtiin menemällä hiirellä yläosan päälle minkä tahansa sivun editointinäkymässä ja klikkaamalla siinä kohdalla ilmestyvää EDIT SITE HEADER -kohtaa:

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.

Logon vaihtaminen:

Kun olet editoimassa headeria. Pystyt klikkaamaan logoa ja klikkaamalla vielä kynäikonia, saat auki uuden mini-ikkunan, jossa voit lisätä oman logon tai vaihtaa sitä. Voit myös laittaa mobiilinäkymään oman logon.

Navigaation järjestyksen vaihtaminen:

Navigaation eli sivun yläosan linkkien jäjestystä voi vaihtaa nyt myös täällä headerin editointinäkymässä (aiemmin pystyi tekemään sen vain vaihtamalla sivujen järjestystä WEBSITE -kohdan sivulistauksessa).

Teet sen klikkaamalla navigaatiota, jotta saat kynäikonin näkyviin. Sen jälkeen sinulle aukeaa ikkuna, jossa on kaikki navigaation linkit. Voit vaihtaa linkkien järjestystä vetämällä ne hiirellä haluamaasi järjestykseen:

Jos kotisivujen rakentaminen on uutta, suosittelen testailemaan millaiset headerin visuaaliset asetukset sopii sinun rakentamille sivuille. Enemmän sivuja tekevät osaavat miettiä tämän näkymän jo etukäteen ja vain toteuttavat sitten sen suunnitelman kun sivuja rakennetaan.

Laita ohje talteen Pinterestiin: