Oxygen Builder WordPress : Tutoriel complet, de l’installation à la mise en ligne

Oxygen Builder est un page builder puissant conçu pour WordPress, qui s’adresse aux utilisateurs souhaitant un contrôle total sur le design et les performances de leur site. 🌟 Contrairement à des outils comme Elementor ou Divi, Oxygen remplace complètement le thème WordPress, offrant ainsi une optimisation avancée du code et du temps de chargement.⚡

👇 Dans ce guide, nous allons découvrir pas à pas comment installer, configurer et maîtriser Oxygen Builder, depuis l’achat du plugin jusqu’à la mise en ligne d’un site performant et optimisé.🚀

Objectif

L’objectif de cet article est de vous guider pas à pas dans l’utilisation d’Oxygen Builder pour WordPress 🚀. De l’installation à la mise en ligne, vous apprendrez à exploiter pleinement ce page builder puissant, idéal pour créer des sites rapides, optimisés et flexibles 💡. Que vous soyez développeur ou designer, ce tutoriel vous aidera à maîtriser Oxygen et à concevoir des pages personnalisées sans limite 🎨.

Prérequis

Avant de commencer, assurez-vous d’avoir :

• Un site WordPress installé et fonctionnel.
• Une licence active d’Oxygen Builder.
• Un hébergement compatible avec PHP 8+ et MySQL 5.7+.
• Une connaissance de base en HTML et CSS (optionnel, mais recommandé).
• Un navigateur web moderne (Chrome, Firefox, Edge).

Une solution clés en main pour créer un site WordPress ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Présentation d’Oxygen Builder

Oxygen Builder est un page builder avancé lancé en 2016 par Soflyy. Contrairement aux constructeurs classiques comme Elementor ou Divi, il remplace totalement le thème WordPress au lieu de simplement le compléter. Cette approche unique permet une meilleure optimisation du code, réduisant ainsi le temps de chargement des pages.

Oxygen cible principalement les développeurs et designers qui recherchent une flexibilité totale. Il offre une gestion approfondie du CSS, des styles globaux, et une compatibilité étendue avec WooCommerce. De plus, il permet d’utiliser PHP et JavaScript pour une personnalisation avancée.

Les principaux atouts d’Oxygen sont :

• Performance : un site plus rapide grâce à un code épuré.
• Contrôle total : pas de dépendance à un thème, liberté maximale.
• Flexbox & Grid : mise en page moderne et adaptable.
• Optimisation SEO : meilleure structure pour le référencement.

Bien que plus technique, Oxygen Builder est une solution puissante et modulaire, idéale pour ceux qui veulent un site ultra-personnalisé et performant.

Installation et configuration initiale

1. Achat et téléchargement du plugin

Oxygen Builder est un plugin premium, ce qui signifie qu’il n’est pas disponible gratuitement dans le répertoire officiel de WordPress. Pour l’obtenir, il faut se rendre sur le site officiel oxygenbuilder et choisir l’une des trois formules disponibles :

• Oxygen Basic – licence à vie avec accès aux fonctionnalités de base.
• Oxygen WooCommerce – inclut des outils avancés pour personnaliser une boutique WooCommerce.
• Oxygen Ultimate – offre toutes les fonctionnalités, y compris des blocs Gutenberg et des intégrations avancées.

Une fois que la licence est achetée, vous pouvez accéder à votre compte client et télécharger le fichier ZIP contenant le plugin. Il est conseillé de conserver précieusement vos identifiants, car ils seront nécessaires pour les mises à jour et l’assistance technique.

2. Installation d’Oxygen Builder sur WordPress

L’installation d’Oxygen Builder se fait en quelques étapes simples, comme tout autre plugin WordPress :

• Connectez-vous à l’interface d’administration WordPress.
• Allez dans la section « Extensions > Ajouter une extension ».

• Cliquez sur le bouton « Téléverser une extension «  et importer le fichier ZIP.

• Cliquez sur le bouton « Installer maintenant »

• Une fois que l’installation est terminée, vous serez redirigé vers une nouvelle interface, cliquez sur le bouton « Activer l’extension ».

3. Activation et configuration initiale

Après l’installation, Oxygen demande d’activer la licence en saisissant la clé fournie lors de l’achat. Cette étape est indispensable pour recevoir les mises à jour et bénéficier de l’assistance technique.Une fois que la licence est validée, Oxygen ajoute un nouveau menu dans l’administration WordPress : « Oxygen > Settings (Paramètres d’Oxygen) ».

Dans ce menu, plusieurs options importantes sont disponibles :

• Security : permet de restreindre l’accès à Oxygen en fonction des rôles utilisateurs (utile pour éviter des modifications accidentelles).
• Library : active ou désactive l’accès aux modèles préconçus fournis par Oxygen.
• Performance : active la minification du CSS et JavaScript pour améliorer la vitesse du site.

