Gutenberg – WordPressin oma lohkoeditori

Vieraskirjoitus

Gutenberg on WordPressin oma sisältöeditori, joka herätti paljon keskustelua ilmestyessään ja perinteiseen WordPress-editoriin tottuneelle se voikin tuntua alkuun hieman vieraalta.

Gutenberg-editori on kehittynyt valtavasti ensimmäisistä versioistaan ja sille kannattaa ehdottomasti antaa mahdollisuus. Nykyään Gutenberg sopii monenlaisten sivustojen rakentamiseen ja on usein sivuston nopeuden kannalta paras vaihtoehto.  

Kirjoituksessa käydään läpi Gutenberg-editoria, sen toimintaa ja ominaisuuksia. Lopussa annetaan myös vinkkit editorin käyttöön.

Perusta WordPress-kotisivut

Mikä Gutenberg on?

Gutenberg on WordPress-julkaisujärjestelmän oma sisältöeditori. Kyseinen editori tuli ensimmäisen kerran laajempaan käyttöön joulukuussa 2018, kun WordPress-versio 5 julkaistiin. Gutenberg-editori on nimetty kirjapainon keksijän Johannes Gutenbergin mukaan.

Sivuston rakentaminen Gutenbergin avulla tapahtuu lohkoja (engl. blocks) hyödyntämällä. Gutenberg-editoria nimitetäänkin yleisesti lohkoeditoriksi. Lohkot ovat sisältöelementtejä, kuten tekstiosoita, otsikoita tai kuvia.

Gutenbergiä voi käyttää joko osana WordPressin ydinversiota tai erikseen asennettavana lisäosana. Jos Gutenberg on käytössä lisäosana, saa uudet ominaisuudet ja päivitykset yleensä nopeammin käyttöön.

Huom! Gutenberg-lisäosa voi aiheuttaa ristiriitoja muiden Gutenberg-laajennusten kanssa ja se usein kehotetaan poistamaan, mikäli käytetään Gutenbergiin lisälohkoja tuottavia lisäosia.

Gutenberg on WordPress sisältöeditori.

Kokemuksia Gutenberg-editorista

Gutenberg on jo käyttökelpoinen sivurakentaja ja se varmasti tulee kehittymään vielä paremmaksi. Hyvänä puolena ehdottomasti se, että Gutenberg on osa WordPressin corea, joten lähtökohtaisesti lisäosat ja teemat tukevat sen käyttöä. Katso myös parhaat WordPress-teemat.

Osana WordPressiä se myös puoltaa nopeampaa suorituskykyä ja puhtaampaa html-koodia verrattuna kolmannen osapuolen suosittuihin sivurakentajiin, kuten Divi, Elementor tai WPBakery Visual Builder.

Mikä on sivurakentaja?

WordPress-kotisivut voidaan rakentaa niin kutsutun page builder -lisäosan eli sivurakentajan avulla. Sivurakentaja mahdollistaa näyttävienkin sivustojen toteuttamisen ilman teknisempää osaamista.

Sivurakentajan avulla saat käyttöön erilaisia palikoita ja työkaluja, joita voit muokata sekä yhdistellä vapaasti. Palikoita ovat esimerkiksi tekstilaatikot, otsikot, painikkeet ja erilaiset toiminnallisuudet.

Tällä hetkellä Gutenberg itsessään antaa aika vähän lohkojen muokkaus­mahdollisuuksia. Toisaalta tämä selkeyttää käyttöä ja kaikki tukee teemaan enemmän, mutta toisaalta itselleen sivuja tekevän pienyrittäjän tai harrastajan voi olla hankala päästä haluttuun lopputulokseen suppeilla asetuksilla.

Gutenbergin esikatselussa etenkin eri laitteilla (tabletti, mobiili) on parantamisen varaa. Esikatselu pitää erikseen avata eikä muun muassa marginaalit tai välistykset ole yksi yhteen samannäköiset editorin ja livenäkymän puolella.

Editorin käyttö on kuitenkin perustoimintojen oppimisen jälkeen nopeampaa kuin sivurakentajilla.

Gutenberg vs. Classic editor

Merkittävin ero Gutenbergin ja klassisen editorin (engl. classic editor) välillä on siinä, miten sisältö rakennetaan uuteen artikkeliin tai uudelle sivulle. Gutenberg-editorissa sisältöjä rakennetaan lohkojen avulla, kun taas klassinen editori sisältää vain yhden tyhjän sisältöalueen.

