Créez votre première page

Ce cours suppose que vous maîtrisez les notions suivantes :

• La div
• Insertion d'images
• Onglet Layout
• Onglet Size& spacing
• Onglet Background
• Onglet Typographie
• Hiérarchie des titres
• Formats d'écran

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 :

• Une hiérarchie de conteneur
• Des titres différents
  • H1, H2 ...
• Des textes
• Des images
• Une version mobile et / ou tablette

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.

Si vous avez besoin d'une aide visuelle

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.

Version en ligne

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}]}]}]}