Mikä on page buil­der?  

Page buil­der eli sivun raken­ta­ja on lisä­osa, jon­ka avul­la voi­daan raken­taa tyy­lik­käi­tä WordPress-koti­si­vu­ja. Page buil­der tar­jo­aa WordPress-koti­si­vu­jen suun­nit­te­li­jal­le työ­ka­lu­ja, joil­la voi­daan hel­pos­ti siir­rel­lä ja muo­ka­ta koti­si­vuil­le tule­via ele­ment­te­jä, kuten vaik­ka­pa teks­tio­sia, iko­nei­ta, videoi­ta, eri­lai­sia pai­nik­kei­ta ja taus­ta­ku­via. Page buil­de­rin avul­la WordPress-koti­si­vuis­ta on mah­dol­lis­ta kus­to­moi­da eri tar­pei­ta ja tyy­le­jä vas­taa­via ammat­ti­mai­sia sivu­ja.

Eri­lai­sia page buil­de­rei­ta on ole­mas­sa todel­la pal­jon, mut­ta Divi ja Ele­men­tor kuu­lu­vat täl­lä het­kel­lä ehdot­to­mas­ti suo­si­tuim­pien jouk­koon. Divi ja Ele­men­tor ovat molem­mat visu­aa­li­sia raken­ta­jia, mikä tar­koit­taa, että teh­dyt muu­tok­set ovat näh­tä­vil­lä heti ja mikä­li ne miel­lyt­tä­vät, ne on myös help­po tal­len­taa.

Täs­sä artik­ke­lis­sa ver­tai­lem­me mak­sul­lis­ten Divi- ja Ele­men­tor-page buil­de­rien omi­nai­suuk­sia ja ker­rom­me, mik­si pää­dyim­me valit­se­maan Ele­men­to­rin.

Hin­ta

Ensim­mäi­nen asia, joka var­mas­ti kiin­nos­taa niin page buil­de­riä kuin tee­mo­ja­kin valit­taes­sa on ymmär­ret­tä­väs­ti hin­ta. Sii­nä mis­sä Divin saa todel­la edul­li­seen 89 $:n vuo­si­hin­taan, on Ele­men­to­rin vuo­si­hin­ta 199 $. Lisäk­si Diviin on saa­ta­vil­la myös eli­ni­käi­nen lisens­si, jol­la voi­daan raken­taa rajoit­ta­ma­ton mää­rä sivus­to­ja vain 249 $:n ker­ta­mak­sul­la. Jos taas halu­taan ostaa raken­ta­ja vain yhtä sivus­toa var­ten, on vuo­si­hin­ta Ele­men­to­ris­sa huo­mat­ta­vas­ti edul­li­sem­pi. Divin vuo­si­hin­ta on sil­loin 89 $ ja Ele­men­to­rin vain 49 $.

Kum­pi raken­ta­jis­ta tulee hal­vem­mak­si, riip­puu siis sii­tä, kuin­ka monel­le sivus­tol­le sitä halu­taan käyt­tää. Mei­dän asiak­kaam­me saa­vat kum­man tahan­sa tee­man ilmai­sek­si käyt­töön­sä tila­tes­saan koti­si­vu­jen suun­nit­te­lun ja raken­ta­mi­sen Hel­poil­ta koti­si­vuil­ta.

On kui­ten­kin syy­tä kiin­nit­tää huo­mio­ta myös mui­hin omi­nai­suuk­siin, joi­ta pitää tär­kei­nä. Val­tao­sal­le käyt­tä­jis­tä esi­mer­kik­si nopeus voi olla rat­kai­se­vin kri­tee­ri, mut­ta jos ei ole juu­ri­kaan aiem­paa koke­mus­ta sivu­jen raken­ta­mi­ses­ta, saat­taa myös esi­mer­kik­si help­po­käyt­töi­syys nous­ta tär­keäk­si omi­nai­suu­dek­si.

Nopeus ja keveys

Meil­le Hel­poil­la koti­si­vuil­la yksi kes­kei­sim­mis­tä syis­tä vaih­taa Ele­men­to­riin oli nime­no­maan nopeus. Divi nimit­täin on hie­man hitaam­pi, mikä joh­tuu pit­käl­ti sen tar­joa­mis­ta kat­ta­vis­ta toi­min­nal­li­suuk­sis­ta. Ne ovat kyl­lä var­sin moni­puo­li­sia, mut­ta samal­la ne ovat myös ras­kai­ta ja vie­vät pal­jon tilaa, mikä taas syö lisä­osan suo­ri­tus­ky­kyä.

Ele­men­tor puo­les­taan on kevyem­pi ja sitä kaut­ta myös nopeam­pi. Yksin­ker­tai­suus, suo­ri­tus­ky­ky ja nopeus ovat­kin Ele­men­to­rin ehdot­to­mia valt­ti­kort­te­ja.

