Giorgio le confesse : il ne peut plus « vivre sans lui ». Pour David, c’est tout simplement  « un rêve pour développeurs ».

Enfin, Mark affirme qu’il a participé à changer sa carrière. Rien que ça.

Giorgio, David et Mark ne sont ni mes groupies, ni les membres d’un nouveau boys band en vogue.

Giorgio, David et Mark sont des utilisateurs convaincus – fanatiques ? – d’Oxygen Builder, un constructeur de page qui les rend donc raides dingues.

En jetant un œil sur le site officiel du produit en question, on a l’impression de tomber sur la perle rare. 

Un genre de bombe qui semble encore plus puissante qu’Elementor ou le Divi Builder, les deux constructeurs de page les plus maousses costauds du marché.

Batman court avec une bombe.
Pchhhhhiiiiit…et boom !

Forcément, vous vous doutez qu’on a eu envie d’y voir plus clair.

Alors, Oxygen mérite-t-il autant d’éloges ? Qu’est-ce qui se cache réellement sous sa carapace, une fois que l’on a gratté le vernis en surface ?

Est-il fait pour vous, si vous comptez l’adopter ?

C’est ce que vous allez découvrir tout de suite dans ce nouvel article.

Initialement rédigé en novembre 2019, cet article a été mis à jour pour la dernière fois en novembre 2022.

Hébergez votre site chez o2switch

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

ESSAYEZ O2SWITCH
o2switch

Qu’est-ce qu’Oxygen Builder ?

Un page builder… qui n’en est pas vraiment un

Lancé en juillet 2016, Oxygen est vraiment un constructeur de page à part. 

Comme certains de ses concurrents (Elementor Pro, Divi Builder, Beaver Builder), on devrait plutôt le qualifier de constructeur de site, dans la mesure où il permet d’agir sur tous les éléments de votre contenu, de l’en-tête (header) au corps de la page, en passant par le pied de page (footer).

Mais ce qui le rend vraiment différent de ses concurrents, c’est qu’il n’a pas besoin de thème pour fonctionner. Oui, vous avez bien lu.

Bon, techniquement parlant, vous devez quand même avoir un thème d’activé sur votre back office, car WordPress en a besoin pour fonctionner. 

Mais pour faire simple, ce thème n’agira pas sur le design de votre site : à ce niveau, Oxygen s’occupe de tout. 

À part ça, Oxygen builder a la réputation d’être très léger et performant, ce qui tranche avec les reproches que l’on fait généralement aux constructeurs de page.

Lecture lente d'une page.
Hum, que c’est lent.

Parmi les autres spécificités de notre cobaye du jour, je pourrais aussi vous citer un contrôle très avancé de votre mise en page (alignement, espacement) grâce à l’utilisation de Flexbox (Elementor le permet aussi, pour info).

Flexbox est un standard CSS3 qui permet de contrôler la disposition des éléments de votre page web, et de les rendre responsive (adaptables sur ordinateurs, tablettes et smartphones).

Là où les autres constructeurs de page vont généralement « se contenter » de colonnes pour organiser votre contenu, Oxygen Builder va générer du code plus court et plus propre pour faire la même chose, comme l’explique très bien cet article du blog Mr WordPress.

Oxygen Builder, comment ça marche ?

Oxygen a beau être singulier, il concentre aussi la plupart des fonctionnalités que l’on est en droit d’attendre d’un constructeur de page :

  • il s’utilise en glisser-déposer (drag and drop) ;
  • vous avez un aperçu en temps réel des modifications/ajouts que vous apportez à votre contenu ;
  • des templates (modèles) de pages prêts à l’emploi sont disponibles si vous ne voulez pas démarrer d’une page blanche ;
  • il existe des dizaines de modules (titres, boutons, images, appels à l’action etc.) pour ajouter du contenu à votre page ;
  • il permet de personnaliser finement toutes les parties de votre boutique WooCommerce, ce qui est le cas pour une minorité de page builders, dont font partie certains mastodontes du marché ;
  • grâce à Oxygen, vous pouvez personnaliser et modifier toutes les couleurs de votre site en quelques clics, via la fonctionnalité Global colors ;
  • il est possible d’afficher uniquement certains éléments de votre site grâce à de la logique conditionnelle ;
  • Oxygen propose une intégration à l’éditeur de contenu de WordPress (Gutenberg). Vous pouvez créer vos blocs Gutenberg sans coder sur l’interface d’Oxygen, puis les ajouter en quelques clics sur l’interface de Gutenberg.

