Kuinka tehdä Squarespace-verkkosivut ilman aiempaa kokemusta

Postaus päivitetty 01/2025

Lukemalla tämän postauksen:

tiedät teoriassa kuinka tehdä Squarespace-verkkosivut itse
tiedät mitä sisäsivuja kotisivuillesi tarvitset
osaat huomioida Squarespacen-verkkosivujen hakukoneoptimoinnin
tiedät, kuinka käytät Squarespacen analytiikkaa
osaat ottaa evästehallinan Squarespace-kotisivuillasi käyttöön

Sisällysluettelo

Squarespace on helppokäyttöinen ja yleisesti käytössä oleva verkkosivualusta, jonka avulla saat toteutettua tyylikkäät ja ammattimaiset verkkosivut ilman koodaustaitoja. Tässä oppaassa käydään läpi verkkosivutoteutuksen valmisteluvaiheet ja ohjeistetaan, kuinka voit luoda Squarespace-verkkosivut alusta loppuun.

Squarespace-Verkkosivutoteutuksen valmistelu

⭢ Rekisteröidy Squarespaceen
Luo ilmainen tili menemällä Squarespacen-verkkosivuille ja valitsemalla Get Started. Kun olet luonut kerran tilin, pääset kirjautumaan tilillesi samasta paikasta, mutta valitsemalla Log In.

Squarespace-verkkosivuja varten et tarvitse webhotellia, sillä levytila (= se mitä webhotelli käytännössä tarjoaa) kuuluu Squarespacen vuosimaksuun.

Sinun ei myöskään tarvitse ladata koneellesi mitään ohjelmistoja, vaan Squarespace toimii suoraan selaimessa. Seuraava vaihe on miettiä, miksi teet verkkosivut tai blogin.

Mitä ovat Squarespace-sivujesi tavoitteet

Ennen kuin aloitat verkkosivujen rakentamisen, on tärkeää määrittää tavoitteet verkkosivuillesi. Kysy itseltäsi:

Miksi rakennan verkkosivut? Onko tarkoitus esitellä palveluitasi, myydä tuotteita, jakaa blogisisältöä vai edistää henkilöbrändiäsi?

Kenelle verkkosivut on suunnattu? Määrittele tarkasti kohdeyleisösi. Ymmärrä heidän tarpeet ja mieltymykset.

Mitä haluan, että kävijä tekee sivuillani? Haluatko heidän tilaavan uutiskirjeen, ottavan yhteyttä, ostavan tuotteen tai lukevan blogipostauksiasi?

Tee avainsanatutkimus. Sen avulla tiedät mitä kirjoitat tuleville verkkosivuillesi.
Lue lisää: Kaikki mitä sinun tarvitsee tietää hakukoneoptimoinnista

Tavoitteiden selkiyttäminen ohjaa koko verkkosivuprojektia ja auttaa sinua tekemään johdonmukaisia päätöksiä sisällön, ulkoasun ja toiminnallisuuksien suhteen. Älä siis skippaa tätä vaihdetta!

Avainsanatutkimus ja kilpailija-analyysi

On tärkeää tietää tarkalleen, mitä sinne verkkosivuille kirjoitetaan. Usein on tilanne, ettei aluksi ole mahdollista palkata hakukoneoptimoinnin ammattilaista apuun. Avainsanatutkimus ei ole rakettitiedettä, se on tutkimista millä hakutermeillä ja hakulauseilla sivukävijät etsivät tietoa hakukoneissa.

Lue lisää: Avainsanatutkimus

Kilpailija-analyysi kuulostaa ”kovalle” ja vaikealle, mutta se ei ole. Jokaisen tulisi katsoa hieman omaa tonttiaan pidemmälle. Mitä kollegani tai kilpailijani tekee? Mitä he tekevät, jotka ovat Googlen hakutuloksissa kärkisijoilla? Millaiset verkkosivut heillä on? Mitä sisältöjä heidän verkkosivuilla on?

Lue lisää: Näin teet kilpailija-analyysin (super helpot ohjeet)

Kotisivujen ulkoasun ja sisältöjen suunnittelu

Seuraava askel on suunnitella verkkosivujesi ulkoasu ja visuaalinen ilme. Squarespace tarjoaa monia valmiita malleja, mutta on tärkeää valita sellainen, joka tukee sivustosi tavoitteita ja houkuttelee kohdeyleisöäsi. Voit myös rakentaa verkkosivusi aivan alusta alkaen itse.

Ennen kuin pääset toteuttamaan verkkosivuja, kannattaa (Oikeasti – usko mua! Oon tehnyt tän virheen monta kertaa) suunnitella verkkosivujen ulkoasu. Tässä muutama vinkki mitä teen itse nykyään aina ennen kuin toteutan verkkosivut. Näillä keinoilla säästän todella paljon aikaa.

Lue lisää: 5 helppoa askelta brändisi rakentamiseen

Valitse visuaalinen tyyli

Määritä brändisi visuaalinen tyyli (värit, fontit, kuvien tyyli). Pyri luomaan yhtenäinen ilme, joka tukee brändiäsi ja tekee verkkosivustasi houkuttelevan.

⭢ Värit

Valitse kotisivuillesi tulevat värit. 2-3 pääväriä sekä 1-2 korostusväriä on hyvä määrä. Liikaa erilaisia värejä tekee brändistäsi sekavan ja verkkosivuista epäammattimaisen näköiset. Huomioi myös kontrasti – on tärkeää että verkkosivuilla kävijä näkee tekstisi taustasta.

Lue lisää: Mitä tarkoittaa kotisivujen saavutettavuus

⭢ Fontit

Valitse fontit, jotka ovat helposti luettavia. Squarespace käyttää Adoben fontteja, mutta voit lisätä sinne helposti myös custom-fontteja esimerkiksi Googlelta tai mikäli olet ostanut fontin, jota haluat käyttää.

⭢ Kuvamaailma

Valitse brändillesi yhtenäinen kuvamaailma. Voit koostaa esimerkiksi Pinterestiin taulun, jossa määrittelet minkä tyylisiä kuvia käytät. Ilmaisia kuvapankkeja ovat esimerkiksi Pexels tai Unsplash, mikäli sinulla ei ole omia kuvia käytössä.

Suunnittele verkkosivujesi rakenne

Useimmilla verkkosivuilla sivurakenne on seuraava: Etusivu, Tietoa meistä, Palvelut/tuotteet, Yhteystiedot ja mahdollisesti Blogi. Suunnittele, millä sivuilla kukin sisältö sijaitsee. Esimerkiksi palvelusivut voivat sisältää alaotsikoita eri palveluista ja blogisivu voi olla jaettu kategorioihin.

⭢ Tee sivustokartta

Tee tämä varsinkin silloin, kun toteutat ensimmäisiä verkkosivujasi. Määrittele, mitä sivuja haluat verkkosivuillesi.

⭢ Mieti päänavigaation sekä footerin sisältö

Älä tee jokaiselle pikkuaiheelle omaa sivua. Pidä myös huoli, että navigaatiopalkkisi on vain yksirivinen (tästä lisää seuraavassa luvussa). Mikäli haluat laittaa navigaatioon enemmän sivuja, kuin yhdelle riville mahtuisi niin A) karsi sivujen määrää – oikeasti B) käytä dropdowneja.

Footeriin laitetaan yleensä yhteystiedot sekä linkitetään sosiaalisen median tilit.

Lue lisää: Verkkosivujen perussanasto

⭢ Kirjoita verkkosivujesi sisältö valmiiksi

Kun olet tehnyt avainsanatutkimuksen ja kilpailija-analyysin, tiedät mitä kirjoittaa. Voit käyttää esimerkiksi ChatGPT:tä sparraajana, mutta älä kopioi sen tuottamaa tekstiä suoraan verkkosivuillesi.

