Verkkosivueditorit ja -builderit. Mitä ne ovat?

Oletko suunnittelemassa verkkosivuja? Divi, Elementor, Woocommerce, CSS-Hero, Gutenberg… alan termejä kyllä on foorumit täynnä, mutta tarvitaanko näitä mysteerityökaluja mihinkään? Eikö pelkkä WordPress riitäkään?

Vastaus on: kyllä tarvitaan ja ei riitä. Nimittäin kaikki ne, jotka suunnittelevat tyylikkäiden verkkosivujen luomista WordPress-julkaisujärjestelmän alla, kohtaavat heti alussa valintatehtävän, halusivat sitä tai eivät. Kun WordPress on alustettu, ja verkkosivua pitäisi alkaa luomaan tyhjästä, huomataan heti, ettei WordPress vakiomuodossaan tarjoa oikein järkeviä muotoiluoptioita, eikä mitään muutakaan sellaisia työkaluja, millä saataisiin loihdittua näyttävät ja värikkäät verkkosivut.

Tämä ei tuskin ole yllätys kellekään alaa tuntevalle, koska WordPress on pohjimmiltaan bloginkirjoitusalusta, eli se suosii lähinnä artikkelimuotoista tekstinrivitystä perusmuodossaan.

Täysin perusmuotoisella WordPressillä saadaan toki suollettua ulos toimiva verkkosivu, jossa teksti rivittyy suunnilleen halutunlaisesti, fonttia on muutettu ja kuvaakin on sommiteltu tekstin keskelle. Mutta riittääkö tämä useimmille verkkosivujen tekijöille? Vastaus on ilmiselvästi ei, koska erilaisia buildereita ja editoreja on veppi väärällään ja niitä myös laajasti käytetään. Elementor, Divi, Oxygen, Visual Composer… kaikilla näillä on omat työkalunsa, logiikkansa ja toimivuutensa, hyvine ja pahoine puolineen.

Tässä artikkelissa keskitymme kuitenkin vain Elementor (Pro) -lisäosaan, koska se on yksi maailman suosituimmista buildereista, se tarjoaa yhden parhaista ja loogisimmista käyttäjäkokemuksista ja se on luonteeltaan hyvin pitkälti ”wysiwyg” ja ”drag´n´drop” ja siten helposti lähestyttävä. Toisin sanoen se on helposti myös noviisia totteleva, jos vain malttaa tutustua työkaluihin ja sarakkeiden hallintaan.

Elementor. Onko se hyvä vaihtoehto?

Lähtökohtaisesti vastaus on vahva kyllä. Elementorin karvalakkimalli on ilmainen eikä vaadi rekisteröitymistä, ja sen voi ladata ihan WordPressin sisällä lisäosien latauskentässä. Jo ilmaisversio tarjoaa kosolti työkaluja ja herkkuja, ja sen avulla saadaan tehtyä mukavat verkkosivut; liike-efektejä, erilaisia kuvaupotuksia, gallerioita, reunojen pyöristyksiä, fonttien ja värien globalisointeja jne. 

Elementor kannattaakin siis ladata heti ensimmäisenä lisäosana, ja tutustua sen kautta builderin ominaisuuksiin ja käyttöliittymään. Ja mikä parasta, vaikka olisitkin ottanut Elementorin käyttöösi, voit edelleen muokata haluttuja sivuja myös ilman sitä, jos sivu sitä vaatii. Monet kolmannen osapuolen isohkot kokonaisuudet (esim. kurssialustat ja muut suljetut ympäristöt), eivät usein sellaisenaan oikein pelaa Elementorin kanssa, joten ne haluavat omia sivupohjansa. Tai sitten ne toimivat sivulle laitettavalla lyhytkoodilla, johon ei pääse suoraan kiinni oikein mitenkään. Tällaisiakin sivuja voidaan kuitenkin useimmiten muokata CSS-muotoilulla tai lisäosan sisäisellä editorilla. Lisäksi sivuille voidaan aina upottaa myös puhdasta HTML- ja JavaScript-koodia, mikäli haluttuun muotoiluun tai toimintoon ei löydy työkaluja.