Il est recommandé d’activer la minification et de tester les paramètres de performance pour optimiser le temps de chargement.

4. Choisir entre un « Premade Website » et une installation vierge

Lors du premier lancement d’Oxygen, l’utilisateur doit choisir entre deux options :

• Premade Website – permet d’importer un site clé en main avec une mise en page et des styles prédéfinis. Cette option est idéale pour ceux qui souhaitent démarrer rapidement avec un design professionnel.
• Installation vierge – laisse un site complètement vide, permettant une création 100 % personnalisée. Cette option est recommandée pour les développeurs et designers expérimentés.

Une fois que le choix est effectué, Oxygen ouvre son éditeur visuel, prêt à être utilisé pour concevoir le site. À partir de là, il est possible d’ajouter des sections, colonnes, éléments interactifs et styles personnalisés.

5. Vérification et tests après l’installation

Avant de commencer la création du site, il est important de vérifier certains points :

• Compatibilité des plugins – Oxygen fonctionne bien avec la majorité des plugins, mais certains peuvent être incompatibles, notamment ceux qui affectent la mise en page.
• Sauvegarde – avant toute modification importante, il est conseillé de faire une sauvegarde complète du site via un plugin comme UpdraftPlus ou via l’hébergeur.
• Tests de performance – Oxygen améliore la vitesse du site, mais il est toujours utile de tester les performances avec Google PageSpeed Insights ou GTmetrix.

Découverte de l’interface d’Oxygen Builder

Une fois que Oxygen Builder installé, il est temps de découvrir son éditeur visuel. Contrairement à Elementor ou Divi, Oxygen offre une interface épurée et minimaliste, mettant l’accent sur la performance et le contrôle total du design.

1. Présentation de l’éditeur visuel

L’éditeur d’Oxygen fonctionne selon le principe WYSIWYG (What You See Is What You Get), permettant de concevoir une page en glisser-déposer tout en ayant une vue en temps réel du rendu final.

L’interface est composée de plusieurs panneaux principaux :

• Barre supérieure : contient les boutons pour sauvegarder, prévisualiser et annuler les modifications.
• Panneau latéral gauche : sert à ajouter des éléments, gérer les styles et configurer les options globales.

• Zone centrale : représente la page en cours de modification, où l’on peut cliquer sur les éléments pour les personnaliser. Vous pouvez par exemple, ajouter un bloc Vidéo dans la page.

• Structure Tree (arborescence) : affiche l’organisation des éléments sous forme de hiérarchie, facilitant la navigation et la gestion des sections.

Cette approche permet un travail plus précis, notamment pour les sites nécessitant une personnalisation avancée du design.

2. Explication des panneaux et options disponibles

Dans le panneau latéral gauche, plusieurs onglets essentiels sont disponibles :

• Add (Ajouter) : permet d’insérer des sections, colonnes, boutons, formulaires, blocs de texte, images et autres composants.

• Structure : affiche l’arborescence complète de la page, permettant une navigation rapide entre les éléments.
• Selectors : utilisé pour gérer les styles globaux et appliquer des modifications uniformes sur tout le site.
• Advanced : donne accès aux réglages CSS, animations et options spécifiques pour les développeurs (HTML, JavaScript, conditions dynamiques).

Oxygen ne propose pas de barre latérale flottante comme Elementor. Tout se fait via ces panneaux fixes, ce qui permet une expérience plus structurée et efficace.

3. Fonctionnalités majeures

Oxygen Builder se distingue par des outils puissants qui permettent de personnaliser entièrement un site :

• Global Colors : permet de créer une palette de couleurs et de l’appliquer à l’ensemble du site pour une cohérence visuelle parfaite.
• Flexbox & Grid : offre un contrôle avancé de la mise en page avec des alignements précis et responsifs.
• Logique conditionnelle : permet d’afficher ou masquer des éléments selon des conditions spécifiques (exemple : afficher un bouton uniquement pour les utilisateurs connectés).
• Repeater : fonctionnalité avancée permettant d’afficher des contenus dynamiques, utile pour les blogs et boutiques WooCommerce.
• Dynamic Data : intégration directe avec WordPress pour afficher du contenu dynamique, comme des titres, catégories et champs personnalisés.

4. Premiers pas dans l’éditeur

Lorsque vous ouvrez une page avec Oxygen, il est conseillé de suivre ces étapes :

• Ajouter une section : cliquer sur le bouton « Add > Section » pour structurer la mise en page.

• Insérer des éléments : ajouter du texte, des images, des boutons, et les personnaliser avec les options de styles.

• Dans l’onglet « Advanced » : définir les polices, couleurs et espacements pour garder une harmonie graphique.

