blog01
owner

Kotisivueditori: Vertailussa kolme suosittua

Vertailussa kolme suosittua kotisivueditoria monipuolisesti.. Kotisivueditorilla voit tehdä kotisivut ja muokata kotisivuja ilman erityisiä koodaustaitoja. Hyvä kotisivueditori on erinomainen työkalu yrityksesi kotisivuille, se antaa sinulle mahdollisuuden luoda kotisivuillesi monipuolista sisältöä helposti. Esimerkiksi nämä kotisivut on asennettu vertailussa mukana olevalle Elementor Pro kotisivueditorille, jolla myös tämä julkaisu on kirjoitettu

Taustaa

WordPress on maailman suosituin (2017) julkaisualusta. Sitä käyttää miljoonat sivustot ympäri maailman, 24% kaikista verkkosivustoista. WordPress on alunperin tarkoitettu blogialustaksi, josta se on kehittynyt kattavaksi sisällönhallintajärjestelmäksi (CMS – content management system). WordPress sisältää ns. oletuseditorin, joka on tarkoitettu blogien tekstin ja kuvien muokkaamiseen. Nykyään WordPresillä tehdään blogien lisäksi paljon muutakin, kuten kotisivuja yrityksille, verkkokauppoja, keskustelufoorumeja, videoalustoja, erilaisia varaus- ja jäsensivustoja sekä paljon muun tyyppisiä verkkosivuja.

WordPressin käytön monipuolistumisen myötä sen oma editori on jäänyt jälkeen ja nykyään vaaditaan enemmän ominaisuuksia ja mm. visualisointia, kun sivustoilta vaaditaan ja halutaan yhä enemmän. Tämä on tuonut markkinoille visuaaliset editorit (sisällöntuotantotyökalut), joista vertailussa nyt kolme erittäin suosittua editoria.

Vertailun tarkoituksena on antaa sinulle parempi käsitys eri editoreista ja niiden ominaisuuksista. Saat tietoa perusasioita enemmän ja sinun on helpompi valita sinulle sopiva kotisivueditori omille kotisivuillesi.

Kotisivueditorit: Ominaisuudet

Aluksi tarkastelemme taulukossa jokaisen kotisivueditorin ominaisuuksia. Myöhemmin artikkelissamme, saat yksityiskohtaisempaa tietoa helpottamaan omaa valintaasi.

  Elementor Divi Builder Beaver Builder
 
Ilmaisversio
Hinta Pro versiolle $49 $89 $99
Helppokäyttöisyys 4.9/5 4.8/5 5/5
Visuaalinen editori
In-line muokkaus
Moduuleja 53 46 31
Yksilöllisin ominaisuus Upotukset missä tahansa A/B testaus Beaver Themer
Valmiita sivumalleja +100 n.42 n.56
Jättää siistin koodin
Suorituskyky 3 1 2
Latauksia miljoona+ 500 000+ 500 000+

Mikä on suosituin kotisivueditori?

Taulukossa mainitut luvut perustuvat wordpress.org sivuston latauksiin Elementorin ja Beaver Builderin osalta ja Elegant Themes kotisivulla ilmoitettuun Divi Builderin osalta. Latausmäärien perusteella Elementor on selvästi suosituin kotisivueditori.

Hallintapaneelien vertailu

Elementor kotisivueditori

Elementorin käyttöliittymä on jaettu kahteen pääosaan:

Lisätäksesi uuden elementin sivullesi, sinun tulee vain ”raahata” (drag & drop toiminto) se vasemmasta valikosta paikalleen ja näet heti miltä se näyttää sivullasi.

Uuden osion voi lisätä helposti klikkaamalla ADD NEW SECTION painiketta.

Muokataksesi sisältöä tai elementtiä, sinun pitää vain klikata haluamaasi osaa ja voit muokata sitä vasempaan sivupalkkiin avautuvilla valinnoilla. Näet muutokset heti visuaalisessa näkymässä sivulla.

