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, 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. Dans le volet Customize (Personnaliser), cliquez sur Header (En-tête).

   Conseil :

   Si le volet Customize (Personnalisé) n’est pas visible, ouvrez-le en cliquant sur le bouton bascule .

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 (130 pixels) et des liens de menu supplémentaires.
   • Custom HTML/CSS (Code HTML/CSS personnalisé) : utilisez un éditeur de code avec syntaxe pour configurer un en-tête avec un code personnalisé.

     Lorsque Custom HTML/CSS (Code HTML/CSS personnalisé) est sélectionné, un menu apparaît avec des paramètres pour HTML et CSS. Cliquez sur Open HTML code-editor (Ouvrir l’éditeur de code HTML) ou Open CSS code-editor (Ouvrir l’éditeur de code CSS) pour écrire le code de l’en-tête 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.

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

4. Pour Layout (Mise en page), sélectionnez Box (Boîte) ou Wide (Large).
5. Saisissez un Name (Nom) et un Short name (Nom court).

   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. 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.

   Si vous ne voulez pas que le nom du site apparaisse dans l’en-tête, désactivez le paramètre Name (Nom).

   Remarque :

   L’en-tête d’un site doit comporter soit un nom, soit un logo. Aussi, le paramètre Logo doit être activé avant que le paramètre Name (Nom) puisse être désactivé.

6. Cliquez sur Save layout (Enregistrer la mise en page).

Ajouter un logo à l’en-tête

Vous pouvez ajouter le logo de votre organisation à l’en-tête pour promouvoir votre marque sur le site. La taille et la position du logo du site dépend du style d’en-tête que vous choisissez (Standard, Prominent [Visible] ou Custom HTML/CSS [Code HTML/CSS personnalisé]).

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

1. Ouvrez un site en mode de mise à jour.
2. Dans le volet Customize (Personnaliser), cliquez sur Header (En-tête).

   Conseil :

   Si le volet Customize (Personnalisé) n’est pas visible, ouvrez-le en cliquant sur le bouton bascule .

3. Dans le menu Appearance (Apparence), cliquez sur le bouton bascule Logo pour l’activer.
4. Choisissez une des options suivantes :
   • Pour indiquer une URL, sélectionnez Image URL (URL de l’image) et collez un lien d’image pris en charge dans le champ URL.

     Les types de fichiers pris en charge sont notamment les suivants : .jpeg, .png et .gif.

   • Pour charger un fichier, sélectionnez Upload (Charger).

     La taille maximale de fichier est de 3 Mo, et seuls les types de fichier .jpeg, .jpg et .png sont acceptés.

     Conseil :

     Une image enregistrée en tant que fichier .png est préférable.

   Si vous avez sélectionné Upload (Charger), procédez comme suit pour charger une image :

   1. Faites glisser le fichier dans la zone ou cliquez sur Browse for image (Rechercher une image) pour ajouter une image.
   2. Cliquez sur le bouton Crop image (Rogner l’image) pour rogner ou redimensionner l’image.

      Pour rogner l’image, faites glisser une poignée pour redimensionner le cadre de rognage. Pour repositionner le cadre de rognage, sélectionnez-le et faites-le glisser sur la ligne en pointillé. Pour ajuster le zoom, utilisez le curseur situé en dessous de l’image.

   3. Cliquez sur Done (Terminé) pour appliquer les modifications.

   Le logo est ajouté à l’en-tête et redimensionné selon la mise en page et l’alignement du logo choisis.
5. Si vous utilisez le style d’en-tête Prominent (Visible), sélectionnez un paramètre pour Logo alignment (Alignement du logo) :
   • Horizontal logo (Logo horizontal) : le logo reste à la hauteur standard de 60 pixels. Il est aligné sur le Name (Nom) ou le Short name (Nom court) de l’en-tête.
   • Vertical logo (Logo vertical) : le logo est étendu jusqu’à la hauteur de 130 pixels. Il est positionné à gauche de tout le contenu de l’en-tête, y compris du Name (Nom) et des liens de menu.
6. 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.

7. Cliquez sur Save layout (Enregistrer la mise en page).

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

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

Remarque :

