Définir la charte graphique d’un site à l’aide des options d’en-tête et de thème

Vous pouvez personnaliser un site en concevant un en-tête, en créant un thème ou en ajoutant un pied de page. Un en-tête et un pied de page jouent un rôle important dans la mise en page d’un site. Dans l’en-tête, vous pouvez présenter le site en ajoutant une personnalisation et en créant un menu pour aider les visiteurs à trouver du contenu, des pages et des sites Web externes. Le pied de page indique la fin du site et offre un espace dans lequel insérer des renseignements utiles, tels que le copyright de votre organisation et ses coordonnées.

Personnaliser l’en-tête

Chaque site comporte un en-tête qui s’affiche dans la partie supérieure (au-dessous de la barre de navigation globale) et sur toutes les pages et vues relatives au site. L’en-tête contient le titre, le logo et les liens de menu du site. Vous ne pouvez pas supprimer un en-tête, mais vous pouvez choisir son apparence.

Pour personnaliser l’en-tête, procédez comme suit :

1. Ouvrez un site en mode de mise à jour.
2. Ouvrez le volet latéral en activant le bouton à bascule . Sélectionnez Header (En-tête) (ou sélectionnez Customize [Personnaliser] pour retourner au menu Customize [Personnaliser]).
3. Dans le menu Appearance (Apparence), sélectionnez l’un des styles Header (En-tête) suivants :
   • Standard : cette conception, utilisée par défaut pour chaque nouveau site, présente une fine barre compacte dans laquelle un espace est aménagé pour un logo (60 pixels), des réseaux sociaux et des liens de menu.
   • Prominent (Visible) : cette conception offre plus d’espace pour des logos de taille supérieure (120 pixels) et des liens de menu supplémentaires.
   • Custom CSS/HTML (Code HTML/CSS personnalisé) : utilisez un éditeur de code avec syntaxe pour configurer un en-tête avec un code personnalisé.

     Remarque :

     Les en-têtes personnalisés sont conservés sur les pages du site, mais ne s’affichent pas sur les vues d’aperçu.

4. Pour Layout (Mise en page), sélectionnez Box (Boîte) ou Wide (Large).
5. Pour Name (Nom), indiquez le nom qui apparaîtra dans l’en-tête.

   Le nom que vous indiquez est seulement visible dans l’en-tête et n’est pas repris par l’URL du site ni par votre liste de sites.

6. Pour Short Name (Nom court), saisissez une version abrégée du nom indiqué en en-tête.

   Ajoutez un nom court pour assurer la qualité du site quel que soit l’appareil utilisé.

   Le nom court s’affiche uniquement dans l’en-tête si le nom complet est trop long à afficher sur un écran de petit format, comme sur un téléphone portable.

7. Si vous souhaitez définir l’identité graphique de l’en-tête de votre site à l’aide d’un code HTML ou CSS personnalisé, sélectionnez Custom HTML/CSS (Code HTML/CSS personnalisé) et indiquez le code dans les zones de texte HTML et CSS.

   L'en-tête HTML ne prend pas en charge le JavaScript intégré. Les balises de script sont ignorées.

8. Sélectionnez Enregistrer.

Créer un thème

Créez un thème pour le site en choisissant les couleurs de l’en-tête et du texte du site. Les couleurs que vous choisissez dans le menu Theme (Thème) s’appliquent à l’ensemble du site. Vous pouvez remplacer ces sélections en attribuant des couleurs à des lignes spécifiques. Pour plus d’informations, reportez-vous à Personnaliser un site.

Conseil :

Lorsque vous choisissez une couleur, passez en revue les directives concernant la charte graphique de votre organisation. De nombreuses directives spécifient les codes couleur applicables au contenu tel que les sites Web et les logos. En l’absence de directives, consultez votre équipe ou les parties concernées pour vous assurer que le thème du site reflète votre organisation de manière adéquate.

Pour créer un thème, procédez comme suit :

