Ce cours suppose que vous maîtrisez les notions suivantes :
Grâce aux précédents cours, vous êtes à présent en mesure de créer par vous-même une page fonctionnelle Via Oxygen.
Essayez de créer une page qui comportera :
Ne vous inquiétez pas si vos éléments ne sont pas parfaitement aligné, nous aborderons cet aspect en détail dans un futur cours.
Dans un premier temps, il est préférable que vous tentiez de réaliser cette page par vous-même grâce aux informations que vous avez appris, même si votre page n'est pas parfaite. Si vous éprouvez des difficultés, assurez-vous d'avoir bien lu les cours précédents des chapitres 3 et 4.
Voici à quoi pourrait ressembler votre page une fois créée. Il est normal que votre page n'ait pas la même apparence.
Important : Lorsque vous modifiez la hauteur (height) ou la largeur (width) d'un élément en mettant un pourcentage dans les plus petits formats d'écran, l'unité de mesure s'affichera en %, mais elle est parfois encore en px. Il faudra sélectionner % manuellement.
Vous pouvez afficher la version en ligne du résultat présenté dans les capture d'écran plus haut en collant le code ci-dessous dans l'onglet JSON de votre page sur l'interface WordPress.
Code à copier :
{"id":0,"name":"root","depth":0,"meta_keys":["oxygen_lock_post_edit_mode","cmplz_hide_cookiebanner"],"outerTemplateData":{"edit_link":"https:\/\/www.blueprint.t-chantier.fr\/wp-admin\/post.php?post=37&action=edit","template_name":"Main"},"children":[{"id":22,"name":"ct_div_block","options":{"ct_id":22,"ct_parent":0,"selector":"div_block-22-24","original":{"margin-left":"85","margin-right":"85","margin-left-unit":"auto","margin-right-unit":"auto","width":"85","width-unit":"%","text-align":"left","display":"flex","flex-direction":"column","align-items":"center","margin-top":"100"},"nicename":"Conteneur principal","activeselector":false},"depth":1,"children":[{"id":23,"name":"ct_div_block","options":{"ct_id":23,"ct_parent":22,"selector":"div_block-23-24","original":{"align-items":"center","flex-direction":"row","display":"flex","width":"100","width-unit":"%","justify-content":"space-around"},"nicename":"Conteneur titre et logo","media":{"tablet":{"original":{"text-align":"justify","flex-direction":"column","display":"flex","flex-reverse":"reverse"}}},"activeselector":false},"depth":2,"children":[{"id":24,"name":"ct_image","options":{"ct_id":24,"ct_parent":23,"selector":"image-24-24","original":{"image_type":"2","attachment_size":"full","attachment_id":102,"attachment_height":1280,"attachment_width":1280,"attachment_url":"https:\/\/www.blueprint.t-chantier.fr\/wp-content\/uploads\/2023\/11\/28267842_7-1-1.jpg","width":"150"},"nicename":"Image (#24)","activeselector":false},"depth":3},{"id":25,"name":"ct_headline","options":{"ct_id":25,"ct_parent":23,"selector":"headline-25-24","original":[],"nicename":"Heading (#25)","ct_content":"Titre du site"},"depth":3}]},{"id":28,"name":"ct_div_block","options":{"ct_id":28,"ct_parent":22,"selector":"div_block-28-24","original":{"align-items":"center","flex-direction":"row","display":"flex","width":"100","width-unit":"%","justify-content":"space-around","margin-top":"75"},"nicename":"Section","media":{"tablet":{"original":{"text-align":"justify","flex-direction":"column","display":"flex","margin-bottom":"150"}}},"activeselector":false},"depth":2,"children":[{"id":38,"name":"ct_div_block","options":{"ct_id":38,"ct_parent":28,"selector":"div_block-38-24","original":{"width":"60","width-unit":"%","margin-right":"5","margin-right-unit":"%"},"nicename":"Conteneur titre et texte","media":{"tablet":{"original":{"width":"100","width-unit":"%","text-align":"left","align-items":"center","margin-bottom":"25","margin-right":"0"}}}},"depth":3,"children":[{"id":30,"name":"ct_headline","options":{"ct_id":30,"ct_parent":38,"selector":"headline-30-24","original":{"tag":"h2"},"nicename":"Heading (#30)","ct_content":"Titre secondaire"},"depth":4},{"id":31,"name":"ct_text_block","options":{"ct_id":31,"ct_parent":38,"selector":"text_block-31-24","original":{"margin-top":"25","width-unit":"%"},"nicename":"Text (#31)","ct_content":"Turpis non pharetra curabitur, proin sed integer maecenas id nullam aliquet suscipit arcu morbi, natoque venenatis proin egestas aptent interdum. In Faucibus laoreet. Vehicula Viverra dictumst sapien, egestas ridiculus. Senectus mauris etiam. Ligula nec vel cubilia neque cubilia dui amet Augue vitae cubilia. Dis senectus suscipit malesuada consequat iaculis nisi donec dictum donec, primis suscipit vel sagittis luctus eget ipsum pede accumsan ut vivamus dapibus venenatis. Velit odio vestibulum eros malesuada taciti cursus hymenaeos sociis lobortis condimentum","media":{"tablet":{"original":{"text-align":"center"}}},"activeselector":false},"depth":4}]},{"id":42,"name":"ct_div_block","options":{"ct_id":42,"ct_parent":28,"selector":"div_block-42-24","original":{"background-image":"https:\/\/www.blueprint.t-chantier.fr\/wp-content\/uploads\/2023\/11\/champ-lavande-au-coucher-du-soleil-pres-valensole-1.jpg","width":"40","width-unit":"%","height":"350","background-size":"cover","background-position-left":"0","background-position-top":"50","background-position-left-unit":"%","background-position-top-unit":"%"},"nicename":"Image en arrière-plan","media":{"tablet":{"original":{"margin-top":"25","width":"100","width-unit":"%"}}},"activeselector":false},"depth":3}]}]}]}
Etant qu'Oxygen supprime le thème WordPress, les plugins de mot de passe sont inutilisables sur les pages. Il faut donc recourir à une solution personnalisée :
Vous pouvez également renommer votre Formulaire pour pouvoir l'identifier plus facilement en cliquant sur le champ d'édition en haut à gauche de la page.
Une fois cette étape terminée, vous pouvez rendre le composant réutilisable si vous souhaitez le dupliquer sur d'autre page. Il faudra simplement refaire l'étape avec le champ choose conditions.
Lorsque l'on construit les pages de son site web, on se retrouve rapidement à paramétrer un grand nombre d'options et à définir tout un tas de règles. Pour éviter de se retrouver empêtré dans un fouillis incompréhensible et / ou des règles contradictoires, une hiérarchisation est faite en fonction de la profondeur a laquelle vous aller modifier un élément.
En développement web, pour modifier l'apparence d'un élément, on utilise un langage de programmation bien précis : le CSS. Bien que vous n'ayez pas à l'apprendre pour modifier votre site, il est intéressant de savoir que les différentes options de personnalisation que vous utiliserez sur Oxygen Builder se base sur de vraies règles CSS. En somme, en utilisant Oxygen, vous écrivez en quelque sorte du CSS !
Par conséquent, lorsque vous modifiez un élément, il est important que vous sachiez avec quoi vous interagissez. Il existe trois manière d'interagir avec un élément ;
Pour faire simple, l'ID est le numéro d'identification d'un élément, un peu comme sa carte d'identité. Il est différent de la classe, car chaque élément a son propre ID, ce qui permet de différencier par exemple deux textes avec la même classe.
Dans le développement classique, un élément n'a pas forcément d'ID, mais sur Oxygen, tous les élément ont un ID. Il se présente généralement avec un nom alambiqué, par exemple div_block_860-1 ou headline_478-2 ...
La hiérachie en CSS se présente de cette manière :
Cela signifie que si vous définissez la taille d'un texte sur 14px en utilisant une classe, puis que vous la définissez sur 18px en utilisant l'ID, le texte fera 18 px.
En développement classique, voici comment une ligne de texte se présente en HTML (le langage de base utilisé pour structurer les pages web) :
A présent, prenons un exemple pour illustrer et écrivons un peu de CSS :
Pour commencer, nous utilisons la balise pour demander à TOUS les textes du site d'être de couleur bleue :
Ensuite, nous utilisons la classe texte-accueil pour rendre les textes de la section accueil verts. Par conséquent, tous les textes du site sont bleu, sauf ceux qui portent la classe texte-accueil, qui sont vert. En effet, la classe est plus puissante que la balise.
Enfin, nous utilisons l'ID text-1 pour rendre le premier texte de la section accueil rouge. Par conséquent, les textes de la section d'accueil sont tous vert, sont le premier qui devient rouge. En effet, l'ID est plus puissant que la classe.
Bien sûr, vous n'aurez pas à écrire de code sous cette forme avec Oxygen. Mais il est important de comprendre comment fonctionne la hiérarchisation des éléments. Néanmoins si écrire du code CSS "en dur" vous intéresse, consultez le guide dédié.
Pour commencer, Ouvrez une page avec Oxygen Builder.
Lorsque vous utilisez éditez un élément avec la barre d'édition à gauche de l'écran, vous remarquerez un élément situé juste au dessus des format d'écran, avec une petite étiquette bleu ou verte à gauche et une autre étiquette state a droite.
Cliquez sur l'étiquette pour faire apparaître l'ID et la liste des classes éventuelle que contient l'élément (NB : l'élément est la balise) :
Cliquez ensuite sur l'ID ou la classe que vous souhaitez modifier.
ATTENTION : Gardez à l'esprit qu'en modifiant une classe, vous modifiez TOUS les élément qui portent cette classe, même s'ils sont sur une autre page (sauf s'il sont eux-même édités via leur ID). Soyez donc prudent en travaillant avec une classe.
Si vous avez peur d'une fausse manip, vous pouvez verrouiller une classe en cliquant sur le bouton lock situé juste au-dessus. Vous éviterez ainsi de la modifier par mégarde. Elle se débloque en cliquant à nouveau sur le bouton.
Via le panneau de contrôle WordPress, allez sur l'onglet pages et cliquez sur modifier pour la page qui pose problème.
Nous allons nous intéresser plus précisement à l'onglet Revisions, situé en bas de page. Cliquez dessus pour ouvrir les liste des révisions enregistrées, et quand est-ce qu'elles l'ont été.
Vous avez deux options :
Dans le cas ou aucune révision ne correspond ou que le problème s'avère plus grave, il faudra envisager de restaurer le site avec Updraft Plus.
IMPORTANT : Avant de commencer cet article, il est conseillé d'avoir consulté au préalable le cours dédié aux conteneurs et aux divs, ainsi que celui dédié à l'onglet Size & spacing
Initialement, lorsque vous construisez votre page, les éléments que vous ajoutez suivent les règles suivantes :
Il est cependant possible de modifier cette architecture en imbriquant des div.
Commençons par construire une mise en page compatible avec des règles d'alignement :
Cette étape est très importante car elle permet de ranger chaque élément. Vous verrez qu'il sera beaucoup plus facile par la suite d'organiser la page.
Pour rendre la structure plus lisible, nous allons renommer toute les div :
Nous avons maintenant une section, qui comprend pour l'instant une seule sous-section, qui contient elle-même plusieurs éléments. Notre objectif est d'ajouter ensuite plusieurs autres sous-section, mais nous allons styliser celle-ci au préalable :
Notre élément est maintenant prêt à être dupliqué. Bien sûr, les valeurs que nous vous avons données ont été choisies arbitrairement. Vous pouvez tout à fait appliquer des espacements différents.
Nous avons maintenant Plusieurs éléments à l'écran, les uns en dessous des autres. Vous remarquerez que si nous avons besoin de changer un élément, par exemple si nous voulons modifier la couleur de l'image, il faudra le faire quatre fois. Pour que les sous-section soient plus facilement modifiables, il aurait été intéressant d'ajouter une classe au préalable sur chaque élément susceptible d'être modifié. Mais revenons à notre sujet.
Nous avons maintenant une section comprenant quatre sous-sections, que nous allons pouvoir aligner à notre guise. Cliquez sur la div section pour afficher la fenêtre d'alignement dans la barre d'édition (à gauche)
Ce champ permet de définir si l'on souhaite que les éléments enfants (ici, les sous-section) soient alignés de manière verticale ou horizontale. Cliquez sur le bouton Horizontal
Vous remarquerez que les sous-sections se retrouvent écrasées. En effet, Oxygen empèche par défaut les éléments de s'aligner sur plusieurs lignes par sécurité. Il faut donc cliquez sur le bouton allow multiline, situé sous le bouton grid.
Le bouton Grid n'est à utiliser que si vous êtes déjà familirisé avec le concept de Grid. Pour le moment, nous n'abordons pas ce concept dans cette formation.
Ce champ sert à aligner les éléments verticalement par rapport au conteneur parent.
Sur notre exemple, comme nous n'avons pas spécifié de hauteur pour la div section, sa hauteur dépend entièrement de la place prise par les éléments. changer les options n'aura donc aucun effet, car il n'y a aucun espace vide.
Ce champ sert à aligner les éléments horizontalement par rapport au conteneur parent.
Testez les différents réglages pour en voir les effets !
Ici, le conteneur section étant une div de 1er niveau, et étant que sa width a été définie sur 100%, elle a par conséquent une largeur égale à la totalité de la page.
Vous remarquerez que même si vous cliquez sur center pour l'alignement horizontal, les textes ne s'alignent pas forcément au milieu. En effet, dans ce cas précis, les élements heading et text font déjà 100% de la largeur de la div sous-section : en effet, leur contenu fait plus de 400px, qui est la valeur spécifiée pour la div sous-section. Ils ne bougeront donc pas.
Notez que dans notre exmeple, comme nous n'avons pas configuré de classe, il faudra refaire la manip pour tous les éléments de texte.
Si vous le souhaitez, vous pouvez modifiez quelques paramètres des sous-sections pour améliorer leur rendu. Vous pouvez notamment modifier :
Vous pouvez également changer de réglage en fonction du format (ordi, tablette ...) ou ajouter des max et / ou min-width.
A noter : sur notre exemple, nous n'avons pas défini de classe. Il faudra donc effectuer les modifications pour tous les éléments.
Basiquement, une classe est une étiquette supplémentaire que vous ajoutez à un élément pour ajouter des règles supplémentaires. Faisons une analogie avec une maison :
Imaginons que vous ayez dix maisons à décorer de la même manière. Sur la première, vous choisissez de mettre du papier peint à l'intérieur, d'installer des luminaires, de mettre du crépi sur les murs extérieurs ... Une fois que vous avez fini de décorer la première maison, plutôt que de recommencer tout depuis le début à chaque fois, vous aimeriez bien pouvoir appliquer immédiatement toutes vos modifications aux maisons suivantes.
C'est exactement à ça que sert la classe. Une fois que vous l'avez configuré, il vous suffit de l'ajouter à n'importe quel élément pour appliquer instantanément les paramètres que vous avez précisé.
Pour savoir si vous éditez la classe ou l'id d'un élément sur Oxygen, il faut regarder la couleur de l'étiquette qui lui est associée dans la barre d'édition.
Avant tout, commençons par créer un élément :
Editons à présent la classe :
Insérez votre classe, et les réglages que vous avez au préalable définis s'appliqueront automatiquement à votre seconde div.
Lorsque vous insérez une classe, les modifications ne s'appliqueront que si votre élément n'a pas déjà été modifiée via l'étiquette d'id (en bleu). Si votre élément a déjà des modifications au niveau de l'id, il faudra les supprimer pour que celles de la classe s'applique. pour en savoir plus sur l'id et la hiérarchie des règles, consultez le guide dédié.
Les champs édités au niveau de l'id sont signalés par une barre bleue sur le bord gauche du champ (idem pour les classes).
C'est l'erreur classique. Il est important de d'abord créer la classe avant de modifier un élément si vous voulez réutiliser vos paramètres. Sinon, vous allez faire toutes vos modifications au niveau de l'ID, et vous devrez tout recommencer pour la classe.
Modifiez un champ dans une classe changera le paramètre pour TOUS les éléments qui portent cette classe, y compris pour les autres pages. Attention donc si vous souhaitez modifier une classe utilisée un grand nombre de fois.
Pour éviter des modifications accidentelles, bloquer la modification d'une classe :
Vous pouvez débloquer une classe simplement en cliquant sur le bouton unlock, situé au même endroit.
En développement web, la clé, c'est de ne pas se fatiguer. Un bon développeur préfèrera toujours s'embêter à mettre en place mille et une astuces si cela lui permet de minimiser la somme de travail au bout du compte. Cela pourrait s'apparenter à de la fénéantise, mais c'est en réalité nécessaire pour ne pas très vite se retrouver à répéter les mêmes actions des centaines de fois . Savoir réutiliser son propre travail permet d'avancer plus vite et d'éviter les erreurs à force de répétition.
La première étape pour économiser son temps de travail est la duplication d'élément, qui vous permet de dupliquer un par un. La deuxième étape est la création d'éléments Reusable, qui vous permet de réutiliser un élément de multiples fois.
Vous avez maintenant deux éléments identiques que vous pouvez modifier à votre guise. Vous pouvez déplacer un objet dans la barre de structure en glisser-déposer. Pour en savoir plus, consultez le guide dédié
Vous pouvez copier et coller des sections entières de votre site, directement avec l'outil couper / copier / coller, situé en haut de page.
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é.
Vous pouvez également utiliser cette technique pour copier un élément sur une autre page :
ATTENTION : Dans ce cas de figure précis, vous pourriez être tenté d'ouvrir plusieurs pages en même temps pour aller plus vite.
achez 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.
Transformer un élément ou un conteneur en Reusable vous permettra de le réutiliser sur de multiples pages, voir d'appliquer instantanément vos modifications à tous vos éléments en une fois.
Vous remarquerez que votre élément a changé d'apparence. En effet, Oxygen transforme automatiquement votre élément en single. Nous vous expliquerons après ce que cela veut dire. Pour le moment, cliquez sur le bouton undo, pour faire un retour arrière (barre supérieure) et remettre votre élément dans son état initial.
Pas d'inquiétude, votre élément est bien enregistré en tant qu'élément réutilisable.
Votre élément est à présent enregistré comme composant réutilisable, mais il n'est pas encore affiché sur Oxygen. Sauvegardez et relancer la page en cliquant sur F5 ou le bouton pour recharger votre page.
Vous remarquerez que deux options sont disponibles :
L'élément est intégré comme si vous aviez fait un copier-coller classique. Il est entièrement éditable.
L'élément est intégré en tant que copie parfaite de l'élément original. Il ne sera pas modifiable directement sur la page, car toutes les copies en single sont un seul et même élément.
Cela signifie que si vous ouvrez la page de l'élément pour le modifier, toutes ses versions en single seront modifiée.
Pour éditer un élément en single, cliquez dessus et vous verrez apparaître sur la barre d'édition (à droite) un bouton qui vous emmènera vers la page de l'élément.
Lorsque vous effectuez certaines modifications sur Oxygen, il arrive que le logiciel vous demande de régénérer le cache CSS. Même si ce n'est pas un problème critique, il est préférable de le faire pour éviter des problèmes d'affichage.
Le cache CSS fonctionne de la même manière que le cache web, à la différence qu'il concernent spécifiquement les fichiers de styles d'Oxygen. Pour faire simple, Oxygen Builder sauvegarde les règles de style de votre site et les garde en mémoire. Ainsi, lorsqu'un utilisateur arrive sur votre site, ce dernier délivre directement les ressources en mémoire, ce qui lui permet d'éviter de les demander au serveur et de charger la page plus vite.
Mais lorsque des règles importantes sont changées, comme les couleurs globales, le cache CSS ne se met pas à jour automatiquement. il faut donc le faire manuellement lorsque la situation se produit.
C'est simple. En consultant votre panneau de contrôle, vous aurez systématiquement ce message en haut de page :
Si ce message ne s'affiche pas, c'est que votre cache est à jour.
Vous pouvez également vérifier votre site web, mais attention :
En cas de cache non mis à jour, il est fréquent que l'affichage que vous avez de votre site soit différent de celui des autres utilisateurs. En effet, étant donné que vous êtes connecté en tant qu'administrateur, WordPress vous fournit en permanence une version à jour.
Pour faire un véritable test, il faut ouvrir votre site via en navigation privée. Pour cela, rendez-vous sur votre navigateur internet et faites les commande Maj + Ctrl + N pour ouvrir une nouvelle fenêtre en navigation privée. Tapez ensuite votre site web.
Consultez le bandeau qui vous prévient que le cache n'est pas à jour et cliquez sur Please click here to regenerate the CSS cache.
Vous arrivez ensuite directement dans l'onglet CSS Cache d'Oxygen.
Cliquez ensuite sur le bouton start regeneration pour démarrer le processus. Celui peut prendre quelques minutes si vous avez beaucoup de pages et d'articles.
Une fois que tout est terminé, le message All done! s'affichera en dernier. Vous avez terminé.
Lorsqu'Oxygen Builder est importé sur une nouvelle installation WordPress, tous les liens qu'ils a établi avec les pages et articles sont perturbés, et votre site risque fort d'afficher une page blanche. Pour éviter cela, il faut signer les shortcodes une fois votre site importé.
Signer les shortcodes est une partie des actions à faire lors de l'importation de son site web.
Rendez-vous sur votre panneau de contrôle et passez la souris sur l'onglet SwissKnife, tout en bas de la barre latérale. Cliquez ensuite sur le sous-onglet Sign Shortcodes
Vous arrivez ensuite sur une interface très sommaire.
Le processus va se lancer. Si vous avez beaucoup de pages et d'articles, cela peut prendre plusieurs minutes.
Le processus se termine lorsque le mot completed apparaît à la fin. Vous avez terminé.