Käy­tet­tä­vyys

Sekä Divi että Ele­men­tor ovat help­po­käyt­töi­siä, ja se onkin oikeas­taan mie­li­pi­de­ky­sy­mys kum­pi tapa raken­taa miel­lyt­tää enem­män. Ele­men­to­ril­la raken­net­taes­sa ja muo­kat­taes­sa sel­keä ohjaus­pa­nee­li on koko ajan näky­vis­sä sivun vasem­mas­sa lai­das­sa ja sii­tä voi hel­pos­ti raa­ha­ta ja pudot­taa ele­ment­te­jä halua­mil­leen pai­koil­le. Divis­sä puo­les­taan lii­ku­taan ensin hii­rel­lä sii­hen koh­taan sivua, johon halu­taan lisä­tä esi­mer­kik­si kuva tai teks­tiä ja pai­nik­kees­ta klik­kaa­mal­la pääs­tään hel­pos­ti muok­kaa­maan sisäl­töä.

Moduu­li­vaih­toeh­dot 

Visu­aa­li­ses­ta näkö­kul­mas­ta Ele­men­tor tar­jo­aa parem­mat mah­dol­li­suu­det sivu­jen raken­ta­mi­seen, sil­lä se tar­jo­aa enem­män eri­lai­sia val­mii­ta moduu­lei­ta, joi­ta voi hel­pos­ti muo­ka­ta halua­mal­lan­sa taval­la. Divis­sä eri­lai­sia moduu­li­vaih­toeh­to­ja on 46 ja Ele­men­to­ris­sa 59.

Toi­saal­ta Divis­sä puo­les­taan on enem­män ja parem­pia tek­ni­siä toi­min­nal­li­suuk­sia, jot­ka eivät näy ulos­päin, mut­ta nopeut­ta­vat esi­mer­kik­si sivu­jen raken­ta­mis­ta. Divis­sä on muun muas­sa search & replace -toi­min­to, jon­ka ansios­ta saman­lai­sia moduu­le­ja (vaik­ka­pa teks­ti­mo­duu­le­ja) ei tar­vit­se muo­ka­ta jokais­ta yksi­tel­len. Riit­tää, että muu­tos teh­dään yhteen koh­taan ja sen jäl­keen etsi ja kor­vaa -toi­min­nol­la voi­daan toteut­taa sama muu­tos käte­väs­ti, vaik­ka kai­kil­le sivuil­le. Kuten sanot­tu, näi­den tek­nis­ten omi­nai­suuk­sien koko kui­ten­kin vai­kut­taa nega­tii­vi­ses­ti nopeu­teen.

Ulkoa­su 

Sekä Divin omas­sa sii­hen suun­ni­tel­lus­sa Divi-tee­mas­sa että mei­dän nyky­ään käyt­tä­mäs­säm­me Ele­men­to­rin Hel­lo-tee­mas­sa sivu­jen ulkoa­sua voi­daan ryh­tyä luo­maan lähes­tul­koon nol­las­ta, min­kä ansios­ta ammat­ti­tai­toi­nen sivu­jen suun­nit­te­li­ja voi raken­taa juu­ri sel­lai­set sivut kuin itse halu­aa sen sijaan, että muok­kai­si val­miik­si teh­tyä ulkoa­sua. Toi­saal­ta molem­piin page buil­de­rei­hin on saa­ta­vil­la myös lukui­sia “val­mii­ta käy­tet­tä­vik­si” -tee­mo­ja, joi­den ansios­ta koke­mat­to­man­kin sivu­jen raken­ta­jan on mah­dol­lis­ta toteut­taa hyvän­nä­köi­set net­ti­si­vut.

Sen sijaan blo­gin ulkoa­sun suh­teen näil­lä kah­del­la page buil­de­ril­la on ero­ja. Ele­men­to­ris­sa on parem­mat mah­dol­li­suu­det muo­ka­ta blo­gi­si­vun ja artik­ke­lien yksi­löl­lis­tä ulkoa­sua, kun taas Divin kans­sa pitää ilman cus­tom-töi­tä tyy­tyä yhteen ulkoa­suun. Ele­men­tor tar­jo­aa myös enem­män kus­to­moin­ti­vaih­toeh­to­ja ylä- ja ala­tun­nis­tee­seen (hea­der, foo­ter). Mut­ta on hyvä pitää mie­les­sä, että nämä mah­dol­li­suu­det ovat saa­ta­vil­la myös Diviin, mikä­li käy­te­tään kol­man­sien osa­puol­ten teke­miä lisä­osia.

Hel­lo-tee­ma