Klassinen editori muistuttaa hyvin paljon tekstinkäsittelyohjelmien muokkausmahdollisuuksia. Tekstiä voidaan esimerkiksi lihavoida, tasata eri kohtiin tai sen joukkoon voidaan lisätä myös kuvia. Sisältöä voidaan myös kopioida ja liittää vaikkapa Word-tiedostosta. On hyvä huomata, että nämä kaikki toiminnot ovat myös Gutenberg-editorissa, eli se ei sulje Classic-editorista mitään pois.

Vanhan editorin on voinut toistaiseksi säilyttää asentamalla Classic Editor -lisäosan. Käytännössä kyseinen lisäosa ohittaa Gutenberg-editorin kokonaan ja sen avulla voit jatkaa Classic-editorin käyttöä. Kannattaa kuitenkin huomata, että lisäosalle on luvattu tukea varmuudella vain 31.12.2021 asti.

Tällä hetkellä osa lisäosista ei tue Gutenbergiä. Esimerkiksi LearnPressin (WordPress-lisäosa, jolla onnistuu verkkokurssin tekeminen) Course-postityypissä ei voi käyttää Gutenbergiä tai siitä katoaa kurssiin liittyvät asetukset näkyvistä. Tämä ongelma tulee kuitenkin varmasti poistumaan elinvoimaisten lisäosien kohdalla, koska Gutenberg on WordPress-järjestelmässä yhä suuremmassa roolissa.

WordPress-editori auttaa sivuston rakentamisessa.

Gutenberg vs. erilaiset page builder -lisäosat

Siinä missä esimerkiksi Elementor on erillinen (ja nykyään jo melkoisen massiivinen) sivurakentaja, Gutenberg on WordPressiin sisäänrakennettu ominaisuus. Tämä jo itsessään puoltaa Gutenbergin käyttöä, vaikka totta puhuen se ei vielä ole ihan intuitiivinen käytettävyydeltään.

Teema ja lisäosat vaikuttavat osaltaan WordPress-sivuston nopeuteen, vaikka Elementorillakin saa tehtyä nopeita sivustoja, niin Gutenberg on lähtökohtaisesti nopeampi jo suoraan ilman optimointityökalujakin. Lue tarkemmin, miten oman WordPress-sivuston nopeuttaminen onnistuu.

Sivurakentajissa on enemmän tyyliin ja toimintoihin liittyviä muokkaus­mahdollisuuksia kuin Gutenbergissa. Gutenbergiin on kuitenkin saatavilla laajennuksia lisäosien kautta, jolloin se saa enemmän sivurakentajamaisia piirteitä. Käyttäjän ei siis tarvitse osata muotoilla ulkoasua css-koodilla, eikä olla täysin teeman armoilla.

Esimerkiksi Kadence Blocks for Gutenberg on ilmaisversiossaankin todella kattava ja tuo paljon edistyneempiä palikoita Gutenbergiin. Lisäosaa voi käyttää myös muiden kuin Kadence-teeman kanssa.

Row ja Advanced Gallery ovat suosikkini Kadence Blocksista. Row-lohkolla saa luotua sivurakentajamaisesti sarakeasetteluita taustaväreillä ja –kuvilla sekä hallittua muun muassa sarakkeiden järjestystä mobiilissa ja paljon muuta. Advanced Gallery tuo mukanaan muun muassa suositun masonry grid -asettelun

Sisällön­tuotanto Gutenberg-editorilla

Kun Gutenberg-editorin avaa ensimmäisen kerran, se voi olla niin kutsutussa Full screen-tilassa, jolloin vasemmalta katoaa WordPressin mustapohjainen valikko. Mikäli haluat palauttaa normaalin näkymän, mene editorin toimintovalikkoon oikeassa yläkulmassa ja ota valinta Kokoruututilan kohdalta pois.

Gutenberg voidaan ottaa pois koko ruutu tilasta.
Valikko löytyy kolmen pisteen takaa editorin oikeasta yläkulmasta.

Riippuen, mitä ollaan tekemässä voi alkaa vain kirjoittamaan, sillä kappale-lohko tulee automaattisesti, mikäli muuta lohkoa ei valita. Vaihtoehtoisesti voi valita sarakeasettelun tai muun sommitteluun liittyvän.

Lohkojen (blocks) lisääminen onnistuu plusmerkistä
Valitse sopiva lohko plus-merkistä aukeavasta listauksesta.

