En tant que développeur Web, j’ai souvent l’occasion de travailler avec les plugins WordPress Elementor Pro et Oxygen Builder.
Ces deux plugins WordPress sont des theme builders (constructeurs de thèmes en français). Mais pourquoi donc utiliser deux plugins WordPress différents ? Quelles différences entre les deux ?
C’est pour répondre à ces questions que j’ai décidé dans cet article de comparer ces deux constructeurs de thèmes en indiquant leurs similitudes, leurs avantages, leurs inconvénients et à quel genre de personnes ou situations peuvent-ils être le plus utile. Voici mon analyse.
Quels sont les différences entre un Theme Builder et un Page Builder ?
Elementor freemium est un page builder (constructeur de pages en français), ce qui signifie qu’il a besoin d’avoir un thème WordPress d’activé pour pouvoir fonctionner et ainsi pour pouvoir construire une page ou un article.
J’ai remarqué que la grande majorité des sites internet proclament qu’Elementor Pro et Oxygen Builder sont aussi des page builders. Malheureusement pour eux c’est faux, ce sont bien des theme builders, et la différence est importante !
Le terme “theme builder” signifie que la fonctionnalité “thème” de WordPress est désactivée, ainsi nous avons la totale liberté sur toute la construction du webdesign de nos sites Web. Nous pouvons grâce à cela avoir la main sur n’importe quel bloc de page comme bien évidemment le header et le footer, mais aussi le moindre petit détail des pages, des articles, des produits, des blocs uniques, les listings, etc.
Tout sera personnalisable sans passer par un thème pouvant freiner notre créativité.
En effet un thème permet d’avoir une apparence “prédéfinie” des blocs, des couleurs et autres, mais Oxygen et Elementor Pro suppriment cette fonctionnalité.
Par conséquent nous n’aurons pas à perdre du temps pour trouver LE thème WordPress qui vous correspond, et n’avons plus de limite quant à la construction de l’apparence de votre site, vous pourrez demander ce que vous voulez !
Oxygen Builder et Elementor Pro : quels sont leurs points communs et leurs différences ?
Présentation des constructeurs de thèmes
Les deux constructeurs de thèmes se présentent de la même manière :
- Dans la partie gauche de l’écran sont présentés tous les éléments pouvant être ajoutés dans une page
- La partie droite présente le rendu visuel de la page sur laquelle sont faites les modifications.
Documentation des constructeurs de thèmes
Oxygen Builder et Elementor Pro possèdent tous deux une documentation officielle en anglais disponible sur internet.
Petite différence cependant : la documentation officielle d’Oxygen Builder est assez pauvre comparée à celle d’Elementor Pro.
Un fait très intéressant qui m’a parfois bien aidé, est qu’ils présentent tous deux des tutos vidéos via leur chaine YouTube Officielle respective.
Pour ceux ou celles qui n’auraient pas ou peu d’affinité avec l’anglais, des documentations non officielles existent en français pour nos deux theme builders 😉 .
WooCommerce
Atout que les deux theme builders possèdent : l’intégration Woocommerce avancée.
Si vous avez une boutique en ligne, que vous choisissiez Oxygen Builder ou Elementor Pro, vous pourrez faire ce que vous voulez de cette dernière et la personnaliser comme il vous plaira.
Il existe tout de même quelques différences. Avec Oxygen Builder ou Elementor Pro nous pouvons concevoir autant d’archives de produits et de modèles uniques que nécessaire et également concevoir le reste de votre contenu WordPress (en-tête et pied de page par exemple). Cependant, avec Elementor nous ne pouvons pas personnaliser à 100% le panier et le check-out, contrairement à Oxygen.
Il est possible avec Elementor d’ajouter du contenu autour du panier Woocommerce et du contenu de paiement, mais le contenu en lui-même n’est pas personnalisable.
Oxygen, un constructeur de thème unique en son genre
Ainsi, comme expliqué plus tôt, Oxygen Builder oblige de ne pas avoir à choisir ni utiliser de thème WordPress. Vous êtes complètement libre sur le design que vous souhaitez pour votre site Web.
Oxygen Builder s’installe comme une extension WordPress, cependant il faut tout de même acheter une licence en passant par son site officiel, télécharger l’extension (ou les extensions puisqu’il en existe 3 pour Oxygen), puis l’installer.
Quatre formules payantes y sont proposées (nous y reviendrons un peu plus loin).
Mais Oxygen Builder se démarque bien par ses différences face aux autres constructeurs de thèmes et constructeurs de pages.
Commençons par ses avantages.
Quels sont les avantages d’Oxygen Builder ?
Paramètres généraux des pages avec Oxygen Builder
Il est très intéressant pour le long terme, et donc pour maintenir le site le plus facilement possible dans le temps, d’avoir des réglages généraux qui s’appliquent sur toutes les pages et l’entièreté du site comme les couleurs globales, les principales polices qu’utilise le site, les marges d’une section, la taille des titres…
“Pourquoi est-ce intéressant ?” me direz-vous. Et bien, grâce à ces paramètres, nous pouvons changer en quelques clics les plus gros paramètres du site.
Je vous donne un exemple simple :
Un client nous donne trois couleurs principales de son site à intégrer : rouge, blanc et vert.
Ainsi, les éléments comme les titres, les boutons, les bordures, les fonds, etc, auront ces codes couleurs.
Quelques mois ou années plus tard, il nous demande de changer toutes ces couleurs par du bleu, du doré et du noir.
Il va falloir changer tous les éléments un par un ? Pas du tout.
Ces trois couleurs sont inscrites dans les paramètres généraux, il suffit simplement de changer ces couleurs pour que les éléments qui les utilisaient changent aussi sans souci.
Je n’ai parlé que de trois couleurs, mais on peut en intégrer le nombre que l’on veut, bien entendu.
Et bien sûr, ce genre de changement peut s’appliquer sur tous les éléments présentés sur l’image ci-dessous.
Pour encore plus compléter les réglages généraux, il existe la possibilité d’utiliser des feuilles de styles où l’on peut ajouter du code qui s’appliquera lui aussi sur le site entier.
En effet, cela peut fortement servir si on revient sur le site quelques mois après pour modifier quelque chose, il sera plus simple de retrouver tout le code ajouté via les feuilles de style plutôt que de fouiller dans des petits morceaux de codes éparpillés à travers toutes les pages.
Disposition et modifications des éléments dans Oxygen Builder
Au niveau de la construction d’une page, Oxygen a un grand avantage pour nous car il est plus orienté vers le fonctionnement et le langage de développement Web que nous connaissons très bien, on y retrouve la logique section/div/aside/articles/nav/etc quand certains page/theme builders se “contentent” de colonnes pour disposer les éléments. Cette particularité permet d’innombrables possibilités de présentations et dispositions des blocs (grâce, entre beaucoup d’autres, à Flexbox, Grid, positions absolute, fixed ou relative, etc) sans avoir à poser des colonnes partout.
Les options de modifications de blocs sur Oxygen sont plus poussées et peuvent permettre, par exemple, de changer la taille d’un bloc, la couleur de fond, la police, la taille et la couleur de la police, les espacements, on peut ajouter un overlay, de l’opacité, des ombres, des animations au passage et/ou au clic de la souris et beaucoup d’autres choses que l’on peut faire sur tous les blocs et éléments sans exception.
Tout comme un développeur Web mais sans avoir à écrire de code.
Le fait que nous connaissons très bien le(s) langage(s) de développement Web nous permet de faire ce que nous voulons dans une page, un bloc, un article, une page produit, une page de listing produits, tout. Et surtout, cela nous permet d’optimiser l’utilisation d’Oxygen Builder et gagner un maximum de temps durant la création d’un site, ce qui est un avantage pour nous mais aussi pour vous !
Du code, on peut bien sûr en ajouter via des blocs dédiés pour ajouter du HTML, CSS, PHP, JavaScript à volonté, c’est une particularité que Elementor Pro ne propose pas. On peut même ajouter des feuilles de style personnalisées, mais j’y reviendrai plus tard dans cet article.
Les états et modifications de mouvement
Comme je l’ai dis plus tôt, on peut ajouter des animations au passage et/ou au clic de la souris.
Un petit plus non négligeable que possède Oxygen Builder (pas Elementor Pro malheureusement), c’est le fait d’avoir la possibilité d’ajouter et modifier des états CSS et des pseudo-classes (sans avoir besoin d’écrire de code). Ainsi nous pouvons aisément, par exemple, ajouter un effet au survol de la souris, changer la couleur, grossir, rétrécir, surligner, souligner, arrondir des angles, etc
Vous pourrez créer le ou les effets que vous désirez, et même y ajouter une transition si vous le souhaitez.
Sur cet exemple, le bouton devient légèrement plus long, arrondi, bleu foncé, avec sa bordure devenue blanche.
Nous pouvons ajouter une transition pour rendre l’effet plus doux au survol.
Les Widgets disponibles avec Oxygen Builder
Comme tous les autres constructeurs de pages/thèmes, Oxygen Builder propose des widgets pour faciliter l’intégration.
Il propose les choses les plus basiques comme par exemple les titres, textes, boutons, images, call to action, les icônes et autres.
Mais aussi des widgets plus spécifiques comme les shortcodes, intégrer des vidéos, des liens, un plan Google Maps, un repeater, formulaires de recherche, etc.
Plus globalement, Oxygen Builder met à disposition une bibliothèque de modèles de blocs ou même de pages entières prêts à l’emploi très utiles aux débutants et aux pressés voulant rapidement créer leur site tout en ayant une présentation/un design très élégant et propre.
En ce qui nous concerne, nous n’utilisons pas cette fonctionnalité d’Oxygen Builder car nous ne développons que des thèmes sur-mesure.
Les classes CSS
Oxygen Builder nous offre aussi la possibilité de créer des classes CSS (des noms identiques que l’on donne à plusieurs blocs afin de leur donner le même style en même temps), ce qui permet un gain de temps considérable.
En effet, toutes les modifications apportées à un élément comportant une classe se répercutent sur tous les autres éléments comportant la même classe. En d’autres termes, si on a plusieurs blocs identiques dans une même page ou sur plusieurs pages différentes du site, leur attribuer une classe permet d’appliquer le même style en quelques secondes !
Cette fonctionnalité est un peu similaire aux réglages généraux décrits plus tôt, par le fait que nous pouvons modifier plusieurs éléments à la fois en même temps en quelques clics.
Les seules différences entre ces deux fonctionnalités est que les classes s’appliquent sur des éléments précis que l’on a choisis.
Exemple :
Sur tout le site, seuls 10 boutons ont des bordures très arrondies.
Je décide de leur donner une même classe nommée “border-rounded” qui leur donne des bords très arrondis.
Ce qui fait que si plus tard, on nous demande de modifier ces 10 boutons seulement et leur donner une bordure moins arrondie, je n’ai qu’à modifier un seul de ces boutons pour que la modification se répercute sur tous les autres.
La gestion des templates avec Oxygen Builder
Étant donné qu’avec Oxygen Buider nous pouvons créer notre site Web de A à Z, nous pouvons aussi créer des templates (modèles de pages).
Ces modèles de page rendent bien service au niveau gain de temps et maintenance, par exemple, si vous avez un header et un footer spécifique pour vos articles, vous pouvez créer un template qui contiendra ce fameux header et ce fameux footer, puis vous n’aurez qu’une case à cocher pour que ce template ne s’applique que sur vos articles. Pas besoin de recréer ou répéter x fois le même design sur chaque page.
Je parle d’un template pour le header et footer, mais nous pouvons aussi créer des modèles qui s’appliquent à ce que vous voulez : une page spécifique, plusieurs ou toutes, aux articles, aux produits Woocommerce, à des catégories, la page Erreur 404, aux résultats de recherches, mais aussi aux archives de type de posts personnalisés et à toute autre parties d’un site.
Nous avons aussi eu l’occasion, via le système de templates, de créer des blocs réutilisables. C’est-à-dire que nous pouvons créer en une seule fois un bloc qui est identique sur plusieurs pages. Il nous a simplement suffit de le créer puis de l’intégrer en tant que bloc réutilisable sur toutes les pages où il est censé être.
Un peu comme un copier-coller, mais avec le fait que nous pouvons le modifier comme nous voulons et les modifications se répercutent comme avec le système de classes.
Cette fonctionnalité permet d’avoir une intégration très propre et beaucoup plus rapide.
Woocommerce et Oxygen Builder
Cela fait partie d’une des quatre propositions de licences sur le site officiel d’Oxygen Builder : la personnalisation de votre boutique Woocommerce.
Très bon avantage pour vous car vous pouvez demander ce que vous voulez pour votre boutique au niveau fonctionnalité et apparence car Oxygen nous en donne la possibilité.
Et ce ne sont pas simplement de “petites” personnalisations comme cela peut être le cas d’une majorité de constructeurs de pages/thèmes. Ces personnalisations peuvent être, par exemple, personnaliser de A à Z la page de la boutique, la page type des produits, des catégories de produits, le panier, le compte client, etc. En résumé, tout ce qui concerne votre boutique avec tous les blocs Woocommerce proposés par Oxygen (image ci-dessous).
Le listing
Un bloc qui nous aide beaucoup pour l’intégration des sites Web de nos clients et qu’Elementor Pro ne propose pas : le repeater (“répétiteur” en français). C’est un bloc permettant de créer visuellement des boucles qui servent le plus souvent pour un listing (listing des produits, listing des articles, …).
Un exemple d’utilisation de repeater :
Les performances d’Oxygen Builder
Les performances sont importantes pour le chargement des pages.
En effet nous sommes tous d’accord sur le fait qu’une page qui se charge lentement est frustrant… Et bien la légèreté du code et la performance jouent un rôle sur cette vitesse de chargement, par conséquent, un code léger fait en sorte qu’une page se chargera plus vite.
Niveau performance et légèreté de code, Oxygen est dans le top 1 des constructeurs de thèmes/pages les plus performants, suivi par Beaver Builder puis par Elementor.
Les pages intègrent les éléments HTML de base (section, div, p, hn, a, img, …), il charge uniquement les styles requis par votre design et les scripts, ce qui explique sa légèreté.
De même, comme vous avez la possibilité de choisir vous-même quelle balise de code appliquer à chaque élément HTML de votre structure, vous êtes certain d’obtenir un code simple, efficace et W3C Validator friendly !
Je vais vous montrer un exemple du rendu au niveau du code entre Elementor Pro et Oxygen pour un seul et même titre dans une page vide.
C’en est presque choquant, pour arriver à notre titre « Page test » sur Elementor il faut traverser au moins 8 éléments contre seulement 2 sur Oxygen Builder. Cela démontre et explique bien, entre autres, pourquoi Oxygen offre une performance bien plus rapide et efficace que ses concurrents.
La gestion du responsive avec Oxygen Builder
Encore un bon point, le responsive (abréviation de « responsive web design » , c’est-à-dire l’adaptabilité aux tablettes et mobiles).
Rappelons que le responsive est très important car il permet à un site d’être adaptable pour n’importe quelle taille d’écran (ordinateurs, tablettes, téléphones, mais aussi les écrans de télévision).
Donc en ce qui concerne Oxygen, nous avons sous les yeux le rendu des affichages tablettes et téléphones en quelques clics, et nous voyons directement les modifications que nous faisons. Nous pouvons choisir d’afficher des éléments ou non suivant le format de l’écran via de simples choix mis à disposition dans les modifications proposées ou via des conditions d’affichage que l’on peut régler nous-même.
Les différents prix d’Oxygen Builder
Son prix. Il peut paraître cher au premier abord : 129$ la licence la moins chère. Mais contrairement à Elementor Pro par exemple, c’est une licence à durée de vie illimitée. On paye une seule fois et c’est tout, vous pouvez utiliser cette licence pour le nombre de sites Web que vous voulez !
La formule la plus chère et proposant le plus de fonctionnalités s’élève à 349$ maximum, toujours en paiement unique pour une utilisation illimitée.
À noter que nous ne faisons pas payer la licence à nos clients, c’est inclus dans nos prestations de manière transparente. 😉
Quels sont les inconvénients d’Oxygen Builder ?
Complexe
Pour nous et pour beaucoup d’autres, Oxygen est un super outil de travail, un petit bijou.
Mais son principal défaut pour les débutants et ceux qui n’ont jamais vu ou fait de code HTML et CSS est le fait qu’il soit compliqué à manier.
Je m’explique : toutes les options de modifications de blocs, même certains noms de blocs font référence aux langages de développement Web, les blocs que je vais décrire de “classiques” sont appelés “div”, par exemple, il y a aussi des références au flexbox (display, row, flex-end, …), aux positions (absolute, relative, …), aux états (:hover, :active, :focus), overlay, etc.
Plein de références au code qui pourraient peut-être rebuter plus d’un débutant qui n’a pas de bases en développement Web.
Ce qui peut signifier qu’Oxygen a principalement été fait pour les des agences Web.
Il faut un petit temps d’adaptation pour bien comprendre comment fonctionne Oxygen et optimiser son utilisation. Pour cela, je rappelle, il existe une documentation traduite en français et des tutoriels (en anglais) très bien expliqués de la chaîne YouTube officielle du constructeur de thèmes.
Oxygen Builder est fait pour qui ?
Oxygen vise principalement les intégrateurs/développeurs, et agences comme nous qui ne faisons que des sites entièrement sur-mesures et qui correspondent pleinement aux besoins des clients.
Quels sont les caractéristiques d’Elementor Pro ?
Elementor Pro est une extension WordPress premium (payante) contenant 30 widgets basiques (titre, image, text, boutons, icônes, …) et 42 widgets supplémentaires plus poussés comme les boutons de partages aux réseaux sociaux, un slider, des tables de prix, etc) et 20 widgets concernant Woocommerce.
Pourquoi Elementor est le N°1 mondial ?
La simplicité d’Elementor Pro
Contrairement à Oxygen Builder, Elementor Pro plaît beaucoup aux débutants par sa simplicité. Pas besoin de connaître le code HTML ou CSS pour pouvoir correctement l’utiliser. En effet, le builder propose des widgets à intégrer par glisser/déposer. Les extensions Elementor ou WordPress que l’on peut ajouter gratuitement peuvent ajouter davantage de widgets. De quoi créer un site totalement personnalisé !
La documentation et communauté d’Elementor Pro
Elementor Pro possède une documentation plus complète et plus facilement trouvable qu’Oxygen, autant en anglais qu’en français.
Mais aussi et surtout, il possède une très grande communauté, ce qui permet de trouver facilement sur internet des tutoriels qui nous intéressent et beaucoup d’extensions disponibles en français avec leurs tutoriels et compatibles avec les dernières mises à jour WordPress et Elementor Pro.
Avec Elementor Pro, blocs et templates à foison !
Je répète que nous n’utilisons pas cette fonctionnalité car nous faisons des sites sur-mesures pour nos clients, mais c’est toujours intéressant d’en parler.
Elementor Pro propose plus de 300 templates et blocs riches et variés.
Il est bien-sûr possible de créer ses propres modèles et les enregistrer.
Pour rappel, la version pro d’Elementor est un constructeur de thèmes, ce qui permet d’éditer la totalité de votre site Web (header, corps de page, footer, pages des archives et types de post article) et aussi les éléments Woocommerce sans utiliser de thème WordPress, à l’instar de la version gratuite d’Elementor.
Les Add-ons d’Elementor Pro
Elementor possède un grand nombre d’add-ons (des extensions d’extensions) créés par sa communauté pour lui rajouter plus de fonctionnalités, et sa compatibilité est quasi-totale avec les thèmes et les extensions de WordPress.
En voici quelques unes :
Essential Add-ons for Elementor :
Cet add-on est, pour Elementor, l’un des plus prisé avec plus de 100 000 installations actives. Il permet d’ajouter une trentaine de widgets supplémentaires : des call-to-action, boutons créatifs, galerie filtrable, barre de progression, carrousel de produits Woocommerce, et plus encore !
Tous ces nouveaux widgets permettent d ‘avoir une plus grande capacité de personnalisation de votre site.
Make Column Clickable :
Comme son nom l’indique, cet add-on permet de faire en sorte qu’une colonne devienne cliquable au lieu que ce soit les éléments de manière individuelle.
Ce détail important est très largement faisable sans add-on dans Oxygen, mais ce n’est malheureusement pas le cas pour Elementor. Ce qui en fait un add-on indispensable !
Custom icons for Elementor :
Pour certaines personnes, les icônes proposées par Elementor peuvent sembler trop impersonnelles. Utiliser d’autres icônes, voire vos propres icônes et les enregistrer sera possible sur Elementor avec cet add-on.
Création de formulaires
Elementor Pro propose son propre constructeur de fenêtres pop-up et formulaires de contact, contrairement à Oxygen où nous devons télécharger une extension WordPress (gratuite ou payante suivant vos besoins) pour cela.
Quels sont les inconvénients d’Elementor ?
Les mauvaises performances d’Elementor
Comme expliqué plus tôt dans cet article, Elementor et Elementor Pro ont une mauvaise performance et leur code est lourd. Ce qui implique un chargement de page plus lent et qui dit “page qui charge lentement” dit “utilisateur qui ira voir ailleurs”.
Ce qui est assez dommage quand il s’agit de l’extension la plus téléchargée de WordPress.
De plus en plus complexe
A cause des milliers d’options que sa communauté apporte, il devient de plus en plus compliqué d’apprendre à maîtriser la bête.
Mais pas de panique, il existe des milliers de tutos pour apprivoiser chacune de ces options.
Des tutoriels écrits comme celui de WPFormation ou encore des tutoriels vidéos comme celui de grafikart.
Version Pro limitée
Il n’y a pas de Licence à utilisation illimitée. La version pro propose cinq formules et démarre à partir d’environ 45€ par an pour une utilisation sur un seul site. La formule la plus chère offre une utilisation sur 1000 sites, un an de mise à jour et un an de support VIP pour 999$ par an.
Pour qui est fait Elementor ?
Elementor et Elementor Pro sont surtout faits pour les personnes souhaitant créer leur site Web de manière ludique et n’ayant pas ou peu de connaissances en codage HTML et CSS. Et n’est peut être pas l’idéal question prix pour un professionnel.
Donc, en ce qui nous concerne, Elementor Pro n’est pas le bon choix à faire.
Conclusion
Nous sommes passés de Elementor Pro à Oxygen Builder tout simplement parce qu’il offre plus d’options, et est beaucoup plus maniable pour nous en tant que développeurs Web. Il a une capacité de personnalisation beaucoup plus poussée, une performance largement supérieure à celle de ses concurrents, la maintenabilité est plus facile et plus agréable.
Nous mettons beaucoup moins de temps à la réalisation d’un site Web avec Oxygen Builder qu’avec Elementor Pro.
Et financièrement, il a un bien meilleur rapport qualité prix dans le temps.
Cependant, Elementor Pro peut mieux convenir aux débutants n’ayant pas ou peu de connaissances en développement Web pour faire leur propre site Web.