• Tester la responsivité : Oxygen permet d’ajuster la mise en page pour les écrans mobile, tablette et desktop.

Avec cette interface intuitive et puissante, Oxygen offre un contrôle total sur la conception du site, sans les limitations des autres builders.

Création de pages et personnalisation

Après avoir découvert l’interface d’Oxygen Builder, il est temps de passer à la création des pages et à leur personnalisation avancée. Oxygen offre une flexibilité totale, permettant d’adapter le design aux besoins spécifiques de chaque projet.

1. Ajout et édition de sections, colonnes et éléments

La création d’une page commence par l’ajout de sections, qui sont les blocs de base de la mise en page. Pour ajouter une section :

• Cliquer sur le bouton « Add > Section« .
• Ajuster la hauteur et la largeur selon le besoin.
• Ajouter des colonnes en utilisant Divs ou en sélectionnant une structure prédéfinie.

Oxygen ne fonctionne pas avec un système de grille classique, comme Elementor. Ici, tout est basé sur Flexbox et CSS Grid, ce qui permet une personnalisation plus avancée.

Les éléments disponibles sont variés :

• Texte : permet d’ajouter du contenu écrit avec un contrôle précis des polices et des styles.
• Images : possibilité de définir des images fixes ou dynamiques (ex. : logo, photo d’article).
• Boutons : personnalisables avec des animations et des effets au survol.
• Formulaires : idéal pour capturer des leads ou créer un formulaire de contact.
• Sliders et accordéons : permettent d’afficher du contenu interactif.

2. Gestion des styles et personnalisation avancée

Oxygen se démarque par un contrôle précis du design, sans dépendre d’un thème WordPress.

• Utilisation des classes et ID : chaque élément peut être stylisé individuellement ou via des classes globales pour un design cohérent.
• Custom CSS & JavaScript : Oxygen permet d’ajouter du code personnalisé directement dans l’éditeur pour affiner le style.

• Effets avancés : intégration native des animations CSS, des transitions et des effets au scroll.
• Mode responsive : permet d’adapter chaque section aux écrans desktop, tablette et mobile avec des réglages spécifiques.

Exemple : Pour créer un effet de survol sur un bouton, on peut utiliser :

• Hover State dans le panneau de styles.
• Ajouter une transition CSS pour une animation fluide.

3. Création de modèles réutilisables

Oxygen Builder permet de créer des templates pour structurer rapidement un site.

Voici les types de modèles disponibles :

• Main Template : modèle principal utilisé sur toutes les pages.
• Header/Footer : permet de définir une en-tête et un pied de page global.
• Templates dynamiques : utilisés pour afficher des contenus provenant de WordPress (articles, produits WooCommerce…).

4. Utilisation des Re-usable Parts et des composants dynamiques

Les re-usables parts permettent de créer des sections réutilisables (ex. : bouton d’appel à l’action, bannière…). Il suffit d’enregistrer une partie et de l’insérer partout où elle est nécessaire.

Exemple d’utilisation : Un bloc testimonial peut être utilisé sur plusieurs pages sans avoir à le recréer.

Oxygen se connecte aux champs personnalisés de WordPress (ACF, Meta Box, Toolset…). Cela permet d’afficher automatiquement des titres, images, catégories ou tout autre contenu dynamique.

Compatibilité avec les plugins et thèmes

Oxygen Builder fonctionne différemment des autres page builders car il désactive complètement le système de thèmes de WordPress. Cela soulève une question importante : est-il compatible avec les thèmes et plugins courants ?

1. Oxygen Builder fonctionne-t-il avec les thèmes WordPress ?

Non, Oxygen ne nécessite pas de thème WordPress car il prend le contrôle total du design. Après son activation, il désactive l’éditeur de thème et les fichiers header.php, footer.php ou functions.php ne sont plus utilisés.

2. Gestion des plugins courants

Oxygen reste compatible avec la majorité des plugins WordPress, notamment :

• WooCommerce : Oxygen propose des éléments dédiés pour personnaliser les pages produits et le panier.
• Plugins SEO (Yoast, Rank Math) : fonctionnent normalement, bien que l’analyse en temps réel ne soit pas toujours disponible.
• WPForms, Contact Form 7 : intégration facile via des shortcodes.
• Plugins de sécurité et de cache (WP Rocket, Sucuri, Wordfence) : Compatibles sans configuration particulière.

3. Problèmes potentiels et solutions

• Incompatibilité avec certains plugins de personnalisation de thème : pas de solution, Oxygen remplace les thèmes.
• Conflits avec les plugins de création de pages (Elementor, Divi) : désactiver les autres page builders avant d’installer Oxygen.
• Problèmes d’aperçu avec certains plugins : utiliser l’option Regenerate CSS Cache dans les paramètres d’Oxygen.

Performances et SEO

