‹ Takaisin

Gutenberg-lohkoeditorin käyttö: Näin luot näyttävän WP-sivun helposti

 

 

WordPress sai vuonna 2018 uuden Gutenberg-lohkoeditorin, joka mullisti sisällöntuotannon verkkosivustoille. Editorissa sisältö jaetaan lohkoihin, kuten tekstikappaleisiin, otsikoihin ja muihin elementteihin.

 

Gutenberg-editori tekee WordPress-sivuston sisällöntuotannosta helpompaa ja joustavampaa. Voit lisätä, siirtää ja muokata lohkoja helposti "drag and drop" -menetelmällä.

 

Editorin käyttö voi tuntua aluksi vähän monimutkaiselta, mutta lohkoeditorin käyttö tarjoaa paljon etuja vanhaan, "Classic editoriin", verrattuna.

 

Voit lisätä lohkoja helposti näppäimistöllä, kopioida ja liittää useita lohkoja kerralla ja järjestellä niitä vapaasti. Gutenberg antaa sinulle enemmän kontrollia ulkoasun muokkaamiseen ilman koodaustaitoja. Lohkoeditorilla rakennatkin näyttäviä sivuja nopeammin kuin ennen. Työskentely tehostuu ja luovuudelle jää enemmän tilaa.

 

 

 

 

Lohkoeditorin perusteet ja käyttöliittymä

 

Gutenberg-editori (block editor tai lohkoeditori) muuttaa tapaa, jolla luot sisältöä WordPressissä. Se perustuu lohkoajatteluun, jossa jokainen sisältöelementti on oma lohkonsa.

 

Tämä tekee sisällöntuotannosta helpompaa ja visuaalisempaa.

 

Gutenbergin käyttöönotto

Gutenberg-editori on nykyään WordPressin oletusnäkymä. Kun luot uuden artikkelin tai sivun, editori aukeaa automaattisesti. Käyttöliittymä on pelkistetty ja selkeä: ylhäällä näkyy työkalupalkki ja vasemmassa reunassa asetukset.

 

Lisäät lohkoja klikkaamalla plus-kuvaketta vasemmassa yläkulmassa. Lohkot on järjestetty kategorioihin:

 

• Yleisimmät lohkot: kappale, otsikko, kuva, lista
• Muotoilu: taulukko, viivat, lainaukset
• Rakenne: kolumnit, ryhmät, napit

 

Voit liikkua lohkosta toiseen nuolinäppäimillä tai hiirellä.

 

Jos editori ei kuitenkaan tunnu omalta, voit asentaa myös "Classic Editor" -lisäosan ja palata vanhaan näkymään. Anna kuitenkin ensin lohkoeditorille mahdollisuus!

 

"Loikkiminen" ja lukitseminen

Gutenbergissa liikut helposti lohkosta toiseen: nuolinäppäimet toimivat mainiosti navigoinnissa.

 

Kun haluat suojata valmiin sisällön muutoksilta, kannattaa sisältö lukita. Lukitseminen on helppoa:

 

1. Valitse lohko
2. Klikkaa lohkon valikosta kolmea pistettä
3. Valitse "Lukitse"

 

Vasemman reunan navigaatiosta näet puolestaan kaikki sivulla olevat lohkot listattuna. Se helpottaa isojen kokonaisuuksien hahmottamista ja "siirry lohkoon" -toiminnolla pääset nopeasti oikeaan kohtaan pitkässä artikkelissa.

 

Widgetien hyödyntäminen sivujen suunnittelussa

Gutenberg mahdollistaa widgetien eli pienoisohjelmien käytön suoraan sisällössä. Tämä tuo joustavuutta sivujen suunnitteluun.

 

Voit lisätä kalenterin, viimeisimmät artikkelit tai vaikka hakukentän suoraan sisältöön. Widgetit löytyvät lohkovalikosta "Widgets"-kategorian alta.

• Kalenteri
• Viimeisimmät kommentit
• Kategoriat
• RSS-syöte

 

Widgetien avulla voit tehdä sivuistasi näyttäviä ilman koodausta. Voit ryhmitellä widgetejä kolumneihin ja säätää niiden asetuksia suoraan editorissa.

 

