WordPress Gutenberg -editori vs Page Builder -lisäosat

WordPress on hiljattain julkaissut uuden sisältöeditorin – Gutenbergin. Sen tarkoitus on korvata vanha tekstieditori pian kokonaan.

WordPressiin on tarjolla myös useita muita erilaisia page builder -lisäosia, joiden avulla voit rakentaa helposti näyttäviä sivustoja. Tässä kirjoituksessa tutustumme Gutenbergiin ja suosituimpiin editoreihin.

Gutenberg editori
WordPress tarjoaa käyttäjilleen mahdollisuuden ottaa Gutenberg käyttöön jo ennen tulevaa WordPress 5 -julkaisua.

Miksi WordPress uudistaa editoriaan?

WordPressin oma tekstieditori on ollut peruskäyttäjälle kömpelö ja jäykkä käyttää. Kaikki sivun sisältö laitetaan yhteen pötköön tekstieditorin ruutuun ja eri osioiden siirtäminen paikasta toiseen on ollut leikkaa-liimaa -askartelua tekstien ja kuvien hyppiessä sinne ja tänne. Sisältöä on voinut asemoida ja muokata, jos osaa käyttää lyhytkoodeja (shortcodes) ja teema tukee niitä. Joitakin muokkauksia on voinut tehdä myös käyttäen html-koodeja editorin koodi-välilehdellä. Peruskäyttäjälle koodien käyttö on kuitenkin hankalaa ja siksi WordPress on lähtenyt kehittämään editoriaan page builder -tyyppisempään suuntaan.

Mikä on Page builder?

Page builder antaa suunnittelijalle käyttöön erilaisia palikoita ja työkaluja, joita voi sitten muokata ja yhdistellä mielensä mukaan. Palikoiden avulla erilaisten nappuloiden, tekstilaatikoiden, taustakuvallisten osioiden ja vimpainten lisääminen sivulle onnistuu näppärästi ja palikoiden paikkoja voi vaihdella mielin määrin esim. raahaamalla niitä sivulla paikasta toiseen. Suosittuja page buildereita ovat esim. SiteOrigin Page Builder sekä visuaaliset rakentajat Beaver Builder, Elementor ja Divi Builder.

SiteOrigin Page Builder

Yksi vanhimmista ja siksi myös eniten käytetyistä page builder -lisäosista on ujuttanut itsensä mukaan myös monen teeman suositeltuihin asennuksiin. Palikoita muokataan pääasiassa hallintapuolella ja muutokset pitää käydä katsomassa esikatselun kautta. Joitakin muutoksia voi tehdä myös ns. visuaalisessa näkymässä, mutta siinä ei pysty esim. vaihtamaan palikoiden paikkaa samoin kuin muissa visuaalisissa editoreissa. Palikoiden muokkausmahdollisuudet ovat melko vähäiset etenkin, jos et osaa muokata css-koodia. Page builder tarvitsee erikseen asennettavan Widgets bundlen, joka tuo käyttöön 25 erilaista palikkaa ja n. 27 valmista sivurakennetta. Pro-versio (hinta $29) sisältää lisäpalikoita.

SiteOrigin Page Builderin kotisivut:
https://siteorigin.com/page-builder/

Beaver Builder

Visuaalinen Beaver Builder on perusnäppärä työkalu. Näet heti, miltä tekemäsi muutokset näyttävät sivustolla. Palikoilla on runsaasti muokkausmahdollisuuksia ja voit samalla päättää, näkyykö tekemäsi sisältö kaikille kävijöille vai vain tietylle käyttäjäryhmälle. Ilmaisversiossa käytössäsi on vain 6 palikkaa, mutta se riittää jos et kaipaa tekstejä ja kuvaa kummempia vaihtoehtoja. Maksullinen pro-versio (alk. $99) tuo mukanaan 30 lisäpalikkaa, n. 56 valmista sivurakennetta ja mahdollisuuden muokata koko teemaa.

Beaver Builderin kotisivut:
https://www.wpbeaverbuilder.com/

Elementor

