Menu
En tant qu’agence de développement web, nous avons souvent l’occasion de travailler avec l’extension WordPress : Oxygen Builder.
Cette extension est un theme builder (un constructeur de thèmes en français) ce qui signifie que contrairement à un page builder (constructeur de pages en français) comme Elementor en version gratuite , votre site web n’a pas besoin d »avoir de thème WordPress d’activé pour pouvoir fonctionner. Concrètement, la fonctionnalité « thème » de WordPress est désactivée. Ainsi vous avez une liberté totale sur le webdesign de votre site internet. Vous allez avoir contrôle total sur n’importe quel bloc de votre site web comme le header, le footer, le moindre petit détail des pages, des articles, des produits si votre site en possède, etc.
Tout est personnalisable, et tout ça sans passer par un thème pouvant freiner notre créativité car un thème permet d’avoir une apparence « prédéfinie » sur les couleurs, les blocs et autres. Mais Oxygen Builder supprime cette fonctionnalité et ainsi plus aucune perte de temps à rechercher un thème qui correspond à vos attentes. La construction de l’apparence de votre site n’aura comme limite que votre imagination, vous pourrez demander et faire ce que vous voulez grâce au constructeur de thème Oxygen Builder!
Installer Oxygen Builder se passe exactement comme n’importe quelle autre extension WordPress.
Cependant, Oxygen Builder est une extension payante. Ainsi :
Une fois votre extension ajoutée, il ne vous restera plus qu’à l’activer en passant par l’interface qui liste vos extensions (Extensions > Extensions installées).
Notez que pour éviter toute erreur d’activation, Oxygen Builder a besoin que la version PHP installée sur votre hébergement soit supérieure ou égale à la version 5.6.
Après avoir téléchargé et activé Oxygen Builder un écran vous proposera deux possibilités :
Pour quelqu’un qui débute sur Oxygen Builder, il est préférable de choisir « Blank Installation » car vous comprendrez mieux le fonctionnement et les éléments qui constituent une page, un article, etc. En effet, si vous choisissez « Premade Website« en ne connaissant pas les bases d’Oxygen Builder, décomposer ou modifier des éléments vous sera plus compliqué.
Si vous souhaitez être averti des nouvelles versions d’Oxygen Builder et les télécharger directement depuis votre Back Office WordPress, entrez votre clé de licence en survolant « Oxygen » et en cliquant sur « Settings », sur l’onglet « License ».
Vous pouvez trouver votre clé de licence sur le portail client d’Oxygen Builder.
Besoin d'aide pour installer le plugin Oxygen Builder ?
Oxygen Builder fonctionne avec un système de templates (modèles de pages ou de blocs pouvant être utilisés sur plusieurs types de postes).
Par exemple, si dans un site web où le header et le footer sont identiques sur tous les types de postes, je peux créer un template que je nommerai « Template principal » où je construirai mon header et mon footer.
Ce template je peux, via ses réglages, faire en sorte qu’il s’affiche sur toutes les pages de mon site et ainsi donner le même header et footer à toutes mes pages.
Je peux faire un template pour que tous mes articles aient la même apparence, ou encore configurer l’apparence de la page 404, de la page listant les résultats de recherche, faire un template pour une page en particulier, on peut créer un template pour tout type de poste qui compose votre site web.
Pour ce faire :
Avec Oxygen Builder vous avez la possibilité d’ajouter des paramètres généraux, ces paramètres permettent de concentrer tout le style général que comporte le webdesign de votre site web : ses couleurs principales, la taille standards de vos titres, la taille du texte, la largeur standards que prendra votre contenu dans la page, le style de base des liens, les paramètres des colonnes et section, les animations, etc.
Ces paramètres se trouvent dans l’éditeur Oxygen de l’importe quel type de poste.
En haut à droite de l’interface vous aurez un menu déroulant nommé « Manage », cliquez dessus puis cliquez sur « Settings », un menu latéral s’ouvrira et ce sera dans ce menu que vous pourrez entrer tous les paramètres que vous souhaitez.
Ce qui est pratique avec les paramètres généraux c’est que si vous avez n’importe quelle modification de webdesign, comme une des principales couleur de votre site qui change, vous pourrez directement faire cette modification depuis ces paramètres généraux au lieu de passer sur toutes les pages de votre site pour faire ce changement.
Si un bloc est exactement le même sur minimum deux pages (même fond, même forme, même contenu) vous pouvez en faire un bloc réutilisable. C’est le même principe que pour un template sauf qu’au lieu d’être un modèle de page c’est un modèle de bloc unique que l’on peut intégrer sur plusieurs types de postes différents.
Après avoir fait votre template principal composé de votre header et de votre footer, vous pourrez directement éditer vos pages/articles avec Oxygen Builder.
Pour éditer une page survolez l’onglet « Pages » depuis le menu principal du back office WordPress de votre site et cliquez sur « Toutes les pages », pour les articles vous avez simplement à survoler l’onglet « Articles » puis cliquer sur « Tous les articles ».
Vous aurez ainsi la liste complète de vos pages/articles.
Pour ajouter une nouvelle page, cliquez sur le bouton « Ajouter » en haut de l’interface puis cliquez sur « Edit with Oxygen« .
Si vous voulez éditer une page existante avec Oxygen, sur l’interface qui liste toutes vos pages, survolez la page qui vous intéresse, vous verrez apparaître « Edit with Oxygen » cliquez dessus et vous pourrez commencer votre édition avec Oxygen. Pour les articles ce sera exactement le même procédé.
Première chose à faire avant de se lancer dans la création de ses pages c’est de savoir si des éléments sont identiques dans la forme : des blocs de même couleur, de même taille, de même padding et/ou margin, …
Faire cela vous permettra de vous préparer à créer des classes.
Les classes sont un peu comme les paramètres généraux mais centrés sur un groupe de blocs.
Par exemple, j’ai deux blocs ayant un fond vert. Au lieu de mettre le paramètre de fond vert individuellement à ces deux blocs, je créé une classe comportant ce fameux paramètre de fond vert et je lie cette classe à ces deux blocs. Si jamais ces deux blocs changent de fond et doivent devenir violet, j’aurais juste à modifier la classe qui les unis.
Aussi, un avantage que comporte Oxygen Builder, c’est la possibilité d’utiliser des blocs ou pages pré-fait(e)s via la bibliothèque qui vous est fournie dans l’extension.
Vous y accédez via l’interface d’édition de n’importe quel type de poste.
La librairie d’Oxygen comporte plus d’une centaine de blocs et de pages pré-faites.
Enfin, la gestion du responsive via Oxygen n’est pas plus difficile à gérer que celle d’Elementor freemium.
Le réglage se fait élément par élément, cliquez sur un élément de votre poste et vous aurez dans le menu latéral gauche, en dessous du nom de votre élément en question se trouve un petit logo d’ordinateur, cliquez dessus et vous pourrez choisir quelle taille d’écran vous souhaitez éditer.
Les paramètres donnés à toute taille d’écran autre que « all devices » sont purement indépendants des autres.
La présentation d’Oxygen Builder s’arrête ici. Vous pouvez toutefois aller visiter les autres articles plus précis sur le sujet sur notre site pour approfondir vos connaissances sur votre nouvelle extension.
Vous constaterez ainsi son potentiel incroyable !
Oxygen Builder est une très bonne extension de WordPress qui peut s’utiliser sans avoir de connaissance de développeur web, comme connaitre le HTML, le CSS ou le JavaScript.
Cependant, si vous avez un minimum de bases dans ces langages vous pourrez plus facilement comprendre et utiliser le maximum du potentiel de cette extension !
Besoin d'aide pour configurer et utiliser le plugin Oxygen Builder ?
Ce site sur le CMS WordPress est proposé par Guillaume Meyer. Je mets à votre disposition des ressources WordPress en complément des formations WordPress que je donne. Ce site est là pour vous aider à créer et maintenir votre site internet WordPress.
LIENS UTILES