Monet WordPressin teemat tarjoavat myös omia lohkoja (widget), jotka sopivat hyvin teeman yleisilmeeseen. Kannattaa kokeilla eri widgetejä, jotta löydät omalle sivustollesi parhaat ratkaisut.

 

Gutenbergin merkitys suorituskyvylle ja konversioille

Gutenberg-editorin jatkuva kehitys on tuonut isoja parannuksia WordPress-sivustojen suorituskykyyn. Uudet päivitykset nopeuttavat sivuston latausaikoja, ja se on olennaista varsinkin verkkokaupan konversioiden kannalta.

 

Tutkimuksissa on huomattu, että jokainen sekunti, jonka sivu latautuu hitaammin, voi tiputtaa konversiota jopa 7%. Gutenbergin kehittäjät ovat oikeasti ottaneet tämän ongelman tosissaan.

 

Viimeisimmät parannukset tuovat mukanaan esimerkiksi:

• Lohkojen "laiskan latauksen" (lazy load), joka priorisoi näkyvän sisällön
• Kuvien automaattisen optimoinnin
• JavaScript-koodin välimuistituksen

 

Sivustosi toimii siis lohkoeditorin myötä nopeammin ja tehokkaammin. Käytännössä tämä näkyy parempina konversiolukuina ja tyytyväisempänä asiakkaina.

 

Hostaanin nopeat WP-webhotellit varmistavat, että sivustosi toimii ilman viiveitä. Nopea sivun latausnopeus on valttia tavoitellessasi korkeampaa konversioprosenttia.

 

Usein kysyttyä Gutenberg-editorista

 

Miten lisään uuden lohkon Gutenbergissa?

Uuden lohkon lisääminen on helppoa. Klikkaa sivun muokkaustilassa + -painiketta, joka löytyy vasemmasta yläkulmasta tai jokaisen lohkon välistä.

 

Voit myös painaa Shift+Enter, jolloin saat uuden rivin ja lohkon. Toinen näppärä tapa: kirjoita / ja hakusana, kuten "/kuva", ja kuvalohko löytyy nopeasti.

 

Voinko käyttää Gutenberg-editoria vanhojen sivujeni muokkaamiseen?

Kyllä voit! Kaikki WordPress-sivut ja -artikkelit, myös ne jotka on tehty vanhalla editorilla, ovat muokattavissa Gutenbergilla.

 

Vanhemmat sisällöt näkyvät aluksi yhtenä "Klassinen lohko" -elementtinä. Voit muokata sisältöä suoraan tässä lohkossa tai muuntaa sen Gutenberg-lohkoiksi valitsemalla "Muunna lohkoiksi" lohkon asetuksista.

 

Muuntamisen jälkeen jokainen kappale, kuva ja muu elementti muuttuu omaksi lohkokseen, joita voi käsitellä helposti Gutenbergin ominaisuuksilla.

 

Onko helppoa tapaa siirtää sisältöä lohkosta toiseen?

Kyllä vain! Voit kopioida ja liittää sisältöä lohkosta toiseen käyttämällä pikanäppäimiä (Ctrl+C ja Ctrl+V) tai lohkon työkalupalkin kopiointipainikkeella.

 

Kokonaisia lohkoja voi siirtää raahaamalla niitä ylös tai alas sivulla. Ota kiinni lohkon vasemmalla puolella näkyvästä kuuden pisteen kuvakkeesta ja vedä lohko haluamaasi kohtaan.

 

Voit myös kopioida koko lohkon valitsemalla sen, klikkaamalla työkalupalkista kolmea pistettä ja valitsemalla sieltä "Monista". Näin saat samanlaisen lohkon heti alkuperäisen perään.

 

Miten voin muokata tai tyylitellä lohkoja saadakseni uniikin ulkoasun?

Voit muokata jokaisen lohkon tyyliä lohkon omista asetuksista, jotka löytyvät oikeanpuoleisesta sivupalkista. Klikkaa haluamaasi lohkoa, niin sen asetukset tulevat näkyviin.

 

Perusasetuksista löytyy yleensä:

• Värivaihtoehdot, eli tekstin ja taustan värit
• Marginaalit ja täytteet
• Reunukset

 

Harkitse myös WordPress-lapsiteeman (child theme) luomista, kun haluat muokata sivustosi ulkonäköä.