BTS NDRC, épreuve E5B : tutoriel WordPress

Modifier l'en-tête du site : texte, photo et vidéo

L'en-tête est la bande placée en haut de chaque page : le logo, le menu, et souvent une photo, un message ou un bouton. Le client le voit sur toutes les pages, avant tout le reste : une nouveauté ou une offre annoncée à cet endroit ne lui échappe pas. Pour l'entreprise, c'est l'emplacement le plus visible du site, à réserver à ce qui sert l'image de la marque et les ventes.

Dans la circulaire

Famille « Apparence » de la liste WordPress : « Modifier l'en tête (texte, photo et vidéo) » (annexe VI-3 de la circulaire nationale d'organisation, session 2026).

Critères de la grille d'évaluation concernés : 1. « la qualité et la pertinence des contenus publiés » ; 3. « la cohérence entre les techniques, les outils mobilisés, les contenus et les moyens de diffusion » ; 5. « le suivi des publications et le contrôle de l'image ».

Où le trouver

Le constructeur d'en-tête d'Astra : Apparence › Personnaliser › En-tête. Il s'affiche sous l'aperçu du site, en trois rangées découpées en cases.

Dans le constructeur : la roue dentée, à gauche d'une rangée, ouvre ses réglages (hauteur, arrière-plan) ; le bouton « + » d'une case vide ajoute un élément (texte, bouton, widget…) ; un clic sur un élément placé ouvre ses réglages.

Les étapes

  1. Ouvrir Apparence > Personnaliser > En-tête. Le panneau de gauche liste les éléments déjà placés ; sous l'aperçu, le constructeur montre les trois rangées de l'en-tête, de haut en bas « Au dessus de l'entête », « En-tête principal » et « Sous l'en-tête ». Sur le modèle, le logo occupe la rangée du haut, dont l'arrière-plan est une photo, et le menu la rangée principale, sur fond beige.
  2. Texte : survoler une case vide et cliquer sur « + » : la liste « Insérer éléments » s'ouvre. Les éléments marqués d'un cadenas sont réservés à la version payante d'Astra ; ceux qui sont déjà placés, comme le logo et le menu principal, n'y figurent plus. Choisir HTML 1 ou HTML 2 pour un texte, Button pour un bouton.

    Capture 1. La liste « Insérer éléments », ouverte sur la case centrale de la rangée du haut : encadrés, la case, les éléments HTML et les éléments Widget :

    Constructeur d'en-tête d'Astra : au-dessus de la case centrale de la rangée du haut, encadrée en rouge, la fenêtre Insérer éléments propose Compte, Button, Bouton 2, Sélecteur de couleur, Diviseurs, HTML 1, HTML 2, HTML 3, Sélecteur de langue, Menu secondaire, Menu 3, Bouton ouvrir/fermer, Rechercher, Social et Widget 1 à 4, les éléments payants marqués d'un cadenas ; HTML 1, HTML 2, Widget 1 et Widget 2 sont encadrés en rouge. En bas, les trois rangées du constructeur, dont la première contient l'élément Titre du site et logo.

    Voir la capture en grand

  3. Cliquer sur l'élément placé pour ouvrir ses réglages. Un élément HTML présente un éditeur de texte, avec les onglets Visuel et Code : remplacer le texte proposé, « Insert HTML text here. », par le message voulu, que la barre d'outils met en forme et relie à une page (icône de lien). Le bouton « Ajouter un média » y insère une image de la médiathèque.

    Capture 2. Les réglages de l'élément HTML 1 : encadrés, le bouton « Ajouter un média » et la zone de texte :

    Section 1 HTML de l'outil de personnalisation, onglet General : le bouton Ajouter un média, encadré en rouge, les onglets Visuel et Code, la barre d'outils de mise en forme (paragraphe, gras, italique, couleurs, alignements, listes, lien) et la zone de texte qui contient Insert HTML text here., encadrée en rouge ; plus bas, les boutons de visibilité. À droite, l'aperçu de l'en-tête du site Alia Nature.

    Voir la capture en grand

  4. Photo : la photo d'une rangée est son arrière-plan. Cliquer sur la roue dentée de la rangée, puis sur l'onglet DESIGN : le bouton du réglage « Arrière-plan » ouvre trois onglets, Couleurs, Dégradé et Image ; dans Image, « Remplacer l'image » ouvre la médiathèque et « Retirer l'image » enlève la photo. Pour une photo plus petite, placée à côté du texte, passer par « Ajouter un média » dans un élément HTML.

    Capture 3. Les réglages de la rangée du haut, onglet DESIGN : encadrés, le réglage « Arrière-plan », la photo de la rangée dans l'aperçu et la roue dentée de la rangée :

    Section Au dessus de l'entête de l'outil de personnalisation, onglet Design : le réglage Arrière-plan et son bouton, encadrés en rouge, puis la couleur et la taille de la bordure inférieure, les marges interne et externe. À droite, l'aperçu : la rangée du haut de l'en-tête, avec le logo Alia Nature posé sur une photo de flacons et de montres, encadrée en rouge, puis le menu sur fond beige. En bas, le constructeur d'en-tête, dont la roue dentée de la première rangée, en bleu, est encadrée en rouge.

    Voir la capture en grand

  5. Vidéo : l'arrière-plan d'une rangée n'accepte pas de vidéo. Placer l'élément Widget 1 dans une case de l'en-tête, puis remplir la zone de widgets « Header Builder Widget 1 » (Apparence > Personnaliser > Widgets) avec un bloc Vidéo, qui reprend un fichier de la médiathèque ou en téléverse un. Autre solution, en haut de la page d'accueil : un bloc Bannière, qui accepte une vidéo en arrière-plan avec un texte par-dessus.
  6. Vérifier l'aperçu sur ordinateur, tablette et mobile (boutons en bas du panneau), puis cliquer sur Publier, en haut du panneau, et contrôler le site.