Après ces belles promesses, je vous propose de prendre en main l’outil en découvrant son interface.

Quelle maniabilité ?

Oxygen est une extension premium uniquement : vous ne la trouverez pas sur le répertoire officiel WordPress.

Après vous être procuré l’une des 3 Licences au choix – je reviendrai en détails là-dessus plus tard -, il vous suffit d’activer le plugin sur votre Tableau de bord WordPress, dans le menu « Extensions ».

Deux options vous seront ensuite proposées :

  1. Utiliser un « Premade website », comprenez un modèle de site prêt à l’emploi que vous pourrez personnaliser à votre guise.
  2. Partir d’une feuille blanche (« Blank installation ») en construisant votre site de zéro.
Processus d'installation d'Oxygen Builder sur WordPress.

Les développeurs de l’extension recommandent d’utiliser un « Premade website ». Alors, suivons leur conseil.

Cliquez sur « Default install ». Par défaut, justement, Oxygen Builder va installer la démo appelée Atomic.

Une interface un brin limitée…

Premier constat : l’extension ne vous assomme pas avec des actions recommandées et autres messages intempestifs sur le Tableau de bord.

Et un bon point pour Oxygen Builder, un !

Vous verrez qu’elle ajoute un menu dédié sur la colonne de gauche de votre Tableau de bord qui, malheureusement, n’est pas traduit en français :

Les menus proposés par Oxygen Builder sur l'interface d'administration de WordPress.

Concernant la traduction, vous pouvez pallier ce problème en utilisant l’extension Loco Translate, par exemple. Alex vous la présente en détails dans cette vidéo.

Pour entrer dans le vif du sujet et commencer à utiliser l’outil, cliquez sur « Add a new page » (« Ajouter une nouvelle page ») :

Oxygen Builder dispose d'un raccourci pour ajouter une nouvelle page sur WordPress.

Vous voilà à présent sur l’interface de l’éditeur de contenu de WordPress. Poursuivez en donnant un nom à votre page (ex : « Test Oxygen »), puis enregistrez-la en cliquant sur « Enregistrer le brouillon ».

Terminez en cliquant sur « Edit with Oxygen » (« Éditer avec Oxygen ») :

Une page peut très facilement être éditée à l'aide d'Oxygen Builder.

Côté présentation visuelle, on se rapproche de ce que fait un outil que les webdesigners connaissent bien : Sketch. Pas vraiment de ce que l’on a l’habitude de voir avec un constructeur de page.

Franchement, c’est un peu déroutant, d’autant qu’au premier coup d’œil, les options sont assez sommaires. Vous disposez d’un aperçu de votre page sur les ¾ de la fenêtre, et une dizaine d’options sont présentes dans une barre d’outils horizontale, en haut de la page :

Vous pouvez notamment :

  • accéder à des réglages, feuilles de styles et sélecteurs ;
  • vérifier l’affichage responsive de votre page sur différents appareils (ordinateur de bureau, tablette et smartphone) ;
  • visualiser la structure de votre page, soit les différentes sections qui la composent ;
  • ajouter des modules tout prêts, qui vous sont proposés sur la colonne de gauche.
Oxygen propose une barre d'outils pour éditer votre page.

Ah, le bouton « Add » (« Ajouter »), parlons-en, justement. S’il recense une trentaine d’éléments incontournables (ex : titre, texte, boutons, images, vidéos), ces derniers restent somme toute assez classiques.

Par exemple, sauf erreur de ma part, il n’existe pas d’élément pour créer un formulaire de contact.

Il faudra alors se rabattre sur votre extension de formulaire favorite.

Enfin, le nombre d’éléments est bien moins important que sur d’autres constructeurs de page comme Elementor ou le Divi Builder, pour ne citer qu’eux.

En bref, on reste un peu sur notre faim.

… Et une prise en main pas vraiment aisée

Pour une utilisation optimale d’Oxygen Builder, vous allez avoir besoin de (beaucoup) de temps, surtout si vous débutez sur WordPress.

Personnellement, il m’arrive d’utiliser de temps en temps des constructeurs de page et j’ai peut-être quelques habitudes qui se sont créées.

