Mitä Gutenberg-lohko tai -elementti tarkoittaa?

Tästä artikkelista löydät käytännön esimerkkejä!

25.08.2021 | Timo Leppänen

Tarjouksissa ja muissa blogi- ja opasartikkeleissa puhutaan paljon Gutenberg-lohkoista tai -elementeistä.

Lohkot ja elementit tarkoittavat periaatteessa samaa asiaa. Tässä artikkelissa käytetään selkeyden vuoksi vain lohko-termiä.

Selvitetään aluksi, mikä on Gutenberg. Sillä tarkoitetaan uudenlaista WordPress-editoria. Itseasiassa editori ei enää ole kovinkaan uusi – se julkaistiin WordPress 5.0 version myötä joulukuussa 2018. Gutenberg-editori on hyvinkin erilainen verrattuna vanhaan wysiwyg-editoriin.

Luuptekin wp-oppaasta löytyy laaja artikkeli Gutenbergista. Lue editorin toiminnasta ja käytöstä lisää: Miten Gutenberg-editori toimii ja miten sitä käytetään?

Siis mikä se lohko oikein on?

Lohko on alue sivulla, joka voidaan eritellä omaksi kokonaisuudekseen. Gutenberg-editorilla luodut sivut koostuvat siis lohkoista – helpoin tapa erottaa lohkot on jakaa sivu lohkoihin (alla olevassa esimerkissä on esitetty punaisten horisontaalisten viivojen avulla). Lohkot ovat käytettävissä millä tahansa sivulla missä tahansa järjestyksessä.

Ohessa esimerkki räätälöidystä Luuptekin Gutenberg-toteutuksesta eli rahoo.fi sivustolta. Lohkot ovat eriteltyinä paksuilla punaisilla viivoilla.

Rahoo.fi sivun lohkoja eriteltynä
Rahoo.fi sivun lohkoja eriteltynä punaisilla viivoilla.

Sivulla käytettävät lohkot voivat olla joko vaativia räätälöityjä lohkoja (kuten ylläolevassa tapauksessa) tai simppeleitä WordPressin ”core”-lohkoja.

Vaativampiin lohkoihin tarvitaan räätälöity toteutus

Kun ytimen mukana tulevat lohkot eivät ole tarpeeksi näyttäviä, on pakko turvautua räätälöityihin lohkoihin (kuten rahoo.fi tapauksessa). Luuptekissa räätälöityihin lohkoihin käytetään Advanced Custom Fields -lisäosaa. Kyseisellä lisäosalla voi rakentaa räätälöityjä lohkoja todella nopeasti ja helposti. Lohkoja voidaan lisätä myös julkaisun jälkeen uusina toiminnallisuuksia, jolloin uudet lohkot tulevat koko sivuston laajuiseen käyttöön.

Räätälöidyissä lohkoissa asetukset ja ulkoasu tehdään ulkoasusuunnitelman mukaan.

Ohessa esimerkki, miltä Rahoon ”FAQ / Usein kysytyt kysymykset” näyttää ylläpidossa. Lohkon asetukset määritellään tapauskohtaisesti tarpeen mukaan eli mitään ylimääräistä höttöä ei ole asetuksissa, joka vaikeuttaisi päivitystä.

Pääset siis asettamaan otsikon, otsikon mahdollisen allaviivatun osan, mahdollisen painikkeen sekä niin monta kysymystä lohkolle kuin haluat.

Räätälöidyn lohkon muutoksia voi esikatsella suoraan editori-näkymässä ”esikatselu”-näppäimen kautta. Takaisin muokkaustilaan pääsee helposti ”muokkaus”-nappulan kautta.

Katso vaikka:

Esikatselu- ja muokkaustilan välillä siirtymistä.

WordPressin ytimen mukana tulevat ”core”-lohkot

WordPress kehittyy ja uusia ns. ”core”-lohkoja tulee jatkuvasti. Myös olemassa oleviin lohkoihin tulee säännöllisesti lisää ominaisuuksia.

Luuptekin kautta tilattavien sivuston core-lohkojen toiminnallisuutta ei rajoiteta, vaan niitä voi käyttää täysin vapaasti omilla sivuillaan.

”Core”-lohkot ovat pääpiirteittäin hyvin yksinkertaisia. ”Kuva vasemmalla, teksti oikealla (tai toisinpäin)”, sarakkeet (voit asetella tekstiä ja kuvia vieretysten) tai kansilohko ovat vaativammasta päästä.

Positiivinen asia core-lohkoissa on, että niillä saa aikaan todella hyvännäköisen sivuston pienelläkin budjetilla (katso vaikka Velicons-työnäyte). Toki sivuston ulkoasu on tällöin melko simppelin näköinen.

WordPressin mukana tulevat ”core”-lohkot ovat esiteltynä täällä. Lisäksi artikkelissa Miten Gutenberg-editori toimii ja miten sitä käytetään? käydään läpi paljon core-lohkojen ominaisuuksia.

Helppotajuista kuin mikä!

Selvä homma, eikös vaan? Nyt tiedät mikä on lohko, räätälöity lohko tai WordPressin ”core”-lohko.

Heräsikö vielä jotain kysyttää? Ota yhteyttä!




    Luuptek ei tallenna tietojasi mihinkään, tarkista vaikka!

    Tämä lomakelähetys suojataan Googlen reCAPTCHA:lla. Lue tietosuoja ja käyttöehdot.

    Lue lisää

    Mikä tämä tällainen Luuptek on?

    Mikä ihmeen Luuptek? Klikkaa ja lue lisää.

    Gutenberg-editori tuloillaan

    Onko sivustosi valmiina muutoksiin?

    WordPress-kehitys Luuptekissä – käytetyt tekniikat ja työkalut

    Miten meillä kehitetään WordPressiä? Mitä työkaluja käytämme? Ota selvää!

    Luuptekin teemapohja esittelyssä

    Tätä kaikkea herkkua on tarjolla kaikille asiakkaille.