Luuptek kirjoitukset

Mitä Gutenberg-lohko tai -elementti tarkoittaa?

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. 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 esim. Velicons-työnäyte). Toki sivuston ulkoasu on tällöin melko simppelin näköinen.

Aartikkelissa 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ä!

Lue vinkkejä
toimivampiin kotisivuihin

Tutustu artikkeleihimme WordPressistä, verkkosivujen kehittämisestä ja paremmasta verkkonäkyvyydestä.

  • Blocksmith artikkelikuva

    Luuptekin teemapohja esittelyssä 2026 – Full Site Editing

    Luuptekin Blocksmith tuo Full Site Editingin käytännönläheisesti asiakasprojekteihin ja nopeuttaa sisällöntuotantoa.

  • Kuva taiteilijasta vden äärellä

    Täydellinen hallinta WordPress-sivuihin Full Site Editing -teemalla

    Lue uuden sukupolven WordPress-sivuista Full Site Editing -teknologialla.

  • Mikserin kuiva

    Miten säädän sisältöalueen tyhjää tilaa (lopussa ja alussa)?

    Opi säätämään sisältöalueen tyhjää tilaa sivun alussa ja lopussa.

  • Uutta julkaisua tekemässä

    Kuinka klassisen editorin sisältö muutetaan lohkoiksi Gutenberg-editorilla?

    Opi, miten muutat klassisen editorin sisällön lohkoiksi.

  • Kello

    Miten palautat sivun sisällön versioinnin avulla vanhaan versioon?

    Opi, miten palautat sivustasi vanhan version.

  • Ankkurilinkki kuvituskuva

    Miten teen ankkurilinkin Gutenberg-editorilla?

    Opi ankkurilinkin tekeminen käyttämällä Gutenberg-editoria.

Luuptek AI Chat

Kysy palveluista, hinnoista, kotisivuista tai yhteystiedoista. Vastaukset perustuvat luuptek.fi sivuston sisältöön.

Moro! Miten voin auttaa?