Mike nous partage aujourd’hui une découverte-WordPress extraordinaire… je n’en dis pas plus 😀
Encore un Page Builder ? me direz-vous. C’est vrai, ce n’est pas comme si on était en manque : Divi, Elementor, Beaver, Thrive Architect, Visual Composer, Brizy… On a déjà l’embarras du choix !
Alors qu’est-ce qui rend Oxygen différent des autres ?
Tout d’abord Oxygen utilise Flexbox pour rendre le site responsive, au lieu des colonnes. Cela lui permet, entre autres, de générer du code bien plus court et bien plus clean.
Cela peut paraître être un détail mais ça change complètement la façon dont on conçoit les pages.
Voici un exemple avec un simple titre et un bouton, sur la même ligne. Avec la plupart des builders, il faut créer 2 colonnes, avec le titre dans une colonne, et le bouton dans l’autre.
Voilà ce que ça donne du coté obscure :
Merci à Divi pour cette oeuvre d’art : 7 DIVs pour arriver au Heading. Ça parait beaucoup mais il y a pire :
Le grand jeu de l’été : Comptez le nombre de DIV et le nombre de fois qu’apparait le mot “elementor”.
Car oui, c’est bien d’Elementor qu’il s’agit (pour ceux qui auraient encore un doute 😉 ).
Une autre œuvre d’art :
Et si on mettait des ::before et ::after partout. C’est vrai ca pourrait servir, merci Beaver pour cette brillante idée.
Pas encore rassasié ?
Visual Composer dans toute sa splendeur. Tiens, il est presque que moins pire que les autres.
Pour le même résultat, Oxygen se contente de ça :
Il y a de quoi se poser des questions. Pourquoi une telle différence ? WordPress nous a malheureusement habitué à générer des sites super lourds. Est-ce que Oxygen va enfin inverser la tendance ?
Comment cela se passe sur le terrain ?
Commençons par une page blanche, à laquelle on ajoute, non pas des colonnes, mais une Section (ou un Div) :
On y ajoute ensuite nos deux éléments (Heading et Button) :
On configure le “Layout” de la section, pour avoir le résultat souhaité :
Bien sûr, on peut changer la configuration suivant la taille de l’écran (en ligne ou en colonne, avec des alignements différents…) :
En plus d’être extrêmement simple à mettre en place, le résultat est sans appel :
Pour les experts, on peut même voir le détails dans l’onglet Advanced / Layout :
Quel thème choisir ?
L’autre point fort d’Oxygen, c’est qu’il ne nécessite aucun thème. Même le thème par défaut de WordPress suffit. Le thème sera de toute façon désactivé.
Ce Page Builder est donc en fait un Site Builder.
Voilà encore pourquoi il est différent des autres !
Les créateurs de thèmes “multi-purpose” risquent de ne pas trop apprécier ce builder 😉
Il y a aussi un système de Templates, où l’on peut créer des sections, que l’on assigne aux différents types de pages WordPress :
Si l’interface peut rebuter au premier abord, on s’y habitue vite. Il m’a fallu moins d’une journée pour refaire mon site (du moins la page d’accueil).
La version officielle, faite avec Elementor : https://www.supadezign.com
La version Oxygen : https://www.supadezign.com/portfolio_tag/oxygen
C’était principalement pour tester et apprendre à utiliser Oxygen. Il y a des effets que je n’ai pas pu reproduire, car ils proviennent de plugins pour Elementor, et il n’y a aucune optimisation. Donc malgré une interface un peu rebutante, la prise en main s’est faite très rapidement. Pour ceux qui sont habitués aux builders, ça ne posera pas vraiment de problème.
Oxygen a, pour le moment du moins, la réputation d’être un builder pour “développeurs”. Car il est vrai qu’il permet de contrôler tous les aspects, sans alourdir le site de millions d’options plus ou moins utiles. Le fait d’avoir des connaissances en HTML, CSS, voir JavaScript et PHP, aident énormément.
Du coup les débutants risquent de trouver le builder un peu limité (ou complexe, ou les deux). Cela dit, n’importe qui peut quand même créer un site, en se basant par exemple sur les designs déjà existants.
Oxygen v2 est sorti en juin, avec comme prix de lancement, une offre unique : 99 USD – Unlimited sites. Lifetime updates. Payez une fois et utilisez le à vie sur autant de site que vous souhaitez. Ça serait dommage de passer à côté d’une offre aussi intéressante (surtout que ça ne devrait pas durer éternellement) 🙂
Alors on en vient maintenant à la question ultime :
Est-ce que ça vaut le coup d’abandonner son builder préféré pour passer sur Oxygen ?
Oui et non. Oxygen est encore jeune, comparé aux mastodontes (Elementor vient de passer à 1 million de téléchargements), mais il est extrêmement prometteur de part ses qualités uniques.
Mais il a aussi ses défauts, le principal est qu’il sera peut être trop compliqué à utiliser pour un client souhaitant mettre à jour son site. Certains pourraient préférer, dans un premier temps, de choisir un Elementor, qui sera peut-être plus simple à appréhender, au départ, pour les débutants. Quoi que, contrairement à ce que j’ai pu croire précédemment, j’ai eu la bonne surprise de me rendre compte qu’Oxygen supportait bien ACF (Advanced Custom Fields) et les Custom Post Types, ce qui permet de customiser facilement les posts ou pages pour les clients. Il pourrait donc totalement remplacer Elementor 😉
Pour les curieux qui veulent essayer avant d’acheter, on peut tester Oxygen en ligne à cette adresse : https://oxygenbuilder.com/try/
Pour en savoir plus :
Le site officiel : https://oxygenbuilder.com/
Le groupe sur Facebook : https://www.facebook.com/groups/1626639680763454/
Le channel Slack : https://oxygenusers.slack.com/
Les tutos sur Youtube : https://youtube.com/OxygenBuilder
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[...]
J’utilise beaucoup Divi et je reconnais que les colonnes (4 max par défaut) sont un sérieux point noir. Une gestion via flex et un code clean font donc de Oxygen un challenger à tester. Merci pour la trouvaille.
Bonjour!
Une simple question s’il vous plaît
Est-ce que la construction de page peut se faire autrement qu’en mode front-end? Merci
Hello MarianaD ,malheureusment non, il n’y a pas d’autre façon de construire des pages avec Oxygen. Tout se fait donc en mode front-end.
Bonjour,
Je suis carrément séduit par oxygen !
Je ne suis absolument pas du métier et je cherche quelqu’un (payer bien-sur) qui voudrait bien refaire mon site (actuellement sous pluxml), avec wordpress et oxygen.
Le nombre de div sert avant tout à gérer des comportements, notamment le positionnement du contenu dans l’élément colonne (haut, milieu, bas) idem dans la section. De plus chaque élément Elementor dispose de sa boîte CSS, les variations sont énormes, ça m’étonnerais que tu aies la même latitude avec les 2 div Oxygen. On pourra toujours dire que c’est plus léger mais cela propose-t-il les mêmes comportements ? C’est ça qu’il faut comparer. Le nez sous le capot c’est bien, l’usage au quotidien c’est mieux je pense. Et pour quelques Ko de plus je préfère le beurre et l’argent du beurre.
Je te conseille de chercher sur google « alignment flexbox » pour en apprendre plus sur le sujet. Tu verras qu’on n’a pas besoin de 12 Div pour bien aligner ses éléments 😉
Example : https[:]//developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
J’ai l’impression qu’Oxygen c’est cool pour du contenu fixe.
Mais des qu’on veut mettre du dynamique on est un peu limité. Un exemple tout bete : les temoignages. Bon. Je vais pas les mettre en dur dans mon template de page, hein. Je vais me faire un petit custom post type ( ou même juste des posts avec la categori ou le tag ad hoc), et récupérer les 3 derniers avec une petite query qui va bien et les afficher dynamiquement.
Sauf qu’avec Oxygen on a le choix entre un look joli avec du contenu fixe, ou du contenu dynamique (avec EasyPosts) non injectable dans le look joli…
Et comme on ne peut rien exporter pas moyen de mettre un peu les mains dans le code pour juste mettre la query et la boucle au bon endroit…
Ou alors je m’y prends mal ?
Perso je n’ai jamais utilisé cet élément, mais s’il y a quelque chose qui manque, il suffit de demander au support de rajouter cette option ou poster dans leur forum ( https[:]//oxygenbuilder.com/forums/forum/feature-requests/ ). Avec un peu de chance ça sera dispo dans une future version.
Sinon en général je modifie le template d’EasyPosts pour avoir le rendu que je souhaite.
Merci pour l’article, cela donne un aperçu d’Oxygen.
Il a l’air effectivement très bon dans le print des divs mais il est vraiment trop en retard malheureusement.
J’ai testé la version free dispo ici https[:]//oxygenbuilder.com/free-download/ … truc de dingue en marketing, dans la librairie de WordPress il est en version 1.0 depuis 2 ans, wtf ?
Je me suis forcé à l’installé en local pour l’essayer, mouai… Déjà pour commencer, il n’y pas de documentation pour les devs … histoire d’étendre l’extension.
Je me base donc sur ce que je vois, l’éditeur a l’air d’être assez avancé mais manque cruellement de contenu (modules).
Impossible de réduire la colonne à gauche, donc pas un affichage à 100% réel de front end.
Je vais pas faire un article, globalement non pour moi, pourquoi ?
Suffit de regarder votre exemple avec les sites de l’auteur (supadezign)
Ok, Oxygen print de bonnes divs mais derrière Révolution Slider est utilisé … c’est le problème de WordPress en général, on installe masse plugin pour ensuite balancer des plugins de performance pour réduire la latence de ces derniers … c’est pas du développement.
Malheureusement Oxygen est a la ramasse en marketing comparé aux plus gros constructeur, aucun builder pourra rivaliser avec Elementor pour 2019/2020, ils vont vite et fort, même Beaver Builder n’arrive pas à suivre et Divi … le plus lent des dinosaures.
L’article a été écrit il y a un bail, depuis pas mal de chose ont changé, avec pas mal de nouveautés.
Entre temps j’ai créer ce site, pour aider les nouveaux et pour faire des petites expérimentations : https[:]//oxygen4fun.supadezign.com/
Et oui, il y a peu de « modules » car on peut installer ce qu’on veut. On n’est pas limité aux choix du page builder ou au milliard de plugins dégueulasses à la Elementor.
Oxygen est extra light, et si je veux ajouter une fonctionnalité qui n’est pas incluse avec le builder, je vais chercher la lib moi même. Cela nécessite quelques connaissances en JS mais ça reste accessible pour la plupart.
Résultat, tu charges uniquement ce que tu utilises. Contrairement aux autres qui chargent un paquet de lib meme quand tu ne les utilisent pas. Voir ici pour plus d’info : https[:]//oxygen4fun.supadezign.com/the-best-wordpress-page-builders-compared-2019/
Pour résumer : « Elementor is a toy for kids, Oxygen is a tool for men » 😉
Tu as tout à fait raison, Oxygen est plus performant, indéniable !
mais n’oublie pas que tu travailles sous WordPress, il faut relativiser. Si c’est pas ton builder qui va te rajouter quelques fichiers, alors ça sera une extension.
Si tes un vrai développer, tu travailles en full custom ou sous Synfony et pas pour le même type de clientèle.
Peut importe ton choix, rien n’est égal et aucun n’est comparable au final. Au contraire, si ya une demande et que personne veut bosser dessus, c’est une aubaine pour toi 🙂
Alors voilà…
Ayant, en tant que novice, pour ambition de créer mon premier blog, j’ai découvert l’existence de wordpress et de son « petit » monde… Thèmes, pagebuilders, plugins… Après quelques semaines de tests divers en local pour évaluer le champ des possibles, j’en suis arrivé à m’apprêter (pour faire original…) à opter pour l’option oceanwp + elementor (pro)… Et là… patatra…
Je tombe sur une vidéo présentant Oxygen, et je me dis « Whaou… » ça a l’air plus flexible que de faire mumuse à tenter d’obtenir ce dont j’ai besoin d’un thème existant… Par contre, je vais quand même avoir besoin de modules (timeline, image avant/après, toggle, etc…) proposés par elementor… Pas de problème… puisqu’Oxygen est visiblement compatible avec des pagesbuilder type elementor… suffit juste de rajouter des sections avec le code qui va bien… Okay…
Du coup je vais peut être pouvoir outrepasser (ce qu’il me semble être) une limitation d’elementor, à savoir qu’il est incompatible avec la pagination (nextpage) et que certains de mes articles sont longs… donc peut être qu’en créant (sous Oxygen) plusieurs sections « elementor » dans un article et en les séparant par une pagination… peut être pourrais je avoir des longs articles paginés (ou « infiniment scrollables » ) tout en utilisant des modules elementor…
Okay… à tester… Okay sauf qu’Oxygen a l’air jeune… et il se passe quoi dans le petit monde de wordpress lorsqu’un pagebuilder, sitebuilder, ou un thème met la clé sous la porte? J’imagine qu’il n’y a plus de mises à jour… et qu’à terme il faut refaire le site… non? Je dois avouer que cette perspective m’effraie « un peu »… et qu’elle me pousse à m’orienter vers des mastodontes ayant peu de chance de péricliter à court terme…
Pouvez vous me rassurer sur ce point?
Dans tous les cas merci pour cet article… qui me donne envie d’en lire d’autres…
Si theoriquement Oxygen est compatible avec les autres page builders, je ne conseille pas de faire ce genre de manipulation.
Ca peut effectivement très bien marcher, mais que ce passera t-il lorsqu’une mise a jour va foirer ?
Ca arrive plus souvent qu’on ne le pense, et la dépendre de 2 pages builders + un theme, ça augmente pas mal les risques.
Pour votre histoire de pagination, ça dépend plus du theme que du page builder. Il faudrait voir avec OceanWP (via leur support), ou peut être essayer quelques plugins ( https[:]//blogpros.com/blog/2016/02/plugins-split-posts ).
Merci pour votre réponse (que je viens juste de voir…)
Désolé d’avoir à vous contredire, mais le problème de pagination est bel et bien lié à elementor. Lorsque je rédige un article avec l’éditeur wordpress, en utilisant le thème oceanwp, la pagination marche. Mais pas avec elementor… Enfin, ça marche à moitié puisque l’ensemble de l’article est affiché sur chacune des pages… et je suis pas le seul à observer ce comportement…
Sinon, j’ai commencé à tester oxygen… sympa… mais j’arrive pas encore à paginer un article… ça doit forcément être possible, mais visiblement pas en utilisant une simple balise nextpage… (si quelqu’un a une piste, je suis preneur…)
Concernant les risques liés à l’utilisation de plusieurs pages builder, j’en suis bien conscient. Et si j’opte pour oxygen, je n’utiliserais pas oceanwp… puisque qu’oxygen écrase le thème (quelqu’il soit). Mais n’étant pas développeur, j’essaye de trouver le moyen d’obtenir ce dont j’ai besoin avec les moyens du bord… L’idéal étant d’arriver à trouver mon bonheur en utilisant qu’Oxygen… Mais c’est un peu plus costaud qu’elementor et consort… On va voir…
Et puis y’a plus qu’à espérer qu’une hypothétique version 3 d’Oxygen soit rétrocompatible avec la 2. Ce qui n’est visiblement pas le cas entre la 2 et la 1… Celles et ceux ayant fini leur site avec la V1 juste avant la sortie de la V2 ont du être ravis…
OK… pour info, voici la manière de paginer un article dont le contenu est édité sous wordpress avec Oxygen :
https[:]//www.wpbeginner.com/wp-tutorials/how-to-split-wordpress-posts-into-multiple-pages/?fbclid=IwAR2_U2fXYWhzaAQc7imEysTw993UcjOgnFNePuJqIZ-TkiDegObQBBZs54E
Par contre il ne semble pas possible de paginer un article dont le contenu est édité directement avec Oxygen :
https[:]//github.com/soflyy/oxygen-bugs-and-features/issues/57?fbclid=IwAR1saYo-e0JRgfkJfA25Plz3XLK_Ldz6MCJPXXnIPmlRyBy3fbS2JA_jKts
Oui c’est moi qui est écrit le message sur github 😉
Ah ouais d’accord… donc c’est aussi toi qui m’a répondu sur FB 🙂
Bonjour,
Merci pour cet article sans lequel j’ignorerais encore l’existence d’Oxygen et un énorme merci pour partager avec nous vos connaissances sur votre site oxygen4ever. L’idée de générer du code propre et persistant plutôt que d’utiliser des shortcodes me parait judicieux : le site reste intact même si Oxygen est désactivé. Je suis également ravi de voir la puissance de Flexbox à l’oeuvre et impressionné par la quantité de paramètres accessibles et l’organisation de ceux-ci dans l’interface. Je suis utilisateur du couple Elementor + OceanWP, pour autant, votre article m’incite à découvrir Oxygen. Je souhaiterais comprendre comment développer mon thème et faire mes Templates ?
bonjour,
J’ai essayé Oxygen et j’ai constaté que les définitions de style étaient affectées directement à l’ID plutôt que de créer des classes pour les affecter aux éléments. Cette écriture est moins conventionnelle et génère beaucoup plus de code CSS : pour l’ajout d’un bouton par exemple, le style est affecté à son ID et le fait de dupliquer ce bouton, entraîne une duplication de ce même code CSS (une vingtaine de ligne à chaque fois). Mis à part cela, Oxygen permet d’utiliser WordPress sans qu’il soit nécessaire d’opter pour un thème, redonnant ainsi la main au développeur pour concevoir aisément ses propres templates et aménager ses pages comme il le ferait en les développant à la main ; à la différence qu’avec Oxygen, il a une représentation graphique de la structure de ses pages, ce qui permet une maintenance plus aisée. Je dois le dire de nouveau : Un grand merci pour m’avoir permis de découvrir cette « petite merveille ».
Hello Eric,
Tu ajoutes tes classes toi meme, quand c’est necessaire. Regarde cette video: https[:]//www.youtube.com/watch?v=oLkzurjke1k
Salut Mike,
J’ai supprimé tous les styles rattachés à l’ID du bouton, j’ai ajouté une classe au bouton et j’ai redéfini tous les styles qui ont automatiquement été associés à la classe. Je peux à présent dupliquer mon bouton sans que le CSS le soit. Le développeur a vraiment pensé à tout !!
En tout cas merci pour ton soutien et tes interventions pertinentes.