Kotisivukoneemme on täysiverinen WYSIWYG-editori, jolla voit myös muokata kotisivujesi ulkoasua rajattomasti. Työkalu vertautuukin ominaisuuksiltaan lähes taitto-ohjelmaan. Tässä edistyneemmässä ohjeiston osa-alueessa käymme läpi kotisivukoneen ulkoasun ja elementtien editointitoimintoja sekä responsiivisten näkymien hallintaa.
Siirry ensimmäiseksi kotisivukoneen muokkausnäkymään, jolloin näet seuraavan valikkorakenteen:
Kun viet hiiren editorinäkymässä minkä tahansa teksti-, kuva- tai grafiikkalementin päälle, se aktivoituu ja muuttuu kehystetyksi. Tällöin näet elementin yläpuolella
kolme toimintoikonia (harmaalla) sekä
elementin etäisyydet (oranssilla) ympäröiviin elementteihin. Ikoneiden toiminnat ovat seuraavat:
- Siirto-ikoniin
hiirellä tarttumalla siirrät elementtiä (esimerkissä tekstiä "neuvottelut") haluamaasi sijaintiin sivulla. Voit käyttää oransseja apuviivamittoja apuna saadaksesi elementit samoille etäisyyksille toisistaan.
- Ylös-alas -ikoniin
hiirellä tarttumalla siirrät elementtiä sekä kaikkia sen rinnalla ja alapuolella olevia elementtejä ylös- tai alaspäin. Tämä toiminnallisuus on tarpeen erityisesti silloin kun lisäät yläpuolella oleviin elementteihin sisältöä, jolloin saat ensin siirrettyä alempana olevia elementtejä kerralla alaspäin eivätkä elementit eivät mene päällekkäin.
- Kynä-ikonia
hiirellä klikkaamalla pääset kunkin elementin toimintovalikkoon, josta voit valita mitä elementille tehdään (esim. muokataan tekstiä, vaihdetaan kuva, kopioidaan, järjestetään jne.)
Kynäikonin alta avautuva toimintovalikko on esimerkiksi tekstielementissä seuraavankaltainen:
- Muokkaa tekstiä -valikon kohta aktivoi elementin tekstisisällön muokattavaksi ja tällöin käytettävissäsi on myös muotoilutyökaluja.
- Kopioi- ja liitä -valinnoilla voit kopioida haluamasi elementin sivulle. Tällä monistat helposti esimerkiksi painikkeet ja muut graafiset elementit sivuillesi, joiden muotoilu yksittäin olisi työlästä.
- Lukitse -valinnalla voit lukita elementin nykyiseen sijaintiin, jotta siihen ei voida tarttua vahingossa. Tämä voi olla tarpeen sivualueissa, joissa on paljon pällekkäisiä elementtejä.
- Järjestä -valinnalla voit siirtää elementtiä Z-akselilla, eli tuoda sen toisten elementtien eteen tai viedä sen toisten elementtien taakse.
- Poista -valinta luonnollisesti tuhoaa valitun elementin
- Piilota -valinnalla saat elementin piiloon valitussa näkymässä (poistamatta sitä). Piilotus koskee valittua responsiivisuuden tasoa ja piilotetut elementit näkyvät editointinäkymässä ruudulla kelluvassa laatikossa. Toiminnallisuudella on siis mahdollista jättää elementtejä näkyvistä osassa selainten ruutukokoja (Esimerkiksi valitun kuvan voi piilottaa tilan säästämiseksi mobiilinäkymästä, mutta jättää näkyville suurempiin ruutukokoihin.)
- Asetukset -valikon takaa avautuu elementtikohtainen asetusvalikko, josta voit määrittää mm. elementin värejä, tyylejä, kokoa, taustakuvaa ym.
Sivuston responsiivisuus ja tilat eri päätelaitteille
Hostaanin kotisivukone on toteutettu siten, että editorilla tuotettu sivusto toimii täysin responsiivisesti ja mukautuen käyttäjän päätelaitteen ruutukokoon. Sivusto toimii ja näyttää hyvältä riippumatta siitä selaako käyttäjä sivua älypuhelimella, tabletilla, tietokoneella tai vaikkapa älytelevisiolla.
Tämä kuitenkin edellyttää sitä, että kotisivukoneen muokkausvalikosta on kytketty päälle eri laitteille suunnattujen ruutukokojen tilat, jotka näkyvät työkaluvalikossa oheisella tavalla:
- Laaja - tila suurinäyttöisille tietokoneille sekä älytelevisioille
- Pöytäkone - tila pienempinäyttöisille tietokoneille ja kannettaville
- Tabletti - tila tablettikokoisille mobiililaitteille
- Puhelin - tila älypuhelinten näytöille
Klikkaamalla kutakin tilaa huomaat editori-ikkunan kaventuvan vastaavasti ja näet kun ulkoasupohjan graafiset elementit siirtyvät pienempään tilaan. Kun lisäät tai muokkaat ulkoasussa olevia elementtejä, huomaathan, että elementin sijainti on määriteltävä käsin kussakin näissä neljässä tilassa erikseen, jotta sivusto myös näyttäisi hyvältä eri päätelaitteilla.
HUOM! Kaikki neljä laitetilaa eivät välttämättä oletuksena ole käytössä julkaistulla sivulla, vaikka ulkoasupohja mukautuisikin editorinäkymässä eri tiloihin. Mikäli näet editorinäkymän oikeassa laidassa ilmoituksen tilan poissaolosta sen valitetessasi (esim. 'Laaja pois'), klikkaa sitä ja saat tilan sivupohjaasi käyttöön. Käymällä tällä tavoin läpi kaikki neljä muokkaustilaa, ja julkaisemalla sivustosi sen jälkeen, se on täysin responsiivinen.
Kun olet julkaissut sivustosi painamalla 'Julkaise', voit testata sen responsiivisuutta myös siten, että tarkastelet sivua selaimella ja kavennat selainikkunaa hiirellä raahamalla kapeammaksi. Sivustosi pitäisi mukautua neljään eri ruututilaan selainikkunan leveydestä riippuen.