Plussan takaa valitaan lohko joko kirjoittamalla sen nimi kenttään tai valitsemalla Selaa kaikkia, josta aukeaa vasemmalle lohkojen listaus tyypeittäin ryhmiteltynä:

  • Teksti
  • Media
  • Ulkoasu
  • Vimpaimet
  • Upotukset
  • Ja lisäksi mahdolliset muut lohkot sivuston lisäosista riippuen.
Vasemmalle aukeava esikatselu auttaa sopivan lohkon valinnan kanssa.
Lohkojen esikatselu auttaa sopivan lohkon valitsemisessa.
Lohkomallit nopeuttavat sivuston rakentamista.
Lohkokirjastossa on myös sisäänrakennettuja malleja, joita voi hyödyntää sivujen rakentamisessa.

Lohkoja voi editorissa siirtää eli sinun ei tarvitse etukäteen tietää lopullista järjestystä. Lohkoa siirretään tarttumalla siihen ::: -kuvakkeesta ja raahaamalla haluttuun kohtaan. Vaihtoehtoisesti voit pystysuunnassa muuttaa lohkojen järjestystä pienistä nuolista raahauskuvakkeen vieressä.

Gutenber-editorin lohkoja voidaan liikuttaa kahdella tavalla.

Etenkin laajemmissa sivustoissa kannattaa ehdottomasti hyödyntää uudelleenkäytettäviä lohkoja. Ensin rakennetaan lohko halutuista elementeistä ja se tallennetaan uudelleenkäytettäväksi, jolloin sen voi poimia eri paikkoihin sivustossa samanlaisena.

Uudelleenkäytettäviä lohkoja muokataan niiden omasta hallinnasta, johon pääsee käsiksi oikean yläkulman toimintovalikosta.

Samasta paikasta löytyy myös Lohkojen hallinta -toiminto, josta voi piilottaa ylimääräisiä lohkoja listauksesta. Tämä selkeyttää käyttämistä, kun lohkokirjastossa näkyy vain tarvittavat lohkot.

Lohkojen hallinta löytyy ylävalikon kautta.
Valikosta pääsee lohkojen työkaluihin.

Gutenbergin erilaiset toiminnot

Eri lohkoilla on vaihtelevasti muokkaustoimintoja. Peruslohkoissa on mahdollista lisätä lohkoihin HTML-ankkuri, johon voi viitata linkityksissä ja CSS-lisäluokat, joiden avulla voi määrittää ulkoasutyylejä. Tämä kuitenkin vaatii perehtyneisyyttä css-koodiin.

Kappale

Oletuslohko, johon varsinainen sisältöteksti syötetään. Jokainen tekstikappale muodostaa oman lohkonsa. Kappaleeseen voidaan lisätä anfangi ja sen tekstikokoa voidaan muuttaa lohkokohtaisesti.

Kappale-lohkon avulla voidaan kirjoittaa erilaisia tekstikappaleita.

Otsikko

Voit määrittää otsikkotason (H2-H6) ja keskittää otsikon. Otsikon värin voi muuttaa asetuksista, mutta se voi rikkoa ulkoasun, joten niitä on syytä käyttää harkitusti. Otsikkotasot tulisi olla sivulla hierarkisesti; H1 on ainoastaan pääotsikossa, alemmat otsikot noudattavat loogista järjestystä alakokonaisuuksiin.

Otsikko-lohkon avulla luodaan sivun otsikot

Kuva

Yksinkertaiseen kuvalohkoon saa tuotua yhden kuvan siirtämällä koneelta, mediakirjastosta tai ulkoisesta osoitteesta (toinen verkkosivusto)

Kuvien lisääminen Gutenberg-editorissa tapahtuu kuva-lohkolla.

Kun kuva on tuotu lohkoon, sen kokoa voidaan pienentää prosenttiarvoilla leveydestä tai lukituilla pikselimäärillä. Kuvalle saa annettua myös lohkon asetuksissa vaihtoehtoisen eli alt-kuvauksen, mikäli sitä ei ole aiemmin määritetty.

Galleria

Kuvia voi lisätä mediakirjastosta tai Lisää-painikkeen kautta tietokoneelta. Galleriassa saa kirjoitettua kuville kuvatekstit ja määritettyä rivillä näkyvän kuvamäärän 1-4 (sarakkeet-valinta lohkon asetuksissa).

Galleria-lohko mahdollistaa useiden kuvien lisäämisen.
Galleria-lohkon asetuksista saa muokattua esim. kuvien kokoa.