Vaik­ka Ele­men­to­riin on saa­ta­vil­la myös mui­ta tee­mo­ja, on nime­no­maan sitä var­ten suun­ni­tel­tu Hel­lo-tee­ma niis­tä ehdot­to­mas­ti paras. Hel­lo-tee­man par­hai­ta puo­lia ovat sen ver­taa­ma­ton keveys ja lataus­no­peus.

Hel­lo on kevyem­pi kuin suu­rin osa tee­mois­ta, sil­lä se ei sisäl­lä ollen­kaan tur­hia muo­toi­lu­ja ja koo­de­ja. Lisäk­si se sovel­tuu hyvin yhteen suo­si­tuim­pien WordPress-lisä­osien kans­sa, kuten  esi­mer­kik­si WooCom­mercen verk­ko­kaup­pa-lisä­osan kans­sa. Hel­lo on myös res­pon­sii­vi­nen tee­ma, eli se näyt­tää hyväl­tä kai­kil­la näy­töil­lä ja sitä on myös help­po kus­to­moi­da juu­ri halu­tun­lai­sek­si.

Lyhyt­koo­dit 

Yksi perus­ta­van­laa­tui­nen ero Ele­men­to­rin ja Divin välil­lä on se, että Divi käyt­tää lyhyt­koo­de­ja (=short code) WordPress-sivu­jen raken­ta­mi­seen. Näi­den koo­dien avul­la sivuil­le voi­daan lisä­tä moni­mut­kais­ta­kin sisäl­töä ilman, että kaik­kea sisäl­töä tar­vit­see lisä­tä sel­lai­se­naan sisäl­tö­edi­to­riin. Täl­lä tavoin sisäl­lön lisää­mi­nen ei pää­se rik­ko­maan moni­mut­kais­ta HTML-koo­dia.

Lyhyt­koo­dien käyt­töön liit­tyy kui­ten­kin yksi iso mut­ta. Jos jos­kus halu­aa lopet­taa Divin käyt­tä­mi­sen tai vaih­taa sivu­poh­jaa, kaik­ki luo­dut lyhyt­koo­dit jää­vät van­hal­le sivus­tol­le. Näin ollen, jos sivu­jen ulkoa­su halu­taan pitää ennal­laan toi­seen sivun­ra­ken­ta­jaan tai tee­maan vaih­det­taes­sa, tulee sivut raken­taa käy­tän­nös­sä kat­soen uudes­taan alus­ta.

Kum­pi page buil­de­reis­ta on siis parem­pi?

Mei­dän mie­les­täm­me Ele­men­tor on parem­pi, eten­kin sen nopeu­den ansios­ta. Nopeus vai­kut­taa pait­si sivu­jen käy­tet­tä­vyy­teen myös haku­ko­ne­nä­ky­vyy­teen. Ele­men­to­riin vaih­doim­me­kin siis sik­si, että haluam­me tar­jo­ta asiak­kail­lem­me aina par­haim­man mah­dol­li­sen rat­kai­sun, ja täl­lä het­kel­lä se on mie­les­täm­me Ele­men­tor.

Vas­taus toki riip­puu pal­jon myös sii­tä, mil­lai­sia omi­nai­suuk­sia arvos­taa ja mil­lai­sia toi­min­to­ja page buil­de­ril­taan odot­taa. Sik­si onkin tär­ke­ää pun­ni­ta omi­nai­suuk­sien välil­lä, mit­kä ovat itsel­le nii­tä kaik­kein tär­keim­piä. Lisäk­si on toki hyvä pitää mie­les­sä, että jos toi­seen page buil­de­riin tulee jokin hyö­dyl­li­nen uudis­tus, ennem­min tai myö­hem­min myös toi­nen ottaa sii­tä toden­nä­köi­ses­ti mal­lia.

Kerää dataa koti­si­vu­je­si kävi­jöis­tä ja kehi­tä digi­taa­lis­ta mark­ki­noin­tia­si sekä lii­ke­toi­min­taa­si. Näi­den ohjei­den avul­la asen­nat yri­tyk­se­si net­ti­si­vuil­le hel­pos­ti ilmai­sen ana­ly­tiik­ka­työ­ka­lun, Google Ana­ly­tic­sin.

Mik­si Google Ana­ly­tics?

Tie­dät­kö mikä on Google Ana­ly­tics, mihin sitä tar­vi­taan ja miten sitä käy­te­tään? Jos vas­ta­sit kyl­lä, voit hypä­tä täs­tä lin­kis­tä suo­raan asen­nus­oh­jei­siin, joi­den avul­la lisäät Ana­ly­tic­sin Divi The­mel­lä toteu­tet­tui­hin WordPress-net­ti­si­vui­hin. Jos et vie­lä ihan tar­kal­leen tie­dä mikä se on, tai haluat saa­da ana­ly­tiik­ka­työ­ka­lus­ta kai­ken hyö­dyn irti, suo­sit­te­len luke­maan koko artik­ke­lin.