Muokataksesi sisältöä tai elementtiä, sinun pitää vain klikata haluamaasi osaa ja voit muokata sitä vasempaan sivupalkkiin avautuvilla valinnoilla. Näet muutokset heti visuaalisessa näkymässä sivulla.

Divi Builder kotisivueditori

Toisin kuin Elementor käyttöliittymä, jossa sinulla on suora näkymä tekemiisi muutoksiin sivupalkista, Divi Builder käyttöliittymässä teet kaikki muutokset suoraan sisällön päälle visuaalisessa näkymässä.

Alla olevasta kuvasta näkyy, miltä Divi Builderin käyttöliittymä näyttää.

Uudet moduulit (Divi Builderin nimitys elementeille) lisätään + kuvakkeilla

Kuten Elementorissa, voit kirjoittaa tekstiä suoraan visuaalisessa näkymässä haluamaasi moduuliin (elementtiin). Tosin Elementorin inline-muokkaus on joustavampi tapa, kuin Divi Builderin.

Muihin kuin tekstimoduuleihin voit käyttää pop-up ikkunaa, ennemmin kuin kirjoittaa suoraan visuaaliseen näkymään.

Beaver Builder kotisivueditori

Käyttöliittymän osalta Beaver Builderilla on enemmän yhteistä Elementorin, kuin Divi Builderin kanssa. Kuten Elementorissa, myös Beaver Builderissa on sivupalkki, jossa on käytettävät moduulit ja muut elementit. Voit ”raahata” elementin sivupalkista sivunäkymääsi helposti.

Beaver Builder käyttää Divi Builderin tavoin erillistä ponnahdusikkunaa moduulien muokkaamiseen.

Yksi Beaver Builderin eroista muihin vertailussa oleviin editoreihin on tapa luoda uusia osioita sivulle. Raahaat vain uuden osion edellisen rinnalle, kun Divi Builderissa ja Elementorissa uuden osion lisääminen pitää tehdä manuaalisesti ennen elementtien lisäämistä osioon. 

Millaisia moduuleja kotisivueditorit tarjoavat

Moduulit ovat tärkeä osa kotisivueditoria, koska niillä rakennat sivusi rakenteen. Moduulit ovat käytännössä sisältöelementtejä, joilla voit lisätä haluamaasi tyyppistä sisältöä kotisivuillesi. Edellisissä kuvissa, joissa vertailtiin käyttöliittymiä, oli esillä kahdenlaisia moduuleja:

Useimmat kotisivueditorit tarjoavat edellämainittujen lisäksi paljon erilaisia vaihtoehtoja kotisivujesi elementeiksi, kuten:

Kotisivueditoreihin saatavilla olevia elementtejä (moduuleja) kappalemäärittäin
  Elementor Divi Builder Beaver Builder
Moduuleja 53 46 31
WordPress vimpaimet Kyllä, mutta ei helposti
Muiden tekijöiden lisäosat

Taulukosta huomaa selvästi, että Elementor tarjoaa suurimman määrän erilaisia moduuleja ja siihen on saatavilla Beaver Builderin ohella WordPress vimpaimet helposti (eng. WordPress Widgets).

Koska jokaiseen kotisivueditoriin on saatavilla paljon erilaisia elementtejä ja moduuleja, emme perkaa niitä yksitellen artikkelissamme. Sen sijaan esittelemme muutamia suosituimpia ominaisuuksia eri kotisivueditoreissa vertailun helpottamiseksi.

  Elementor Divi Builder Beaver Builder
Flip Box
Audio player Kyllä, Soundcloud Ei, saatavilla vimpaimella
Animoidut otsikot
Portfolio
Sosiaalisen median jakopainikkeet
Sosiaalisen median "seuraa" kuvakkeet
Kirjautuminen (login)
Facebook kommentit
Jäsenyydet
Kommentointi

Beaver Builderilla on taulukossa eniten “EI” vasstauksia, mutta se ei vielä välttämättä pudota kokonaan pois kilpailusta.