Attention

Sur le modèle, la photo est l'arrière-plan de la rangée du haut, « Au dessus de l'entête », et non de la rangée principale, qui porte le menu : c'est la roue dentée de la rangée du haut qu'il faut ouvrir pour la changer. Astra n'a pas non plus de réglage « vidéo d'en-tête » : inutile de le chercher.

Captures réalisées sur le site modèle Alia Nature (WordPress 7.0.2, thème Astra 4.13, extension Spectra) : selon la version installée le jour de l'épreuve, un libellé peut changer.

Bien composer l'en-tête

L'en-tête se voit sur toutes les pages : chaque élément ajouté doit servir le client, sans cacher le logo ni le menu. Exemple pour Alia Nature, qui lance une collection de thés d'automne :

Exemple : l'en-tête d'Alia Nature pour la collection d'automne
Élément Réussi À éviter
Texte« Nouvelle collection de thés d'automne », avec un lien vers l'article qui la présenteUn paragraphe entier, ou le texte « Insert HTML text here. » laissé en place
PhotoUne image large qui montre les produits (thés, flacons, accessoires) et laisse lire le logoUne photo chargée sous un texte sombre qui ne se lit plus
VidéoQuelques secondes qui montrent les produits ou leur fabricationUne vidéo longue et lourde, répétée sur toutes les pages
Bouton« Découvrir nos thés », vers la page des produits« Cliquez ici », ou un bouton qui ne mène nulle part
  • Une seule information par élément, en peu de mots : l'en-tête n'est pas une page d'article.
  • Un contraste net entre le texte et la photo qui est derrière.
  • Sur mobile, Astra utilise une autre disposition de l'en-tête : sur le modèle, le logo et le bouton du menu seulement. Un élément ajouté pour l'ordinateur n'y apparaît pas forcément : passer l'aperçu en mobile pour le vérifier.

Sur le modèle, l'en-tête associe au logo une grande photo de produits (flacons, montres, compléments alimentaires), mais le titre du site y est posé en texte sombre et se lit mal (capture 3), et aucun texte ni bouton n'invite le visiteur à agir. C'est l'exemple à compléter.

À l'épreuve

Exemple de consigne

Alia Nature lance sa collection de thés d'automne. Remplacez la photo de l'en-tête par l'image « bandeau-astheya » de la médiathèque, puis ajoutez dans la rangée principale, à gauche du menu, le texte « Nouvelle collection de thés d'automne » avec un lien vers l'article « Collection Automne ». Contrôlez le résultat sur mobile.

Ce que l'examinateur vérifie

  • La photo remplacée sur la bonne rangée, avec un logo toujours lisible.
  • Le texte exact, sans faute, qui mène à l'article « Collection Automne ».
  • Un en-tête contrôlé sur ordinateur et sur mobile.
  • Des modifications publiées.

Les erreurs fréquentes

  • Ouvrir les réglages de la rangée principale alors que la photo est sur la rangée du haut.
  • Laisser le texte proposé, « Insert HTML text here. », ou oublier le lien.
  • Chercher un réglage de vidéo d'en-tête au lieu de passer par un widget ou un bloc Bannière.
  • Fermer l'outil de personnalisation sans cliquer sur « Publier ».

L'essentiel à retenir

  • Apparence > Personnaliser > En-tête : trois rangées ; la roue dentée règle une rangée, le « + » d'une case ajoute un élément.
  • Texte : élément HTML ou Button ; photo : arrière-plan de la rangée, onglet DESIGN ; vidéo : bloc Vidéo dans un élément Widget, ou bloc Bannière en haut de l'accueil.
  • Vérifier sur mobile, puis « Publier ».

Voir aussi

Dans la série des tutoriels WordPress :

Dans le tutoriel WordPress complet :

Sur les messages qui font agir : Soigner l'appel à l'action. Documentation officielle de WordPress, en anglais : le bloc Bannière (Cover).

Tous les tutoriels WordPress