Chaque site comporte un en-tête qui s’affiche dans la partie supérieure de votre site (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 de votre site. Vous ne pouvez pas supprimer un en-tête, mais vous pouvez choisir son apparence.
En-tête
Pour choisir une apparence pour votre en-tête, procédez comme suit :
- Ouvrez un site en mode de mise à jour.
- Ouvrez le volet latéral en cliquant sur le bouton de bascule
. Le cas échéant, cliquez sur la flèche de retour en regard de Customize (Personnaliser) en haut du volet pour revenir au menu racine jusqu’à ce que l’option permettant de cliquer sur Header (En-tête) apparaisse. - Cliquez sur le menu Appearance (Apparence) pour choisir 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 (Majeur) : 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 de contenu. Pour plus d’informations, reportez-vous à la rubrique Why does the Explore content view branding look different?
- Cliquez sur le menu Branding (Habillage) pour appliquer les options suivantes :
- Name (Nom) : indiquez le nom qui apparaîtra dans l’en-tête du site. Le nom que vous indiquez dans ce champ est seulement visible dans l’en-tête et ne sera pas reproduit dans l’URL du site ni dans votre liste de sites.
- Short Name (Nom court) : saisissez une version abrégée du titre ajouté à l’en-tête. Le nom court s’applique uniquement à l’en-tête s’il est trop long à afficher sur un écran de petit format, comme un téléphone portable.
Conseil :
Les utilisateurs naviguent de plus en plus sur Internet à partir de leur appareil mobile. Ajoutez un nom court pour assurer la qualité de votre site quel que soit l’appareil utilisé.
- Choisissez une option pour Layout (Mise en page): Box (Boîte) ou Wide (Large).
- Si vous souhaitez attribuer une marque à l’en-tête de votre site avec un code HTML ou CSS personnalisé, sélectionnez Custom HTML/CSS (Code HTML/CSS personnalisé) et indiquez le code dans les boîtes HTML et CSS.
Remarque :
L'en-tête HTML ne prend pas en charge le JavaScript intégré. Les balises de script sont ignorées.
- Cliquez sur Save (Enregistrer).
Ajouter un logo à un en-tête
La taille et la position du logo de votre site dépend du style d’en-tête que vous choisissez.
- Cliquez pour développer le menu Branding (Habillage) sous Header (En-tête) dans le volet latéral.
- Cliquez sur le bouton bascule Logo pour l’activer.
- Ajoutez une image en sélectionnant Image URL (URL de l’image) ou en la chargeant depuis un fichier.
Conseil :
Si vous chargez une image depuis un fichier, une image enregistrée au format PNG est préférable. Vous pouvez rogner et zoomer sur l’image dans la section Image settings (Paramètres d’image) de la fiche, dans le volet Customize (Personnaliser). - Si vous utilisez l’en-tête Prominent (Majeur), vous pouvez choisir un paramètre pour Image Alignment (Alignement d’image).
- Pour Logo Alt Text (Texte alternatif du logo), saisissez du texte pour répondre 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 alternatif. - Cliquez sur Save (Enregistrer).
Ajouter des icônes de réseaux sociaux
Ajoutez des icônes de réseaux sociaux à un en-tête.
- Ouvrez un site en mode de mise à jour.
- Cliquez pour développer le menu Branding (Habillage) sous Header (En-tête) dans le volet latéral.
- Cliquez sur le menu Social Icons (Icônes de réseaux sociaux).
- Cliquez sur le bouton de bascule pour ajouter une icône de réseaux sociaux pour Facebook, Twitter, Instagram ou YouTube.
- Spécifiez l’URL du compte de votre plateforme.
- Cliquez sur Save (Enregistrer).
Créer un thème
Attribuez un thème à votre site en sélectionnant les couleurs de l’en-tête, du texte et des boutons. Les couleurs que vous choisissez dans le menu Theme (Thème) du site s’appliquent à l’ensemble de votre site. Vous pouvez remplacer ces sélections en attribuant des couleurs à des lignes spécifiques. Pour plus d’informations, reportez-vous à la rubrique Couleurs et polices.
Conseil :
Lorsque vous choisissez une couleur, passez en revue les directives concernant la charte graphique de votre organisation. De nombreuses directives fournissent le code de couleur exact des sites Web et des logos. En l’absence de directives, consultez votre équipe ou les parties concernées pour vous assurer que le thème de votre site reflète votre organisation.
- Ouvrez un site en mode de mise à jour.
- Ouvrez le volet latéral en cliquant sur le bouton de bascule . Le cas échéant, cliquez sur la flèche de retour en regard de Customize (Personnaliser) en haut du volet pour revenir au menu racine jusqu’à ce que l’option permettant de cliquer sur Theme (Thème) apparaisse.
- Pour sélectionner une couleur pour une des options suivantes, saisissez un code de couleur de valeur hexadécimale ou choisissez une couleur dans le sélecteur de couleurs en regard du champ de code de 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 mondiale, reportez-vous à la rubrique Qu’est-ce que la navigation mondiale ?
- 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.
- Global 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 pour chaque ligne en suivant les étapes indiquées dans Couleur et polices.
- Body Text Color (Couleur du corps de texte) applique une couleur au texte sur l’ensemble du site.
- Body Link Color (Couleur du lien du corps) applique une couleur à tous les liens fournis sur le site et les boutons en utilisant l’option Button Style (Style du bouton) définie sur Outlined (Avec contour).
Remarque :
Les onglets verticaux, notamment le bouton de partage, utilisent Body (Corps) > Link Color (Couleur des liens) pour le remplissage de leur arrière-plan et Body (Corps) > Background Color (Couleur d’arrière-plan) pour les icônes ou le texte.
- Button Background Color (Couleur d’arrière-plan des boutons) applique une couleur aux boutons fournis sur le site en utilisant l’option Button Style (Style du bouton) définie sur Solid background (Arrière-plan uni), ainsi que les icônes situées sur les onglets du volet latéral.
- Button Text Color (Couleur de texte des boutons) applique une couleur au texte des boutons fournis sur le site.
- Une fois que vous avez défini les couleurs, cliquez sur Apply Changes (Appliquer les changements).
- Vous pouvez également appliquer des polices au texte dans l’en-tête et le corps du site.
- Pour choisir une police à attribuer au corps du site, cliquez sur le bouton des paramètres Base Font (Police de base).
- Pour changer la police d’en-tête du site, cliquez sur le bouton des paramètres Header Font (Police d’en-tête).
Remarque :
Pour recommencer ou revenir aux couleurs par défaut, sélectionnez Reset to Defaults (Rétablir les valeurs par défaut) en bas du menu Theme (Thème).
Créer un pied de page
Vous pouvez utiliser un HTML personnalisé pour ajouter un pied de page au site qui persiste sur toutes les pages jointes au site.
- Ouvrez un site en mode de mise à jour.
- Développez le menu Footer (Pied de page) dans le volet latéral.
- Cliquez sur le bouton bascule en regard de Custom (Personnalisé).
- Modifiez la zone CSS et HTML dans le volet latéral et cliquez sur Apply Changes (Appliquer les modifications) pour voir les effets sur votre HTML.
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 votre 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 les liens de menu et la navigation globale.
Vous avez un commentaire à formuler concernant cette rubrique ?