Uusimpia tulokkaita tässä lisäosien ryhmässä, mutta onnistuneen toteutuksensa ansiosta se on nopeasti noussut yhdeksi suosituimmista. Elementor on visuaalinen page builder, joka näyttää tekemäsi muokkaukset suoraan niin kuin ne tulevat näkymään sivustolla. Elementorin palikoilla on laajat muokkausmahdollisuudet ja järjestelmä on helppokäyttöinen. Elementorin ilmaisversio tarjoaa 28 erilaista palikkaa ja lisämaksullinen pro-versio (alk. $49) tuo mukaan 30 lisäpalikkaa. Elementorin erikoisuutena on mahdollisuus rakentaa koko teema, mukaan lukien header, footer, blogisivu ja arkistosivut, page builderin avulla. Ilmaisversion mukana tulee n. 40 valmiiksi rakennettua sivurakennetta.

Elementorin kotisivut:
https://elementor.com/

Divi Builder

Divi on maksullinen teema (alk. $89/vuosi sisältäen useita teemoja ja lisäosia), jonka seuraksi on luotu oma page builder -lisäosa. Syy, miksi lisäosa esitellään tässä vaikka ilmaisversio puuttuukin on se, että Divi Builder on täysin omanlaisensa visuaalinen page builder. Käytössäsi on 46 erilaista palikkaa, joista jokaista voi muokata huomattavan laajasti. Voit myös luoda A/B-testauksen suoraan builderista ja muokata palikan ominaisuudet erilaisille ruuduille sopiviksi. Palikoiden välistä tilaa muokkaat yksinkertaisesti vetämällä tai määrittelemällä marginaalit ja toppaukset numeroilla kuten ennenkin. Divi Builderin miinuksena pidetään yleisesti sitä, että ”siitä ei ole paluuta” eli lyhytkoodi-pohjaisena se jättää jälkeensä paljon siivottavaa ja uudelleenmuokattavaa, jos jostain syystä halutaan vaihtaa teemaa.

Divin Builderin kotisivut:
https://www.elegantthemes.com/plugins/divi-builder/

Lisäosan heikkous on kuitenkin aina se, että kyseessä on lisäosa. Se haluaa oman osansa sivuston latausnopeudesta ja voi olla altis hyökkäyksille etenkin, jos lisäosan kehitys ja sitä myöten päivitys lopetetaan. Joskus myös päivitysten yhteydessä voi tulla yhteensopivuusongelmia ytimen, teeman tai muiden lisäosien kanssa.

Gutenberg

WordPressin uusi editori nimettiin suurellisesti kirjapainon keksijän mukaan. Gutenberg on julkaistu tällä hetkellä lisäosana ja käyttäjiä houkutellaan asentamaan se testausta varten. Editorista kerätään samalla käyttäjäpalautetta, jonka perusteella sitä mahdollisesti kehitetään vielä ennen kuin se tuodaan mukaan WordPress-asennuksiin tulevissa päivityksissä. Sen on tarkoitus korvata WordPressin vanha tekstieditori kokonaan WordPress 5 -version mukana.

Gutenberg on huikea parannus verrattuna vanhaan editoriin, mutta se ei vielä yllä muokattavuudessaan erillisten page builder -lisäosien tasolle. Gutenberg antaa kuitenkin esim. blogitekstien kirjoittajalle valtavasti uusia työkaluja tekstin muokkaamiseen ja sivun layoutin järjestelyyn. Saat käyttöösi myös palikoita, joita varten on aiemmin pitänyt etsiä käyttöön lisäosia ja/tai lyhytkoodeja.

Wordpress Gutenberg editori

Gutenbergin perustoiminnot

Gutenberg suurentaa editorin näkymän kattamaan koko ruudun korkeuden. Oikean reunan valikon voi piilottaa klikkaamalla oikean yläkulman rataskuvaketta. Näin saat lähes koko ruudun editorin käyttöön. Oikean puolen valikoita on muutettu hieman. Sivun ja luonnoksen tallentaminen sekä esikatselu löytyvät nyt ruudun yläreunasta. Oikean reunan valikoita on tiivistetty ja osiot saa auki osion otsikkoriviä klikkaamalla. Asetuksiin on tuotu uutena mahdollisuus valita, onko sivulla kommentointimahdollisuutta. Aiemmin tämä toiminto oli artikkelilistauksessa Pikamuokkaus-toiminnon alla.

