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 kätevästi kaksoisklikkaamalla sivun nimeä suoraan sivukartassa.

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ä.

Sivun julkaiseminen ja piilottaminen

Kun luot uuden sivun, se on oletuksena piilotetussa tilassa. Tämä antaa sinulle rauhassa aikaa viilata tekstit ja kuvat kuntoon ennen kuin sivu päästetään julkisuuteen.

Sivun voi julkaista tai piilottaa klikkaamalla sivua hiiren oikealla painikkeella sivukartassa ja valitsemalla valikosta Julkaise / piilota jolloin tila vaihtuu. On hyvä muistaa, että piilotettu sivu ei ilmesty sivuston valikoihin tai navigaatioon, mutta se on silti löydettävissä suoran osoitteen avulla. Tämä on näppärä ominaisuus silloin, kun haluat esimerkiksi esikatsella sivua kollegan kanssa ennen virallista julkaisua.

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.

Kuinka luodaan selkeä ja toimiva sivu?

Verkkosivun rakentamisessa on kyse paljon muustakin kuin vain tekstin ja kuvien tuomisesta ruudulle. Kyse on siitä, miten tieto esitetään niin, että kävijä löytää etsimänsä helposti ja viihtyy sivulla. Uuden sivun kasaaminen tyhjästä voi silti joskus mietityttää, mutta ei hätää – homma helpottuu huomattavasti, kun pilkot sisällön selkeisiin osiin ja otat avuksi oikeat rakennealueet.

Sivun pohjana toimivat aina kehittäjän valmiiksi määrittelemät sisältöpaneelit. Voit lisätä niihin uusia elementtejä vetämällä niitä paikoilleen tai klikkaamalla paneelin alalaidassa olevaa sinistä plus-painiketta. Jotta sivusta ei kuitenkaan tulisi pelkkää pitkää pystysuoraa pötköä, rakenteen suunnittelu kannattaa aloittaa näillä työkaluilla:

Palstat-alue luo raamit sivulle

Palstat-alue on ylivoimaisesti tärkein työkalusi sivun ilmeen muotoilussa. Sen avulla keskität sisällön siististi ruudun keskelle ja jaat sivun haluamaasi määrään sarakkeita (esimerkiksi tekstiä vasemmalle ja kuva oikealle). Palstat-alueen sarakkeet mukautuvat automaattisesti kävijän päätelaitteen mukaan, tietokoneella rinnakkain olevat osiot asettuvat puhelimen näytöllä siististi allekkain.

Teksti ja kuva ovat kaiken perusta

Kun palstarakenne on paikoillaan, tärkeimmät ja käytetyimmät sisältöalueet ovat perinteiset teksti- ja kuva-alueet. Yksinkertaisimmillaan sivu syntyykin näitä kahta yhdistelemällä: tekstieditorilla kirjoitat selkeät leipätekstit ja otsikot, ja kuva-alueella tuot sivuille visuaalista ilmettä.

Käytä valmiita työkaluja sisällön elävöittämiseen

Pelkän tekstin ja kuvan lisäksi Bonsait tarjoaa joukon valmiita työkaluja, joilla teet sivustosta vuorovaikutteisemman ja helpommin selattavan. Voit esimerkiksi lisätä selkeitä Painikkeita ohjaamaan kävijää eteenpäin tai kiinnittää lukijan huomion tärkeimpiin nostoihin Nostolaatikon avulla.

Sivulta löytyy myös monipuolisempia alueita, kuten Luettelo tai Henkilöluettelo. Nämä osiot sisältävät useita erillisiä tietuita (esimerkiksi yksittäisiä henkilökortteja tai listan kohteita), joista jokaisella on omat asetuksensa. Järjestelmä pitää huolen siitä, että nämä tietueet muotoutuvat automaattisesti tyylikkääksi ja yhtenäiseksi kokonaisuudeksi.

Voit lukea lisätietoja erilaisista sisältöalueista osoitteesta https://tuki.bonsait.io/article/erilaiset-sisaltoalueet

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 tiedostot ja dokumentit keskitetään yhteen paikkaan, eli Aineistopankkiin. Kuvat siis ladataan ensin Aineistopankkiin, josta niitä voidaan sitten linkittää eri sisältöalueisiin ympäri sivustoa.

Aineistopankin löydät vasemmasta päävalikosta Aineistot-painikkeesta.

Tiedostojen tuominen järjestelmään on tehty todella vaivattomaksi, sillä voit vetää kuvat ja dokumentit suoraan tietokoneeltasi tiedostojen alla olevalle latausalueelle. Bonsait tekee paljon työtä puolestasi ja pystyy pienentämään sekä nimeämään kuvat automaattisesti verkkoon sopivaan muotoon.

Voit myös itse optimoida kuvien laatua latauksen jälkeenkin, mikä pitää sivustosi latausajat nopeina ja kävijät tyytyväisinä.

Aineistopankista löytyy lisäksi kätevä Hae kuvia -painike. Sen kautta pääset hakemaan ja käyttämään miljoonia ilmaisia 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.