Als je een beetje actief bent in de WordPress community heb je vast al wel eens gehoord van Oxygen, een nieuwe drag & drop page builder die de strijd aan gaat met o.a. Divi en Elementor. In deze review lees je wat je allemaal kunt met Oxygen en of het iets voor jou is.
Oxygen : een krachtige site builder
Op 20 juni 2018 is Oxygen 2.0 gelanceerd, en ik lees steeds vaker dat mensen overstappen op deze nieuwe builder.
Dat is niet zonder reden, want Oxygen is een hele krachtige tool. Oxygen is niet zomaar een page builder, maar een complete site builder. Je kunt namelijk niet alleen de content van je website aanpassen, maar ook de header, footer, sidebars enzovoorts. Je kunt dus zelf bepalen waar dingen als het logo, de zoekfunctie, en het navigatiemenu komen.
Al die onderdelen zijn beschikbaar als module zodat je ze eenvoudig kunt toevoegen. Oxygen biedt je de keuze uit meer dan 60 modules, die duidelijk zijn onderverdeeld. Naast modules voor het navigatiemenu, een loginformulier en een zoekbalk zijn ook alle standaard dingen aanwezig, zoals secties, kolommen, tekstblokken, buttons, links, afbeeldingen, galerijen, prijstabellen, testimonials, voortgangsbalken, tabs, accordeons en icons van font awesome.
Als je op een module klikt zie je 2 tabs: primary en advanced. Onder de primary tab vind je de basisinstellingen voor de betreffende module. Bij een tekstmodule kun je hier bijvoorbeeld de tekstkleur, font family, lettergrootte en font weight aanpassen en bij een voortgangsbalk stel je hier het te tonen percentage, de animatie en de kleuren in.
Die kleuren kun je instellen als global color; als je zo’n global color wilt aanpassen hoef je dat maar op 1 plek te doen, waarna die kleur ook op alle andere plekken op de website waar deze gebruikt wordt automatisch wordt aangepast. De tekst pas je altijd in de visual builder zelf aan, simpelweg door er op te klikken en te typen.
Onder het advanced tabblad vind je vervolgens diverse styling opties. Hier stel je dus bijvoorbeeld de achtergrond in, padding en margin (die laatste kun je ook gewoon slepen naar de gewenste hoogte in de visual builder), randen, box- en tekstschaduw en enkele leuke filter effecten zoals blur, sepia en grijstinten. Tot slot kun je hier ook custom CSS en javascript code invoeren.
Daarnaast kun je templates maken die je kunt toewijzen aan pagina’s, berichten, archiefpagina’s, WooCommerce pagina’s, je 404 pagina etcetera. Je kunt per template bepalen voor welke type posts deze gebruikt worden (bijvoorbeeld alleen voor berichten, of voor berichten en pagina’s), en je kunt zelfs instellen dat je een template alleen wilt gebruiken bij een bepaalde categorie. Berichten uit de categorie “nieuws” kunnen dus bijvoorbeeld een ander uiterlijk krijgen dan andere berichten.
Oxygen is niet de enige page builder waarmee dit kan; Elementor en Beaver bieden deze optie al langer. Maar waar je bij Elementor en Beaver die onderdelen aanpast in een bestaand thema bouw je met Oxygen een compleet nieuw thema, zonder afhankelijk te zijn van een ander thema dus. Sterker nog; je bestaande thema wordt volledig vervangen door Oxygen.
Een andere hele krachtige feature van Oxygen is Dynamic Data. Daarmee kun je automatisch dynamische content invoegen, wat met name erg handig is bij het bouwen van een template. Als je bijvoorbeeld de template voor berichten wilt maken kun je met dynamic data de titel, publicatiedatum, uitgelichte afbeelding en natuurlijk de tekst zelf automatisch invoegen op de door jou gewenste plek. Daarnaast kun je ook widgets op iedere gewenste plek toevoegen – ook degene die door andere plugins worden aangemaakt.
Net als bij de meeste andere page builders kun je ook bij Oxygen elk onderdeel van je design opslaan in een bibliotheek zodat je deze ergens anders op de site kunt hergebruiken.
Zo kun je bijvoorbeeld een call to action button maken die je op iedere pagina kunt invoegen.
Deze bibliotheek bevat ook een aantal zogenaamde design sets; standaard designs die je zo kunt importeren. Zo is het meeste werk al voor je gedaan en hoef je alleen nog maar de kleuren en content hoeft aan te passen. Op dit moment zijn er nog maar een stuk of 10 van deze design sets, maar elke design sets bevat weer tientallen templates om uit te kiezen.
Zo kun je binnen 1 design set bijvoorbeeld kiezen uit verschillende headers, footers, blog designs, contactpagina’s enzovoorts. Alle onderdelen uit zo’n design set passen prima bij elkaar, dus je kunt bijvoorbeeld header #1 prima combineren met footer #3 en blog design #5 en toch een samenhangend geheel krijgen.
Al deze designs zijn standaard responsive, dus ook geoptimaliseerd voor tablets en smartphones. Ook je eigen designs kun je gemakkelijk optimaliseren voor kleinere schermen,
waarbij je alle eigenschappen per device kunt aanpassen. Je kunt dus bijvoorbeeld voor een smartphone een andere achtergrondkleur instellen dan voor een desktop, of een kleinere lettergrootte, of een onderdeel überhaupt verbergen.
Update: Oxygen 3.0 met WooCommerce builder, Gutenberg integratie en conditionele weergave
Op 3 september 2019 werd Oxygen 3.0 gelanceerd, met daarin o.a. de lang verwachte WooCommerce builder waarmee je zelf je hele WooCommerce webshop kunt vormgeven.
Zo kun je o.a. instellen hoeveel kolommen je winkelpagina moet hebben en welke kleur de buttons moeten hebben, maar ook of die buttons een schaduw moeten hebben, welk lettertype ze moeten hebben enzovoorts. Zelfs elementen als de “sorteer op” dropdown kun je helemaal naar wens vormgeven.
Ditzelfde geldt ook voor andere WooCommerce pagina’s, zoals de winkelwagen pagina, de checkout pagina en zelfs de mijn account pagina. Hoewel je de inhoud van die pagina’s niet kan aanpassen kun je wel de vormgeving helemaal naar wens aanpassen.
De inhoud van je productpagina kun je wel helemaal naar wens aanpassen. Je kunt dus zelf bepalen waar je de productafbeelding wilt hebben, de “in winkelwagen” knop, de prijs, de reviews, de gerelateerde producten enzovoorts. Elk element kun je zelf toevoegen – of juist weglaten – en natuurlijk helemaal naar wens vormgeven.
De tweede belangrijke functie in Oxygen 3.0 is de mogelijkheid om iedere sectie of pagina bewerkbaar te maken met Gutenberg, de standaard editor van WordPress.
Dit is met name handig voor webbouwers die websites bouwen voor klanten, maar die klanten geen toegang willen geven tot Oxygen (dat is per gebruikersrol in te stellen).
Zo’n webbouwer ontwerpt dan een pagina en vinkt aan dat die pagina (of sectie) bewerkt moet kunnen worden in Gutenberg. Vervolgens kan de klant zelf dingen als teksten en afbeeldingen aanpassen in Gutenberg. De mogelijkheden die de klant heeft zijn in dit geval wel behoorlijk beperkt; hij kan bijvoorbeeld geen kleuren aanpassen, animaties toevoegen, de volgorde van elementen wijzigen enzovoorts, en Gutenberg werkt in de backend. Maar goed, veel webbouwers willen ook niet dat de klant teveel kan aanpassen – en veel klanten ook niet trouwens.
Een derde belangrijke toevoeging – die overigens al in enkele maanden eerder toegevoegd is in versie 2.4 – is conditionele weergave. Hiermee kun je heel precies bepalen wanneer een bepaald element moet worden weergegeven. Hiermee kun je bijvoorbeeld een element alleen weergeven voor ingelogde gebruikers met een bepaalde gebruikersrol, of alleen op een bepaalde pagina, of juist niet op een bepaalde pagina, of alleen in een bepaalde categorie, of alleen op maandag… een hele krachtige toevoeging dus.
Scherp geprijsd
Oxygen is behoorlijk scherp geprijsd; voor slechts $ 99,00 heb je een licentie met levenslange update en support, en dat ook nog eens voor een onbeperkt aantal websites.
Men heeft er wel voor gekozen om de WooCommerce builder en de Gutenberg integratie als aparte modules uit te brengen. Dat is enerzijds om de basisversie van Oxygen zo licht mogelijk te houden; als je geen WooCommerce website hebt is het ook niet nodig om de code van de WooCommerce builder te laden, dat zou de builder en de website alleen maar onnodig langzamer maken. Datzelfde geldt voor de Gutenberg integratie.
Deze modulaire opbouw geeft Oxygen echter ook de mogelijkheid de prijzen te verhogen; als je de WooCommerce builder erbij wilt betaal je daar meer voor, en dat geldt ook voor de Gutenberg integratie. Dat geldt overigens alleen voor nieuwe klanten: als je al een licentie had voor Oxygen 2 krijg je deze nieuwe modules er gratis bij.
Gebouwd voor developers
De Oxygen builder biedt dus flink wat mogelijkheden tegen een zeer aantrekkelijke prijs, maar toch zal deze relatief nieuwe page builder de markt voorlopig nog niet gaan veroveren. Dat komt vooral omdat de interface simpelweg (nog) niet gebruiksvriendelijk genoeg is voor “gewone” WordPress gebruikers. Zo wordt er erg veel gebruik gemaakt van CSS termen zoals “float”, “overflow”, “clear”, “position” en “text-transform”, kun je met classes werken om gemakkelijk meerdere elementen tegelijk aan te passen en moet je een element op display: none instellen om het te verbergen op smartphones.
Dat is allemaal prima voor ervaren webbouwers en andere mensen die redelijk thuis zijn in CSS, voor hen is Oxygen een enorm krachtige tool die hun werk een stuk eenvoudiger maakt, want je kunt vrijwel alles instellen zonder zelf 1 regel code te hoeven schrijven. Aangezien Oxygen dus zelf de CSS code toevoegt – net als elke andere page builder overigens – kun je het ook best gebruiken zonder CSS kennis, maar leren werken met Oxygen zal wel een stuk lastiger zijn dan leren werken met een meer gebruiksvriendelijke page builder als Elementor of Divi.
Overigens is de documentatie voor Oxygen prima in orde, inclusief uitgebreide video tutorials.
Conclusie
Oxygen is een enorm krachtige tool als je een beetje thuis bent in CSS termen, maar waarschijnlijk niet gebruiksvriendelijk genoeg voor de gewone WordPress gebruiker.
De nieuwe Gutenberg integratie maakt Oxygen echter wel een stuk meer geschikt voor webbouwers waarvan de klant zelf teksten en afbeeldingen wil kunnen aanpassen.
Als je alleen de inhoud van je pagina’s wilt kunnen aanpassen – bijvoorbeeld kolommen maken, kleuren aanpassen, animaties toevoegen – kun je waarschijnlijk beter voor een wat meer gebruiksvriendelijke page builder als Elementor of Divi kiezen.
Wil je echter volledige controle over je website en zelf kunnen bepalen hoe de header, footer en elk ander onderdeel eruit komt te zien, en ben je bereid wat tijd te investeren om de werking van Oxygen onder de knie te krijgen? Dan is het echt een enorm krachtige tool die ook nog eens super scherp geprijsd is.
Twijfel je nog of Oxygen iets voor jou is? Je kunt het gratis uitproberen op https://oxygenbuilder.com/try/. Daarnaast is er ook een 60 dagen niet goed, geld terug garantie 🙂
Hulp nodig met Oxygen of een andere page builder?
Heb je hulp nodig met Oxygen of een andere page builder zoals Divi of Elementor? Of zoek je iemand die een website voor je kan maken hiermee? Dan ben je bij Bob de webbouwer aan het juiste adres!
Vraag direct een vrijblijvende offerte aan
Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂
