Oxygen Builder esittely (Tammikuu 2020)

Oxygen Builder esittely (Tammikuu 2020)

Olen käyttänyt Oxygen Builderia kohta 2 vuotta aktiivisesti eri asiakasprojekteissa. Jopa nämä sivut, jota luet tällä hetkellä, on rakennettu Oxygen Builderin avulla. Oxygen on siis sivunrakentaja lisäosa WordPressiin, joka on selkeästi kehitetty hieman harjaantuneemmille kotisivujen rakentelijoille. Oxygenin vahvuus on siinä, että se antaa muokata sivun PHP:tä, Javascriptiä ja CSS:ää suoraan builderista. Tämä ei ehkä kuullosta heti niin hienolta, mutta lue eteenpäin niin yritän avata tätä juttua myös sinulle.

Huom! Oxygen Builder tai kukaan muu ei ole maksanut meille tämän blogiartikkelin kirjoittamisesta. Artikkelissa ei myöskään ole mitään affiliate linkkejä.

Historia lyhyesti

Softlyy yritys julkaisi ensimmäisen version vuonna 2016. Idea oli julkaista sivunrakentaja, joka antaa käyttäjälle mahdollisimman paljon valtaa ja voima muokata sivujansa suoraan WordPressin kautta. Projekti on edennyt tästä melkoista vauhtia ja uusia päivityksiä nähdään aika tasaisesti kvartaaleittain. Kirjoitushetkellä olemme versiossa 3.1.1 ja uusimpien ominaisuuksien joukossa on Gutenberg integraatio, WooCommerce integraatio ja repeater fieldsit.

Teemat suoraan roskakoriin

Oxygen Builderin erikoisuus on myös sen lähestymistapa teemoihin. Se nimittäin poistaa teemat kokonaan käytöstä. Oxygen ei ole myöskään itsessään teema. Tämän sivunrakentajan avulla rakennat siis koko sivustosi ulkoasun alusta asti itse.

Sivun luominen Oxygen Builderilla

Luon uuden sivun havainnollistaakseni teille, miten Oxygen toimii käytännössä. Rakennamme tällä hetkellä uutta alasivua Tuonetti:n kotisivuille myyntiin tuleville SSL-sertifikaateille, joten sitä on hyvä käyttää esimerkkinä.

Normaali workflow meillä sisältää ensin sivun headerin ja footerin templaatin rakentamisen ja sitten itse sivun sisällön rakentamisen. Oxygenissä voit siis rakentaa templaatteja, jotka sitten näkyvät aina sivujen sisällössä. Näiden templaattien päälle on sitten helppo rakentaa itse sivuston sisältö. Olemme jo aikaisemmin rakentaneet templaatin nimeltä "Header & Footer" sivuillemme.

Kun header on rakennettu, alle lisätään "Inner Content" -block, joka renderöi itse sivuston sisällön. Näin voimme asettaa Headerin näkymään joka sivulla samassa kohtaa ja sivuston sisällön eli "Inner Content" näkymään oikein.

oxygen builder muokkaus

Oxygen Builderissa on itsessään jo mukana suuri valikoima erilaisia "Block" -elementtejä, joiden avulla sivujen rakentaminen nopeutuu valtavasti. Pystyt tallentamaan eri tekeleitäsi ns. "Reusable blocks" osioon. Näin pystyt rakentamaan itsellesi useasti toistuvia elementtejä ja entisestään nopeuttamaan rakentelua. Meillä esimerkiksi sivujen ensimmäinen osio toistuu useasti, sillä se sisältää kuvakkeen, otsikon ja lyhyen esittelytekstin.

Rakentelu on siis yksinkertaisuudessaan helppoa, mutta muuttuu nopeasti hankalammaksi kun hienoja efektejä halutaan sivulle. HTML, Javascript ja PHP osaaminen on siis hyödyksi tätä builderia käytettäessä.