Sivun otsikko laitetaan sille varattuun ruutuun sivun yläosaan. Voit käyttää editoria vanhan tapaan alkamalla kirjoittamaan kohtaan Add text. Lisää sivulle uusia palikoita (block) klikkamaalla + -merkkiä editorin vasemmassa ylälaidassa. Merkki tulee näkyviin myös lisäämiesi palikoiden alapuolelle. Valitse listalta haluamasi palikka, jolloin se lisätään sivulle. Palikan perusmuokkausvaihtoehdot (koko, väri, jne) avautuvat näytön oikeaan reunaan (jos piilotit asetukset yläpalkista, saat ne näkyviin ko. palikan oikean reunan pisterivistä rataskuvakkeesta) kun palikka on aktiivisena. Joissakin palikoissa saat lisämuokkausvaihtoehtoja (linkit, tekstin asemointi, jne.) myös palikan yläpuolelle.

Palikan oikeassa reunassa näkyvästä pisterivistä löytyvät palikan poistamiseen, tallentamiseen ja kopioimiseen liittyvät toiminnot. Voit tallentaa minkä tahansa palikan lisäämällä sen Reusable blocks listaan, josta se on helppo lisätä toiselle sivulle. Tallentaminen kannattaa silloin, kun haluat kopioida tietyn muotoilun läpi koko sivuston. Palikoiden järjestystä muutetaan palikan vasemmassa reunassa näkyvien nuolien avulla.
Gutenberg palikat

Tärkeimmät palikat

  • Paragraph
    Tekstipalikka
  • Heading
    Otsikkokokoinen teksti
  • Subheading, List ja Quote
    Alaotsikko, listanäkymä ja lainaus
  • Image
    Lisää valokuva
  • Gallery
    Kuvagalleria, joka näyttää valitsemiesi kuvat ruudukossa
  • Cover image
    Kuva, johon voi kirjoittaa päälle tekstin
  • Columns
    Lisää riville rinnakkaisia sarakkeita 2-6 kpl
  • Button
    Nappula
  • Code, Shortcodes ja Custom HTML
    Voit lisätä esim. lisäosan näyttämiseksi tarvittavan lyhytkoodin.

Valikosta löytyy palikat myös mm. erilaisiin koodien ja tiedostojen upotuksiin, vimpainten lisäämiseen ja taulukoiden tekemiseen.

Oma kokemus Gutenberg -editorista

Kaiken kaikkiaan Gutenberg vaikuttaa varsin näppärältä uudistukselta. Itse en ole käyttänyt WordPressin omaa tekstieditoria enää aikoihin sen jäykkyyden takia ja olen pääsääntöisesti turvautunut page builder -lisäosiin saadakseni sivuston ulkoasun näyttävämmäksi. Kuten aiemmin mainitsin, niin Gutenberg ei ihan yllä erillisten lisäosien tasolle muokattavuudessaan ja siksi haluan henkilökohtaisesti odotella vielä mahdollisia tulevia uudistuksia. Minua jäi pääosin häiritsemään sarakkeiden leveyden säätömahdollisuuksien puute ja se, ettei osioille voi lisätä taustakuvaa.

Gutenberg arvostelut

Gutenberg-lisäosa on otettu vastaan ristiriitaisesti ja sille annetuista arvioista n. 2/3 on vähemmän mairittelevia kun taas kolmannes ylistää uudistusta askeleena parempaan. Arvosteluiden perusteella Gutenberg ei vielä mukaudu kaikkiin teemoihin ja se on aiheuttanut sivustojen sekoamisia ja rikkoutumisia. Negatiivisia arvioita ovat antaneet selkeästi myös sellaiset käyttäjät, jotka vertaavat Gutenbergiä muihin page builder -lisäosiin. Positiivista taas on toisten käyttäjien mielestä juuri se, mitä uudistuksella haetaan eli päivitys todella vanhaan ja jäykkään toimintoon. Suunta on kuitenkin oikea, vaikka kehityksessä jäädäänkin vielä muiden taakse. Monilla sivustoilla tarvitsee uudistuksen jälkeeen yhden tai useammankin lisäosan vähemmän ja sehän on vain positiivinen asia. Minulla Gutenberg tulee varmasti otettua jossain määrin hyötykäyttöön, kunhan sen jakelu aloitetaan.

Webdesigner, yrittäjän henkilökohtainen assistentti.

Share
Tweet
Share
Pin
+1