WordPressin lohkoeditori tutuksi käytännön esimerkeillä

Tiivistelmä

WordPressin lohkoeditorissa sivu rakennetaan erillisistä sisältöosista. Tekstikappale, otsikko, kuva ja painike ovat omia lohkojaan, joita voi lisätä, muokata ja järjestää. Tavallisen sivun tekeminen onnistuu ilman…

Aluksi työkalujen määrä voi tuntua suurelta. Kaikkia lohkoja ei kuitenkaan tarvitse opetella kerralla. Muutaman peruslohkon avulla voit kirjoittaa artikkelin, esitellä palvelun tai rakentaa tapahtumasivun.

Tässä oppaassa harjoitellaan lohkoeditoria kuvitteellisen valokuvausillan esittelysivulla. Samat työvaiheet sopivat myös yrityssivuille, harrasteblogiin ja moniin muihin sisältöihin.

Mitä lohko tarkoittaa?

Lohko on muokattava sisältöelementti. Kappalelohko sisältää tavallista tekstiä, kuvalohko kuvan ja otsikkolohko sisältöä jäsentävän otsikon. Osa lohkoista voi sisältää muita lohkoja.

Esimerkiksi tapahtuman esittely voi muodostua näin:

Johdanto kappalelohkona.
Tapahtumakuva kuvalohkona.
Ohjelman otsikko otsikkolohkona.
Ohjelmakohdat luettelona.
Ilmoittautumislinkki painikkeena.

Lohkon valitseminen tuo näkyviin sen omat työkalut. Oikean reunan asetuspaneelissa voi olla lisää säätöjä. Koko sivun asetukset ja yksittäisen lohkon asetukset ovat eri asioita. WordPressin lohkoeditorin perusteet

Käytettävissä olevat asetukset riippuvat WordPress-versiosta, teemasta ja lisäosista. Siksi omassa editorissasi ei välttämättä näy kaikkia muualla esiteltyjä vaihtoehtoja.

Aloita harjoittelu uudella luonnossivulla

Avaa hallinnassa Sivut → Lisää uusi ja anna sivulle nimeksi ”Valokuvausilta aloittelijoille”. Tallenna sivu luonnoksena.

Luonnoksessa voit kokeilla rauhassa ilman, että keskeneräinen sisältö julkaistaan kävijöille. Lohkoeditori avautuu vastaavasti myös uutta artikkelia luotaessa.

Tutustu aluksi kolmeen alueeseen:

Keskellä olevaan sisältöalueeseen.
Yläreunan työkaluihin, kuten lohkojen lisäämiseen ja kumoamiseen.
Sivupalkkiin, jossa ovat sivun ja lohkojen asetukset.

Jos asetuspalkki ei näy, avaa se editorin asetuspainikkeesta. Lohkon valinta vaikuttaa siihen, mitä säätöjä palkissa näytetään. WordPressin editorin käyttöliittymä

Harjoitussivun tarkoituksena on oppia toimintatapa. Ulkoasun viimeistelyn voi jättää siihen vaiheeseen, kun sisältö on paikallaan.

Esimerkki 1: kirjoita johdanto ja lisää väliotsikko

Napsauta sivun sisältöaluetta ja kirjoita ensimmäinen kappale:

Tule harjoittelemaan valokuvaamisen perusteita rennossa illassa. Käymme läpi sommittelua, valon hyödyntämistä ja kameran tavallisimpia asetuksia.

Enter luo tavallisessa kappalelohkossa uuden kappaleen. Jatka toisella tekstillä, jossa kerrot tapahtuman ajankohdan ja paikan.

Lisää tämän jälkeen pluspainikkeesta Otsikko-lohko. Kirjoita otsikoksi ”Mitä illan aikana tehdään?” ja valitse tasoksi H2.

Sivun nimi esitetään tavallisesti H1-pääotsikkona, joten sisältöosion väliotsikot alkavat usein H2-tasolta. Tarkka toteutus riippuu teemasta. Otsikkotasoja kannattaa käyttää sisällön rakenteen mukaisesti. WordPressin otsikkolohkon ohje

Älä tee väliotsikkoa pelkästään lihavoimalla kappaletekstiä. Oikea otsikkolohko kertoo myös ohjelmallisesti, että uusi sisältöosio alkaa.

Esimerkki 2: lisää ohjelma luettelona

Tapahtuman ohjelma on helpompi silmäillä luettelona kuin pitkänä virkkeenä. Lisää otsikon alle Luettelo-lohko ja kirjoita esimerkiksi:

