Dans cet EXCELLEEENT article à ne pas manquer, Mike nous confie comment, sans réellement être « développeur » lui-même, il réalise des sites ultra légers, propres et design, grâce à Oxygen, un Page Builder Site Builder WordPress encore assez peu connu (pas pour longtemps), mais très innovant techniquement.
Dans cet article, on a de quoi donner une pure alternative à tous les détracteurs de Divi (et je sais qu’ils sont nombreux 😉 ).
Alors, maintenant, plus d’excuse pour ne pas utiliser WordPress. Really!
Bonne lecture 😛
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 🙂
— Dans cet article ↓ —
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)
Vous aussi, proposez votre article !
Ne soyez pas timide. Vous aussi vous pouvez être publié sur Mister WP. Cliquez sur ce joli bouton pour savoir comment ça se passe 😉
Depuis 2009, je vis confortablement, grâce à mon entreprise sur Internet. Je me suis fait tout seul, sans filet de sécurité et sans[...]
Bonjour Mike,
Quelques mois après ton premier article sur Oxygen, je vois que tu as bien pris la bête en main 😉 C’est vrai qu’au premier abord, Oxygen peut dérouter les débutants par rapport à Divi ou Elementor. Cependant, en passant un peu de temps dessus, on comprend vite la mécanique pour construire ses pages et même son site avec WordPress.
C’est l’argument d’un code plus léger (et d’un chargement de page plus rapide) qui m’a convaincu de l’essayer. Pour manipuler, j’ai donc refait mon blog de Divi vers Oxygen Builder. Le fait de pouvoir personnaliser les templates de pages archives manquait à Divi (cela va enfin arriver avec Divi 4.0), on appréciera donc de pouvoir aller très loin dans la personnalisation de templates de pages avec Oxygen.
Il me reste encore des choses à voir… Par exemple, j’ai un « One comment on… » qui n’est pas traduit alors que « Laisser un commentaire » est bien traduit…
Il faut que je bosse sur les shapes dividers aussi. Je ne manquerai pas de venir voir et revoir ton site 😉
Content que ca te plaise 😉
Je te conseille de jeter un œil sur ce site: https[:]//oxybuilderfrancais.com/
Ils ont traduit la doc en français, et ils vont proposer des tutos.
C’est sympa de voir que la communauté française commence a s’agrandir.
Bonsoir,
Ah Mike une fois de plus tu nous as coupé l’herbe sous le pied 😉
Nous avions noté cet article dans la liste des « endroits » à prévenir…
Philippe et IMA.
Bonjour Mike,
Merci pour ce site génial que je ne fais que découvrir…et qui nous donne des supers tuyaux…
J’étais sur elementor il y a deux semaines et j’ai découvert oxygen ici même. Je ne connais pas bien le css et le touti quanti mais… Après avoir fouillé et compulsé leur site j’ai acheté direct Oxygen. Il est un peu déconcertant au début mais je dois dire que je me retrouve au même niveau qu’elementor en terme de facilitée d’utilisation…(je sais… c’est pas le Graal non plus…) Et je le trouve génial!
sauf que: j’ai créé des éléments sur différentes versions d’essai de mon site en local… Et bien sûr j’aimerai ne pas être obligé de tout me retaper…les exportation/ importation sont une galère sans nom…j’ai bien suivi la méthode de « Copie de modèles de pages et de modèles individuels » mais cela ne fonctionne pas. Il y a un truc qui m’étonne c’est que l’on doit copier le [+] Shortcodes de l’élément d’origine pour le replacer sur un X autre site, mais un simple header ou un slide ont la même longueur qu’une page entière… J’arrive pas à comprendre…(gloups?)
Il y a peut-être un truc que j’ai pas pigé sur Oxygen, mais il y a plein de choses qui devraient être intuitives et qui ne fonctionnent pas…
Deux exemples :
1) Pas moyen d’ajouter simplement un attribut type « placeholder ». Quand on sélectionne un form, puis qu’on utilise « advanced » > « attributes », on ne peut appliquer des attributs qu’au form, mais pas aux input à l’intérieur. Pour le faire on est obligé d’utiliser jquery.
2) Quand je définis mes variables de couleur globales, elles ne sont utilisées que par les éléments créés par Oxygen, mais pas définies dans le CSS. Quand j’essaie de les appeler avec du CSS, exemple : color: var(–couleur-principale), ça ne fonctionne pas… Là encore, il faut remettre manuellement ses global colors dans une stylesheet,
Alors oui, le code est propre. C’est très puissant par certains aspects. Mais comparé à un builder comme Elementor (ou simplement coder ce dont on a besoin soi-même), je trouve Oxygen ultra frustrant.
Souvent, je perds du temps à chercher comment faire quelque chose… au bout de 3-4 heures je m’aperçois que je n’y arrive pas… donc je passe direct en PHP/JQUERY pour faire ce dont j’ai besoin.
Peut-être que ce n’est juste pas fait pour moi :/
Il est vrai, lorsqu’on découvre un builder, qu’il peut être long de savoir si oui ou non, on doit passer par le code, ou si on continue de chercher l’option dans le builder.
Je pense qu’il doit exister une groupe Facebook des fans d’Oxygen qui peuvent peut-être t’éviter de bloquer pendant des heures sur ce type de questions ?
Et avec le nouveau WordPress 5.9, n’y a-t-il pas à craindre que Oxygen fasse – à long terme – double emploi avec le FSE ?