1. Ouvrez un site en mode de mise à jour.
2. Dans le volet Customize (Personnaliser), sélectionnez Theme (Thème).
3. Sélectionnez une couleur pour l’une des options suivantes ou l’ensemble d’entre elles en saisissant un code couleur de valeur hexadécimale ou choisissez une couleur dans le sélecteur de couleurs en regard du champ de code couleur.
   • Global nav background color (Couleur d’arrière-plan de la navigation globale) : applique une couleur à la barre de navigation globale du site.
   • Global nav text color (Couleur de texte de la navigation globale) : applique une couleur au texte dans la barre de navigation globale.

     Remarque :

     Pour plus d’informations sur la navigation globale, reportez-vous à la rubrique Configurer la navigation globale.

   • Header background color (Couleur d’arrière-plan de l’en-tête) : applique une couleur à l’en-tête du site.
   • Header text color (Couleur du texte de l’en-tête) : applique une couleur à la totalité du texte de l’en-tête.
   • Body background color (Couleur d’arrière-plan du corps) : applique une couleur aux lignes du site. La couleur de ligne et la couleur de texte peuvent également être configurées ligne par ligne en suivant les étapes indiquées dans la section Concevoir la mise en page du site.
   • Body text color (Couleur du corps de texte) : applique une couleur au texte dans l’ensemble du site.
   • Body link color (Couleur du lien du corps) : applique une couleur aux liens du site.

     Remarque :

     Les onglets verticaux, notamment le bouton de partage, utilisent la valeur Body link color (Couleur du lien du corps) pour le remplissage de leur arrière-plan et la valeur Body background color (Couleur d’arrière-plan du corps) pour les icônes et le texte.

4. Une fois les couleurs définies, sélectionnez Save (Enregistrer).
5. Vous pouvez également appliquer des polices au texte dans l’en-tête et le corps du site de la manière suivante :
   • Pour choisir la police à attribuer au corps du site, sélectionnez le bouton des paramètres Base font (Police de base).
   • Pour changer la police d’en-tête du site, sélectionnez le bouton des paramètres Header font (Police de l’en-tête).

Remarque :

Pour revenir aux polices par défaut, sélectionnez Reset fonts (Réinitialiser les polices) figurant en bas du menu Theme (Thème).

Ajouter un logo à l’en-tête

La taille et la position du logo du site dépend du style d’en-tête que vous choisissez.

Pour ajouter un logo à l’en-tête, procédez comme suit :

1. Activez le bouton à bascule Logo.
2. Sélectionnez Image URL (URL de l’image) ou Upload (Charger) pour ajouter une image.

   Conseil :

   Si vous chargez une image depuis un fichier, une image enregistrée au format .png est préférable. Rognez et faites un zoom sur l’image si nécessaire.

3. Si vous utilisez l’en-tête Prominent (Visible), choisissez un paramètre pour Logo alignment (Alignement du logo).
4. Pour Logo alt text (Texte alternatif du logo), saisissez du texte qui répond aux normes d’accessibilité.

   Conseil :

   Si un logo inclut du texte, le texte alternatif peut correspondre au nom de la société. Si le logo est une conception de bloc-logo, vous pouvez le considérer comme décoratif et saisir “” comme texte de remplacement.

5. Sélectionnez Enregistrer.

Ajouter des liens de réseaux sociaux à l’en-tête

Pour ajouter à l’en-tête des icônes de réseaux sociaux qui renvoient à vos comptes Facebook, X, Instagram ou YouTube, procédez comme suit.

1. Ouvrez un site en mode de mise à jour.
2. Dans le volet Customize (Personnaliser), sélectionnez Header (En-tête).
3. Développez Social Icons (Icônes de réseaux sociaux).
4. Activez les plateformes de réseaux sociaux que vous voulez afficher dans l’en-tête et indiquez l’URL du compte sur la plateforme.
5. Sélectionnez Enregistrer.

Créer un pied de page

Pour utiliser un HTML personnalisé afin d’ajouter un pied de page au site qui va persister sur toutes les pages jointes au site, procédez comme suit :

1. Ouvrez un site en mode de mise à jour.
2. Sélectionnez Footer (Pied de page) dans le volet latéral.
3. Activez le bouton à bascule Custom (Personnalisé).
4. Modifiez le contenu figurant dans la zone CSS et HTML du volet latéral et sélectionnez Save (Enregistrer) pour en voir les effets.

   Remarque :

   Le pied de page HTML ne prend pas en charge le JavaScript intégré. Les balises de script sont ignorées.

Contenu associé

Pour personnaliser davantage un site, vous pouvez procéder comme suit :

• Ajoutez des liens de menu et assurez-vous que la navigation globale est activée. Pour plus d’informations, reportez-vous à la rubrique Configurer la navigation globale et les liens du menu.
• Chaque site comporte une URL (adresse Web). Si votre organisation possède son propre domaine, vous pouvez configurer cette URL pour personnaliser davantage le site. Pour plus d’informations, reportez-vous à la rubrique Domaines.