Bonsait aloitusopas – osa 2, Sivurakenne, sisällön jäsentely ja Aineistopankki
Aloitusoppaan ensimmäisessä osassa otimme ensiaskeleet Bonsaitin hallintatilassa ja kokeilimme tekstien sekä kuvien muokkaamista suoraan sivulla. Nyt on aika ottaa pykälää konkreettisempi ote sivuston rakentamiseen ja katsoa, miten sivukarttaa hallinnoidaan, miten sisältöjä jäsennellään toimiviksi kokonaisuuksiksi ja kuinka mediatiedostot pyörivät Aineistopankissa.
Siirry siis Sivusto-osioon josta pääset muokkaamaan sivuston rakennetta ja sivujen sisältöä.
Sivurakenteen hallinta ja uudet sivut
Sivustosi rakenne elää vasemmassa reunassa olevassa sivukartassa. Rakennetta on helppo muokata, sillä voit siirrellä sivuja osiosta toiseen yksinkertaisesti vetämällä ja pudottamalla. Jos haluat vaihtaa sivun nimeä, se onnistuu nopeatempoisesti kaksoisklikkaamalla sivun nimeä suoraan sivupuussa.
Uuden sivun luominen alkaa klikkaamalla sinistä Uusi sivu -painiketta. Eteesi avautuvassa ikkunassa voit antaa sivulle nimen, valita sen sijainnin sekä päättää, luotko täysin tyhjän sivun, kopioitko olemassa olevan sivun pohjaksi vai käytätkö valmista mallisivua.
Hiiren oikealla napilla klikkaamalla saat jokaisen sivun kohdalla auki valikon, josta voit luoda alasivun, kopioida sivun, poistaa sen tai säätää sivun ominaisuuksia. Ominaisuuksista pääset käsiksi muun muassa hakukoneasetuksiin (SEO), SOME-jakokuviin ja sivun julkaisuajankohtaan.
Jos sivustollasi on käytössä useita kieliversioita, jokaiselle kielelle löytyy oma selkeä sivukarttansa. Suurilla sivustoilla tietty sivu löytyy nopeasti sivukartan hakukentällä.
Harjoitus 1: Sivun luominen kopioimalla
Kokeillaan uuden sivun tekoa käytännössä! Etsi sivukartasta jokin valmis sivu, klikkaa sitä hiiren oikealla painikkeella ja valitse Kopioi sivu. Järjestelmä luo sivusta kopion. Tämän jälkeen klikkaa luomaasi uutta sivua sivupuussa, jotta pääset siirtymään sen muokkaustilaan.
Miten sisältö jäsennellään oikein?
Joskus uuden sivun kasaaminen voi tuntua haastavalta, jos ei aivan tiedä mistä aloittaa. Avain selkeään sivuun on sisällön jäsentely.
Sivun pohjalla ovat kehittäjän määrittelemät sisältöpaneelit, joihin sisältöjä lisätään joko vetämällä tai klikkaamalla paneelin alalaidassa olevaa sinistä plus-ikonia. Jotta sivusta ei tulisi vain yhtä pitkää pystysuoraa pötköä, käytetään avuksi erilaisia rakennealueita:
Aloita Palstat-alueesta: Tämä on tärkein työkalusi. Kun lisäät sivulle Palstat-alueen, luot raamit, jotka keskittävät ja jakavat sisällön rivittäin ja sarakkeittain (esim. tekstiä vasemmalle ja kuva oikealle).
Kokeile vaihtelevia rakennealueita: Sisällön visuaaliseen jäsentelyyn voi ottaa avuksi myös Karuselli-, Välilehdet- ja Blokki-alueita. Näillä saat luotua sivuille vaihtelua ja tilaa säästäviä rakenneratkaisuja.
Hyödynnä valmiita sisältöalueita: Pelkän perustekstin lisäksi sisällön tuottamiseen kannattaa kokeilla esimerkiksi Nostolaatikko- ja Luettelo-alueita, joilla tärkeät tiedot saa nousemaan paremmin esiin. Monipuolisissa alueissa, kuten Henkilöluettelossa, järjestelmä muotoilee kortit automaattisesti tyylikkääksi kokonaisuudeksi.
Harjoitus 2: Sisällön muokkaus ja syöttö
Nyt kun olet harjoituksessa 1 kopioimallasi sivulla, kokeillaan sisältöjen päivittämistä. Kaksoisklikkaa jotain sivulla olevaa tekstiä ja kirjoita tilalle uusi teksti. Kokeile samalla vaihtaa jokin sivun kuvista klikkaamalla kuvaa ja valitsemalla uusi kuva tilalle.
Harjoitus 3: Sisältöalueen lisääminen paneelista
Seuraavaksi kokeillaan uuden alueen tuomista sivulle. Avaa vasemmasta reunasta Lisää sisältöä -paneeli. Etsi sieltä jokin valmis sisältöalue kokonaisuus (esimerkiksi Teksti, Nostolaatikko tai Palstat) ja vedä se hiirellä suoraan sivun sisältöpaneeliin. Voit soveltaa tätä vapaasti oman sivustosi valmiiden palikoiden mukaan!
Sivun kiinteät alueet (Header ja Footer)
Sivustolta löytyy myös osioita, joiden halutaan toistuvan samanlaisina jokaisella sivulla, kuten ylä- ja alatunniste. Näitä pääset muokkaamaan valitsemalla ruudun oikeasta yläkulmasta Muokkaa kiinteitä alueita -painikkeen.
Tämä tila tuo näkyviin vihreät hallintapainikkeet sivun ylä- ja alaosaan. Muistathan, että kun teet muutoksia näihin vihreällä merkittyihin alueisiin, muutokset päivittyvät automaattisesti sivuston jokaiselle sivulle.
Aineistopankki pitää kuvat ja tiedostot järjestyksessä
Kaikki sivustolla käytettävät mediat asuvat Aineistot-osiossa. Tiedostojen lataaminen järjestelmään on vaivatonta: voit vetää kuvat ja dokumentit suoraan omalta tietokoneeltasi latausalueelle.
Bonsait tekee työtä puolestasi, sillä ladattavat kuvat pienennetään ja nimetään automaattisesti web-käyttöön sopivaan muotoon. Voit myös valita useita kuvia kerralla ja optimoida niiden kuvalaatu suoraan latausvaiheessa, mikä pitää sivustosi latausajat nopeina.
Aineistopankista löytyy lisäksi kätevä Hae kuvia -painike. Sen kautta pääset hakemaan ja käyttämään ilmaisia laadukkaita kuvia suoraan Pixabay-kuvapalvelusta ilman, että sinun tarvitsee poistua hallintatilasta.
Kokeile rohkeasti
Ota hetki aikaa ja käy kokeilemassa uuden sivun luomista ja parin kuvan lataamista Aineistopankkiin.