Mais pour le coup, j’ai été un peu perdu en mettant les mains dans Oxygen Builder, que j’ai trouvé moins simple à prendre en main qu’un Elementor ou un Divi Builder, par exemple.

Mes premiers pas avec l’éditeur visuel ont généré de la frustration, notamment car il m’a fallu m’habituer à une nouvelle interface.

Le fait d’avoir opté pour une interface en noir et blanc n’aide pas vraiment, à mon sens, à y voir plus clair. L’absence de traduction d’Oxygen en français aussi.

Je trouve aussi que certains réglages auraient pu être un peu mieux mis en avant. Par exemple, les boutons de réglages de l’apparence de certains modules (ex : le module « Heading » pour ajouter un titre) sont petits et planqués en haut de la page. 

Du coup, on envoie sa tête à droite, à gauche et en haut pour trouver le réglage qu’il nous faut. Dommage que tout n’ait pas été centralisé :

Personnalisation d'un titre sur Oxygen Builder.
Pour personnaliser un titre, on ne sait plus trop où donner de la tête…

Petit à petit, Oxygen fait son nid

Autre point important à détacher : Oxygen étant un constructeur de site plutôt orienté pour les techniciens, il a un peu de mal à se mettre « au niveau » des novices.

Pour construire vos mises en page personnalisées, Oxygen Builder utilise 3 éléments principaux, qui vont vous parler si vous manipulez un peu le langage HTML :

  1. Les sections : il s’agit de conteneurs généraux qui vont contenir le contenu de votre page.
  2. Les columns : pour créer des colonnes.
  3. Les divs : ce sont des conteneurs qui servent à grouper des éléments au sein d’une section ou d’une colonne. Vous pouvez ensuite modifier leur mise en forme sans que cela n’affecte les autres éléments présents au sein de votre section ou de votre colonne.
Oxygen Builder propose différents types de conteneurs.

Quand on débarque pour la première fois sur l’interface du builder, on vit quelques moments de solitude. Mais une fois que l’on a pigé le principe de fonctionnement, on s’y fait.

Pour ne rien vous cacher, après avoir un peu pesté, un petit tour sur la documentation et le visionnage de quelques tutos vidéos ont été nécessaires pour commencer à comprendre le mode de fonctionnement de l’outil.

À ce sujet, l’aide globale à l’utilisateur est assez bien fichue, même si tout est la plupart du temps en anglais. Vous trouverez des réponses à pas mal de questions sur :

Des frustrations, mais des atouts quand même

En résumé : mieux vaut être patient avec Oxygen et prévoir une courbe d’apprentissage assez longue pour le maîtriser correctement.

Après, tout n’est pas que frustration avec lui, loin de là. Dès que l’on commence un peu à appréhender l’outil, on s’aperçoit petit à petit de certains atouts. 

Personnellement, je trouve le panneau « Structure » très intéressant et pratique à utiliser.

Le panneau Structure d'Oxygen Builder.

Il s’agit en quelque sorte du squelette de votre page, qui liste tous les contenus présents, et vous donne une vision globale rapide de son aperçu.

Vous pouvez par exemple les dupliquer, les renommer ou encore les supprimer en 1 clic.

Ensuite, vous pouvez modifier n’importe quel élément de votre page en cliquant dessus. Évidemment, vous disposerez de plus ou moins d’options en fonction de l’élément à personnaliser.

Par exemple, pour un bloc de texte, il est possible de modifier sa taille, sa couleur, sa police, mais aussi d’appliquer des effets beaucoup plus avancés (ombre portée, animation au survol de la souris etc.).

Par ailleurs, depuis la sortie d’Oxygen 4.0, en mai 2022, vous pouvez même renommer le nom de vos éléments en cliquant dessus, directement depuis le panneau de contrôle : 

Oxygen Builder permet de renommer vos éléments en un clic.

Et pour aller plus vite, des raccourcis clavier (copier, coller, dupliquer, supprimer, annuler etc.) permettent de gagner du temps sans cliquer sur des boutons.

Enfin, l’édition de vos modules en direct fonctionne parfaitement : je n’ai constaté aucun temps de latence.

Édition sur Oxygen Builder.

Oxygen Builder à l’usage : focus sur les fonctionnalités majeures

Mise en page et personnalisation du design

Une gestion très fine de l’apparence de vos éléments