Lue lisää: Mikä on hyvää sisältöä kotisivuilla

Verkkosivujen rakentaminen Squarespace-alustalle

01 perusta verkkosivu

Nyt alkaa verkkosivujen varsinainen rakennustyö. Kirjaudu sisään Squarespace-tilillesi ⭢ Mene kohtaan Dashboard ⭢ Create Website. Valitse Squarespace Templates, jos haluat käyttää valmiita malleja tai Blank Template, jos haluat rakentaa verkkosivusi alusta alkaen itse.

Tämän jälkeen seuraa ohjeita ja valitse Start With This Design, kun olet valmis aloittamaan. Squarespace neuvoo sinua hyvin läpi verkkosivujen avausprosessin. Tässä kohtaa sinun ei tarvitse maksaa mitään, vaan saat käyttöösi 14 päivän ilmaisen suunnitteluajan.

⭢ Sivun kieli: Valitse kieli, millä kielellä aiot verkkosivusi luoda.

⭢ Site title, eli sivun nimi: Anna verkkosivuillesi nimi. Tätä voit vaihtaa myöhemminkin. Nimi voi olla vaikka sinun nimesi tai mitä ikinä keksitkin. Tämä on hyvä suunnitella kilpailija-analyysia ja avainsanatutkimusta tehdessä.

⭢ Tämän jälkeen Squarespace näyttää ohjeita kuinka mm. luot sivuja. Käydään nämä vaiheet seuraavaksi läpi. Alla olevassa kuvassa on näkymä, mikä tulee kun olet luonut sivun onnistuneesti. Tässä on kyseessä Blank Template.

02 luo globaali tyyli verkkosivuillesi

Tämä tarkoittaa, että valitset fontit ja verkkosivuillasi käytettävät värit. Näin sinun ei tarvitse joka osioon tai sivulle laittaa niitä uudestaan. Pääset valitsemaan verkkosivullesi tyylit menemällä sivun oikeasta laidasta pensselin kuvasta Site Styles.

03 Luo etusivu

Etusivu on verkkosivujesi tärkein sivu. Se yleensä määrittelee kotisivujesi tyylin. Etusivun rakentamiseen kuluu tyypillisesti eniten aikaa ja se kannattaa tehdä huolella. Etusivulle määrittelemääsi tyyliä voit helposti käyttää myös muilla sivuilla.

02 Luo navigaatio ja footer

Viemällä hiiren sivujen alkuun, pääset muokkaamaan navigaatiopalkkia (Edit Site Header). Viemällä hiiren ihan sivun alalaitaan pääset muokkaamaan footeria (Edit Site Footer).

Tutustu: Tarkemmat kirjalliset ohjeet Squarespace-verkkosivujen tekoon

03 Luo muut sivut

Luo muut sivut samaan tapaan kuin etusivu. Ensimmäisen kuvan näkymä on ns. Squarespacen hallintapaneeli. Luodaksesi sivuja lisää mene kohtaan Website – Pages (kuva 2) ja paina +. Nimeä sivu, kuten haluat.

04 tarkasta sivujen responsiivisuus (eli mobiiliystävällisyys)

Pääset tarkastelemaan verkkosivujesi mobiiliystävällisyyttä klikkaamalla millä tahansa luomallasi sivulla oikeasta reunasta puhelimen kuvaa. Tee tarvittavat muutokset myös mobiilinäkymään.

05 hakukoneoptimoi kaikki sivusi

Pääset muokkaamaan jokaisen luomasi sivun asetuksia menemällä kohtaan Pages – haluttu sivu – vie hiiri sivun päälle, mutta älä klikkaa – paina hammasrattaan kuvaa.

Alla olevassa kuvassa näkyvä näkymä näyttää jokaisen sivun asetukset. Kohdasta SEO pääset tekemään hakukoneoptimointia. Katso General kohdasta aika URL-slug kuntoon, eli tee sivustosi url-osoitteista kuvaavia (esim /palvelut tai /yhteystiedot). Älä käytä ääkkösiä.

