Configurer l'entête de la page d'accueil

L'entête de la page d'accueil du site se situe en haut de la page d'accueil. Il est l'un des premiers éléments auquel est exposé un nouveau visiteur, ce qui lui permet de se faire très rapidement un avis sur le site. Une page d'accueil agréable et bien construite permet de diminuer le taux de rebond et donc d'augmenter la participation.

Composition de l'entête

L'entête est composé de deux parties distinctes :

1. le fond de l'entête. Ça peut être une image ou une couleur unie
2. le contenu de l'entête, au premier plan, composé de texte, d'images, de boutons, de vidéos...

On trouve par défaut dans le contenu de l'entête les éléments suivants : un titre, un sous-titre, un bouton et des marges de 100 pixels. L'entête est cependant entièrement personnalisable. 

Dans  l'exemple ci-dessous, le fond de l'entête correspond au dégradé bleu. Les différents personnages, le logo et la baseline ont été ajoutés sous forme d'images dans le contenu de l'entête.

Dimensions de l'entête

La longueur de l'entête est définie par l'écran utilisé pour visualiser le site. Sa hauteur est quant à elle définie par le contenu de l'entête. Plus il y a de contenu, plus l'entête est grand.

Une image utilisée comme fond aura pour objectif de toujours remplir l'entête, quels que soient le contenu et la taille de l'écran. Cela implique qu'un zoom sera appliqué sur l'image de fond si le ratio de l'image ne permet pas de remplir totalement l'entête. Ce comportement est flagrant sur un écran large, la plateforme doit en effet appliquer un zoom important afin de remplir l'entête horizontalement :

Sur un écran mobile, l'image est dézoomée mais coupée sur les côtés :

L'image de fond doit donc avoir une dimension suffisamment importante pour être zoomée sans être pixelisée. Cela implique des dimensions de 1200*800 pixels minimum (pour un header classique). Plus il y aura de contenus dans votre entête, plus il faudra augmenter la taille de votre image de fond.

Comment modifier l'entête ?

Vous pouvez modifier l'entête dans le menu de l'administration Pages > Accueil / Entête. Vous trouverez plusieurs types de champs :

• les champs concernant le fond de l'entête : Assombrissement de l'image de fond, Couleur de fond de l'entête, Image de fond
  
• les champs concernant le contenu de l'entête : Marges, Titre/objet du site, Contenu de l'entête, Libellé du bouton principal, Bouton "Partager", Lien du bouton principal, Couleur du titre de l'entête, Couleur du bouton, Couleur du texte du bouton
• les champs concernant l'entête secondaire : Couleur de fond de l'entête secondaire, Couleur du texte de l'entête secondaire, Couleur du titre de l'entête secondaire
• les champs concernant le référencement, les réseaux sociaux et du code personnalisé : Titre/Objet du site, Méta description, Code personnalisé, Illustration pour les réseaux sociaux

Configurer le fond de l'entête

Ajoutez une image de fond grâce au champ Image de fond. Vous pouvez également dépublier le champ afin d'afficher uniquement un fond uni dont vous choisissez la couleur grâce au champ Couleur de fond de l'entête.

Si l'image de fond est trop lumineuse, activez le champ Assombrissement de l'image de fond afin d'ajouter un filtre noir sur l'image de fond. Ce filtre permet de faire ressortir le contenu de l'entête, en particulier si celui-ci est blanc :

Configurer le contenu de l'entête

Deux solutions pour le contenu de l'entête :

• utiliser les champs préconfigurés afin de rapidement et simplement configurer le contenu dans un template efficace : titre, sous-titre, bouton d'action (exemple : République Numérique),
• utiliser le champ Contenu de l'entête et personnaliser l'entête grâce à une utilisation avancée de l'éditeur de texte.

Le champ Contenu de l'entête vous permet, avec un peu de HTML, d'ajouter des vidéos, des boutons personnalisés, des images... et d'agencer le contenu grâce à des grilles ainsi que des marges.

L'option Bouton "Partager" ajoute un bouton de partage permettant de partager l'adresse de la page d'accueil par email ou sur les réseaux sociaux notamment.

Configurer l'entête secondaire

L'entête secondaire est une section de la page d'accueil dont le contenu peut être personnalisé dans le menu Pages > Accueil / Sections.

Elle est considérée comme une entête car elle est souvent placée juste après l'entête de la page d'accueil du fait de sa couleur de fond personnalisée. En effet, le champ Couleur de fond de l'entête secondaire permet de mettre la couleur de votre choix, indépendamment de la couleur de fond des autres sections de la page d'accueil, qui alternent quant à elles entre deux autres couleurs (Fond du site et Fond des sections dans le menu Réglages > Apparence).

Par défaut, cette section porte le titre La démarche. 

Configurer les réseaux sociaux, la meta description et le code avancé

Il existe dans ce menu Pages > Entête trois autres champs divers :

• Meta description : courte description du site. Elle apparaît dans les résultats d'un moteur de recherche et sur les réseaux sociaux lorsque la page d'accueil est partagée
  
  Voir article  Modifier la meta description du site
• Code personnalisé : emplacement dédié à l'ajout de code personnalisé. Peut être par exemple un script de suivi analytics dédié à la page d'accueil ou encore du Javascript ou du CSS pour personnaliser plus en profondeur la page d'accueil
• Illustration pour les réseaux sociaux : balise og:image récupérée par les réseaux sociaux lorsque la page d'accueil est partagée.