Beaver Builder sisältää (kuten muutkin) edelleen kaikki perusmoduulit, joita todennäköisesti käytät päivittäin – vaikka siinä ei ole kaikkia hienoimpia elementtejä, kuten muissa editoreissa.

Voitko luoda sellaisen designin kuin haluat?

Vastaus lyhyesti: Et voi.

Et voi luoda välttämättä tyylikäitä designelementtejä ja asettelua, kuin haluaisit. Voit kuitenkin vaikuttaa kotisivujesi ulkoasuun kotisivueditorilla jossain määrin.

Kotisivueditorien tarkoituksena on tehdä kotisivujen teosta niin helppoa ja yksinkertaista, kuin mahdollista. Todennäköisesti haluat kuitenkin kotisivuillesi hieman enemmän yksilöllistä designia ja pelkkä moduulien raahaaminen oikeille paikoille ei riitä.

Tämän vuoksi haluat kotisivueditoriltasi enemmän mahdollisuuksia lisätä design elementtejä eri osioihin ja moduuleihin. Tässä kategoriassa on suurimmat eroavaisuudet eri kotisivueditorien välillä.

Pähkinänkuoressa voidaan todeta, että Elementor ja Divi Builder tarjoavat ehdottomasti parhaat mahdollisuudet tehdä haluamasi design. Beaver Builder ei kuitenkaan ole kovin kaukana perässä.

  Elementor Divi Builder Beaver Builder
Perus design
Mukautetut marginaalit
Mukautetut fontit
Mukautettu CSS
Mukautetut välit

Alla esitelty design-vaihtomahdollisuuksia eri kotisivueditoreilla

Elementor

Kun valitset elementin, Elementor avaa vasempaan sivupalkkiin kolme välilehteä.

Samalla tavalla sinulle on mahdollisuus muokata eri osioita ja asettaa niiden välisyydet, osioiden leveydet, yms.

Divi Builder

Kun valitset Asetukset (Gear)-kuvakkeen valittuasi ensin haluamasi moduulin, avautuu ponnahdusikkuna lisävalinnoilla.

Kuten Elementorissa, Divi Builderissa avautuu myös kolme välilehteä moduulien ja elementtien tyylin asettamiseksi. Välilehtien mahdollisuudet hieman poikkeavat Elementorin vastaavista.

Molemmat editorit, Elementor ja Divi Builder mahdollistavat monipuolisen sivujen muokkaamisen kohtalaisen helposti.

grp-banner

Samalla tavalla voit muokata kehittyneemmällä (Advanced) valinnalla muokata rivejä ja osioita, mukaanlukien mukautetut välit, korkeudet, yms.

Beaver Builder

Kuten Divi Builderissa, myös Beaver Builderissa avautuu ponnahdusikkuna tyylien muokkaamiseksi.

Kuten muissakin editoreissa, myös Beaver Builderissa avautuu kolme välilehteä:

Beaver Builder 2.0 sisältää myös lisäominaisuuksia tyylin muokkaamiseksi, joidenkin elementtien osalta. Esimerkiksi painikkeiden värityksen, tyylin ja läpinäkyvyyden.

Beaver Builder ei mahdollista esimerkiksi kustomoidun CSS koodin lisäämistä suoraan moduuliin. Vastaavasti Beaver Builderissa on ominaisuus, jota muilta editoreilta ei löydy: mahdollisuus näyttää tai olla näyttämättä haluttu moduuli kirjautuneelle käyttäjälle. 

Beaver Builderissa ei ole mahdollisuutta asettaa haluttuja välejä eri osioiden kesken, kuten voi tehdä muissa editoreissa.

Responsiivisuus, eli toimivuus mobiililaitteilla

Responsiivisuus on nykyään kotisivuille erittäin tärkeä ominaisuus, jota et voi jättää huomiotta. Et halua kotisivuja, jotka eivät toimi sujuvasti mobiililaitteilla.

  Elementor Divi Builder Beaver Builder
Näytä / piilota sisältöä mobiililaitteissa
Erikokoiset marginaalit laitteesta riippuen
Eri fonttikoko laitteesta riippuen
Muokatut raja-arvot Ei, tulossa pian Kyllä, mutta vain koko sivustolle - ei yksittäiselle sivulle