⭢ SEO: Lisää jokaiselle sivuille title (otsikko)

⭢ SEO: Lisää jokaiselle sivulle description (kuvaus)

⭢ Joka sisäsivulle erikseen: Laita kuville alt-tekstit

Lue lisää: Verkkosivujen perussanasto

Lue lisää: Kaikki mitä sinun tulee tietää hakukoneoptimoinnista

Verkkosivujen julkaiseminen

Pääset tekemään näitä asetuksia menemällä hallintapaneelissa sen alareunaan ja klikkaamalla hammasratasta (Settings).

Seuraavaksi aukeaa tällainen näkymä. Täältä pystyt tekemään kaikki alla olevan listan mukaiset asetukset.

⭢ Laita SSL-yhteys päälle

Kohdasta Domains & Email pääset hallinnoimaan tätä.

⭢ Lisää Social Sharing Image

Kohdasta Website – Social Sharing pääset lisäämään kuvan, joka näkyy aina silloin kun jaat verkkosivujesi linkkiä esimerkiksi sosiaalisessa mediassa.

⭢ Lisää favicon (selainkuvake)

Kohdasta Website – Favicon voit vaihtaa selainkuvakkeesi. Selainkuvake on selaimessa välilehdellä ennen verkkosivujesi nimeä näkyvä kuvake.

⭢ Huomioi evästehallinta

Mikäli tarvitset kotisivuillesi evästebannerin, niin pääset ottamaan sen käyttöön maksutta asetuksista – Website – Cookies and Data Privacy. Valitse Banner kohdasta Enabled ja pääset muokkaamaan evästehallinnan tarpeisiisi sopivaksi.

Lue lisää: Milloin kotisivuille tarvitaan evästekysely

⭢ Laita Squarespace AMP päälle

AMP (Accelerated Mobile Pages) tarkoittaa Squarespace-verkkosivujesi optimointi mobiililaitteille.

Lue lisää: Using AMP with Squarespace

⭢ Valitse Squarespacen maksusuunnitelma (pricing plan)

Kohdasta Website – Site Availability näkyy että sivu on yksityinen (Private), sillä maksusuunnitelmaa ei ole valittu. Valitse painike Upgrade to Publish ja seuraa selkeitä ohjeita sivustosi julkaisemista varten.

⭢ Osta tai linkitä oma domain

Squarespacen kautta ei saa hankittua .fi-päätteistä domainia. Mikäli haluat sellaisen, osta se erikseen esim. Hostaanin tai Zonerin kautta ja liitä se Squarespace-sivuihisi.

Mikäli haluat domainin jollain muulla päätteellä, voit valita sen Squarespacen maksusuunnitelman valinnan jälkeen. Mikäli maksat kerralla Squarespacen vuosimaksun, saat domainin 1. vuodeksi ilmaiseksi.

Lisäapua squarespace-kotisivuillesi

Jos tarvitset apua kotisivujesi kanssa, olen täällä auttamassa! 💻✨ Liity myös Facebook-ryhmääni, jossa voit kysyä neuvoja kotisivujesi rakentamiseen.

⭢ Pikaopas Squarespace-sivuston hakukoneoptimointiin 4,90€ (sis. alv)

⭢ Opas Squarespacen yleisimmistä toiminnoista 9,90€ (sis. alv)

BONUS: Inspiraatiota

Näistä on hyötyä, kun suunnittelet kotisivujasi. Ja mikä parasta, nämä kaikki on ilmaisia!

Fontit: Adobe Fonts, Google Fonts, FontSquirrel
Värit: Coolors.co, ColorSpace, uiGradients
Kuvat, ikonit ym: Icons8, SVGSilh, Pexels, Unsplash
Layouts: LandBook, Design Vault, Designspiration
CSS-generaattorit: CSS Loaders, 10015.io “free all-in-one toolbox”

← Mikä on XML-sivustokartta 5 helppoa askelta brändisi rakentamiseen →