Niveau mise en page, Oxygen fait la différence avec ses concurrents à 2 niveaux :

  1. Tout d’abord, vous n’avez pas besoin de créer des colonnes pour aligner vos éléments horizontalement au sein de votre conteneur (une section, par exemple).
  2. Ensuite, vous pouvez modifier l’espacement entre les éléments de votre conteneur manuellement, en les étirant, sans avoir à entrer des valeurs de margin (marge externe) et de padding (marge interne). Très chouette, ça.
La gestion de l'espacement est très simple sur Oxygen Builder.

Par ailleurs, il est bien sûr possible de paramétrer finement l’apparence visuelle de vos conteneurs en jouant sur l’arrière-plan, la typographie, les bordures et en appliquant des effets (ex : animation au scroll, ombre portée etc.).

Au-delà de cela, la gestion des classes CSS est un jeu d’enfant (une classe permet d’appliquer un style à une balise HTML).

Avec Oxygen, pas besoin d’éditer chaque élément un par un, même s’ils ont la même classe.

Le constructeur de page sait les reconnaître et tous les changements opérés (ex : modification de la couleur d’une icône, d’une typographie etc.) se répercuteront sur chaque élément. Gain de temps assuré.

La gestion du CSS est un jeu d'enfants sur Oxygen Builder.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Des options « globales » bien pratiques

Dans la même veine, cinq autres fonctionnalités sont très utiles et permettent d’appliquer des réglages généraux pour vous faire gagner du temps :

  • « Global colors » : les « Couleurs globales » permettent de spécifier une couleur, puis de l’appliquer aux éléments de votre choix sur tout votre site (ex : du bleu pour tous vos titres, du rouge pour tous vos boutons).
  • « Global fonts » : fonctionne sur le même principe que les « Global colors », mais avec les polices d’écriture, cette fois. À noter qu’Oxygen vous donne accès à toutes les Google Fonts.
  • « Page width » (« Largeur de la page ») : pour être sûr que votre contenu s’affiche en pleine largeur, vous pouvez spécifier sa taille en pixels en passant par le menu Settings > Page Settings > Page Width (pour chaque page). Pour un changement global sur tout le site, passez par Settings > Global Styles > Width & Breakpoints. Par défaut, la valeur est réglée sur 1 120 pixels.
  • « Show/Hide Element » : permet d’afficher ou de cacher un élément en fonction de certaines conditions (ex : la date, l’heure, le titre de l’article etc.).
Il est possible d'ajouter de la logique conditionnelle sur vos éléments.
  • « Header Builder » (« Constructeur d’en-tête ») : avec cet élément, vous pouvez créer un en-tête sur-mesure et l’afficher sur toutes les pages de votre site. Il est aussi possible de concevoir l’en-tête de votre choix pour une page précise et de le rendre sticky (fixe au scroll) en un clic. Enfin, vous pouvez également le rendre transparent pour qu’il s’intègre parfaitement sur votre image d’arrière-plan.

La bibliothèque de modèles prêts à l’emploi

L’un des avantages d’un constructeur de page, en plus du fait qu’il ne nécessite pas de connaissances en code pour être utilisé, réside dans le gain de temps qu’il peut vous apporter lors de la conception de votre site.

Pour vous permettre de parer au plus pressé, tous les page builders du marché proposent des modèles de sites ou de pages dans tout un tas de niches (e-commerce, blog, freelancing, restauration, sport, santé, mode etc.).

Très prisé des débutants, ces modèles vous permettent, en une paire de clics, de disposer d’un site prêt à l’emploi sans avoir besoin de partir d’une feuille blanche.

Et bien sûr, vous pouvez tout de même les modifier à votre guise, par la suite.

À titre de comparaison, Elementor et le Divi Builder en proposent plusieurs centaines, ce qui laisse le choix.

Oxygen est beaucoup plus chiche à ce niveau. Vous en trouverez « seulement » dix-huit, dans la « Oxygen builder library ».

Les modèles proposés couvrent des secteurs très diversifiés, qui pourront s’adapter à pas mal d’activités : marketing, vin, finance, dentiste, bed and breakfast, etc.

Aperçu de certaines démos d’Oxygen Builder.
Aperçu de certaines démos d’Oxygen Builder.

Côté design, les templates se caractérisent par leur côté coloré, épuré et minimaliste. La part belle est donnée aux visuels. 

Regardez ce que cela donne avec la démo Winery, par exemple. À consommer avec modération, je compte sur vous. 😉