Elementorin käyttäjät olevan hyvin tyytyväisiä Elementor kotisivueditorin responsiivisuus mahdollisuuksiin. Alla kommentti, joka on saatu Codeinwp:n tekemällä Facebook kyselyllä ”Mitkä ovat kolme tärkeintä asiaa, jotka vakuuttivat sinut Elementor kotisivueditorista verrattuna muihin suosittuihin kotisivueditoreihin”.

Editorikohtaiset ominaisuudet

Elementor

Elementor on tehnyt loistavaa työtä kehittäessään ominaisuuksia, jotka erottavat sen kilpailijoistaan. Alla mainittu suurimmat eroavaisuudet:

Upotukset missä tahansa – voit lisätä vimpaimia (Widgets) ja ns. shortcode koodia mihin tahansa sivustollasi.

Huoltotila / Tulossa pian tila – Voit tehdä ”Huoltotilassa” tai ”Tulossa pian” sivut ja aktivoida kyseiset sivut suoraan Elementorin käyttöliittymästä.

Shape Dividers – mahtava design elementti, jolla voit lisätä elementtien välille SVG-muotoja Elementorin käyttöliittymästä

Divi Builder

Divi Builderissa on erinomainen sisäänrakennettu ominaisuus: Split testing

Divi Builder antaa sinulle mahdollisuuden tehdä helposti A/B testausta eri moduuleilla editorin hallintapaneelista. Voit vertailla eri versioiden toimivuutta käytännössä ja valita parhaiten toimivan.

Muita yksilöllisiä ominaisuuksia Divi Builderissa ovat:

Divi Role Editor – voit rajoittaa käyttäjien pääsyn tiettyihin toimintoihin tai jopa moduuleihin. Kahdessa muussakin editorissa on rooliin perustuvia rajoituksia, mutta ne eivät ole yhtä kattavia kuin Divi Builderissa.

Lock elements – voit ”lukita” haluamasi tietyt moduulit, välttääksesi vahingossa vahingoittamasta valmiita moduuleja.

Copy module style – sen sijaan, että kopioisit koko moduulin, voit kopioida moduulista pelkän tyylin toiseen moduuliin.

Klikkaamalla hiiren kakkospainikkeita, näet valikon eri toiminnallisuuksia. Kummallakaan muusta kotisivueditorista ei voi tehdä muutoksia hiiren kakkospainikkeella.

Beaver Builder

Yksi Beaver Builderin ainutlaatuisista ominaisuuksista on hiljattain julkaistu Beaver Themer lisäosa. Tämä lisäosa on erillinen hankinta, mutta sen avulla voit käyttää samaa Beaver Builder -liittymää koko teeman, kuten otsakkeiden, yksittäisten postin asettelujen ja muiden ominaisuuksien, rakentamiseen.

Lisäksi Beaver Builder on ainoa laajennus, joka sisältää oletusarvoisesti White Label ominaisuuden. Vaikka tavalliset käyttäjät eivät ehkä pidä tätä tärkeänä, monet WordPress-kehittäjät pitävät ominaisuutta hyödyllisenä.

Kotisivueditorit ja niiden valmiit sivu- ja osiomallit

Vaikka voit rakentaa kotisivut alusta loppuun editoreilla, sinun ei välttämättä tarvitse. Jokainen kotisivueditori tarjoaa valmiita kotisivumalleja käyttöösi, joita voit muokata haluamallasi tavalla.

  Elementor Divi Builder Beaver Builder
Valmiita sivumalleja 100+ ~42 ~56

(*) Lisäksi Elementoriin on saatavilla valmiita sivumalleja lähes 500 kpl kohtuullisen edullisesti, esimerkiksi Template Monster palveluntarjoajalta. Muihinkin editoreihin on saatavilla joitakin kolmannen osapuolen valmis-sivuja.

Elementor