10 Syytä miksi pidän Oxygen Builderista

  1. Sivuston koodi pysyy puhtaana, eikä ylimääräistä koodia ladata aina. Esimerkiksi Divi ja Elementor lataa vakiona valtavan määrä täysin turhaa koodia, joka hidastaa sivuston latautumista. Oxygenin kanssa sivuston koodi pysyy aina puhtaana ja sivut latautuvat aina nopeasti, jopa ilman välimuisti tai muita optimointi lisäosia.
  2. Kustomoitavuus on huomattavasti parempi kuin kilpailijoilla. Globaalit värit ja lisättävät class attribuutit helpottavat sivuston värien ja tyylien yhdenaikaiset muokkaamista. Vaikka huomaisit kehityksen loppuvaiheessa, että fontti ja värit ovat väärät niin pystyt nämä kaikki muuttamaan yhdellä muutoksella.
  3. Helposti lisättävä PHP, Javascript ja HTML. Oxygenissä itsessään on "Code Block" niminen elementti, joka antaa käyttäjän lisätä itse koodaamaa koodia suoraan builderin sisällä.
  4. Flexbox CSS integraatio. Oxygen tukee natiivisti Flexboxia, joka tekee responsiivisen sivujen rakentamisesta entistä vaivattomampaa ja parempaa. Tutustu Flexboxiin täällä.
  5. Custom Post Types ja ACF yhteensopivuus. Voit rakentaa jokaiselle CPT:lle oman templaatin ja tuoda ACF dataa natiivisti builderin avulla. Tämä helpottaa dynaamisten sivujen rakentamista.
  6. Dynaamisista sivuista puheen ollen, Oxygenin repeater fields on ainut laatuaan toistuvien elementtien rakentamista varten tarkoitettu block. Tällä ominaisuudella voit rakentaa todella hienoja ja dynaamisia listauksia vaikkapa vuokrattavista taloista tai myytävistä autoista.
  7. Sivut eivät näytä koskaan samalta. Yhä useampi suomalainen (tai ulkomaalainen) verkkokauppa tuntuu olevan aina rakennettu samoilla teemoilla, elementorilla ja woocommercella. Niissä ei ole mitään uniikkia enään. Oxygenilla tätä ongelmaa ei tule, koska kaikkea voi muokata.
  8. WooCommerce ja Gutenberg integraatiot. Lue näistä lisää alempana.
  9. Mahtava yhteisö tukemassa. Tosin kuin Elementorin Facebook ryhmä niin Oxygenin FB ryhmässä keskustelu on hieman teknillisempää ja kehittävämpää. Facebook seinä ei siis täyty toistuvasti postauksilla, jossa kysytään, mikä teema on paras Elementorin kanssa tai millä caching pluginilla Elementor sivut saa latautumaan vikkelästi.
  10. Suuri määrä hyödyllisiä videoita, jotka auttaa rakentamaan toimivia sivuja. Oxygenin tiimi julkaisee Youtube kanavallaan paljon rahanarvoisia vinkkejä.

Puhas koodi = Nopeat sivut

Alla muutama esimerkki sivuista, jotka on rakennettu Oxygenin kanssa. Täältä löydät myös hyvän dokumentaation siitä, miten paljon muiden sivunrakentajien mukana latautuu turhaa koodia, vaikka sivut olisivat täysin tyhjät.

sivujen latausnopeus

WooCommerce integraatio

Oxygenin yksi uusimpia ja toivotuimpia ominaisuuksia on WooCommerce integraatio. Tämän ominaisuuden myötä Oxygen teki ison harppauksen eteenpäin, sillä se mahdollistaa todella uniikkien WooCommerce sivujen luomista. Globaalien muuttujien kuten värien ansiosta uuden e-commerce sivun luominen on helpompaa kuin koskaan. Eri blockeja käyttäen voit rakentaa tuotesivuista ja kategoria sivuista juuri sellaisia kuin haluat. WooCommerce sivut eivät siis näytä aina samalta kuin muut.

Gutenberg integraatio

WooCommerce integraatio on toki ominaisuus, joka muiltakin sivunrakentajilta löytyy, mutta tätä ominaisuutta harvalta löytyy. Gutenberg integraatio tuo Oxygen Builderilla rakennetut blockit suoraan WordPressin Gutenberg editoriin. Pystyt siis rakentamaan sivuston, jossa koko Oxygen piilotetaan loppukäyttäjältä ja asiakkaasi pääsee editoimaan sivuston sisältöä suoraan Gutenbergistä. Kiitos tämän ominaisuuden olen pystynyt tarjoamaan omille asiakkailleni sivuja joita he itse voivat muokata ilman, että heidän tarvitsee nähdä mitään vaikeakäyttöistä UI:ta. He tarvitsevat vain lyhyen koulutuksen siitä, miten Gutenbergia käytetään. Oxygen tiimi on tehnyt hyvän videon, jossa esitellään tämä ominaisuus käytännössä.