Kaikenkaikkiaan Elementor on siis todellä yleispätevä editori myös ammattilaistason verkkosivujen luontiin.

Mikä teema Elementorin kanssa?

WordPress sisältää aina myös ”teeman”, se tulee vakiona asennuksen mukana ja on lähinnä tarkoitettu niille, joilla ei ole dedikoituja editoreja käytössä. Teemassa voi olla esimerkiksi valmiina musta tausta, siinä voi olla jotain omia lomakejärjestelmiä ja vähän kaikkea muutakin useimmiten negatiivista sisältöä. Joissain teemoissa taas jokin olennainen asia puuttuu, ja joudut käyttämään lisäosaa sen uudelleen aktivoimiseksi. Raskassoutuinen teema on siis kuin bloatwarea, joka pukkautuu aina välillä editoidessa pinnalle ja estää näin tehokkaat muotoilut.

Jos käytät Elementoria, et pääsääntöisesti tarvitse turhaa teeman kautta tulevaa muotoilua. Elementor toimiikin parhaiten mahdollisimman tyhjältä pohjalta, joten valitse mieluiten teemaksi kevyt ”Hello Elementor!” ennen muokkauksien aloittamista. Muitakin käyttökelpoisia toki on, mutta me Vepillä käytämme aina Helloa, koska sen on havaittu häiritsevän vähiten Elementorin muotoilutoimintoja. 

 

Elementor Pro. Mikä se on?

Verkkosivujen kehittäjällä on usein monimukaisia visioita sivustolle. Hänen kannattaakin siksi ehdottomasti harkita Elementorin Pro-versiota. Pro:n mukana tulee nimittäin joitain oleellisia muotoiluoptioita, esimerkiksi mallit, mallikirjastot ja muutama extratyökalu. Erityisesti monisivuiset verkkosivustot hyötyvät malleista, joita voidaan toistaa joka sivuilla. Esimerkiksi ”Header” ja ”Footer” ovat tällaisia toistuvia malleja, suomeksi ne ovat ehkä paremmin tunnettu ”Ylä- ja alatunnisteena”. Jotkut vääräleuat kutsuvat näitä myös nimillä “ylä- ja alafuutteri”.

Mallien kautta voidaan toistaa samaa palikkaa usealla sivulla, joissa ne asettuva haluttuun kohtaan automaattisesti. Navigaatiovalikko yläreunassa ja muut tämänluontoiset palikat kannattaa asettaa mallien sisään.

Lisäksi Pro:n mukana tulee työkaluja, mutta hyvin samankaltaisia löytyy muutenkin lisäosapuolelta ilmaiseksi.

Mitä eroa sitten on Elementorin karvalakkiversiolla vs. ammattilaisversiolla? Tsekkaa speksien eroavaisuudet tästä, niinkuin Elementor itse ne ilmoittaa: https://elementor.com/help/elementor-pro-vs-free/

Toimiiko Elementor-muokattu sivu myös puhelimella?

Elementorin muokkaustiloissa on vakiona myös responsiiviset toiminnot, joilla emuloidaan näkymää eri laitteilla. Voit siis muokata sivuston tarjoamaa näkymää erikseen mobiilille ja tablettiresoluutiolle. Nämä näkymät ovatkin käytännössä pakollisia, onhan loppupäässä mobiilikäyttäjien osuus nykyisellään jo todella huomattava. Elementorin betaominaisuuksissa on tarjolla myös useamman resoluution muokkaustiloja, mutta yleensä pärjätään kyllä kolmella eri tilalla, ellei sitten ole käytössä niin erikoisia sommitteluratkaisuja, ettei näkymän leveyteen sidotut prosentitkaan tuo ilmettä oikeanlaiseksi Pentti-papan Doro-puhelimella.

Ja jos jostain syystä haluat editoidakin valmisteilla olevaa sivuasi, sekin onnistuu puhelimella jopa yllättävänkin jouhevasti. Toki sitä emme suosittele, mutta hätäfiksit sivuille onnistuvat siis myös ilman pöytäkonetta.

 

 

Elementor ja Woocommerce