Yksi Elementorin eduista muihin nähden on valmiiden kotisivumallien määrä, joita on yli 100 kpl. Mallit sisältävät kaiken tarvittavan:

Jokaiselle sivulle on useita vaihtoehtoja, jotka on suunniteltu eri toimialoille. Lisäksi aiemmin mainitsemamme mukaisesti, saatavilla on useita satoja malleja eri tekijöiltä.

Voit myös tallentaa oman sivusi tai osia siitä Elementorin kirjastoon, josta ne ovat helposti myöhemmin saatavillasi.

Divi Builder

Divi Builder sisältää n. 42 valmiiksi suunniteltua sivupohjaa. Sen sijaan, että keskityttäisiin tiettyihin toimialoihin, kuten Elementorin sivupohjissa, Divi Builderin ulkoasut ovat yleisempiä sivutyyppejä, joita voit muokata tarpeen mukaan (lisäksi on saatavilla useita kolmannen osapuolen Divi-sivupohjia internetissä).

Kuten Elementorissa, voit myös tallentaa kirjastoosi moduuleja, osioita tai täydellisiä sivuja ja voit käyttää niitä uudelleen.

Beaver Builder

Beaver Builderilla on n. 56 valmista sivupohjaa, jotka on jaettu kahteen kategoriaan:

Laskeutumissivut on jaettu toimialoittain, kun taas sisältösivut ovat yleistyksiä.

Kuten muissa editoreissa, voit myös tallentaa kirjastoosi osioita, jotta niitä voi käyttää helposti uudelleen.

Lähdekoodin laatu ja ”lukitus”

Editorit saavat usein huonoa palautetta monilta ohjelmoijilta lähdekoodin laadusta. Lisäksi toiset editorit (kuten Divi Builder) tekevät ns. ”lukituksen” ja poistaessasi editorin WordPressistä, sivustostasi pelkkä sekamelska koodia ja rakenne hajoaa.

Vertailemme tässä osiossa kahta asiaa: Millaista koodia editori tuottaa ja mitä tapahtuu poistaessasi editorin käytöstä.

Vertailu tehdään luomalla jokaiselle editorille samanlainen sivu. Näemme miltä koodi näyttää eri editoreilla ja tärkeimpänä: mitä tapahtuu poistaessasi lisäosan (editori) käytöstä.

Elementor

Elementorin koodi näyttää tältä, kun se on aktiivinen – eli Elementor on käytössä.

Ja tältä se näyttää, kun poistat Elementorin käytöstä.

Ei kovin paha! Vaikka menetät hienot muotoilusi ja kuvakkeet, jäljelle jää puhdas koodi. Koodissa on edelleen jäljellä esimerkiksi <h2> tunnisteet ja luettelot ja paljon enempää editorin tekijältä ei voi pyytää.

Divi Builder

Divi Builderin koodi näyttää tältä, kun se on aktiivinen – eli Divi Builder on käytössä. Lähes samanlainen kuin Elementorilla, eikö?

Mutta kuinka ollakaan, sinua odottaa ikävämpi yllätys poistaessasi Divi Builderin käytöstä…

…koodi on pelkkää sotkua ja tämän ongelman vuoksi monet kritisoivat Divi Builderia. Tämä on jotakin mitä et halua.

Beaver Builder

Beaver Builderin koodi näyttää tältä, kun se on aktiivinen – eli samankaltaiselta kuin kahdella edellisellä.

Poistaessasi Beaver Builderin käytöstä, se jättää jälkeensä lähes identtisen koodin Elementorin kanssa.

Suorituskyvyn vertailu

Koodin laadun lisäksi, toinen tärkeä tekijä on kuinka editori vaikuttaa sivuston suorituskykyyn. Testisivustoihin ei ole tehty vertailussa mitään optimointeja nopeuden parantamiseksi.

  Elementor Divi Builder Beaver Builder
Latausaika sekuntia 1,47 1,32 1,38
Sivun koko 698,2 kB 606,0 kB 639,0 kB
Kyselyjen määrä 43 30 33

