1.5.1 Sivustoeditorit
Sivustoeditorit avain rakenteluun
Sivustojen rakentelussa työtä helpottavat huomattvasti tarjolla olevat visuaaliset editorit. Kolme suosituinta WordPress-sivueditoria ovat WPBakery builder, Visual Composer ja Elementor. Luomme seuraavassa silmäyksen kyseisiin editoreihin ja niiden käyttöliittymiin.
Miksi editoreita?
Yleisesti ottaen editorien tarkoitus on helpottaa sivustojen tekemistä. WordPressin oma Classic editor on tekstieditori tyyppinen, jonne voidaan lisätä tekstin joukkoon kuvia ja muita graafisia elementtejä. Sen toiminta ei perustu sisällön lohkomiseen vaan sisältö tulee yhteen sisältölohkoon. Sivustoeditoreissa sisältöä lisättäessä luodaan sisältörivejä (Rows), jotka jaetaan sarakkeisiin (Columns). Sisältö lisätään sarakkeisiin. Sisältö pysyy paremmin ryhmiteltynä lohkoihin, joihin jokaiseen voidaan tehdä uniikkeja muotoiluja. Toisaalta sivuston koodista muodostuu hieman monitahoisempaa, joska div-elementit lisääntyvät melkoisesti.
Editorin vaihto?
Kuvan koodivertailusta voi havaita, että rivien div-elementtien luokkamääritteet eroavat toisistaan. Näin ollen jos sivut on rakennettu jollain muulla sivustoeditorilla, kuin WP Classic Editor ja vaihdetaan sivustoeditorista toiseen, div-elementtien luokkamääritteet ovat uudelle editorille tuntemattomia ja muotoilut eivät toimi oikein. Editorin valintaan kannattaa siis nähdä vaivaa sillä sen vaihtaminen jälkikäteen, kun sivustoja on rakennettu, ei suinkaan ole yksinkertaista.
Myöskään WordPressin oma Tuo- ja Vie-toiminnot työkaluissa on hyödytön, jos sivuja viedään paikkaan jossa on käytössä toinen sivustoeditori. Sivuja voi toki viedä mutta niiden manuaaliseen korjaamiseen kuluu melkoisesti aikaa uudessa sijainnissa ja käytännössä helpommalla pääsee, jos kopioi sisällön uusille sivuille manuaalisesti.
Editoreilla omat html-merkkaukset
WPBakery Builder / Visual Composer
WPBakery builder on Visual Composer editorin jälkeläinen ja molemmissa editoreissa on samantyyppinen käyttöliittymä. Molemmat editorit joudutaan asentamaan WordPressin Lataa lisäosa-toiminnolla omalta koneelta lisäosien sivulta löytyvällä -zip-paketilla. WPBakery Builder Editorin käyttäminen on saatu omasta mielestäni erittäin käyttäjäystävälliseksi ja siksi tavallisesti käytänkin WPBakery builderia, jos se on valittuun teemaan saatavissa. Myös Visual Composer noudattaa samoja periaatteita, kuin WPBakery Builder.
WPBakery Builder on maksullinen ja siitä ei ole olemassa ilmaista versioa. Visual Composerista löytyy myös ilmaisversio ja sen voi ladata editorin omilta sivuilta. Useat maksulliset premium-teemat tarjoavat WPBakery builderin ilmaiseksi käyttöön sisällytettynä teemaan.
Rivejä ja sarakkeita
Sivu rakentuu riveistä (Row), jotka voidaan jakaa sarakkeisiin (Column). Sekä riveihin että sarakkeisiin voidaan tehdä monipuolisesti muotoiluja ja asetuksia. Rivin sarakkeisiin lisätään elementtejä, kuten tekstielementtejä, kuvia tai jopa tyhjän tilan elementtejä.
Elementor
Elementor eroaa käyttöliittymältään edellä mainituista melko paljon. Toiminnot ja mahdollisuudet elementtien editointiin ovat Elementorissa vastaavaa tasoa kuin WPBakery Editorissa tai Visual Composerissa.
Toisin kuin WPBakeryssä Elementorissa sivulle lisättävät elementit ovat jatkuvasti saatavilla näkymän vasemmassa laidassa ja sivun esikatselu on oikeassa laidassa näkymää. Visual Composerissa taas painettaessa rivin tai sarakkeen ”+”-ikonia lisättävät elementit ilmestyvät näkymän vasemmalle puolelle. Myös eri parametrit ja säädöt ovat Elementorissa hieman eri paikoissa, kuin WPB:ssä ja VC:ssä. Jos kuitenkin hallitsee sivueditorien terminologian, myös Elementor on oiva sivunrakennustyökalu.
Monipuolista CSS-muotoilua
Kaikissa kolmessa sivueditoreissa on mahdollisuus lisätä CSS-muotoilua sivukohtaisesti, jolloin muotoilumääritykset tulevat sivun head-osaan. Elementorissa ominaisuuden käyttöönotto vaatii tosin PRO-version, joka on maksullinen. Tämä on mahdollisuus, joka on todella kätevä. Ainakin Classic Editorissa on myös mahdollista lisätä sivun sisäistä CSS-koodia mutta lisäämiskenttä on hankala käyttää sen pienuuden vuoksi. Sisäisen koodin lisäämiseen on olemassa toki myös lisäosia kuten Simple CSS.
Templatet
Kun valittu elementti on muotoiltu itselle sovittuun muotoon, se voidaan ainakin WPBakery Editorissa ja Visual Composerissa tallentaa omaksi tyyliksi ja käyttää myöhemmin toisella sivulla. Toiminto helpottaa yhtenäisyyden luomista sivuille, kun käytetään sivuston kaikilla sivuilla elementtiä (esim. painike) samalla ulkoasulla.
Myös kokonaisesta sivusta voidaan luoda Template ja käyttää sitä uudella sivulla.
ELEMENTORIN KÄYTTÖLIITTYMÄ
Tutustutaan Elementor editorin käyttöliittymään.
Elementorin voi ladata käyttöön WordPressiin käyttämällä lisäosat-osion Lataa lisäosa-toimintoa. Asentaminen ja käyttöönotto tapahtuu normaalisti kuten mikä tahansa lisäosa.
Artikkeli tai sivu avataan editoitavaksi normaalisti klikkaamalla Edit (Muokkaa) linkkiä sivun tai artikkelin alavalikosta, joka avaa sivun muokattavaksi Classic Editorissa. Classic Editorista löytyy painike Edit with Elementor, joka avaa sivun Elementor-editoriin.
Elementor-käyttöliittymän toiminnot:
- Voit avata editorin käyttöön liittyviä asetuksia sisältävän valikon hampurilaisikonista. Painikkeen kautta voidaan esimerkiksi sulkea sivun muokkaus editorista.
- ELEMENTS-näkymässä on sivun tekemisessä olevat elementit. Elementin lisääminen tapahtuu yksinkertaisesti raahaamalla se sivun näkymään halutulle paikalle.
- Navigator on irrallinen paneeli, joka näyttää sivun sisällön runkorakenteen. Navigaattori-ikkunan voi sulkea oikean yläkulman rastista tai telakoida se johonkin kohtaan käyttöliittymää.
- UPDATE vihreä painike tallentaa (julkaisee) sivun. Painikkeen oikealla puolella on lisäpainike, jonka kautta avautuu lisätoimintoja. Voit esimerkiksi tallentaa sivun luonnoksena, jolloin se ei näy selaajalle.
- Silmäpainike avaa sivun toiseen välilehteen esikatseltavaksi
- Hammasratas avaa sivun asetukset, josta voit muuttaa sivun otsaketta ja muita asetuksia.
- Yhdeksän täplan painike palauttaa toimintonäkymään ELEMENTS-näkymän
Flexbox vai Grid?
Tavallisesti luotaessa sisältöä valitsen itse layout-tyyliksi Flexboxin, joka on yksiulotteinen rivielementti, joka toimii vain joko horisontaalisesti tai vertikaalisti. Grid-elementti eroaa Flexboxista sillä, että se toimii sivustolla taulukon tavoin ristikkosäiliönä sekä vertikaalisti että horisontaalisesti.
Flexbox on elementtinä ihanteellinen vaihtoehto yksinkertaisiin asetteluihin ja responsiiviseen suunnitteluun. Se on myös helpompi suunnitella ja sillä todennäköisesti saavutetaan helpommin haluttu malli sisältölohkoon.
Sisältölohko (Container)
Kun aloitamme luomaan sisältöä sivulle Elementorilla tai millä tahansa muulla lohkoeditorilla, luodaan aluksi sisältölohko eli container, johon lisätään sivun sisältöä.
Elementorissa sekä sisältölohkon sarakkeet että sisältölohko on nimetty samalla termillä Column mikä on mielestäni hieman sekavaa. Itse mielelläni käytän puhuttaessa selkeyden vuoksi termejä Rivi (Row) sisältölohkosta ja Sarake (column) sisältölohkon jakavista sarakkeista.
Klikkaa sivun näkymästä rivin lisäämispainiketta ja valitse käyttöön FLEXBOX-layoutasettelu. Painike avaa laatikon, jossa on vaihtoehtoja millä tavoin rivi jaetaan sarakkeisiin. Jokaiseen sarakkeeseen voidaan laittaa sisältöelementti, kuten teksti tai kuva ja lisätä elementtiin oma sisältö.
Sivu koostuu riveistä, jotka jakautuvat sarakkeisiin. Sarakkeet sisältävät elementtejä, joissa on erilaista sisältöä, kuten kuvia, tekstiä ym. Sarakeiden asetuksiin pääsee klikkaamalla sarakkeen vasempaan yläkulmaan ilmestyvää harmaata ikonia. Rivin (Section) asetuksiin taas pääsee klikkaamalla rivin yläosassa olevista painikkeista keskimmäistä.
Katsotaan kaikki hallintaa liittyvät painikkeet:
- Muokkaa rivin saraketta. Voit lisätä esimerkiksi täytteitä (padding) tai vaikuttaa muuten miten sisältö asettuu sarakkeeseen.
- Lisää uusi rivielementti.
- Avaa rivin asetukset, joista voit vaikuttaa miltä rivi näyttää. Toiminto on vastaavantyyppinen kuin sarakkeiden asetukset.
- Poista koko rivi, jolloin rivi sisältöelementteineen poistetaan.
- Jos rivi on jaettu useaan sarakkeeseen niiden välissä on ohut katkoviiva. Voit tarrata painikkeella rajaan ja muuttaa sarakkeen leveyksiä.
Esimerkkinä VISUAL COMPOSER
Visual Composerin ilmaisversion asentaminen
Visual Composerin voi ladata omalle koneelle lisäosan sivulta .zip-tiedostona ja asentaa WordPressiin käyttämällä lisäosat-osion Lataa lisäosa-toiminnolla. Editoria ei löydy lisäosien listasta hakemalla vaan se on asennettava manuaalisesti.
Lisäosasta ladataan omalle koneelle lisäosa pakattuna zip-tiedostona, joka myöhemmin asennetaan WordPressiin lisäosat paneelista.
Valitaan Visual Composer versioista Free version, joka on ilmainen. Premium versioista Single Website-versio on hyvä valinta, jos haluat käyttää laajennettua määrää toimintoja editorissa. Kuten huomaamme premium-version vuosimaksu on 49 dollaria yhdelle sivustolle mikä ei toki ole kovin suuri hinta, jos päättää tehdä sivustot kokonaan Visual Composeria käyttämällä.
Lataamme nyt siis ilmaisversion klikkaamalla Get Started-painiketta Free Version-sarakkeessa.
Klikkaa avautuvalta sivulta Download visualcomposer.zip painiketta ja lataaminen alkaa. Avaa omalta koneeltasi Downloads-kansio (Ladatut tiedostot), josta pitäisi löytyä ladattu zip-tiedosto (visualcomposer.34.0.zip), jossa tiedostonimessä oleva numero kertoo, mikä on tällä hetkellä viimeisin versio lisäosasta. Tällä hetkellä 34.0.
Siirry WordPressin hallintapaneelin lisäosat osioon ja valitse uuden lisäosan lataamistoiminto Lisää Uusi.
Valitse Lisää uusi-osiosta Lataa lisäosa -toiminto ja lataa Downloads-kansiosta edellä lataamasi Visual Composerin zip-tiedosto. Lisäosa asentuu. Voit ottaa lisäsosan käyttöön painikkeesta, kun se on asentunut.
Rivit ja sarakkeet – lohkot
Kuten sivulla edellä mainittu, kaikissa editoreissa sivu rakentuu riveistä ja rivit voidaan jakaa sarakkeisiin. Riviä voidaan kutsua myös lohkoksi. Rivin sarakkeet voivat sisältää myös sarakkeen sisäisen rivin, joka voidaan jakaa edelleen sarakkeisiin. Voit siis luoda sivulle rivin, jakaa sen esimerkiksi kahteen sarakkeeseen ja luoda toiseen sarakkeeseen sisäisen rivin, joka sisältää kaksi saraketta.
Riveille ja sarakkeille voidaan asettaa ominaisuuksia, kuten marginaalit, täytteet, reunaviivat, taustavärin tai -kuvan jne. Yksi vaihtoehto sivun sisällön rakentumisessa onkin asettaa joka toiseen riviin sivun taustaväristä poikkeava taustaväri, jolloin sen sisältö erottuu sisältömassasta omina lohkoinaan, Esimerkkinä tällaisesta ratkaisusta on näiden materiaalisivujen etusivu, jossa on käytetty edellä mainittua tekniikkaa. Lohkomaisuutta voidaan korostaa asettamalla riville varjo, jolloin se ikään kuin nousee sivun alustasta. Vaihtoehtona on käyttää reunaviivaa ylä ja alalaidassa.
Myös sarakkeelle voidaan asettaa taustaväri, reunaviiva, reunanpyöristyksiä tms. Muotoilut mahdollistavat rivin sarakkeen erottamista toisesta sarakkeesta. Saattaa olla havainnollinen keino asettaa toiselle sarakkeelle taustaväri, jolloin rivin sarakkeiden sisällöt rajautuvat selkeämmin toisistaan.
Sarakkeen sisäistä riviä käyttämällä voidaan käyttää esimerkiksi sisältölaatikon tekemiseen. Laatikko voi toimia vaikka bannerityyppisenä elementtinä sivulla ja sille voidaan asettaa taustaväri tai muita muotoiluja. Jos asetat laatikolle varjostuksen, tulee vaikutelma että laatikko on sivun päällä erillisenä laatikkona.
Muokkaaminen Visual Composer
Visual Composer sivustorakentajassa muotoiluihin päästään siirtämällä hiiri elementin päälle, jolloin näkymään ilmestyy painike elementin, sarakkeen ja rivin asetuksiin. Painikkeen valinnoista Edit-toimintoa klikkaamalla voit siirtyä asetuksiin. Valikosta voit myös kloonata, kopioida leikepöydälle tai poistaa elementin. Muokkaustoimintoa painamalla näkymän vasempaan laitaan avautuu elementin asetukset.
