Miten Squarespace-sivujen rakenne toimii visuaalisesti? (sectionit & blockit)
Jos olet uusi Squarespacen käyttäjä, yksi tärkeimmistä asioista ymmärtää on se, miten sivut rakentuvat. Kun hahmotat sectionien ja blockkien logiikan, verkkosivujen muokkaaminen muuttuu huomattavasti helpommaksi — eikä koodia tarvita.
Squarespace 7.1 käyttää nykyään Fluid Engine -editoria, joka perustuu visuaaliseen drag-and-drop-rakentamiseen. Tässä ohjeessa käydään läpi perusteet selkeästi, että sinun on helppo tarttua Squarespace sivuvjen rakentamiseen.
Squarespace-sivut rakentuvat sectioneista
Ajattele verkkosivua pinona vaakasuuntaisia alueita.
Näitä alueita kutsutaan sectioneiksi.
Yksi section voi sisältää erilaisia elementtejä, esimerkiksi:
kuvia (image)
tekstiä (text)
lomakkeen (form)
painikkeita (button)
jne.
Jokaisella sectionilla voi olla omat visuaaliset perusasetukset kuten:
oma taustaväri
erilainen korkeus
oma sisältörakenne
jne.
Käytännössä yksi verkkosivu koostuu useista päällekkäisistä sectioneista.
Sectionien sisällä ovat blockit
Section ei vielä sisällä varsinaista sisältöä. Sinne lisätään erilaisia blockkeja.
Blockit ovat sisältöelementtejä, kuten:
teksti (text)
kuva (image)
nappi (button)
video (video)
kuvagalleria (gallery)
lomake (form)
Instagram feed (Instagram)
jne.
Näistä rakennetaan sivun varsinainen sisältö. Squarespacessa on n. 30–40 yleistä blockityyppiä (riippuen siitä lasketaanko mukaan myös commerce-, scheduling- ja jäsenyystoiminnot). Eli vaihtoehtoja erilaisista sisältötyypeistä on reilusti. Pääosin toki sivujen sisältö yleensä muodostuu teksti, kuva ja button blockeista.
Fluid Engine toimii drag-and-drop-tyylillä
Squarespacen Fluid Engine tekee sivujen rakentamisesta visuaalista.
Voit:
siirtää blockkeja hiirellä
muuttaa niiden kokoa
rakentaa erilaisia layoutteja
Editorissa näkyvä ruudukko (grid) auttaa kohdistamaan elementit siististi. Ruudukko ilmestyy näkyviin aina kun liikutat elementtejä hiirellä (tai jos painat G-näppäintä kerran). Helppo liikuttelu hiirellä ja taustagrid tekevät Squarespacesta erittäin aloittelijaystävällisen verrattuna moniin muihin verkkosivualustoihin.
Taustagrid:
Mitä eroa on sectionilla ja blockilla?
Jokainen Squarespacen sivu muodostuu yhdestä tai useammasta sectionista. Section on yksittäinen alue yhden sivun sisällä ja niitä voi olla useampia peräkkäin. Yhden sectionin sisällä voi olla monta erilaista blockia, eli elementtiä (kuten kuva, teksti, button-painike jne.).
Voit siis luoda yhden sivun
Miksi tämä rakenne on tärkeä ymmärtää?
Kun opit section- ja block-rakenteen:
sivujen muokkaaminen nopeutuu
layoutien rakentaminen helpottuu
responsiivisuus on helpompi hallita
Voit kopioida yksittäisiä blockkeja, mutta myös kokonaisia sectioneita sivun sisällä. Jos luot sectionin missä on hyvä asettelu ja sen mobiilinäkymäkin on tsekattu ja sitten teet siitä kopion, säästät todella paljon aikaa kun sinun ei tarvitse aloittaa seuraavan samanlaisen sectionin rakentamista ihan alusta. Tämä helpottaa samanlaisten sivurakenteiden luomista. Kun olet kerran muokannut hyvän asettelun, voit helposti kopioida ja toistaa sitä sen sivun sisällä - sekä lisätä samaa pohjaa myös muille sivuille.
Yhteenveto
Squarespace-sivut rakentuvat kahdesta pääosasta:
sectioneista (sivun osaalueet)
blockeista (sisältö sectionien sisällä)
Fluid Engine mahdollistaa näiden elementtien liikuttelun helposti drag-and-drop-editorilla ilman teknistä osaamista. Kun ymmärrät tämän rakenteen, Squarespacen käyttö muuttuu huomattavasti intuitiivisemmaksi ja visuaalisemmaksi.