La démo Winery d'Oxygen Builder.

Les sites sont beaux et dégagent une impression d’élégance, rien à dire là-dessus. 

Dommage que le choix soit assez limité.

Les templates d’Oxygen Builder

Sans entrer dans des détails trop poussés, car le sujet devient technique, sachez qu’Oxygen permet de créer vos propres templates

Les templates sont en quelque sorte des gabarits personnalisés que vous allez pouvoir appliquer à différents endroits de votre site (ex : sur vos articles ou vos pages), ou sur votre site tout entier.

Par exemple, vous pouvez créer un template avec un header (en-tête) spécifique dédié uniquement à vos articles de Blog, ou encore un template pour personnaliser l’apparence de vos pages 404.

Pour les créer, tout se passe depuis votre administration WordPress, en passant par le menu Oxygen > Templates.

Ensuite, pour appliquer le gabarit de votre choix, il vous suffit de vous rendre sur la page désirée et de sélectionner l’un des templates que vous avez conçus.

Choix d'un template sur Oxygen.

L’intégration à WooCommerce

Vous avez une boutique WooCommerce, ou peut-être souhaitez-vous vous y mettre prochainement ?

Si vous avez répondu « oui », lisez attentivement ce qui va suivre, car Oxygen Builder va devenir un allié de choix.

Le constructeur de site dispose d’une intégration WooCommerce très avancée. Elle va vous permettre de faire ce que vous voulez avec votre boutique en ligne, en la personnalisant dans les moindres recoins.

L’intégration à WooCommerce est disponible uniquement avec les offres Ultimate et Oxygen + Breakdance, qui activent automatiquement l’extension Oxygen Elements for WooCommerce.

Pour cela, Oxygen propose plus de 20 modules pour customiser les pages par défaut de WooCommerce (Mon Compte, Paiement, Panier), et les produits de votre boutique.

Intégration à WooCommerce d'Oxygen Builder.

Au niveau des produits, vous pourrez par exemple ajouter les éléments personnalisés suivants :

  • images ;
  • prix ;
  • boutons ;
  • notations (étoiles) ;
  • produits associés, etc.

Et il est évidemment possible de paramétrer les couleurs, la typographie, l’arrière-plan, les bordures, les boutons, les liens, etc.
Que ce soit sur une page spécifique, ou sur toute votre boutique WooCommerce en même temps.

Si vous désirez aller plus loin, je vous conseille de visionner cette vidéo d’Alex, qui recense toutes les bonnes pratiques pour créer une boutique en ligne avec WooCommerce.

Le Gutenberg Builder

À présent, je vous propose de vous arrêter sur l’éditeur de contenu de WordPress : Gutenberg.

Dans ses versions Ultimate et Oxygen + Breakdance, Oxygen Builder met à votre disposition une extension appelée « Oxygen Gutenberg Integration ».

Grâce à elle, vous allez notamment pouvoir faire deux choses très intéressantes.

La première ? Rendre une page créée avec Oxygen éditable sur Gutenberg.
Pour cela, il vous suffit de cocher la case « Make this full page editable in Gutenberg », comme sur la capture ci-dessous :

Des blocs créés avec Oxygen Builder peuvent être modifiés avec Gutenberg.

La seconde vous permet de transformer des zones de contenus spécifiques (ex : une section) en blocs Gutenberg.

Vous retrouverez ensuite le bloc en question au sein de votre Bibliothèque Gutenberg, sous l’appellation « Oxygen Blocks » et « Oxygen Full Page Blocks ».

Les blocs créés avec Oxygen se retrouvent sur votre interface Gutenberg.

Libre à vous, par la suite, de modifier le texte à votre convenance.

À mon sens, l’extension Gutenberg d’Oxygen est vraiment intéressante si vous comptez laisser la main sur le contenu du site créé à un client.

Ce dernier pourra procéder à quelques changements de façon autonome, sans faire appel à vous et… sans se rendre sur l’interface de création d’Oxygen, qui nécessite une courbe d’apprentissage beaucoup plus longue que Gutenberg.

Modification d'un bloc Oxygen sur Gutenberg.

Par ailleurs, si vous ou votre client a l’habitude de rédiger des articles, on peut par exemple imaginer de créer en amont des blocs Gutenberg au design précis avec Oxygen (ex : des appels à l’action). Blocs que vous pourrez ensuite ajouter en 1 clic au sein de vos contenus.

