Transcription

Maintenant, je souhaite travailler sur ma nouvelle page que je viens de créer. Pour commencer, j'ai envie que cette page, elle ait une belle en-tête, c'est-à-dire un bandeau avec le titre qui s'affiche en grand, potentiellement un petit texte, un bouton. Cette en-tête, c'est aussi l'image qui va servir à générer des aperçus quand il y aura des aperçus de ma page qui seront générés quand on partage des liens vers elle, notamment. Pour ça, je vais me rendre dans "Promotion", parce que c'est dans cette partie-là de l'interface qu'on gère les en-têtes. Et je vais dans "Options d'en-tête". Première chose, je peux décider que mon en-tête en fond, elle ait une image ou bien une couleur. Les couleurs qui seront proposées, c'est celles du DSFR, du Design System de l'Etat. Pour cet exemple, j'ai envie plutôt de mettre une image. Pour votre image d'en-tête, ce qu'on vous recommande, c'est de choisir une image qui a un format de type bannière pour que vous puissiez bien l'utiliser vu que c'est des formats plutôt allongés. Voilà, qu'est-ce qu'on pourrait prendre ? On peut prendre, par exemple, cette magnifique photo. Et la voici qui s'est chargée sur mon aperçu. Je vais choisir que le titre de ma page, il apparaisse en grand sur cette image d'en tête. Et donc, pour ça, il faut cocher la case qui est ici. Et voilà que le titre va donc se mettre là. Là, on va dire que j'ai quand même un problème, c'est que ce n'est pas très lisible. Du coup, ce qu'on peut faire éventuellement, c'est cocher cette case-là, "assombrir l'image de fond", ce qui va nous permettre de créer plus de contrastes pour que le texte soit lisible. Je peux ajouter éventuellement dans ce champ si je veux mettre un petit texte d'intro sur le contenu de ma page pour que les visiteurs du site sachent de quoi on traite. Si finalement, je trouve que c'est trop sombre, il vaut mieux choisir une image claire. Là, je vais changer d'image. Et finalement, je vais opter pour quelque chose de beaucoup plus clair. Je vais mettre ça. Et là, vous voyez que je n'ai plus forcément besoin d'assombrir l'image, donc je peux décocher la case. Et voilà que du coup, le contraste est à nouveau correct entre le texte et l'image. Donc, je peux mettre mon petit texte d'introduction. Je peux le mettre en forme. Et puis, des boutons. Là, imaginons que je veuille mettre un bouton "Contactez-nous", par exemple. Je vais choisir ici d'ajouter un bouton. Ce bouton, il pourrait faire plusieurs choses. Il pourrait rediriger vers une page du site, il pourrait déclencher le téléchargement d'un document ou il pourrait diriger vers une page externe au site. Comme j'ai dit que je voulais plutôt faire un bouton "Contactez-nous", je vais choisir qu'il redirige vers la page de contact de mon site. Je clique ici. Et puis là, ça ouvre l'arborescence du site pour que je choisisse la page sur laquelle ça va. Là, je suis sur la liste de mes différents sites. Je choisis celui sur lequel je me situe et je me déplace dans l'arborescence jusqu'à trouver la page qui m'intéresse. Moi, c'est "Contactez-nous". Voilà, elle s'est renseignée. Le bouton n'apparaît pas encore parce que je ne l'ai pas encore généré. Il faut que je choisisse quel type de bouton je veux mettre. Il y a plusieurs options. J'ai choisi un "bouton primaire". Je vais aussi pouvoir choisir le texte qui apparaît dans le bouton. Donc moi, ça va être "Contactez-nous". Et là, il y a mon bouton qui se crée. Je peux même lui ajouter une petite icône si je le souhaite. Donc, par exemple, pour un bouton de contact, on pourrait mettre une icône qui correspond bien, comme par exemple cette petite bulle. Voilà. Bulle, Insérer. Et je choisis de quel côté je veux qu'elle apparaisse, on va dire côté gauche. Et là, la preview va se mettre à jour. Si je veux tester que ça fonctionne bien, je vais ouvrir sur un onglet à part entière, en grand, comme ça, on voit mieux. Là, je vois comment se génère ma page. Et si je clique sur "Contactez-nous", ça redirige bien vers ma page de contact. Donc, tout est bon. Je peux revenir sur mon interface d'édition. Et donc là, je suis arrivé au bout de la configuration de mon entête. C'est bon. Je vais pouvoir passer à l'étape suivante.