Table des matières
Ce cours est à voir comme un dictionnaire listant les différents éléments de l'interface, que vous pourrez consulter à chaque fois que vous avez besoin de précisions. Ne vous inquiétez pas si vous ne comprenez pas tout les points qui sont abordés, vous pourrez y revenir plus tard.
Oxygen Builder est un logiciel d'édition de pages web conçu pour que vous puissiez modifier l'ensemble de la structure de votre site. Pour en savoir plus sur ce qu'est Oxygen Builder, consultez notre guide dédié.
Il est possible d'accéder aux paramètres et à des fonctionnalités spécifiques via le panneau de contrôle. Dans ce guide, nous partons du principe que vous avez compris ce qu'est Oxygen et que vous savez utiliser le panneau de contrôle, afin de pouvoir rentrer tout de suite dans le vif du sujet.
Chaque page créée sur votre site est modifiable avec Oxygen. Les articles sont quand à eux directement modifiable sur WordPress. Pour en modifier la structure, il faut généralement éditer le template. Consultez le guide dédié pour en savoir plus. Notez qu'il est conseillé de lire ce guide auparavant pour vous familiariser avec Oxygen.
Nous abordons dans ce guide toutes les commandes d'Oxygen. SI vous souhaitez simplement faire quelques modifications légères sur votre site, consultez la version simplifiée de ce guide.
Depuis votre panneau de contrôle, rendez-vous sur l'onglet pages puis cliquez sur modifier en passant la souris sur la page que vous souhaitez éditer.
Vous accédez à une nouvelle interface. Cliquez sur le gros bouton Edit with Oxygen pour le modifier.
Une fois le chargement effectué, vous arrivez sur l'interface d'Oxygen.
La barre latérale droite indique les éléments que contient votre page. La construction que vous voyez à l'écran est à voir comme une arborescence avec des sections ou sous-sections.
Si un élément a une flèche sur le côté, cela signifie qu'il contient d'autres éléments. On dit que c'est un conteneur. Cliquez sur le conteneur pour afficher d'autres éléments.
Sur notre exemple, nous avons cliqué sur la flèche du conteneur marge, qui contient trois autres éléments : formations, témoignages et divers. Ces éléments ayant une flèches, ce sont aussi des conteneurs.
Si vous êtes perdu, pensez à consulter le guide traitant de la logique du développeur pour bien comprendre pourquoi et comment doit être organisé une page web.
La barre latérale droite est généralement l'une des choses qui désarçonne le plus les utilisateurs qui débutent sur Oxygen. Avant de continuer, il est donc essentiel que vous preniez bien en main cette partie de l'interface. Pour vous simplifier la lecture, ne développez que la section qui vous intéresse :
Pour fermer un conteneur, cliquez simplement à nouveau sur la flèche. Vous pouvez également fermer tous les onglets en cliquant sur le bouton collapse all en haut de la barre latérale droite.
Une icône accompagne chaque élément pour vous permettre de l'identifier plus rapidement :
Important : Lorsque vous souhaitez insérer un élément, vous devez prendre soin de sélectionner le conteneur parent. Evitez dans la mesure du possible d'insérer des éléments au hasard sur votre page, au risque de vous retrouver avec une structure difficile à lire et à modifier.
Si vous suivez le parcours recommandé de cette formation, il est conseillé de basculer sur le cours dédié aux divs et au conteneur, puis de revenir ensuite sur ce cours
Pour déplacer un élément, saisissez-le avec votre souris et faites-le glisser jusqu'à l'endroit où vous souhaitez.
Dans notre exemple, la div Avantages était auparavant situé après la div Formations, ce qui signifiait que lorsque l'on consulte la page, la section Avantages apparaissait avant la section Formations. Nous avons ici déplacé la div Avantages pour la mettre au dessus de la sections Formations. A présent, la section Avantages apparaîtra en premier à l'écran.
N'oubliez pas de conserver l'arborescence de la page ! Ici, la div Avantages doit rester dans le conteneur parent, Marge, pour éviter de casser la mise en page. Consultez le guide sur la logique du développeur pour la construction de pages pour en savoir plus.
En survolant un élément avec votre souris, de nouvelles options apparaissent :
Cliquez sur le pinceau pour faire apparaître de nouvelles options :
Pour modifier le contenu d'un élément sélectionné, consultez la section suivante.
Lorsque vous cliquez sur un élément dans la barre de structure ( à droite), ses options de personnalisation s'ouvrent dans la barre latérale de gauche, vous donnant accès aux options personnalisation.
Vous pouvez également accéder aux options de personnalisation en cliquant directement sur l'élément que vous voyez à l'écran.
Attention :
Pour en savoir plus, voici les lien vers les guides relatifs :
Les classes sont une caractéristique essentielle à maîtriser si vous souhaitez modifier des éléments sur votre site.
Pour faire court, un élément peut avoir plusieurs règles différentes de conception.
Si vous voulez vous assurer que vos modifications s'appliqueront, assurez-vous d'avoir sélectionné l'identifiant, ou l'ID, c'est-à-dire le texte avec la pastille bleue comme ci-dessus.
Vous pouvez sélectionner la classe ou l'ID à choisir en cliquant dessus.
Pour en savoir plus sur les classes et les règles de conception, consultez le guide dédié.
Cet onglet sert d'une part à prévisualiser le site avec Oxygen dans différents formats, et d'autre part à éditer des règles spécifiques à partir d'un certain format. Il est par exemple possible de faire en sorte qu'un texte ait une taille de police plus petite pour un format tablette ou mobile.
Nous aborderons cet aspect de votre site en détail plus tard dans cet article.
Les options de personnalisation sont divisées en dix onglets, chacun en charge d'une aspect précis. Lorsque vous ouvrez les options de personnalisation, vous tombez par défaut sur la partie Primary, qui gère les options générales. Toutes les autres options sont contenues sur la partie Advanced, qui contient les neuf autres onglets.
Cliquer sur la partie Advanced permet de visualiser les onglets qui contiennent actuellement des modifications, à savoir ceux qui comportent un point vert.
Contient les informations principales, notamment l'alignement des éléments. Pour en savoir plus, consultez le guide dédié.
Cet onglet permet de mettre une couleur ou une image en arrière-plan. À utiliser sur une Div.
Il est également possible de préciser comment l'image doit s'afficher en fonction de la taille d'écran. Pour plus d'informations consulter le guide dédié.
Attention, cet onglet n'est utile que si vous souhaitez mettre une image (ou une couleur) en arrière-plan. Si vous souhaitez intégrer une image à part entière, utilisez plutôt l'élément image Pour en savoir plus, consultez le guide sur les différences entre image et image en arrière-plan.
Cet onglet permet de gérer la taille des différents éléments de votre site et l'espace entre chacun d'entre eux.
Pour en savoir plus, consultez le guide dédié.
Cet onglet, comprend les options de mises en page plus complexes, notamment pour le positionnement . Pour en savoir plus, consultez le guide dédié.
Cet onglet comprend les règles relatives au texte. Taille de police, alignement, graisse ...
Il est préférable d'utiliser cet onglet uniquement sur les éléments de texte et de titre, et pas sur les Div.
Pour en savoir plus sur cet onglet, consultez le guide dédié.
Si vous avez des changements à effectuer, vous pouvez également appliquer une classe ou appliquer des règles de typographie pour tout votre site.
Cet onglet vous permet de gérer les bordures de vos éléments. Pour en savoir plus, consultez le guide dédié.
Cet onglet contient divers effets à mettre sur votre site. Il n'est cependant pas conseillé de l'utiliser. Consulter le guide dédié pour savoir pourquoi il ne faut pas l'utiliser et comment créer des effets par vous-même.
Cet onglet est à ignorer. Si vous souhaitez écrire du CSS, utilisez plutôt Advanced Scripts
Cet onglet est à ignorer. Si vous souhaitez écrire du Javascript, utilisez plutôt Advanced Scripts
Cet onglet sert à rajouter des attributs à un élément de votre site. Utile uniquement si vous avez besoin qu'un élément réagisse quand du code très spécifique est activé.
Vous n'en avez pas besoin dans une utilisation normale.
La barre supérieure gère les informations les plus importantes de la page ainsi que certains paramètres du site.
Ce bouton est celui qui vous permet d'ajouter de nouveaux éléments sur votre page : textes, div, menus, etc ... Si vous souhaitez l'utiliser, assurez-vous d'avoir au préalable suivi le guide relatif à la logique du développeur pour la construction de pages.
Cliquer sur le bouton ajouter ouvrira plusieurs sections. Les éléments à privilégier sont précisés dans la liste ci-dessous.
Les éléments les plus courants que vous serez amené à ajouter sur votre site.
Pour vous aider, certains raccourcis ont déjà été configuré sur votre site Appuyez sur la touche :
Cet onglet sert à faire apparaître des éléments interactifs ou dynamiques. Slider, lecteur vidéo, bouton retourner en haut de page ...
L'intérêt de cette section est qu'elle permet de mettre en place rapidement des éléments élaborés, qui nécessiteraient normalement d'écrire du Javascript. Nous attirons cependant votre attention sur le fait que ces éléments restent plus ou moins complexes à mettre en place. Il est recommandé de bien prendre en main l'interface d'Oxygen au préalable.
Parmi ces éléments, un en particulier va nous intéresser :
Cet onglet est plus ou moins identique à l'onglet Helpers, à la différence près qu'il permet d'intégrer des éléments dynamiques directement liés à WordPress.
Pour donner un exemple, le sous-onglet dynamic data permet d'intégrer des éléments provenant d'autres articles ou de pages. Pour en savoir plus, consultez le guide dédié.
Cet onglet fonctionne de la même manière que l'onglet Helpers, en permettant d'intégrer directement des éléments complexes. La différences est que ces éléments sont issus d'un logiciel tiers, Oxyextras, qui permet d'intégrer des éléments encore plus aboutis, mais aussi plus lourd. Pour cette raison, la plupart des éléments ne sont généralement pas activés. Pour en savoir plus, consultez le guide dédié.
Cet onglet vous permet de styliser directement sur Oxygen votre formulaire de contact. Pour en savoir plus, consultez le guide dédié.
Cet onglet n'est utile que dans le cas où vous souhaitez rajouter des pages pré-définies, avec un design différent.
Cliquer sur le sous-onglet design set vous fait apparaître un menu qui vous demandera de sélectionner un style de page. Sélectionner un style pour prévisualiser les différentes options. Assurez-vous au préalable d'avoir lu le guide relatif à la logique du développeur concernant la construction de pages.
Cet onglet est particulièrement important, car il vous permet de réutiliser à l'identique des parties de votre site. Consultez le guide dédié pour en savoir plus.
Nous n'avons abordé ici que les éléments les plus utilisés. Pour pour d'informations sur l'ensemble des éléments, vous pouvez consulter la documentation officielle d'Oxygen. Attention, le site est en Anglais. Si vous n'êtes pas à l'aise, il existe une version française de la documentation.
Cet onglet vous permet d'éditer une page web en fonction du format dans lequel il sera affiché. Si vous souhaitez que certains éléments aient un rendu différent en format mobile, par exemple, cliquer sur le bouton correspondant à l'affichage mobile vous permettra d'éditer la page uniquement pour les mobiles.
Les règles d'affichages fonctionnent sur le principe "plus petit que"
Il est possible de changer les réglages des formats d'écran dans l'onglet settings, abordé plus loin dans ce chapitre.
Dans l'exemple ci-dessus, nous voulons que les éléments à l'écran s'affichent de manière horizontale pour tous les formats, et de manière verticale à partir du format tablette pour économiser de la place.
Vous disposez également d'une deuxième barre sous la première, fonctionnant de manière similaire. Les formats qui contiennent des réglages additionnels comportent un point vert.
Cet onglet permet de charger une nouvelle page sans avoir à fermer Oxygen pour le rouvrir lorsque vous avez besoin de travailler ailleurs. Assurez-vous de bien enregistrer votre travail avant de l'utiliser
Lorsque vous cliquez sur l'onglet, vous ouvrez une page qui vous indique toutes les pages disponibles, réparties en trois colonnes :
ATTENTION : Il arrive dans certains cas que l'onglet context ne fonctionne pas, amenant à la place sur un écran blanc.
Il n'existe pour le moment aucun moyen de régler ce problème de manière efficace. Si vous rencontrez cette situation, l'onglet context sera malheureusement inutilisable.
Vous pouvez copier et coller des sections entières de votre site, y compris d'une page à l'autre, directement avec cet outil.
Pour l'utiliser, cliquez simplement sur le conteneur que vous souhaitez couper / copier, puis cliquez sur le conteneur où vous souhaitez le coller. Assurez-vous de vérifier que vous collez bien dans le bon conteneur pour ne pas déséquilibrer la page. Pour en savoir plus, consultez le guide dédié.
ATTENTION : Dans ce cas de figure précis, vous pourriez être tenté d'ouvrir plusieurs pages en même temps pour aller plus vite.
Sachez que cette pratique est déconseillée par Oxygen, car elle risque de causer des problèmes. Cependant, il n'y a généralement pas de souci lorsque vous respectez les règles suivantes :
En cas de problème, le seul vrai souci de vous pourriez rencontrer serait qu'une modification s'applique également sur d'autres pages. Si cela se produit, utilisez les révisions pour corriger le problème.
Cet onglet vous permet de configurer les paramètres de styles généraux de vos pages. Pour en savoir plus, consultez notre guide dédié.
Cet onglet vous permet de fermer Oxygen et de sortir. En cliquant dessus, deux options apparaissent :
ASTUCE : Vous en utilisant le clic droit + ouvrir dans un nouvel onglet, vous pouvez ouvrir directement la page que voit l'utilisateur. C'est une manière de travailler parfois plus pratique : en enregistrant Oxygen puis en actualisant la page ensuite, vous pouvez voir en direct vos modifications
Votre site est généralement équipé d'un système de cache qui accélère le chargement des pages, en affichant une version pré-enregistrée. Lorsque vous êtes connecté à votre interface WordPress, vous voyez en direct vos modifications, mais les utilisateurs ne les verront pas tant que le cache ne se sera pas actualisé.
Si vous souhaitez que vos modifications s'appliquent immédiatement aux utilisateurs, il faudra vider le cache. Rassurez-vous, c'est une opération très simple abordée dans cet article.
Votre interface comporte des boutons qui n'ont pas été abordés dans cet article. Ne vous en préoccupez pas, ils sont généralement réservés à des tâches très précises.
Oxygen vous permet de prévisualiser le rendu de votre page et d'interagir visuellement. Cependant, il peut arriver que ce rendu fonctionne mal. Ne paniquez pas, cela arrive sur certains éléments, notamment ceux très complexes. En revanche, si l'interface entière se met soudainement à dysfonctionner, il peut y avoir un problème. Dans ce cas, n'hésitez pas à nous signaler le problème.