Kameran perusasetukset.
Sommittelun harjoittelu.
Kuvaaminen erilaisessa valossa.
Kuvien yhteinen tarkastelu.

Käytä numeroitua luetteloa silloin, kun järjestys on olennainen. Esimerkiksi ilmoittautumisohjeessa vaiheiden numerointi auttaa etenemään oikein.

Tee luettelo editorin omalla lohkolla sen sijaan, että kirjoittaisit käsin väliviivoja tavallisten kappaleiden alkuun. Näin rakenne säilyy luettelona myös muokattaessa.

Pidä kohdat keskenään samanmuotoisina. Jos ensimmäinen kohta on lyhyt aihe, muidenkin kannattaa olla lyhyitä aiheita. Pitkät selitykset voi siirtää luettelon jälkeen omiin kappaleisiinsa.

Esimerkki 3: lisää kuva ja tarkoitukseen sopiva tekstivastine

Lisää johdannon jälkeen Kuva-lohko. Voit ladata uuden tiedoston tai valita kuvan mediakirjastosta.

Valitse esimerkiksi kuva, jossa osallistuja harjoittelee kameran käyttöä. Tarkista kuvalohkon asetuksista vaihtoehtoinen teksti ja kirjoita kuvaus sen mukaan, mitä kuva tuo sivun sisältöön.

Jos kuvassa havainnollistetaan kameran tukemista, sopiva teksti voisi olla:

Kuvaaja tukee kameraa molemmilla käsillä ja pitää kyynärpäät lähellä vartaloa.

Pelkkä ”kamera” ei välitä samaa tietoa. Toisaalta koristeellinen kuva ei tarvitse väkisin pitkää kuvausta.

Kuvateksti on eri asia kuin vaihtoehtoinen teksti. Kuvateksti näkyy sivulla ja voi kertoa esimerkiksi kuvauspaikan tai kuvaajan. Kuvalohkossa voi hallita myös kuvan kokoa ja muita esitystapoja. WordPressin kuvalohkon ohje

Tarkista lopuksi, ettei kuva ole tarpeettoman suuri tai rajautunut epäselvästi.

Esimerkki 4: rakenna kuva ja teksti rinnakkain

Jos haluat kuvan vasemmalle ja lyhyen esittelyn oikealle, lisää Sarakkeet-lohko. Valitse kahden sarakkeen rakenne.

Lisää ensimmäiseen sarakkeeseen kuva. Lisää toiseen otsikko ”Kenelle ilta sopii?” ja sen alle kappale:

Ilta sopii ensimmäistä kameraansa käyttäville sekä harrastajille, jotka haluavat vahvistaa perustaitojaan. Voit osallistua myös puhelimen kameralla.

Sarakkeet ovat sisäkkäinen rakenne: sarakkeiden sisällä ovat varsinaiset sisältölohkot. WordPressin sarakelohkossa on myös mobiilissa allekkain asettumiseen liittyvä asetus. Sarakelohkon ohje

Tarkista pieni näyttö erikseen. Pitkä teksti kahdessa kapeassa sarakkeessa voi olla hankalaa lukea.

Älä käytä sarakkeita kaikkeen. Tavallisen artikkelin leipäteksti toimii usein parhaiten yhdessä selkeässä palstassa.

Esimerkki 5: tee ilmoittautumiseen johtava painike

Lisää sivun loppuun lyhyt kappale, joka kertoo ilmoittautumisesta. Sen jälkeen lisää Painikkeet-lohko ja sen sisälle painike.

Kirjoita painikkeen tekstiksi ”Ilmoittaudu valokuvausiltaan”. Lisää linkkityökalulla ilmoittautumissivun osoite ja vahvista se.

Painikkeet-lohko hallitsee painikkeiden yhteistä asettelua. Yksittäisen painikkeen asetuksista muokataan sen omaa sisältöä ja ulkoasua. WordPressin painikelohkojen ohje

Muista, että tavallinen painikelohko on linkki. Se ei yksin luo ilmoittautumislomaketta tai tallenna osallistujan tietoja.

Valitse teksti, joka kertoo kohteen tai toiminnon. ”Ilmoittaudu valokuvausiltaan” on täsmällisempi kuin ”Paina tästä”.

Kokeile linkkiä esikatselussa. Väärään osoitteeseen johtava näyttävä painike ei auta kävijää.

Esimerkki 6: kokoa tärkeät tiedot ryhmäksi