Latausajat ovat niin lähellä toisiaan, ettei siitä voi hyvällä omalla tunnolla vetää suurempia johtopäätöksiä editorien paremmuudesta. Jokainen editori tuntuu latautuvan nopeasti, mutta tuloksien valossa Divi Builder on hieman muita nopeampi. Kannattaa kuitenkin huomioida, että tulokset saattavat hieman vaihdella jokaisella mittauskerralla eri muuttujien vuoksi.

Hintavertailu

Elementor ja Beaver Builder toimivat omalla konseptillaan, kun taas Divi Builder on osa Elegant Themes jäsenyyttä.

  Elementor Divi Builder Beaver Builder
Ilmaisversio
PRO version hinta (USD) $49 $89* $99
Elinikäinen lisenssi
* Sisältää oikeuden kaikkiin Elegant Themes tuotteisiin

Helppokäyttöisyys ilman aiempaa kokemusta

Yleisesti ottaen kaikkia kolmea editoria on kohtalaisen helppo köyttää, mutta vertailun vuoksi taulukossa puolueeton arvio editorien helppokäyttöisyydestä.

  Elementor Divi Builder Beaver Builder
Arvio asteikolla 1-5 4,9/5 4,8/5 5/5

Eli käytännössä kaikki ovat todella lähellä toisiaan ja erot ovat hyvin olemattomia. Kaikille editoreille löytyy myös lukuisia opasvideoita (englanniksi) esimerkiksi Youtube suoratoistopalvelusta.

Mikä kotisivueditori on paras?

Voit aina tietenkin kokeilla kaikkia editoreja ja valita niistä itsellesi mieluisimman. Todennäköisesti kuitenkin luet tätä artikkelia, koska haluat hieman apua valintaasi? Uudet Kotisivut valitsi Elementorin, jota käytämme asiakkaidemme sivustoilla. Elementor on meidän mielestämme paras ja monipuolisin kaikista, mutta toki asioista voidaan olla montaa mieltä ja kaikki eivät luonnollisesti pidä samoista asioista.

Elementorilla ja Beaver Builderilla on enemmän yhtäläisyyksiä keskenään, kun taas Divi Builder eroaa näistä kahdesta enemmän. Tämän vuoksi on ehkä hieman helpompaa tehdä jakoa Elementorin / Beaver Builderin ja Divi Builderin välillä. Elementorin ja Beaver Builderin välillä eron tekeminen on hieman haastavampaa useiden yhtäläisyyksien vuoksi.

Helpotamme valintaasi muutamalla kysymyksellä

Valintasi on Elementor kotisivueditori

Valintasi on Divi Builder kotisivueditori

Valintasi on Beaver Builder kotisivueditori

Tähän päättyy kolmen mahtavan kotisivueditorin vertailu. Vertailun lähteenä olemme käyttäneet alkuperäisversiota, jonka on laatinut Codeinwp. Voit lukea englanninkielisen artikkelin tästä kokonaisuudessaan.

Loppuun vielä toteamme: Tilatessasi uusien kotisivujesi toteutuksen meiltä, teemme kotisivusi Elementor editorilla. Osaavat ammattilaisemme luvat sinulle juuri sellaisen ulkoasun, jonka haluat ja rakentavat sen Elementorin päälle. Käytössäsi on aina Elementorin Pro versio ja pääset nauttimaan kaikista sen suomista eduista.

Ota meihin yhteyttä ja pyydä tarjous Elementor kotisivuista!

Kiitos, kun luit artikkelimme. Toivomme, että siitä oli sinulle hyötyä kotisivueditori valinnassasi!

Mitä saisi olla?

Kotisivut yritykselle

Haluatko edullisesti yrityksesi näköiset kotisivut, joilla erotut kilpailijoistasi ja saat parempia tuloksia netissä?

Edulliset kotisivut kotisivukaupasta

Valitse kotisivut yrityksellesi sadoista vaihtoehdoista ja saat ne käyttövalmiina yhdessä arkipäivässä.

Ota yhteyttä ja kysy lisää