WPMarmite procède de la sorte grâce à Elementor. Regardez par exemple ce que cela donne avec cet encart pour promouvoir la newsletter appelée « Le Ptit Bouillon » :

WPMarmite News, votre antisèche sur l’actu WordPress

Recevez gratuitement les dernières infos de l’écosystème WordPress tous les 15 jours et créez de meilleurs sites.

Quelle adaptation aux thèmes et aux plugins ?

Compatibilité avec les thèmes

De ce côté-là, vous n’avez pas de soucis à vous faire. 

Rappelez-vous du début de l’article : Oxygen Builder n’a pas besoin d’un thème pour fonctionner.

Comme indiqué sur la Foire aux Questions de l’extension, « Oxygen désactive complètement le système de thème WordPress. Cela signifie que même si votre thème n’entre pas en conflit avec Oxygen, ses styles et sa mise en page ne seront pas appliqués à votre site lorsque Oxygen est actif. »

Un bébé applaudit.

Pour terminer, un mot sur les constructeurs de page « classiques ». À première vue, aucun intérêt à les utiliser si vous décidez de faire d’Oxygen Builder votre outil de travail n°1.

Sauf peut-être dans un cas de figure bien précis, expliqué par les créateurs de l’extension : lorsque vous avez déjà conçu un site avec un page builder, mais que vous souhaitez tout de même passer à Oxygen pour remplacer votre thème et avoir plus de contrôle sur votre header, footer et vos templates

Mais attention si cette option vous intéresse. Premièrement, pas mal de constructeurs de page peuvent aussi vous permettre de modifier tout votre site (header et footer compris). C’est le cas du Divi Builder, d’Elementor et de Beaver Builder.

Ensuite, activer un constructeur de page va forcément un peu jouer sur la performance de votre site, ce qui n’est pas top pour l’expérience utilisateur et le SEO (Optimisation pour les moteurs de recherche).

Compatibilité avec les plugins

Si vous comptez tester voire adopter Oxygen, vous vous posez peut-être aussi la question de sa compatibilité avec les extensions.

Rassurez-vous de ce côté-là, Oxygen est compatible avec la majorité des plugins de l’écosystème WordPress.

Cependant, il y a quelques exceptions. Les développeurs reconnaissent que l’intégration avec des solutions multilingues n’est pas toujours optimale.

Selon leurs dires, « l’intégration à WPML, Polylang et Weglot est rudimentaire ». Assurez donc vos arrières si vous utilisez ce type d’extensions.

Vous pouvez par exemple tester leur compatibilité en utilisant un site de démo

De façon générale, les risques d’incompatibilité avec d’autres extensions peuvent exister du fait du fonctionnement propre d’Oxygen Builder.

Étant donné qu’il désactive le système de thème de WordPress, les extensions qui y font appel ne fonctionneront pas dans certains cas. 

En me baladant sur certains forums, j’ai par exemple trouvé des retours d’utilisateurs qui relevaient des incompatibilités avec wpDiscuz ou encore Login Designer.

Performance, SEO, responsive : zoom sur 3 aspects majeurs

Influence d’Oxygen Builder sur la performance du site

Oxygen Builder a la réputation d’être un plugin conçu et optimisé pour la performance.

Propre et bien codé – les pages intègrent les éléments HTML de base tels que les balises section, div, hn, p, a, img, etc. -, il prétend charger uniquement les scripts et les styles « requis par votre design ».

Tout en se targuant de se charger à la vitesse de l’éclair et en avançant être « 50x plus léger que Divi, 25x plus qu’Elementor, et 10x plus que Beaver Builder ».

Comparatif des page builders avec Oxygen.

Et pour finir dans l’auto-satisfaction, les développeurs d’Oxygen avancent avoir obtenu un temps de chargement de 349 millisecondes en testant une page sans cache ni plugin d’optimisation.

Je ne sais pas ce que vous en pensez, mais moi, je me suis dit que ça méritait une vérification. 

Pour démêler le vrai du faux, je lui ai fait passer un petit test.

Voici comment j’ai procédé :

  • service de tests utilisé : Pingdom Tools (en utilisant Londres comme localisation) ;
  • test d’une page avec la démo d’Oxygen appelée « Freelance » activée.
Test de la performance d'Oxygen Builder.

