Table des matières
Ce cours suppose que vous avez déjà créé une page simple avec Oxygen et 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 :
N'hésitez pas à dupliquer un élément pour accélérer votre travail ( cliquer sur l'élément puis sur l'icône de crayon, et Duplicate). N'oubliez pas de mettre des classes aux éléments que vous souhaitez dupliquer pour harmoniser votre travail, sauf si vous souhaitez modifier en profondeur l'élément que vous copiez.
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","margin-bottom":"150"},"nicename":"Conteneur principal","activeselector":false,"media":{"tablet":{"original":{"width":"90","width-unit":"%"}},"phone-portrait":{"original":{"width":"95","width-unit":"%"}}}},"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","border-bottom-style":"solid","border-bottom-width":"1","border-bottom-color":"rgba(0,0,0,0.4)","padding-bottom":"50"},"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":70,"name":"ct_div_block","options":{"ct_id":70,"ct_parent":22,"selector":"div_block-70-24","original":[],"nicename":"Section présentation"},"depth":2,"children":[{"id":64,"name":"ct_div_block","options":{"ct_id":64,"ct_parent":70,"selector":"div_block-64-24","original":{"align-items":"center","display":"flex","width-unit":"%","justify-content":"space-around"},"nicename":"Section gauche","media":{"tablet":{"original":{"text-align":"justify","display":"flex"}}},"activeselector":"section_gauche","classes":["section_gauche"]},"depth":3,"children":[{"id":65,"name":"ct_div_block","options":{"ct_id":65,"ct_parent":64,"selector":"div_block-65-24","original":{"width-unit":"%","margin-right-unit":"%"},"nicename":"Conteneur titre et texte","media":{"tablet":{"original":{"width-unit":"%","text-align":"left","align-items":"center","margin-bottom":"25","margin-right":"0"}}},"classes":["contenu-texte_gauche"],"activeselector":"contenu-texte_gauche"},"depth":4,"children":[{"id":66,"name":"ct_headline","options":{"ct_id":66,"ct_parent":65,"selector":"headline-66-24","original":{"tag":"h2"},"nicename":"Heading (#30)","ct_content":"Titre secondaire"},"depth":5},{"id":67,"name":"ct_text_block","options":{"ct_id":67,"ct_parent":65,"selector":"text_block-67-24","original":{"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":"texte_contenu","classes":["texte_contenu"]},"depth":5},{"id":68,"name":"ct_link_text","options":{"ct_id":68,"ct_parent":65,"selector":"link_text-68-24","original":{"margin-top":"25","width-unit":"%","url":"https:\/\/www.guide.t-chantier.fr\/","target":"_blank"},"nicename":"Text Link (#43)","ct_content":"En savoir plus","media":{"tablet":{"original":{"text-align":"center"}}},"activeselector":"lien_presentation","classes":["lien_presentation"]},"depth":5}]},{"id":69,"name":"ct_div_block","options":{"ct_id":69,"ct_parent":64,"selector":"div_block-69-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-unit":"%","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":{"width-unit":"%"}}},"activeselector":"image_section-presentation","classes":["image_section-presentation"]},"depth":4}]},{"id":28,"name":"ct_div_block","options":{"ct_id":28,"ct_parent":70,"selector":"div_block-28-24","original":{"align-items":"center","display":"flex","width-unit":"%","justify-content":"space-around","flex-reverse":"reverse"},"nicename":"Section droite","media":{"tablet":{"original":{"text-align":"justify","display":"flex"}}},"activeselector":"section_droite","classes":["section_droite"]},"depth":3,"children":[{"id":38,"name":"ct_div_block","options":{"ct_id":38,"ct_parent":28,"selector":"div_block-38-24","original":{"width-unit":"%","margin-right-unit":"%"},"nicename":"Conteneur titre et texte","media":{"tablet":{"original":{"width-unit":"%","text-align":"left","align-items":"center","margin-bottom":"25","margin-right":"0"}}},"classes":["contenu-texte_droite"],"activeselector":"contenu-texte_droite"},"depth":4,"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":5},{"id":31,"name":"ct_text_block","options":{"ct_id":31,"ct_parent":38,"selector":"text_block-31-24","original":{"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":"texte_contenu","classes":["texte_contenu"]},"depth":5},{"id":43,"name":"ct_link_text","options":{"ct_id":43,"ct_parent":38,"selector":"text_block-43-24","original":{"margin-top":"25","width-unit":"%","url":"https:\/\/www.guide.t-chantier.fr\/","target":"_blank"},"nicename":"Text Link (#43)","ct_content":"En savoir plus","media":{"tablet":{"original":{"text-align":"center"}}},"activeselector":"lien_presentation","classes":["lien_presentation"]},"depth":5}]},{"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-unit":"%","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":{"width-unit":"%"}}},"activeselector":"image_section-presentation","classes":["image_section-presentation"]},"depth":4}]},{"id":114,"name":"ct_div_block","options":{"ct_id":114,"ct_parent":70,"selector":"div_block-114-24","original":{"align-items":"center","display":"flex","width-unit":"%","justify-content":"space-around"},"nicename":"Section gauche","media":{"tablet":{"original":{"text-align":"justify","display":"flex"}}},"activeselector":"section_gauche","classes":["section_gauche"]},"depth":3,"children":[{"id":115,"name":"ct_div_block","options":{"ct_id":115,"ct_parent":114,"selector":"div_block-115-24","original":{"width-unit":"%","margin-right-unit":"%"},"nicename":"Conteneur titre et texte","media":{"tablet":{"original":{"width-unit":"%","text-align":"left","align-items":"center","margin-bottom":"25","margin-right":"0"}}},"classes":["contenu-texte_gauche"],"activeselector":"contenu-texte_gauche"},"depth":4,"children":[{"id":116,"name":"ct_headline","options":{"ct_id":116,"ct_parent":115,"selector":"headline-116-24","original":{"tag":"h2"},"nicename":"Heading (#30)","ct_content":"Titre secondaire"},"depth":5},{"id":117,"name":"ct_text_block","options":{"ct_id":117,"ct_parent":115,"selector":"text_block-117-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":"texte_contenu","classes":["texte_contenu"]},"depth":5},{"id":118,"name":"ct_link_text","options":{"ct_id":118,"ct_parent":115,"selector":"link_text-118-24","original":{"margin-top":"25","width-unit":"%","url":"https:\/\/www.guide.t-chantier.fr\/","target":"_blank"},"nicename":"Text Link (#43)","ct_content":"En savoir plus","media":{"tablet":{"original":{"text-align":"center"}}},"classes":["lien_presentation"]},"depth":5}]},{"id":119,"name":"ct_div_block","options":{"ct_id":119,"ct_parent":114,"selector":"div_block-119-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-unit":"%","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":{"width-unit":"%"}}},"activeselector":"image_section-presentation","classes":["image_section-presentation"]},"depth":4}]},{"id":108,"name":"ct_div_block","options":{"ct_id":108,"ct_parent":70,"selector":"div_block-108-24","original":{"align-items":"center","display":"flex","width-unit":"%","justify-content":"space-around","flex-reverse":"reverse"},"nicename":"Section droite","media":{"tablet":{"original":{"text-align":"justify","display":"flex"}}},"activeselector":"section_droite","classes":["section_droite"]},"depth":3,"children":[{"id":109,"name":"ct_div_block","options":{"ct_id":109,"ct_parent":108,"selector":"div_block-109-24","original":{"width-unit":"%","margin-right-unit":"%"},"nicename":"Conteneur titre et texte","media":{"tablet":{"original":{"width-unit":"%","text-align":"left","align-items":"center","margin-bottom":"25","margin-right":"0"}}},"classes":["contenu-texte_droite"]},"depth":4,"children":[{"id":110,"name":"ct_headline","options":{"ct_id":110,"ct_parent":109,"selector":"headline-110-24","original":{"tag":"h2"},"nicename":"Heading (#30)","ct_content":"Titre secondaire"},"depth":5},{"id":111,"name":"ct_text_block","options":{"ct_id":111,"ct_parent":109,"selector":"text_block-111-24","original":{"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,"classes":["texte_contenu"]},"depth":5},{"id":112,"name":"ct_link_text","options":{"ct_id":112,"ct_parent":109,"selector":"link_text-112-24","original":{"margin-top":"25","width-unit":"%","url":"https:\/\/www.guide.t-chantier.fr\/","target":"_blank"},"nicename":"Text Link (#43)","ct_content":"En savoir plus","media":{"tablet":{"original":{"text-align":"center"}}},"classes":["lien_presentation"]},"depth":5}]},{"id":113,"name":"ct_div_block","options":{"ct_id":113,"ct_parent":108,"selector":"div_block-113-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-unit":"%","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":{"width-unit":"%"}}},"classes":["image_section-presentation"]},"depth":4}]}]},{"id":94,"name":"ct_div_block","options":{"ct_id":94,"ct_parent":22,"selector":"div_block-94-24","original":{"width":"100","width-unit":"%","margin-top":"100","border-radius":"25","background-color":"#cfd7f9","text-align":"left","align-items":"flex-start","padding-left-unit":"%","padding-right-unit":"%","flex-direction":"row","display":"flex","height":"350","box-shadow-horizontal-offset":"2","box-shadow-vertical-offset":"4","box-shadow-color":"rgba(0,0,0,0.49)","box-shadow-blur":"2"},"nicename":"Contact","activeselector":false,"media":{"tablet":{"original":{"flex-direction":"column","display":"flex","flex-reverse":"reverse","height":"550","justify-content":"space-between"}},"phone-landscape":{"original":{"height":"600"}},"phone-portrait":{"original":{"height":"650"}}}},"depth":2,"children":[{"id":107,"name":"ct_div_block","options":{"ct_id":107,"ct_parent":94,"selector":"div_block-107-24","original":{"text-align":"left","display":"flex","width":"65","width-unit":"%","margin-left-unit":"%","flex-direction":"column","justify-content":"center","align-items":"center","margin-right-unit":"%","padding-left":"5","padding-right":"5","padding-left-unit":"%","padding-right-unit":"%","height":"100","height-unit":"%"},"nicename":"Contenu contact","media":{"tablet":{"original":{"width":"100","width-unit":"%","padding-top-unit":"%","height-unit":"%","height":"66"}}}},"depth":3,"children":[{"id":95,"name":"ct_headline","options":{"ct_id":95,"ct_parent":107,"selector":"headline-95-24","original":{"tag":"h2"},"nicename":"Heading (#95)","ct_content":"Nous contacter","activeselector":false},"depth":4},{"id":98,"name":"ct_text_block","options":{"ct_id":98,"ct_parent":107,"selector":"text_block-98-24","original":{"margin-bottom":"25","margin-top":"25","text-align":"center"},"nicename":"Text (#98)","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.","activeselector":false},"depth":4},{"id":103,"name":"ct_link_button","options":{"ct_id":103,"ct_parent":107,"selector":"link_button-103-24","original":{"button-color":"#e57440","button-hover_color":"#ea9067","button-style":"1","url":"https:\/\/www.guide.t-chantier.fr\/","border-radius":"0","border-top-style":"solid","border-right-style":"solid","border-bottom-style":"solid","border-left-style":"solid","border-all-style":"solid","target":"_blank"},"nicename":"Bouton contact","ct_content":"Demander un devis","hover":{"button-color":"#ea9067"},"activeselector":false},"depth":4}]},{"id":106,"name":"ct_div_block","options":{"ct_id":106,"ct_parent":94,"selector":"div_block-106-24","original":{"width":"35","width-unit":"%","height":"100","height-unit":"%","background-image":"https:\/\/www.blueprint.t-chantier.fr\/wp-content\/uploads\/2023\/11\/champ-lavande-au-coucher-du-soleil-pres-valensole-1.jpg","background-size":"cover","border-top-right-radius":"25","border-bottom-right-radius":"25"},"nicename":"Background-image","activeselector":false,"media":{"tablet":{"original":{"width":"100","width-unit":"%","height":"33","border-bottom-left-radius":"0","border-top-right-radius":"25","height-unit":"%","background-position-top":"15","background-position-top-unit":"%","border-top-left-radius":"25","border-bottom-right-radius":"0"}}}},"depth":3}]}]}]}
La réalisation de cette page nous servira à évaluer votre avancement actuel dans cette formation. Une fois votre travail terminé, envoyez-nous un message en remplissant le formulaire ci-dessous. Vous pouvez être évalué autant de fois que vous le souhaitez, alors n'hésitez pas à soumettre votre résultat même si vous n'êtes pas certain du résultat !
Attention, si vous passez la certification CPF, vous devez valider cette étape pour pouvoir obtenir votre certification. Ne reproduisez pas le visuel d'aide fourni, vous serez évalué sur votre capacité à créer une page par vous-même.