Google Ana­ly­tics on maa­il­man suo­si­tuin ana­ly­tiik­ka­työ­ka­lu. Saa­ta­va­na on sekä ilmai­nen että mak­sul­li­nen ver­sio, jois­ta useim­mil­le riit­tää val­lan mai­nios­ti mak­su­ton ver­sio (jota artik­ke­lis­sa käsi­tel­lään). Käy­tän­nös­sä kyse on sii­tä, että net­ti­si­vus­tol­le lisä­tään koo­di, joka kerää tie­toa sivus­to­vie­rai­li­jois­ta ja hei­dän liik­keis­tään sivuil­la­si.

Ana­ly­tic­sin avul­la saat sel­vil­le esi­mer­kik­si sivus­to­si kävi­jä­mää­rät, mitä kaut­ta vie­rai­li­jat sivuil­le saa­pu­vat, kuin­ka kau­an siel­lä viih­ty­vät ja mil­tä sivul­ta pois­tu­vat. Kaik­ki tämä on ymmär­ret­tä­väs­ti äärim­mäi­sen hyö­dyl­lis­tä tie­toa, jot­ta net­ti­si­vu­ja voi­tai­siin kehit­tää poten­ti­aa­li­sia asiak­kai­ta­si ja lii­ke­toi­min­taa­si parem­min pal­ve­le­vik­si. Seu­raa­vak­si ker­rom­me, miten asen­nat Google Ana­ly­tic­sin Divi-tee­mal­la toteu­te­tuil­le WordPress-net­ti­si­vuil­le­si.

Miten Google Ana­ly­tics asen­ne­taan? – 4 help­poa askel­ta

1. Google-tilin luo­mi­nen

Google Ana­ly­tic­sin asen­ta­mis­ta var­ten tar­vit­set Google-tilin. Jos sinul­la on jo Gmail-säh­kö­pos­ti, voit käyt­tää ole­mas­sa ole­via tun­nuk­sia­si. Jos ei, tai haluat pitää ole­mas­sa ole­van tilin eril­lään Ana­ly­tic­sis­tä­si, sinun tulee luo­da itsel­le­si Google-tili, jol­la pää­set kir­jau­tu­maan ana­ly­tiik­ka­työ­ka­luun.

Google-tilin pää­set luo­maan täyt­tä­mäl­lä tie­to­si tääl­lä.

2. Google Ana­ly­tics -seu­ran­ta­koo­din hank­ki­mi­nen

Kun olet luo­nut Google-tilin, voit kir­jau­tua tun­nuk­sil­la­si osoit­tee­seen: https://analytics.google.com. Valit­se ”Kir­jau­du sisään”, klik­kaa ”Sign up” ja täy­tä vaa­di­tut koh­dat:

• Tilin nimi (yri­tyk­sen nimi)
• Verk­ko­si­vus­ton nimi (net­tio­soi­te)
• Verk­ko­si­vun osoi­te (net­tio­soi­te)
• Toi­mia­la (Valit­se sopi­vin tai muu/other)
• Maa (Suo­mi)

Lopuk­si hyväk­sy ehdot ja klik­kaa “Get your Trac­king ID”. Tämän jäl­keen kopioi /ota tal­teen sivul­la annet­tu seu­ran­ta­koo­di (muo­toa UA-90008225-1). Seu­raa­vak­si voit lisä­tä koo­din net­ti­si­vuil­le­si tai jos olet mei­dän asia­kas, voit myös lähet­tää koo­din meil­le, niin teem­me sen puo­les­ta­si.

3. (vaih­toeh­to a) Seu­ran­ta­koo­din lisää­mi­nen koti­si­vuil­le itse

Kun olet hank­ki­nut Ana­ly­tic­sin seu­ran­ta­koo­din, on aika lisä­tä se koti­si­vuil­le­si. Ohjeet kos­ke­vat Divi The­men käyt­tä­jiä.

a) Kir­jau­du WordPress-koti­si­vuil­le­si

b) Valit­se vasem­man reu­nan ohjaus­nä­ky­mäs­tä “Divi” > “Tee­man ase­tuk­set”

c) Valit­se Divi-tee­man valin­nat -ylä­va­li­kos­ta “Inte­gra­tion”

d) Rul­laa koh­taan “Lisää koo­dia < body > osioon (hyvä paik­ka seu­ran­ta­koo­deil­le, kuten Google Ana­ly­tics)”

e) Lisää vie­rei­sen teks­ti­laa­ti­kon lop­puun uusi rivi ja kopioi sii­hen aiem­min tal­teen otta­ma­si Trac­king ID eli seu­ran­ta­koo­di

f) Klik­kaa sivun ala­lai­das­ta “Tal­len­na muu­tok­set”

