Sivustoeditorit – avain rakenteluun
WordPressin alkuvuosina sisällöntuotanto nojasi yksinkertaiseen Classic Editor -tekstieditoriin, joka palveli pitkään järjestelmän perusratkaisuna. Käyttäjät alkoivat kuitenkin kaivata visuaalisempaa tapaa rakentaa sivuja, joten WordPress kehitti oman lohkoihin perustuvan Gutenberg sisäänrakennetun lohkoeditorin, joka ei vaadi erillistä lisäosaa. Gutenbergin rinnalle on syntynyt laaja joukko lisäosapohjaisia lohkoeditoreita, jotka tarjoavat vaihtoehtoisia tapoja rakentaa sivuja entistä visuaalisemmin. Nämä editorit laajentavat WordPressin perustoimintoja omilla lohkokirjastoillaan, vedä‑ja‑pudota‑rakentajillaan ja valmiilla sivupohjillaan, joiden avulla käyttäjät voivat muotoilla kokonaisia sivuja ilman koodia. Lisäosaeditorit ovatkin muovanneet WordPressin ekosysteemiä merkittävästi tuoden lisää luovaa vapautta ja mahdollisuuden rakentaa sivustoja ”helposti” juuri omien tarpeiden mukaan.
Miksi lohkoeditori?
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.
Lähdekoodin näkökulma
Lohkoeditorit rakentavat sivun rakenteen HTML‑tasolla omilla tavoillaan. Ne muodostavat erilaisia div-elementtejä, lohkorakenteita ja niihin liittyviä luokkaselektoreita, joiden perusteella editorin oma CSS määrittää lohkojen ulkoasun ja käyttäytymisen. Jokaisella editorilla – kuten Gutenbergilla, Elementorilla tai muilla lisäosaeditoreilla – on oma, toisistaan poikkeava luokkajärjestelmänsä ja HTML‑rakenne.
Tämä tarkoittaa käytännössä, että yhden editorin tuottama sisältö ei ole yhteensopivaa toisen editorin kanssa. Esimerkiksi Gutenbergin luomat lohkot eivät avaudu Elementorissa muokattavina, koska Elementor ei tunnista Gutenbergin HTML‑rakennetta eikä sen luokkaselektoreita. Sama pätee myös toisin päin.
Editorin vaihtaminen kesken sivuston rakentamisen ei siis ole käytännössä mahdollista ilman sisällön uudelleenrakentamista. Siksi editorin valintaan kannattaa käyttää aikaa jo ennen sivuston suunnittelun ja sisällöntuotannon aloittamista.
Pohdintaa lohkoeditoreiden rakenteista
Lohkoeditorien tuottaman HTML‑koodin määrä ja rakenne vaihtelevat huomattavasti erilaisten arkkitehtuuristen ratkaisuiden ansiosta. Osa editoreista, kuten Gutenberg, on suunniteltu alusta asti hyödyntämään moderneja web‑standardeja ja tuottamaan mahdollisimman kevyttä, semanttista Semanttinen HTML tarkoittaa merkkauskieltä, jossa elementit kuvaavat sisältönsä tarkoitusta (esim. <article>, <nav>, <header>). HTML:ää. Vanhemmat lisäosina asennettavat editorit taas rakentavat sivun rakenteen omien wrapper‑elementtiensä varaan, mikä lisää div‑kerroksia jo yksinkertaisissakin elementeissä.
Miksi näin?
Merkittävä tekijä on editorien historia. Monet lisäosana asennettavat editorit syntyivät aikana, jolloin WordPress ei tarjonnut lohkopohjaista muokkaustapaa. CSS:n modernit layout‑tekniikat eivät liioin olleet vielä laajassa käytössä. Siksi editorit loivat omat grid‑järjestelmänsä riveineen ja kolumneineen. Nämä rakenteet ovat edelleen osa niiden perimää. Taaksepäin yhteensopivuus on tärkeää, joten vanhoja rakenteita ei voida keventää ilman riskiä rikkoa olemassa olevia sivustoja.
Lisäksi visuaaliset editorit tarjoavat laajan valikoiman ominaisuuksia, jotka vaativat omia teknisiä kerroksiaan. Responsiiviset asetukset, animaatiot, hover‑efektit, taustakerrokset ja vedä‑ja‑pudota‑logiikka tarvitsevat usein omia wrapper‑elementtejä, jotta ne toimivat luotettavasti kaikissa tilanteissa. Tämä lisää HTML‑rakenteen monimutkaisuutta, vaikka lopputuloksena näkyvä sisältö olisi yksinkertainen.
Lopputuloksena eri editorit tuottavat hyvin eripituisia ja erirakenteisia HTML‑kokonaisuuksia, eivätkä ne ole keskenään yhteensopivia. Kyse ei ole virheestä, vaan erilaisista suunnittelufilosofioista ja teknisistä ratkaisuista, jotka heijastavat editorien ikää, tavoitteita ja ominaisuuksien laajuutta. Tämä on hyvä ymmärtää, kun valitsee editoria ja arvioi sen tuottamaa koodia.
Ominaisuuksien eroja
Katsotaan vielä hieman eri editorien käytettävyyteen ja ominaisuuksiin liittyviä eroavaisuuksia:
| Ominaisuus | Elementor | Gutenberg | Visual Composer | WP Bakery Pagebuilder |
|---|---|---|---|---|
| Ilmainen? | Osittain | Kyllä | Osittain | Ei |
| Backend | Ei | Hybridi (visuaalinen backend) | Ei | Kyllä |
| Frontend | Kyllä | Hybridi (visuaalinen backend) | Kyllä | Kyllä |
| Ohjauspaneeli näkyvissä muokkauksessa? | Ei | Ei | Ei | Backend kyllä / Frontend ei |
| Sivun sisäinen CSS? | Ei ilmaisessa versiossa | Ei | Ei | Kyllä |
| Templatet? | Kyllä kopiona (Page Template ja Section template)/Globaali maksullinen | Kyllä kopiona (Page Template teemasta riippuen) | Kyllä kopiona (Page Template ja Section template)/Globaali maksullinen | Kyllä (Page Template ja Section Template Rivin tallentaminen ei tallenna sisältöä) |
Elementor-editorin käyttäminen
Tutustutaan seuraavaksi Elementor-editorin käyttöliittymään ja sen toimintoihin ja perusperiaatteisiin.
Elementorin voi ladata 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 Muokkaa (Edit) linkkiä sivun tai artikkelin alavalikosta, joka avaa sivun muokattavaksi Classic Editorissa. Classic Editorista löytyy painike Edit with Elementor, joka avaa sivun Elementor-editoriin.
Kun olet avannut sivun aiemmin Elementor-editorissa, voit avata sivun editoitavaksi myös sivun esikatselussa olevasta painikkeesta Edit With Elementor.
Käyttöliittymä
Kun avaat jonkun sivun editoitavaksi Elementorissa, avautuu kuvanmukainen käyttöliittymä selaimen ikkunaan. Opitaan seuraavaksi Elementorin perusversiossa toimivat olellisimmat toiminnot käyttöliittymästä.
Elementorin sivustonlaajuiset asetukset (Site Settings)
- Sivuston tyyliasetukset
- Sivustonlaajuiset värit (Global Colors): Voidaan valita neljä pääväriä, joita Elementor käyttää tietyissä paikoissa sivustolla. Paikkoja ei voi itse määrittää.
- Sivustonlaajuiset fontit (Global Fonts): Voidaan valita neljä pääfonttia, joita Elementor käyttää tietyissä osissa sivuston rakennetta.
- Sivuston teeman asetukset
- Typografia (Typography): Typografian määrittäminen leipätekstille sekä otsikoille.
- Painikkeet (Buttons): VOidaan asettaa sivustonlaajuiset muotoilut typografia mukaanlukien sivuston painikkeille.
- Kuvat (Images): Jos halutaan asettaa sivustonlaajuisia muotoiluja sivuston kuville.
- Lomakkeiden kentät (Form Fields): Kaikkien Elementorilla luotujen lomakkeiden kenttien oletusmuotoilut typografia mukaanlukien. Ei vaikuta lisäosalla luotuihin lomakkeisiin.
- Muita asetuksia
- Site Identity: Sivuston nimi, logo, favicon ja muut perusidentiteetin asetukset
- Background: Sivustonlaajuinen taustakuva tai -väri, joka näkyy kaikilla sivuilla, ellei yksittäinen sivu tai osio korvaa sitä omilla asetuksillaan
- Layout: Sivuston yleinen sivuleveys, sisältöalueen leveys, välistykset ja mahdolliset oletuslayoutit
- Lightbox: Elementorin sisäänrakennetun lightboxin asetukset kuville ja videoille
- Page Transitions: Sivujen väliset siirtymäanimaatiot
- Additional Settings:Siirtyy WordPress ohjauspaneelin Elementori asetuksiin uudessa välilehdessä.
Käyttöliittymässä on periaatteessa kolme päälohkoa, joilla toiminnot sijaitsevat:
A: Sivun näkymä
B: Widgetit/asetukset
Ylimpänä yläpalkki, jossa toimintopainikkeita
- Sulje lohko: Elementorissa kaikki lohkoelementit on nimetty termillä Column. Itse käytän lohkosta termiä Rivi (Row), joka voidaan jakaa useampaan kolumniin (Column)
- Muokkaa lohkoa: Avaa lohkon asetukset muokattavaksi Widgettien tilalle asetukset-toimintolohkoon A
- HUOM! Klikkamalla 1, 2 tai 3 painikkeiden päällä saat lisää toimintoja näkyviin.
- Lisää lohko: Lisää lohkon valitun lohkon yläpuolelle.
- Muokkaa elementtiä (Widget): Klikkkaaminen aktivoi elementin asetus ja muokkaustoiminnot asetukset-toimintolohkoon A
- Elementor-painike: Avaa pudotusvalikon, josta löytät sivuston asetukset ja muita toimintoja (kts. 13, 14 ja 15)
- Lisää uusi elementti (Widget): Painamalla (+) -painiketta asetukset-toimintolohkoon A ilmestuu valittavat elementit (Widgetit)
- Sivun asetukset: Avaa sivun asetukset toiminnon asetukset-toimintolohkoon A. Asetukset on jaoteltu kolmelle välilehdelle (kts. 16, 17 ja 18)
- Structure: Avaa sivun rakenteen ikkunan Structure, joka esittää sivun lohkojen ja elementtien rakenteen puumaisena rakenteena.
- Esikatsele sivu: Avaa sivun esikatseltavaksi selaimen uuteen välilehteen (HUOMAA, että toiminto on kahdessa paikassa käyttöliittymässä.)
- Hyvä käytäntö sivuja rakennellessa on, että sivun esikatselu on avoinna toisessa ikkunassa ja editointi toisessa. Elementorissa esikatselun näkymä päivittyy automaattisesti tallennettaessa sivu.
- Julkaise sivu: Painikkeesta sivu tulee julkisesti näkyviin sivustolla.
- Painike avaa valikon, josta löytyvät toiminnot Tallenna luonnokseksi ja Esikatsele sivua.
- Tallenna luonnokseksi: Sivu ei tule näkyviin julkisesti selaajille vaan se tallennetaan luonnokseksi.
- Sivuston asetukset (Site Settings): Koko sivuston laajuisia asetuksia, kuten perustypografia.
- User Preferences: Editorin asetukset liittyen käyttöliittymän ulkoasuun.
- Siirry ohjauspaneeliin: Linkki sulkee editorin ja siirtyy WordPressin ohjauspaneeliin.
- Sivun perusasetukset: Perusasetuksia kuten Otsake (Title), artikkelikuva (Featured Image), joka näkyy esimerkiksi jaettaessa sivua SOME:ssa.
- Sivun tyyliasetukset: Sivun marginaali (margin), täytteet (padding) ja taustan asetukset (Background). Taustana voi olla väri, kuva tai liukuväri.
- Edistyneet asetukset: Advanced on maksullisen Premium-version ominaisuus.
- Näytöt
- Tabletit (leveys alle 1024px)
- Mobiililaitteet(leveys alle 767px)
Responsiivisuustilat vaihtavat sivun näkymän B painikkeen mukaiseen leveyteen ja näyttää kuinka sivu näkyy valitulla näkymällä.
Tyhjän tilan hallinta
Marginaalit ja täytteet
Lohkoeditorissa yksi keskeisimmistä sisällön luettavuuteen vaikuttavista tekijöistä on tyhjän tilan hallinta. Liian tiiviisti pakattu sisältö kuormittaa lukijaa, kun taas sopivasti rytmitetty tila tekee sivusta selkeän ja miellyttävän silmille. Tyhjä tila syntyy kahdella tavalla: lohkojen ulkopuolisilla marginaaleilla (margin) ja lohkojen sisäpuolisilla täytteillä (padding).
Marginaalit määrittävät, kuinka paljon tilaa jää lohkon ympärille suhteessa muihin elementteihin. Täytteet puolestaan lisäävät sisäistä tilaa lohkon reunan ja sen sisällön, kuten tekstin tai kuvan, väliin. Jokainen lohkoeditori käyttää omia div-rakenteitaan ja luokkaselektoreitaan, mutta marginaalin ja täytteen perusperiaatteet ovat samat editorista riippumatta.
Kun ymmärtää näiden kahden ominaisuuden roolin, on helpompi rakentaa selkeitä, hengittäviä sivuja ja varmistaa, että sisältö on miellyttävää lukea eri laitteilla.
Täytteet ja marginaalit editorissa
Elementor-editorissa marginaalit ja täytteet asetetaan kunkin elementin omista asetuksista. Täyte näkyy muokkaustilan esikatselussa elementin sisäpuolella ohuena katkoviivana, mikä helpottaa hahmottamaan sisäisen tyhjän tilan määrää. Joissakin tapauksissa täyte voi tulla myös sivuston laajuisista asetuksista, kuten kuvien oletustyyleistä. Jos täyte halutaan poistaa kokonaan, sen arvoksi tulee manuaalisesti asettaa nolla (0).
Tyhjää tilaa lisättäessä on tärkeää pohtia, mihin elementtiin tila kannattaa sijoittaa. Elementorissa rakenne muodostuu yleensä riveistä (Row), niiden sisällä olevista kolumneista (Column) ja lopulta varsinaisista sisältöelementeistä, kuten tekstistä tai kuvista. Kaikille näille tasoille voidaan asettaa täyte, mutta valinta vaikuttaa siihen, miten sivun rakenne käyttäytyy eri tilanteissa.
Oma periaatteeni on asettaa täytteet ensisijaisesti rakenteen muodostaviin elementteihin, kuten riveihin ja kolumneihin. Tarkastelen kokonaisuutta sisimmästä elementistä ulospäin: jos esimerkiksi tekstielementin ympärille tarvitaan lisää tilaa, lisään täytettä tekstin sisältävään kolumniin tai sen välittömään ympäristöön, en itse tekstielementtiin.
Marginaalia käytän yleensä vain elementtien välisen etäisyyden lisäämiseen, erityisesti rivien välillä vertikaalisesti. En käytä marginaalia rivin sisällä tyhjän tilan luomiseen, koska se voi johtaa epätasaisiin rakenteisiin ja vaikeuttaa responsiivista suunnittelua.
Yhteenvetona: padding eli täyte luo sisäistä tilaa elementin reunan ja sisällön väliin, kun taas margin eli marginaali luo ulkoista tilaa elementtien välille. Näiden hallittu käyttö tekee sivusta selkeän, rytmikkään ja helposti luettavan.