Elementor toimii hyvin myös verkkokaupan (useimmiten Woocommercen) allaolevilla sivuilla, tosin hieman rajatuin toiminnoin. Joitain asioita (lähinnä ostoskori- ja kassasivu) ei Elementorilla saa suoraan editoitua, koska ne tuodaan lyhytkoodilla ruutuun. Pienimuotoinen CSS-jumppa onkin tällöin tarpeen, mikäli jokaikisen verkkokaupan napin tai kentän tulee olla yhdenmukainen suhteessa verkkosivujen muotokieleen. CSS-muotoiluista (ja CSS-Herosta) kerrotaan enemmän tulevilla artikkeleilla.

Elementorin huonot puolet

Elementor ei ole täydellinen – ei ole kyllä mikään muukaan kilpaileva editori. Se kehittyy jatkuvasti, mutta muutama seikka tulee ymmärtää sen käytössä. Ensinnäkin se on kohtuullisen raskas käyttää. Aina editointitilaan mennessä ohjelma alustaa itseään useamman sekunnin. Varsinainen sivun tallennus (päivitys) on kohtuu nopea prosessi, mutta kokonaisuutena se ei ole se nopein editori.

Elementor pyörii ja toimii useimmilla verkkosivuilla, mutta jos PHP:n muistiraja on hostauspäässä asetettu liian pieneksi (esim.  64Mb) , jää työkalupakki usein pyörimään harmaana. Onneksi useimmissa webhotellipaketeissa asia ei ole ongelma, mutta asia voi konkretisoitua, jos samalla verkkosivuilla on muitakin raskaita editoreja tai liitännäisiä.

Hiiren korvien kliksuttelua tulee suunnitteluvaiheessa myös enemmän kuin laki sallii, mutta tämä pitemmän päälle turhauttava työ on enemmän sidottu WordPressin arkkitehtuuriin kuin varsinaisesti Elementoriin.

Mitä Elementor Pro maksaa?

Elementor uudisti hinnoitteluaan hiljattain, ja maksullisen Pro-version hinta on nykyisellään jo kohtuullisen arvokas yksittäiselle verkkosivulle ostettuna. Me Vepillä olemme kuitenkin ostaneet hyvissä ajoin ikijäsenyyden, joka sisältää lähes rajattomasti verkkosivuja. Voit ostaa meiltä Elementor Pro –integraation, ja tuunata itse omat sivusi käyttäen Pro-version työkaluja. Veppi on tällöin nimellisesti sivun admin ja vastaa Pro-version lisenssistä ja integraatiosta, mutta sinä voit työstää sivujasi miten vain haluatkaan. Aika hyvä ja järkevä yhteistyödiili, vai mitä?

Yhteenveto

Loppukaneettina voidaan vielä todeta, että Elementor (Pro) on helposti omaksuttava ja suositeltava editointityökalu, jonka peruskäytön oppii jokainen, jolla on tietokoneen käytön perusteet hallussa. Sen syvälliset ominaisuudet jäävät silti useimmille peruskäyttäjille vieraaksi, mutta se ei suinkaan estä sivustojen onnistunutta luomista ja muokkausta. Erityisesti prosentteihin sidotun koon määrittely voi olla vaikeaa ja vaatii myös pientä miettimistä, miten sivusto tulee käyttäytymään eri ruuduilla.

Me Vepillä annamme aina perusmuotoisen koulutuksen asiakkaillemme. Jos ostat meiltä verkkosivuston, voit aina luottaa siihen, että pystyt myös itse tekemään sisältömuutoksia, ilman tuntilaskutuksen luomaa lisämenoerää tulevaisuudessa. Toki Elementor sisältää kovasti toimintoja, joiden käyttöä ainoastaan harjaantunut websuunnittelija osaa hallita, joten erikoisefektit ja muut kannattaakin siksi jättää ammattilaisten harteille.

Osta Elementor Pro ja muut oleelliset lisäosat meiltä!

Veppi myös myy Elementor Pro:n sisältävää tee-se-itse -pakettia, jossa on sisäänleivottuna kaikki oleelliset editointilisäosat. Suosittelen!

Tekstin on tuottanut Vepin Art Director Matti Kataja