g) Tyh­jen­nä vie­lä lopuk­si väli­muis­ti. Rul­laa aivan sivun ylä­osaan ja valit­se ylä­va­li­kos­ta “WP Roc­ket” tai “Is cac­he” ja klik­kaa “Tyh­jen­nä väli­muis­ti”

Tadaa, olet nyt asen­ta­nut sivuil­le­si ilmai­sen Google Ana­ly­tic­sin kävi­jä­seu­ran­nan ja voit kir­jau­tua ulos koti­si­vuil­ta­si.

3. (vaih­toeh­to b) Google Ana­ly­tic­sin lisää­mi­nen Mons­te­rIn­sight­sin lisä­osal­la

Google Ana­ly­tic­siä voi­daan käyt­tää myös suo­raan WordPress-koti­si­vu­jen ohjaus­nä­ky­mäs­tä, kun sivuil­le asen­ne­taan Mons­te­rIn­sight­sin Google Ana­ly­tics Dash­board -lisä­osa. Mons­te­rIn­sight­sin lisä­osa voi­daan asen­taa hel­pos­ti WP-sivuil­ta koh­das­ta “Lisä­osat” ja “Lisää uusi”. Haku­kent­tään kir­joi­te­taan lisä­osan nimi ja sen jäl­keen asen­nus tapah­tuu nopeas­ti yksin­ker­tai­sia ohjei­ta seu­raa­mal­la. 

4. Kävi­jä­seu­ran­nan tar­kas­te­lun aloit­ta­mi­nen

Ana­ly­tic­sin kerää­mää dataa voit jat­kos­sa tar­kas­tel­la kir­jau­tu­mal­la Google-tun­nuk­sil­la­si Ana­ly­tic­siin osoit­tees­sa: https://analytics.google.com.

Mil­lais­ta tie­toa Google Ana­ly­tics kerää?

Entä, mil­lais­ta tie­toa sivuil­le asen­ne­tun Google Ana­ly­tic­sin avul­la sit­ten saa­daan?

1. Reaa­liai­kai­nen-raport­ti ker­too nimen­sä mukai­ses­ti sivus­ton kävi­jä­lii­ken­tees­tä reaa­lia­jas­sa. Klik­kaa­mal­la auki reaa­liai­kai­nen-väli­leh­den saat sel­vil­le esi­mer­kik­si, kuin­ka mon­ta kävi­jää sivuil­la­si on täl­lä het­kel­lä.

2. Ylei­sö-raport­ti antaa puo­les­taan lisä­tie­toa net­ti­si­vu­je­si ylei­sös­tä. Siel­tä voit tar­kis­taa esi­mer­kik­si kävi­jä­mää­rät halua­mil­ta­si ajan­jak­soil­ta. Voit myös sel­vit­tää, mis­tä mais­ta ja kau­pun­geis­ta kävi­jät tule­vat sekä mil­lä lait­teel­la (esim. mobii­li) he tar­kas­te­le­vat sivua­si. Demo­gra­fi­sis­ta tie­dois­ta voit tar­kis­taa sivus­to­vie­rai­li­joi­de­si ikä- ja suku­puo­li­ja­kau­man.

3. Han­kin­ta-raport­ti ker­too, miten kävi­jät ovat löy­tä­neet sivuil­le­si. Ovat­ko he tul­leet sosi­aa­li­sen median, jon­kin lin­kin, haku­ko­neen tai suo­raan verk­ko-osoit­teen kaut­ta?

4. Käyt­täy­ty­mi­nen-raport­ti pal­jas­taa, miten sivus­to­vie­rai­li­jat liik­ku­vat sivuil­la­si. Siel­tä näet käte­väs­ti, kuin­ka kau­an vie­rai­li­jat viih­ty­vät sivus­tol­la­si ja mikä sivuis­ta­si kiin­nos­taa hei­tä eri­tyi­ses­ti. Voit myös tar­kis­taa, miten vie­rai­li­jat ete­ne­vät sivul­ta toi­sel­le ja min­kä sivun kaut­ta pois­tu­vat.

5. Kon­ver­siot-raport­ti ker­too kon­ver­sioi­den (joi­ta voi­vat olla esi­mer­kik­si osto­ta­pah­tu­ma, yhtey­den­ot­to­lo­mak­keen lähet­tä­mi­nen tai hin­las­ku­rin käyt­tä­mi­nen) toteu­tu­mi­ses­ta. Sinun tulee mää­rit­tää omat kon­ver­sio­ta­voit­tee­si, ennen kuin Ana­ly­tics voi mita­ta nii­tä.

Ana­ly­tiik­ka­työ­ka­lun kerää­mäs­tä datas­ta ja sen hyö­dyn­tä­mi­ses­tä voit lukea lisää artik­ke­lis­tam­me Miten hyö­dyn Google Ana­ly­tic­sis­tä?

