Hyppää sisältöön

Mikä on WordPressin lohkoeditori eli Gutenberg-editori?

Olet ehkä kuullut WordPressin lohkoeditorista, joka on vuonna 2018 julkaistu työkalu sisältöjen luomiseen. Historiallisesti WordPressin sisältöeditori on ollut hyvin yksinkertainen, ja sivustojen kehittäjien vastuulla on ollut ratkaista monimutkaisemmat sisällöntuotantotarpeet parhaaksi katsomallaan tavalla. Tämän seurauksena syntyi monia erilaisia tapoja luoda sivustoja ja sekä runsaasti erilaisia työkaluja ja lisäosia. Kaikki kuitenkin muuttui, kun uus lohkoeditori esiteltiin.

Jaakko Alajoki, 17.06.2024

Lohkoeditorin perusteet

Nimensä mukaisesti lohkoeditorissa sisältö rakentuu erilaisista lohkoista. Verkkosivut eivät enää tänä päivänä ole vain tekstiä. Sisältö koostuu usein kuvista, otsikoista, erilaisista asetteluista ja videoista. Lohkoeditori vastaa juuri tähän tarpeeseen, sillä se mahdollistaa monimutkaistenkin asetteluiden tekemisen ilman kiinteitä sivupohjia tai tarvetta koodata. Asiakkaamme näkevät lohkoeditorin suurimpana hyötynä nimenomaan joustavat mahdollisuudet luoda erilaisia sisältöjä nopeasti omin voimin.

Gutenbergin etuna on myös se, että se näyttää sivun esikatselun suoraan editorissa. Näin sisältöä tehdessä näkee suoraan, miltä sivu tulee näyttämään.

Oheisessa kuvassa on sisällöntuottajan näkymä. Ensisilmäyksellä kuvassa näkyy melko tavanomainen artikkelinäkymä, mutta kyseinen sisältö koostuu itseasiassa erillisistä lohkoista: otsikko-, tekstipalsta- ja kuvalohkosta.

Editorin edut eivät ehkä vielä tällä esimerkillä pääse oikeuksiinsa, mutta seuraavassa kuvassa on jo monimutkaisempi sivutaitto. Tämä esimerkki koostuu kuva ja teksti -lohkosta ja sen alapuolella palstalohkosta, otsikoista, tekstistä ja painikkeista.

Lohkoilla on monia erilaisia asetuksia ja mahdollisuuksia vaikuttaa ulkoasuun. Asetuksilla voi vaikuttaa lohkojen asetteluun, marginaaleihin, väriin ja typografiaan. Ohessa on esimerkki kansikuvalohkon asetuksista, jolla voi vaikuttaa värimaailmaan ja välistyksiin.

WordPressin Gutenberg-editori tarjoaa valmiina useita oletuslohkoja:

  • Tekstikappale: Tyypillisin tekstin esittämiseen ja muotoiluun
  • Kuva: Kuvatiedostojen lisäämiseen ja muokkaamiseen.
  • Otsikko: Otsikoiden (H1-H6) luomiseen.
  • Luettelo: Järjestettyjen ja järjestämättömien luetteloiden lisäämiseen.
  • Lainaus: Lainauksien korostamiseen.
  • Galleria: Useiden kuvien näyttämiseen ruudukossa.
  • Painike: Painike, joka linkkaa halutulle sivulle
  • Upotus: Ulkoisten sisältöjen (esim. YouTube-videot, Instagram-päivitykset) upottamiseen.
  • Sarakkeet: Sisällön jakamiseen useisiin sarakkeisiin.
  • Väliotsikko: Tekstin osien erottamiseen väliotsikolla.
  • Media & Teksti: Mediasisällön (esim. kuvat, videot) ja tekstin rinnakkaiseen esittämiseen.

Lohkoryhmät

Sivujen rakentelu lohko kerrallaan alusta loppuun tarjoaa paljon vapauksia, mutta on myös työlästä hommaa. Tyypillinen verkkosivusto koostuu yleensä noin kymmenestä tai useammasta asettelusta, jotka toistuvat sivulta toiselle. On tietynlainen kansikuva-alue, muutama tapa listata artikkeleita, palveluiden nostoelementtejä, tuotelistauksia ja niin edelleen. WordPressin Gutenberg-editorin yksin avaintoiminnoista onkin lohkoryhmät. Kun on saanut rakennettua hienon usean lohkon kokonaisuuden, sen voi tallentaa lohkoryhmäksi (pattern). Tämän ryhmän voi sitten tiputtaa nopeasti mihin tahalla sivustolla ja myös muokata nopeasti tarpeidensa mukaiseksi.

Lohkoryhmien tehokas käyttö onkin yksin tärkeimmistä asioista, jotka kannattaa ottaa haltuun. Valmiilla ryhmillä saa luotua vaikkapa uuden kampanjasivun muutamalla klikkauksella.

Screenshot

Laajennettavuus

WordPressin hienous on aina ollut laajennettavuus – ja sama pätee myös lohkoeditoriin. Sivustojen ylläpitäjien ei tarvitse tyytyä valmiiseen joukkoon lohkoja, vaan lohkoja voi rakentaa vapaasti lisää. Tämä edellyttää kuitenkin WordPressin tuntemusta ja ohjelmointiosaamista. Uusien projektikohtaisten lohkojen luonti onkin oleellinen osa siitä työstä, jota me tarjoamme projekteissa. Tällaisia lohkoja voivat olla vaikka erilaiset listaukset, kyselyt, lomakkeet, laskurit ja niin edelleen.

Yhteenveto

Lohkoeditori on WordPressin vastaus verkkosivustojen muuttuneisiin sisällöntuotantotarpeisiin. Monet asiakkaamme eivät ole olleet tyytyväisiä aikaisempien julkaisujärjestelmiensä sisällöntuotantotyökaluihin, jotka on usein koettu kankeiksi ja rajoittuneiksi. Gutenberg-editori ratkaisee tämän haasteen ja vapauttaa aikaa työkalujen kanssa painimisesta arvokkaampaan markkinointityöhön.

Haku