Tapahtuman ajankohta, paikka ja hinta voidaan koota yhteiseksi tietolaatikoksi. Lisää Ryhmä-lohko ja sen sisälle otsikko sekä tarvittavat kappaleet.

Esimerkiksi:

Tapahtuman tiedot
Aika: torstaina klo 18–20
Paikka: yhdistyksen kerhotila
Mukaan: kamera tai puhelin ja ladattu akku

Ryhmälle voi teemasta ja käytettävistä asetuksista riippuen määrittää esimerkiksi taustavärin ja sisäiset välit. Ryhmä auttaa myös käsittelemään sisältökokonaisuutta yhtenä osana. WordPressin ryhmälohkon ohje

Pidä tekstin ja taustan ero riittävän selvänä. Älä rakenna laatikon tyhjää tilaa lisäämällä monta tyhjää kappaletta, vaan käytä ryhmän tarjoamia väliasetuksia.

Järjestä sisältö listanäkymässä

Monimutkaisessa asettelussa oikean lohkon napsauttaminen voi olla hankalaa. Listanäkymä näyttää sivun lohkot ja niiden sisäkkäisen rakenteen.

Avaa listanäkymä editorin yläreunasta. Etsi esimerkiksi Sarakkeet-lohko ja avaa sen sisältö. Näet, mitkä kuvat ja kappaleet kuuluvat kumpaankin sarakkeeseen.

Voit valita ja järjestää lohkoja listanäkymän avulla. Se helpottaa erityisesti ryhmien ja muiden sisäkkäisten kokonaisuuksien käsittelyä. WordPressin listanäkymän ohje

Harjoittele siirtämällä tapahtuman tietolaatikko ilmoittautumispainikkeen yläpuolelle. Tarkista, että siirrät koko ryhmän etkä vain sen otsikkoa.

Jos muutos menee väärin, käytä kumoamista. Tee suuremmat järjestelyt pienissä vaiheissa, jotta lopputulos on helppo tarkistaa.

Hyödynnä lohkomalleja toistuvassa sisällössä

Kun hyvä sisältökokonaisuus on valmis, sen rakennetta voi hyödyntää uudelleen lohkomallina. Malli voi sisältää esimerkiksi otsikon, esittelytekstin ja yhteydenottopainikkeen.

Synkronoitu malli sopii sisältöön, jonka pitää pysyä samana useassa paikassa. Sen yhteisen sisällön muuttaminen vaikuttaa myös muihin käyttökohteisiin. Tavallinen synkronoimaton malli toimii puolestaan lähtöpohjana itsenäisille kopioille. WordPressin synkronoitujen mallien ohje

Tapahtumakohtaiset päivämäärät kannattaa yleensä pitää itsenäisinä. Muuten yhden tapahtuman muokkaus voisi muuttaa myös muiden sivujen tietoja.

Yhteinen yhteydenottokehote voi sen sijaan sopia synkronoitavaksi. Nimeä mallit kuvaavasti, jotta niiden käyttötarkoitus selviää myöhemmin.

Tarkista luonnos ennen julkaisemista

Kun harjoitussivu on valmis, tallenna luonnos ja avaa esikatselu. Lue sivu alusta loppuun kävijän näkökulmasta.

Tarkista ainakin seuraavat asiat:

Otsikot etenevät johdonmukaisesti.
Tapahtuman tärkeät tiedot löytyvät helposti.
Kuva ja teksti toimivat myös puhelimella.
Painike johtaa oikeaan osoitteeseen.
Sivulla ei ole tyhjiä tai vahingossa kopioituja lohkoja.
Värit ja tekstikoko säilyttävät luettavuuden.

Jos jokin asetus puuttuu, tarkista ensin valittu lohko. Koko sarakeryhmällä, yksittäisellä sarakkeella ja sen sisällä olevalla kappaleella on eri asetukset.

Julkaise sivu vasta, kun sisältö ja toiminta ovat kunnossa. Aloita seuraavakin sivu rakenteesta ja tekstistä. Kun peruslohkot tulevat tutuiksi, ulkoasun rakentaminen nopeutuu ilman, että jokainen sivu täytyy suunnitella alusta uudelleen.

Liittyvät kategoriat

Artikkeleita 2 023 artikkelia IT 1 949 artikkelia Kotisivut 1 198 artikkelia Nettisivut 1 198 artikkelia Verkkokehitys 1 264 artikkelia Verkkosivut 1 397 artikkelia Verkkotyökalu 1 177 artikkelia WordPress 1 217 artikkelia