Hel­pot koti­si­vut teke­vät kaik­ki net­ti­si­vut käyt­täen suo­sit­tua WordPress Divi-tee­maa. Näi­den help­po­jen vink­kien avul­la sääs­tät rahaa ja muok­kaat yri­tyk­se­si val­mii­ta net­ti­si­vu­ja jat­kos­sa myös itse.

Koti­si­vut eivät ole kos­kaan täy­sin val­miit, mut­ta osaat­ko päi­vit­tää WordPress-sivu­ja itse?

Me Hel­poil­la koti­si­vuil­la toteu­tam­me kaik­kien asiak­kai­dem­me koti­si­vut WordPres­sil­lä. Maa­il­man suo­si­tuim­paan koti­si­vu­jen jul­kai­su­jär­jes­tel­mään on saa­ta­va­na lukui­sia val­mii­ta tee­mo­ja, jois­ta ehdot­to­mas­ti yksi par­haim­pia on mei­dän­kin käyt­tä­mäm­me Divi The­me.

Paras­ta on, ettei WordPres­sin käyt­tä­mi­sek­si tar­vit­se osa­ta html-koo­daus­ta ja sil­ti esi­mer­kik­si Divi-tee­man avul­la on mah­dol­lis­ta toteut­taa erit­täin tyy­lik­käi­tä ja yksi­löl­li­siin tar­pei­siin rää­tä­löi­ty­jä koti­si­vu­ja.

Täs­sä artik­ke­lis­sa halusim­me antaa muu­ta­man vin­kin WordPres­sin Divi-tee­mal­la toteu­tet­tu­jen koti­si­vu­jen muok­kauk­seen. Koti­si­vut kun eivät kos­kaan ole täy­sin val­miit. Koti­si­vu­jen tyy­pil­li­si­nä tavoit­tei­na on kerä­tä lii­de­jä, lisä­tä yri­tyk­sen näky­vyyt­tä, raken­taa asian­tun­ti­juus­ku­vaa, erot­tua eduk­seen kil­pai­li­jois­ta ja lopul­ta kas­vat­taa myyn­tiä. Jot­ta nämä tavoit­teet voi­tai­siin saa­vut­taa, tuli­si koti­si­vu­jen sisäl­töä, kuten kuvia, teks­te­jä ja sitä kaut­ta myös metaot­si­koi­ta ja -kuvauk­sia päi­vit­tää sään­nöl­li­ses­ti.

1. Kuvien lisää­mi­nen WordPres­sil­lä

Kuvien lisää­mi­nen tai vaih­ta­mi­nen WordPres­sin Divi-tee­maa käyt­täen onnis­tuu hel­pos­ti myös itse. Kir­jau­dut­tua­si WordPress-sivuil­le­si valit­set vain vasem­mas­ta sivu­pal­kis­ta koh­dan “Sivut” ja sen alta sivun, jol­le haluat lisä­tä uuden kuvan tai vaih­taa jon­kin van­hois­ta kuvis­ta. Sivua kan­nat­taa muo­ka­ta käyt­täen visu­aa­lis­ta raken­ta­jaa, mikä tapah­tuu valit­se­mal­la sivun ylä­lai­das­ta “Build On The Front End”.

Kuvia tai mitä tahan­sa ele­ment­te­jä lisä­tes­sä­si valit­set sivul­ta koh­dan “Lisää moduu­li”, jon­ka jäl­keen voit vali­ta, mil­lai­sen ele­men­tin haluat lisä­tä, täs­sä tapauk­ses­sa “kuvan”.

Samal­la taval­la toi­mi­taan myös sil­loin, jos ei halu­ta lisä­tä koko­naan uut­ta kuvaa, vaan ainoas­taan vaih­taa van­han tilal­le uusi. Sil­loin siir­ryt visu­aa­li­ses­sa edi­to­ris­sa sen kuvan koh­dal­la, jon­ka haluat vaih­taa ja valit­set “moduu­lin ase­tuk­set”.

Var­si­nais­ta kuvaa pää­set valit­se­maan media­kir­jas­tos­ta klik­kaa­mal­la “lähe­tä tie­dos­to”. Media­kir­jas­toon lisäät kuvia hel­pos­ti raa­haa­mal­la.

Ennen kuvan tal­len­ta­mis­ta on tär­ke­ää täyt­tää sivun oikeas­sa lai­das­sa ole­vat “liit­teen tie­dot”. Täs­sä koh­taa sinun kan­nat­taa täyt­tää aina­kin koh­dat “Otsik­ko”, “Vaih­toeh­toi­nen teks­ti” ja “Kuvaus”. Näi­den tie­to­jen täyt­tä­mi­nen on tär­ke­ää kah­des­ta­kin syys­tä. Ensin­nä­kin otsi­kon ja kuvauk­sen teks­tit voi­vat näkyä Googlen kuva­haus­sa, ja toi­sek­si vaih­toeh­toi­nen teks­ti (eli alt-teks­ti) ker­too haku­ko­neil­le ja niil­le, jot­ka eivät näe kuvaa (esim. näkö­vam­mai­sil­le), mitä sii­nä on.