Oxygen vs Elementor

Sitten vertailuun, joka teitä kaikkia kuitenkin kiinnostaa eniten tässä koko artikkelissa. Miten Oxygen pärjää tuota toista sivunrakentaja jättiä vastaan. Elementor on kuitenkin Suomessa (ja itse asiassa muualla maailmassa) melkoisesti tunnetumpi kuin Oxygen.

Plussat

OXYGEN BUILDERELEMENTOR
+ Laaja muokattavuus+ Helppo käyttöisyys
+ Oman koodin upotus+ Paljon lisäosia
+ Puhtaampi koodi ja nopeammat sivut+ Valtavasti dokumentaatiota
+ Flexbox ja horisontaalit elementit ilman columneja+ Nopeampi rakentaa sivut alusta loppuun
+ Parempi dynaamisen datan käyttö+ JS Parallax

Miinukset

OXYGEN BUILDERELEMENTOR
- Pidempi oppimiskäyrä- Raskas pohja, joka hidastaa sivuja
- Vaatii enemmän osaamista (JS, HTML, PHP)- Muokattavuus heikko, custom koodin käyttö ei niin helppoa.
- Suppea tunnettavuus ja vähemmän ulkopuolista tukea- Bloatin määrä lisääntymään päin
- Ei yhtä paljoa yhteensopivia lisäosia.- Ei repeater fieldejä, eikä laajaa tukea dynaamiselle sisällölle.

Se yksi iso miinus yli muiden

Päivitys! Undo & Redo ominaisuus löytyy nyt Oxygenistä useiden muiden parannusten lisäksi.

Oxygen Builder on selkeästi nuorempi kuin muut sivun rakentajat. Sen huomaa ns. perusominaisuuksien puutteesta. Oxygenin isoin miinus on "undo" & "redo" ominaisuuksien puuttuminen. On toki vain ajan kysymys, milloin nämä ominaisuudet päivitetään, mutta kirjoitushetkellä niitä ei vielä ole. Eli kun teet vakavan virheen niin joudut lataamaan revision historystä edellisen version. Välillä tämä ei kuitenkaan pelasta ja saattaa aiheuttaa turhautumista, kun joudut tekemään joitain askelia uusiksi. Suosittelen siis rämpyttämään "Save" -nappia melko aktiivisesti.

Lisenssi ja hinta

Oxygen Builder vs muut sivunrakentajat käyttää hieman erilaista hinnoittelumenetelmää. Kun ostat Oxygen Builderin niin saat kaikki tulevaisuuden päivitykset siihen. Eli et tule koskaan maksamaan mitään vuosittaista lisenssiä. Lisenssissä ei ole myöskään rajoitusta kuinka monelle sivulle sen voit aktivoida. Oxygenin hinnat alkavat 99 dollarista.

Yhteenveto

Sanon sen suoraan: Suosin selkeästi Oxygen Builderia. Siksi olen jäävi sanomaan, kumpi on todellisesti parempi. Mielestäni kuitenkin kummallakin on oma paikkansa. Elementor on edelleen jätti ja monen suosima aivan syystäkin. Oxygen toisaalla on huomattavasti suositumpi ammattilaisten parissa. Eli suosittelen edelleen Elementoria sellaisille, ketkä ovat alkusuoralla WordPress kehittämisessä ja haluaa nopeasti päästä eteenpäin. Oxygeniä suosittelen sellaiselle, joka on vuosia raaka koodannut sivuja ja tutustunut moniin eri järjestelmiin jo aikaisemmin.

Lisää materiaalia

Jos tämä ei vielä riittänyt parantamaan käsitystäsi Oxygen Builderista niin ei hätää, tässä lista todella hyviä resursseja. Mikäli Oxygen Builder kiinnostaa muuten niin ole toki yhteydessä niin autan mielelläni, olen kuitenkin rakentanut jo lähemmäs 100 sivustoa Oxygenin kanssa. Saatan tietää yhtä sun toista.