Les résultats ci-dessus permettent d’avoir un premier aperçu, mais ne peuvent être considérés comme un jugement arrêté et définitif. Vous pourriez avoir des données différentes chez vous, en fonction de votre hébergement, ou encore des plugins que vous utilisez.

Au-delà du temps de chargement respectable (1,28 s), ce qui frappe surtout c’est le poids ultra-léger de la page (à peine 4 KB), et surtout le nombre quasi-inexistant de requêtes effectuées.

Ce qui signifie qu’Oxygen n’est pas surchargé de scripts inutiles. Il contient le minimum vital pour fonctionner, ce qui permet de ne pas ralentir le temps de chargement.

Si vous voulez optimiser un site WordPress sans vous ruiner, je vous conseille la lecture de cet article sur le blog de WPMarmite.

Optimisation du SEO

Côté SEO (Optimisation pour les moteurs de recherche), Oxygen fait aussi figure de bon élève.

Pour que les robots des moteurs de recherche qui vont parcourir votre site comprennent bien votre structure HTML, vous pouvez choisir la balise de votre choix dans la plupart des modules.

Aussi bien au niveau des balises hn qui optimisent le référencement de la page, qu’au niveau des balises div, header, footer, span ou p, qui permettent de bien structurer le contenu.

Oxygen Builder permet d'otimiser vos balises hn en quelques clics.
Choix de balises hn pour le module Heading (Titre)

Par ailleurs, Oxygen Builder prétend « fonctionner avec n’importe quel plugin SEO », citant notamment Yoast, SEOPress et Rank Math.

Je l’ai testé avec Yoast, l’extension utilisée sur WPMarmite, je vous confirme que tout marche comme sur des roulettes.

Devenez enfin visible grâce au SEO

Optimisez le référencement de votre site WordPress, obtenez du trafic et augmentez votre chiffre d’affaire grâce à la pédagogie de WPMarmite.

Le responsive

Avec Oxygen, votre site va-t-il correctement s’afficher, quel que soit le support utilisé par vos visiteurs ?

Réponse : oui, et vous allez pouvoir y aller de votre contribution.

Tout d’abord, vous pouvez avoir un aperçu du rendu en temps réel, en fonction de l’appareil et de la taille de l’écran (exprimée en pixels).

Oxygen Builder permet de contrôler l'alignement responsive de vos éléments.

Par ailleurs, vous pouvez aussi choisir d’afficher ou de masquer tel ou tel élément en fonction de l’appareil utilisé par vos visiteurs. 

Pour cela, il suffit de choisir le support de votre choix (par exemple, moins de 480 px), de sélectionner l’élément de votre choix (ex : une photo), puis de cocher « None » dans le menu « Layout » de l’onglet « Avancé ».

La gestion du responsive est très facile sur Oxygen Builder.

Pour vous assurer que votre site est responsive, du point de vue de Google, vous pouvez utiliser son outil maison : le test d’optimisation mobile.

Quel rapport qualité-prix ?

Oxygen ne dispose pas de version gratuite et propose trois offres payantes : 

  1. Basic (129 $, environ 129 €).
  2. Ultimate (149 $, environ 149 €).
  3. Oxygen + Breakdance (149 $, environ 149 €).
Tarifs proposés par Oxygen Builder.

L’offre Basic est la plus avantageuse financièrement, mais aussi la plus limitée puisque vous ne profitez pas, par exemple, de l’intégration à WooCommerce et à Gutenberg.

Si vous n’êtes pas à 20 € (ou $) près, mieux vaut directement partir sur la licence Ultimate, qui contient toutes les options proposées par Oxygen Builder

Notez que vous pouvez aussi vous procurer, pour le même prix (149 $), un autre constructeur de page proposé par les créateurs d’Oxygen (l’entreprise Soflyy). Il s’agit du dénommé Breakdance, qui se destine avant tout aux débutants. 

Oxygen Builder, un outil bon marché ?

Tuons tout suspense tout de suite : Oxygen est extrêmement avantageux sur le plan financier.

À l’heure ou j’écris cet article, l’un de ses gros atouts, c’est le paiement à vie. Vous ne payez qu’une fois et n’avez pas besoin de renouveler chaque année (mais attention, cela peut évoluer avec le temps).

En plus, quelle que soit l’offre choisie, vous pouvez utiliser l’extension sur un nombre de sites illimité et bénéficiez de l’assistance (support) et des mises à jour à vie.