Si vous utilisez le style d’en-tête Custom HTML/CSS (Code HTML/CSS personnalisé), les étapes suivantes ne permettent pas de configurer les liens vers les réseaux sociaux.

1. Ouvrez un site en mode de mise à jour.
2. Dans le volet Customize (Personnaliser), cliquez sur Header (En-tête).

   Conseil :

   Si le volet Customize (Personnalisé) n’est pas visible, ouvrez-le en cliquant sur le bouton bascule .

3. Développez Social Icons (Icônes de réseaux sociaux).
4. Cliquez sur les boutons bascules pour ajouter des icônes de réseaux sociaux.

   Les icônes de réseaux sociaux s’affichent dans l’en-tête.

5. Indiquez les URL de vos comptes de réseaux sociaux pour y associer les icônes.
6. Cliquez sur Save layout (Enregistrer la mise en page).

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), cliquez sur Theme (Thème).

   Conseil :

   Si le volet Customize (Personnalisé) n’est pas visible, ouvrez-le en cliquant sur le bouton bascule .

3. Sélectionnez une couleur pour l’une ou l’ensemble des options suivantes en saisissant un code couleur de valeur hexadécimale ou en sélectionnant une couleur dans le sélecteur de couleurs.
   • 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 et aux boutons dans la barre de 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 à tout le 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 d’arrière-plan du corps peut également être configurée pour chaque ligne.
   • Body text color (Couleur du corps de texte) : applique une couleur au texte dans l’ensemble du site. La couleur du texte peut également être configurée pour chaque ligne.
   • Body link color (Couleur du lien du corps) : applique une couleur aux liens du site.

     Remarque :

     Le menu des actions d’un site Hub publié utilise la valeur Body link color (Couleur du lien du corps) pour le remplissage de l’arrière-plan et la valeur Body background color (Couleur d’arrière-plan du corps) pour les icônes et le texte.

4. Vous pouvez également appliquer des polices au texte dans l’en-tête et le corps du site de la manière suivante :
   1. Cliquez sur le bouton de personnalisation de Base font (Police de base) ou de Heading font (Police de l’en-tête).

      La police de base est utilisée pour le texte du corps du site et la police de l’en-tête pour le texte de l’en-tête du site.

      Conseil :

      Si vous modifiez la police de base et celle de l’en-tête pour qu’elles appartiennent à la même famille de polices, commencez par mettre à jour la police de base, puis cochez la case Use same font as base (Utiliser la même police que la police de base) pour la police de l’en-tête.

   2. Dans le champ URL for @import (URL pour @import), collez l’URL @import à partir du code incorporé de la police.
   3. Indiquez le nom de la famille de polices.
   4. Si vous le souhaitez, cliquez sur Preview you font (Afficher l’aperçu de la police) pour afficher un aperçu de texte dans la famille de polices importée.
   5. Cliquez sur l’onglet pour mettre à jour la seconde police si nécessaire.
   6. Cliquez sur Apply (Appliquer).
5. Cliquez sur Save layout (Enregistrer la mise en page).

Remarque :

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

Créer un pied de page

Il est possible d’ajouter un pied de page au site à l’aide d’un code personnalisé HTML et CSS. Le pied de page apparaîtra en bas du site, sur toutes les pages et vues associées. Pour ajouter un pied de page à un site, procédez comme suit :

1. Ouvrez un site en mode de mise à jour.
2. Dans le volet Customize (Personnaliser), sélectionnez Footer (Pied de page).

   Conseil :

   Si le volet Customize (Personnalisé) n’est pas visible, ouvrez-le en cliquant sur le bouton bascule .

3. Cliquez sur l’option Custom (Personnaliser).
4. Cliquez sur Open HTML code-editor (Ouvrir l’éditeur de code HTML) ou Open CSS code-editor (Ouvrir l’éditeur de code CSS) pour écrire le code du pied de page personnalisé.
5. Cliquez sur Apply (Appliquer) pour afficher les modifications apportées dans le pied de page.

   Remarque :

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

6. Cliquez sur Save layout (Enregistrer la mise en page).

Liens associés

• Modifier un site
• Configurer la navigation globale et les liens du menu
• Domaines