Kuva­tie­dos­ton ja kuvan otsi­kon nimeä­mi­nen sekä alt-teks­tis­sä näky­vän kuvauk­sen kir­joit­ta­mi­nen on olen­nai­nen osa kuvien haku­ko­neop­ti­moin­tia. Haku­ko­nei­den kan­nal­ta myös sivuil­le ladat­ta­van uuden kuva­tie­dos­ton nimeä­mi­seen ja kokoon kan­nat­taa kiin­nit­tää huo­mio­ta.

Kuvan tulee olla hyvä­laa­tui­nen, mut­ta kui­ten­kin kool­taan aivan mak­si­mis­saan 200 kt. Lii­an suu­ret tie­dos­tot hidas­ta­vat sivus­ton lataus­no­peut­ta ja vai­kut­ta­vat nega­tii­vi­ses­ti haku­ko­ne­nä­ky­vyy­teen ja käyt­tä­jä­ko­ke­muk­seen, sil­lä kukaan ei pidä hitais­ta verk­ko­si­vuis­ta.

Kuvien opti­moin­nis­ta, kuten esi­mer­kik­si tie­dos­ton nimeä­mi­ses­tä ja lii­an suu­rien kuva­tie­dos­to­jen pie­nen­tä­mi­ses­tä, voit lukea lisää artik­ke­lis­tam­me Lyhyt oppi­mää­rä kuvien opti­moin­nis­ta koti­si­vu­ja var­ten.

Kun olet valin­nut kuvan, täyt­tä­nyt liit­teen tie­dot ja kli­kan­nut “ase­ta kuvak­si”, muis­ta vie­lä tal­len­taa sivuil­le teke­mä­si muu­tok­set. Valit­se visu­aa­li­sen raken­ta­jan ala­kul­mas­ta kol­me pis­tet­tä […] ja tal­len­na.

Sosi­aa­li­sen median jako­ja var­ten kan­nat­taa kuva käy­dä lisää­mäs­sä myös sivun oikeas­sa kul­mas­sa ole­vaan “artik­ke­li­ku­vaan”.

Alla ole­val­ta videol­ta näet koh­ta koh­dal­ta, miten kuvia lisä­tään WordPres­sis­sä.

2. Teks­tin muok­kaa­mi­nen Divi-tee­man avul­la WordPres­sil­lä

Seu­raa­vak­si pääs­tään muok­kaa­maan teks­tiä.

WordPress-sivuil­le­si kir­jau­dut­tua­si valit­set vasem­mas­ta pal­kis­ta “Sivut” ja sen ala­si­vun, johon haluat teh­dä muok­kauk­sia tai lisä­tä uut­ta teks­tiä. Kan­nat­taa jäl­leen ottaa käyt­töön visu­aa­li­nen raken­ta­ja klik­kaa­mal­la “Build On The Front End”.

Seu­raa­vak­si vali­taan se koh­ta, johon teks­tiä halu­taan lisä­tä tai muo­ka­ta ja kli­ka­taan “Lisää rivi”. Täs­sä koh­taa voit myös vali­ta halua­ma­si pals­toi­tuk­sen, esi­mer­kik­si yhden koko sivun levyi­sen pals­tan tai kak­si hie­man eri levyis­tä pals­taa.

Lopuk­si valit­set anne­tuis­ta moduu­leis­ta “teks­tin”, jon­ka jäl­keen pää­set­kin kir­joit­ta­maan sisäl­töä tai vaih­toeh­toi­ses­ti voit kopioi­da aiem­min val­miik­si kir­joit­ta­ma­si teks­tin esi­mer­kik­si Wor­dis­ta.

Eten­kin pit­kät teks­tit kan­nat­taa kir­joit­taa mie­luum­min ensin jol­la­kin tar­koi­tuk­seen teh­dyl­lä teks­tin­kä­sit­te­ly­oh­jel­mal­la ja kopioi­da sit­ten vas­ta WordPres­siin. Näin väl­ty­tään myös sil­tä, että teks­ti esi­mer­kik­si net­tiyh­tey­den kat­ke­tes­sa häviäi­si koko­naan.

Teks­tiä ei kui­ten­kaan kan­na­ta kos­kaan kopioi­da WordPres­siin val­miik­si muo­toil­tu­na, sil­lä muo­toi­lu saat­taa­kin siel­lä näyt­tää aivan kum­mal­li­sel­ta ver­rat­tu­na alku­pe­räi­seen.