L’un des grands avantages d’Oxygen Builder est son impact positif sur les performances et le référencement naturel (SEO). Contrairement à des page builders classiques comme Elementor ou Divi, Oxygen génère un code propre et optimisé, ce qui améliore la vitesse de chargement et le classement dans les moteurs de recherche.

1. Oxygen est-il plus rapide que ses concurrents ?

Oui, Oxygen Builder est souvent plus rapide que ses concurrents car :

• Il n’utilise pas de shortcodes : contrairement à Divi ou WPBakery, Oxygen génère un HTML/CSS plus léger.
• Moins de requêtes HTTP : il charge moins de fichiers CSS et JavaScript externes.
• Meilleure compatibilité avec les plugins de cache : fonctionne bien avec WP Rocket, LiteSpeed Cache et Autoptimize.

2. Optimisation pour le référencement naturel (SEO)

Oxygen Builder permet une meilleure structure SEO, notamment grâce à :

• Un balisage HTML optimisé (titres H1-H6 bien structurés).
• Une meilleure gestion du maillage interne grâce aux templates dynamiques.
• Une compatibilité avec Rank Math et Yoast SEO.

3. Gestion du responsive design et de l’accessibilité

Oxygen permet d’adapter facilement les designs aux écrans mobiles et tablettes avec des points de rupture personnalisés.

Mise en ligne et gestion du site

Une fois que site est conçu avec Oxygen Builder, il est essentiel de bien préparer sa mise en ligne pour éviter les erreurs techniques et optimiser ses performances.

1. Sauvegarde et exportation du site

Avant de publier, il est fortement recommandé de :

• Faire une sauvegarde complète avec un plugin comme UpdraftPlus ou All-in-One WP Migration.
• Exporter les modèles Oxygen via la section « Oxygen > Export & Import » pour faciliter la restauration en cas de problème.

2. Tests de compatibilité et corrections avant publication

Avant la mise en ligne, effectuez ces vérifications :

• Compatibilité mobile : tester le site sur différents appareils via Chrome DevTools (F12 > Mode responsive).
• Vitesse de chargement : vérifier avec Google PageSpeed Insights et optimiser si nécessaire.
• Liens et formulaires : vérifier que tous les liens fonctionnent correctement.

3. Optimisations finales avant la mise en production

• Activer un plugin de cache (WP Rocket, LiteSpeed Cache).
• Vérifier l’indexation SEO avec Google Search Console.
• Activer la compression Gzip et le Lazy Load des images.

Une fois que ces étapes sont validées, votre site est prêt à être mis en ligne et pleinement fonctionnel ! 🚀

Utiliser Oxygen Builder avec LWS

L’hébergement joue un rôle essentiel dans les performances et la stabilité d’un site conçu avec Oxygen Builder. Parmi les hébergeurs disponibles, LWS se démarque par sa compatibilité avec WordPress et ses performances adaptées aux sites construits avec Oxygen.

1. Comment installer Oxygen Builder avec un hébergement LWS ?

L’installation d’Oxygen sur un hébergement LWS se fait en quelques étapes :

• Choisir une offre d’hébergement WordPress sur le site de LWS.
• Installer WordPress en un clic via le panneau de configuration.
• Importer Oxygen Builder en téléversant le fichier ZIP dans la section « Extensions > Ajouter une extension ».
• Activer le plugin et entrer la clé de licence.

2. Avantages de LWS pour héberger un site conçu avec Oxygen

• Serveurs optimisés pour WordPress avec PHP 8 et MySQL 8.
• Disques SSD NVMe pour un temps de chargement plus rapide.
• Support technique réactif en cas de problème.

3. Comparaison des performances : mutualisé vs dédié

• Mutualisé : moins cher, mais peut ralentir si le site a beaucoup de trafic.
• Dédié : plus performant, idéal pour les sites e-commerce ou professionnels.

LWS est donc une option fiable pour héberger un site Oxygen Builder performant et optimisé.

Avis et conclusion

Oxygen Builder est une solution puissante pour ceux qui recherchent un contrôle total sur leur design et leurs performances. Contrairement à Elementor ou Divi, il supprime la dépendance aux thèmes WordPress, offrant ainsi un code propre et optimisé. ✅ Le plugin offre des multiples avantages : Performance, flexibilité, compatibilité WooCommerce, personnalisation avancée. Oxygen est recommandé pour les développeurs et designers souhaitant un site léger et sur-mesure. Son approche le distingue des autres builders, en faisant un excellent choix pour les projets exigeants.🌟

Besoin d’un hébergement WordPress rapide et de qualité ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l’offre

En lisant ce guide, vous disposez désormais de toutes les connaissances pour lancer votre site WordPress avec Oxygen Builder. Si vous avez des avis, des ajouts ou des suggestions, partagez-les avec nous dans les commentaires.