Oxygen Builder, 10 mois plus tard

Petit rappel : en quoi Oxygen est différent des autres builders ?

• Il n’utilise pas de thème. En fait, le thème est tout simplement désactivé.
• Ce n’est pas simplement un page builder mais un site builder.
• Il génère du code bien plus propre (voir Divception).
• Il est ultra light car il n’utilise que les ressources dont il a besoin (voir ce comparatif).

Pourquoi donc un second article à propos d’Oxygen ?

Lorsque j’ai écrit le premier article, je venais tout juste de découvrir Oxygen. J’avais fait un peu mumuse avec et je voulais simplement partager cette découverte. 10 mois plus tard, beaucoup de choses ont changé. Je me suis familiarisé avec l’outil, j’ai créé quelques sites et bien sûr le plugin a lui même aussi beaucoup évolué.

D’où l’idée de faire le point, et peut-être donner l’envie à d’autres de se lancer dans l’aventure 🙂

Pourquoi et pour qui ?

Oxygen a la réputation d’être un builder pour développeurs.

Ce n’est évidemment pas le cas, puisque moi-même, je ne suis pas développeur. Mais le fait d’avoir des connaissances en HTML et CSS aident beaucoup.

Ça paraît logique. Comment peut-on faire un site si on ne connaît pas les bases. Et pourtant c’est un peu le but de ces pages builders : offrir des outils qui permettent de faire ses sites sans avoir à taper une ligne de code. Ce qui semble évidemment très pratique, mais n’aide pas forcément à la compréhension.

Avec Oxygen, il va falloir faire un petit effort. Rien de bien complexe, mais si on veut pouvoir pousser un peu plus l’outil, avoir un peu plus de contrôle, il faudra jouer un peu avec les CSS, voir installer quelques bibliothèques JavaScript via un petit plugin maison.

J’ai lancé un petit sondage il y a quelques mois pour savoir si les utilisateurs avaient déjà utilisé d’autres page builders avant de passer sur Oxygen. La plupart étaient déjà sur Divi ou Elementor, donc le passage vers Oxygen n’est pas vraiment un gros souci. Et puis rien ne nous empêche d’utiliser plusieurs builders (enfin pas en même temps, même si c’est possible).

Comment ça marche ?

L’interface n’est pas super sexy, mais plutôt bien pensée, car tout est rapide d’accès (mais en même temps il n’y a pas autant d’options que d’autres page builders comme Divi).

Une des premières choses que l’on fait quand on essaye un nouveau builder, c’est de jeter un œil aux éléments disponibles (ou widgets comme ils l’appellent ça sur Elementor). Et là, déception, il n’y en a pas des masses.

Pire, il n’y a pas non plus de SHAPE DIVIDERS, c’est-à-dire, des séparateurs stylés avec des formes différentes qu’une simple bordure rectiligne (voir plus loin).

Un builder sans shape dividers en 2019, même si c’est complètement démodé, c’est un peu la honte absolue. Et je sais de quoi je parle puisque mon expérience avec les page builders s’est déroulée de cette façon :

Visual Composer -> Elementor (wow des shapes dividers) -> Oxygen (ah bah non, y’en a plus) 😀

Et là, grosse révélation : et si j’apprenais à les faire moi-même. Le truc de fou, comme dans les années 90-2000 ou on devait tout faire. Alors que maintenant il y a des builders et des plugins qui font tout à notre place.

Je me lance donc et je me rends compte rapidement qu’il n’y a rien de compliqué, et qu’il est relativement simple d’insérer ce qu’on veut, où on veut, avec Oxygen.

C’est à ce moment ou j’ai commencé à faire des petits tutoriaux. Autant partager ses découvertes, ça pourra peut-être être utile à d’autres.

Je lance donc mon site OXYGEN4FUN , qui sera d’ailleurs mon premier vrai site fait avec Oxygen.

oxygen4fun.supadezign.com

Il manque des éléments dans Oxygen ? Pourquoi donc ne pas les installer soit même ?

Ce n’est, finalement, pas si compliqué que ça. Github regorge de bibliothèques JavaScript prêtes à l’emploi. Bon évidemment ça prend un peu de temps à trouver, puis à tester, c’est donc aussi pour cette raison que j’ai fait ce site.

Et puis si on n’a pas envie de se faire chier, on peut aussi installer Slider Revolution ou d’autres plugins bien lourdingues, ce n’est pas interdit non plus hein 😉

Voilà pourquoi je dis qu’il va falloir faire un petit effort et ne pas compter uniquement sur ce que propose Oxygen. D’ailleurs beaucoup de débutants ont commencé à apprendre le CSS et savent installer des libs JavaScripts. Choses qu’ils n’auraient jamais imaginé faire lorsqu’ils utilisaient d’autres builders.

Fonctionnalités

Je ne vais pas faire une revue de toutes les fonctionnalités mais je vais parler de celles qui me semblent intéressantes. On n’est pas chez Mister-Oxygen ici. Il est déjà bien gentil c’te Mister WordPress, d’accepter mes articles qui font l’apologie d’Oxygen, alors que ses sites sont faits sous Divi 😀

Global Colors