Painikkeet

Painikkeet-lohkossa voi laittaa yhden tai useamman napin rinnakkain vaakasuunnassa. Painikkeiden tausta- ja tekstivärin saa muutettua lohkon asetuksista.

Erilaisten CTA-painikkeiden luominen onnistuu helposti.

Tiedosto

Lohkon kautta saa laitettua sivustolle ladattavaksi tai katseluun esimerkiksi pdf-tiedoston.

Tiedostojen lisääminen onnistuu tiedosto-lohkolla.

Tiedosto haetaan mediakirjastosta ja lohkoon tulee näkyviin nimi, jota voi muokata sopivaksi sekä latauspainike.

Tiedoston nimeä voi tarvittaessa muuttaa sopivammaksi.

Taulukko

Gutenbergin oma taulukkolohko on siisti perustaulukko, jossa saa alussa valittua sarakkeiden ja rivien määrän. Taulukolle voi määrittää perinteisen ääriviivallisen mallin tai raidoitetun mallin.

Gutenberg mahdollistaa responsiivisten taulukoiden rakentamisen taulukko-lohkolla.

Välitys

Lohkolla voidaan luoda tyhjää tilaa osioiden välille. Korkeus määritetään asetuksista pikseleinä tai raahamalla lohkon alareunasta.

Tarvittaessa osioiden väliin voi lisätä tyhjää tilaa välitys-lohkolla.

Youtube

Lohkoon saa upotettua videon Youtubesta. Kopioi videon osoite Youtubessa videon alla olevasta Jaa-painikkeen asetuksista ja liitä se lohkoon.

Videot kannattaa upottaa esimerkiksi YouTube kautta.

Lyhytkoodi

Tämä on tarpeellinen lohko, kun halutaan liittää sivulle jonkun lisäosan tuottamaa sisältöä, kuten Testimonials eli asiakkaiden kommentit. Lyhytkoodi alkaa ja päättyy aina hakasuluilla [jotain sisältöä]. Lyhytkoodit ovat WordPressin yksi käytetyimistä työkaluista.

Lyhytkoodit ovat helposti käytettävissä myös Gutenberg-editorissa.

Lisää

Lohkona ennen oleva osuus tekstistä tulee näkyviin arkistosivulle, hyödyllinen etenkin blogi- tai uutisartikkeleissa.

Vinkit Gutenberg-editorin käyttöön

  1. Muista aina esikatsella muutokset ennen julkaisua, myös mobiilissa!
  2. Valitse teema, joka jo nyt tukee editorin käyttöä.
  3. Kokeile rohkeasti eri lohkoja. Kun opit peruslohkojen ominaisuudet, pystyt soveltamaan niitä paremmin.
  4. Hyödynnä Gutenbergin valmismalleja alkuun pääsemiseksi.
  5. Gutenberg-editoria laajentavat lisäosat voivat tuoda tarvittavia ominaisuuksia, jos niitä ei perusmallissa ole.

Perusta omat WordPress-kotisivut

WordPress-sivuston perustaminen onnistuu helposti WP.one-palvelumme avulla, sillä se sisältää kaiken tarvittavan ja asennamme myös WordPressin valmiiksi. Valitse alta sopiva paketti.

  • WP.one Starter
    WP.one Starter
    Hyvä aloituspaketti yrittäjän kotisivuja varten.

    ✓ Verkkotunnus
    ✓ WordPress-asennus
    ✓ 10 Gt levytilaa
    ✓ 1 Gt tietokanta
    ✓ 10 sähköpostia (1 Gt/kpl)

    12 € / kk + alv.
    norm. 24 € / kk + alv.
  • WP.one Business
    WP.one Business
    Tehokas peruspaketti verkkokauppiaalle.

    ✓ Verkkotunnus
    ✓ WordPress-asennus
    ✓ 20 Gt levytilaa
    ✓ 2 Gt tietokanta
    ✓ 10 sähköpostia (1 Gt/kpl)

    49 € / kk + alv.
Laura Jalonen

Vieraskirjoittaja

Laura Jalonen on markkinoinnin multitalentti, jolta onnistuu niin WordPress- ja Woocommerce –toteutukset kuin graafinen suunnittelukin. Lisäksi Laura pitää WordPress- ja digimarkkinointikoulutuksia. Hyvä asiakaspalvelu ja kotisivujen ongelmanratkaisu ovat Lauran erityisosaamista.

funnypurple.fi