Kan­nat­taa­kin käyt­tää aina WordPres­sin “Lisää muo­toi­le­mat­ta” -pai­ni­ket­ta tai vaih­toeh­toi­ses­ti käyt­tää teks­ti esi­mer­kik­si Note­pa­din kaut­ta, jol­loin muo­toi­lut pois­tu­vat.

Lopul­li­nen muo­toi­lu teh­dään aina WordPres­sin oman työ­ka­lu­ri­vin avul­la.

Vink­ki vito­nen: Kun haluat upot­taa teks­tii­si link­ke­jä, maa­laa halut­tu koh­ta teks­tis­tä ja valit­se työ­ka­lu­ri­vil­tä link­kiä kuvas­ta­va ket­ju-pai­ni­ke, johon syö­tät halu­tun osoit­teen. Ennen kuin tal­len­nat lin­kin, klik­kaa koh­ta “avaa uudes­sa väli­leh­des­sä”. Näin sivuil­la­si vie­rai­le­vat eivät pois­tu siel­tä kli­ka­tes­saan link­kiä.

Muis­ta lopuk­si tal­len­taa sivuil­la teke­mä­si muu­tok­set.

Kat­so myös video-ohjeet (alla) teks­tin lisää­mi­seen ja muok­kaa­mi­seen.

3. Metaot­si­koi­den ja -kuvaus­ten muok­kaa­mi­nen WordPres­sin Yoast SEO -lisä­osal­la

Koti­si­vu­jen teks­te­jä muo­ka­taan ja päi­vi­te­tään yleen­sä sil­loin, kun sisäl­töi­hin on tul­lut joi­ta­kin muu­tok­sia. Hin­nas­to on muut­tu­nut, hen­ki­lö­kun­taa on tul­lut lisää, osoi­te on vaih­tu­nut tai on tul­lut uusia tuot­tei­ta ja pal­ve­lui­ta. Kun teks­tiä on muo­kat­tu, on syy­tä tar­kis­taa, että myös meta­ku­vauk­set ja -otsi­kot ovat ajan tasal­la.

Nämä metaot­si­kot ja -kuvauk­set ovat siis ne teks­tit, jot­ka Google näyt­tää sivuis­ta­si haku­tu­lok­sis­saan. Näky­vyy­den kan­nal­ta on äärim­mäi­sen tär­ke­ää, että nämä meta­tie­dot vas­taa­vat sivu­je­si päi­vi­tet­ty­jä sisäl­tö­jä.

Yoast SEO on WordPres­siin saa­ta­vil­la ole­va lisä­osa, jol­la metaot­si­koi­ta ja -kuvauk­sia voi­daan lisä­tä ja muo­ka­ta. Kun olet osta­nut koti­si­vut meil­tä, olem­me auto­maat­ti­ses­ti lisän­neet sivus­to­si jokai­sel­le yksit­täi­sel­le sivul­le sen het­ki­siä sisäl­tö­jä vas­taa­vat otsi­kot ja kuvauk­set.

Kun olet muo­kan­nut koti­si­vu­je­si teks­te­jä, voit seu­raa­vien ohjei­den avul­la muo­ka­ta myös metaot­si­kon ja -kuvauk­sen hel­pos­ti itse.

Kir­jau­dut­tua­si sivuil­le­si valit­set jäl­leen vasem­mas­ta pal­kis­ta “Sivut” ja sen ala­si­vun, jon­ka meta­tie­to­ja haluat muo­ka­ta. Skrol­laat sivul­la alas­päin koh­taan “Yoast SEO” ja klik­kaat Googlen haku­tu­los­si­vul­ta näyt­tä­väs­tä esi­kat­se­lus­ta. Näin sinul­le avau­tu­vat koh­dat “SEO otsik­ko” ja “Meta selos­tus”. Näi­den teks­ti­ri­vien tilal­le voit hel­pos­ti kir­joit­taa uudet sisäl­tö­jä vas­taa­vat otsi­kot ja kuvauk­set.

Muis­ta vie­lä lopuk­si skrol­la­ta takai­sin sivun ylä­osaan ja tal­len­taa muu­tok­set klik­kaa­mal­la oikeas­sa sivu­pal­kis­sa ole­vaa “Päivitä”-painiketta.

Face­boo­kin ja Twit­te­rin some­ja­ko­ja var­ten on mah­dol­lis­ta kir­joit­taa omat otsi­kot ja kuvauk­set Yoast-lisä­osan avul­la. Some­ku­vauk­sia pää­set kir­joit­ta­maan klik­kaa­mal­la lisä­osan koh­das­ta “Social”.

Mil­lai­nen on hyvä metaot­sik­ko ja meta­ku­vaus? Entä miten ne vai­kut­ta­vat haku­ko­ne­nä­ky­vyy­teen? Lue lisää aihees­ta ja nap­paa tal­teen vin­kit tääl­tä ja tääl­tä.