J’aime beaucoup cette fonctionnalité car elle permet d’assigner des couleurs à des éléments, comme des titres, des fonds, des boutons etc. On prépare sa petite palette de couleur à l’avance, comme ceci :

Pour, en gros, faire cela :

Ce qui permet, par la suite, de changer les couleurs du site en quelques secondes. Au lieu de changer les couleurs de chaque élément manuellement, on va simplement changer sa palette de couleur, et ainsi avoir un aperçu en live du même design mais avec des tonalités différentes.

Très pratique quand on n’est pas encore sûr des couleurs que l’on veut choisir, ou pour faire plusieurs propositions de design avec des nuances de couleurs différentes, ou alors, lorsque le client décide au dernier moment de changer les couleurs du site parce que ça ne colle pas avec le nouveau logo jaune fait par sa femme, son fils… ou son chien 😐

De plus ça fonctionne aussi en CSS :

.mysuperfooter { background-color: color(1); }

Templates

Les templates vont permettre de customiser tous types de page. Que ce soit la page d’accueil, les Posts, les archives, la page 404, la page des résultats de recherche etc. Très simple et évidemment très pratique. N’oublions pas que c’est un site builder donc il ne s’occupe pas seulement des pages mais de tout le site dans son ensemble.

Si on veut par exemple que le Header et le Footer soient présents dans toutes les pages, il suffit donc de créer un template, et d’ajouter nos éléments de cette façon :

Un header (contenant un menu) et un footer. Entre le deux, le ‘Inner Content’, ce qui en fait représente le contenu des pages auquel sera appliqué ce template. Ensuite il n’y a plus qu’à choisir sur quel type de page on souhaite appliquer ce template. En choisissant par ex ‘Catch All’, toutes les pages du site auront donc ce même header et footer. On peut donc facilement appliquer des menus différents suivant le type de pages, faire des mises en page différentes, etc.

Easy Posts

Élément quasi indispensable puisqu’il permet d’afficher la liste des Posts, Pages ou n’importe quel Custom Post Types, et de customiser le rendu, par exemple, lister les articles d’un blog, faire un portfolio, etc.

On configure son ‘WP Query’ et on peut choisir un des designs prédéfinis :

Et comme ça fonctionne avec un système de template, on peut encore une fois tout modifier :

Design Sets

C’est très récent, ça permet de partager des sections, pages ou le site complet. C’était à l’origine une fonction interne, qu’ils ont adaptée par la suite pour que tout le monde puisse l’utiliser. Du coup la méthode n’est pas top (un peu déroutante). Cela dit ça ne m’a pas empêché de sortir… tadammmm :  DEZIGN4FUN, une collection unique de Design Sets pour Oxygen Builder

www.dezign4fun.com

Ou comment faire des chouettes effets avec un peu de CSS, et donc du coup, les importer et les customiser facilement.

La Team

Louis Reingold

On connaît principalement le CEO, Louis Reingold, qui intervient souvent sur le groupe officiel Facebook (Official Oxygen User Group).

Il participe et encourage les membres à proposer des fonctionnalités, via leur page sur Github (Oxygen bugs and features) et suivant le nombre de vote, il se peut que certaines d’entre elles soient ajoutés dans une mise à jour future.

Le fait d’être accessible est assez appréciable, on sait que nos interventions sont lues et prisent en compte.

Louis sait aussi récompenser, à coup de dollars les membres méritant (en général suivant ses propres demandes genre “j’offre 200 dollars au premier qui… »). C’est assez inhabituel mais ça vaut le coup de le signaler.

C’est aussi le développeur principal et il travaille avec son équipe dans le secret absolu (on ne sait pas quelles sont les nouveautés des prochaines versions).

Bugs et support

Tout se passe maintenant sur Github : https://github.com/soflyy/oxygen-bugs-and-features

Pour le support, je conseille tout d’abord de passer par le groupe officiel sur Facebook. Rares sont les questions laissées sans réponse. La communauté, sans être énorme, est assez active…sauf le week-end ou apparemment, les gens sortent et font des activités en famille. Quelle idée saugrenue… 🙄

Sinon le vrai support est accessible par e-mail et il faut attendre en général 2-3 jours pour avoir une réponse.

Un dernier point

L’argument ultime pour vous convaincre de passer sur Oxygen : son prix !

Pour 99 USD (soit 88 euros, soit une dizaine de pizza ?), vous pourrez utiliser Oxygen sur autant de sites que vous le souhaitez. Pas de renouvellement ni quoi que ce soit, il est à vous, à vie, avec toutes les mises à jour futures.

Donc on ne peut pas dire que le risque soit élevé. Même en l’achetant maintenant, vous pouvez l’utiliser plus tard. Mais attention tout de même, le prix risque de changer.

En savoir plus

Le site officiel : https://oxygenbuilder.com/

Oxygen Builder Resources (tous les liens, les tutos, showcases, etc) : https://trello.com/b/t048TPPM/oxygen-builder-resources

Communauté francophone des utilisateurs d’OXYGEN : https://www.facebook.com/groups/2260347020958791/

Rappel des mes sites Oxygen (pour les curieux)

• oxygen4fun.supadezign.com
• www.dezign4fun.com