Et pour ceux qui hésitent à franchir le pas, Oxygen Builder propose une garantie satisfait ou remboursé de 60 jours.

Par rapport à ses principaux concurrents sur le marché, il n’y a (vraiment) pas photo :

  • Elementor Pro (lien aff) ne propose pas de version illimitée et à vie. Son offre la plus étendue, appelée Agency, permet d’utiliser le constructeur de page sur 1 000 sites au maximum, et coûte 999 $/an (environ 999 €).
  • Divi (lien aff) offre une Licence à vie facturée 249 $ (environ 249 €).
  • Beaver Builder (lien aff) ne permet pas d’être acheté à vie. Son Plan le plus abordable (Standard), utilisable sur un nombre de sites illimité, coûte 99 $/an (environ 99 €).
  • Spectra (lien aff) est un constructeur de page qui s’intègre dans l’éditeur de blocs de WordPress. Il ajoute de nouveaux blocs puissants, l’accès à des compositions de blocs, des wireframes, des modèles de sites prêts à l’emploi et d’excellentes fonctions de productivité telles que les préréglages de blocs et les styles de copier-coller.

Notre avis final sur Oxygen Builder

Allez hop, avant de conclure, il est temps de s’arrêter sur les avantages et les inconvénients d’Oxygen.

Les points forts

  • Avec cette extension, vous avez la mainmise sur TOUT votre site, y compris l’en-tête et le pied de page.
  • La performance et le temps de chargement. Dans cette optique d’optimisation permanente, Oxygen 4.0 a par exemple pris le parti d’utiliser le format JSON (plutôt que des shortcodes PHP) pour stocker les données de vos pages. Vous pouvez même modifier leur apparence sans recharger le constructeur, directement depuis l’admin WordPress (à condition de savoir un peu coder, quand même) :
Oxygen utilise le format JSON plutôt que des shortcodes PHP.
  • Un code propre et léger.
  • La possibilité de créer vos propres templates.
  • Le constructeur de page pour WooCommerce.
  • Le constructeur de blocs Gutenberg.
  • La possibilité de créer une interface personnalisée pour vos clients, avec par exemple un accès limité à certaines options ou à certains utilisateurs, en fonction du rôle que vous leur attribuez. 
  • Le tarif très avantageux du constructeur de page.

Les axes d’amélioration

  • La prise en main n’est pas aisée et vous demandera beaucoup de temps, surtout si vous débutez.
  • Un nombre de modules qui nous laisse sur notre faim. Après, c’est aussi un parti pris des développeurs pour ne pas trop surcharger leur plugin.
  • L’interface d’Oxygen Builder n’est pas traduite en français.
  • La compatibilité avec certains plugins n’est pas toujours assurée.

À qui s’adresse Oxygen Builder ?

Oxygen Builder est une extension complète qui s’adresse avant tout aux développeurs, ou du moins aux personnes ayant de bonnes connaissances en code (CSS, HTML et JavaScript notamment).

Comme indiqué sur la Foire aux questions de la page présentant les différentes licences du constructeur de page, « Oxygen est un page builder avancé. Si vous voulez créer un site avec du HTML et du CSS au sein d’une interface visuelle, vous adorerez Oxygen. »

Pour en tirer toute la puissance, il sera nécessaire de mettre les mains dans le cambouis. Et dans ce cas, vous ne serez pas déçu. 

Par contre, si vous débutez ou ne voulez surtout pas coder, je vous conseille de vous tourner vers des constructeurs de page moins techniques, plus faciles à utiliser, et plus rapides à prendre en main. Je vous en ai cité quelques-uns tout au long de cet article.

Idem si vous créez des sites pour des clients et comptez leur laisser la main sur le design, par la suite.

Si vous leur mettez Oxygen entre les mains, ils risquent de s’arracher quelques cheveux s’ils n’y connaissent rien. Réfléchissez bien à ce point si vous vous trouvez dans cette situation.

Si vous vous sentez capable de tester la bête (rappelez-vous, il existe une garantie satisfait-remboursé de 60 jours), direction le site officiel pour vous la procurer : 

Alors, comptez-vous l’utiliser pour créer votre prochain site ? Ou peut-être l’utilisez-vous déjà ?

Quoi qu’il en soit, partagez-nous votre avis et/ou retours d’expérience dans les commentaires, juste en dessous.