Vous pouvez personnaliser un site en concevant un en-tête, en créant un thème ou en ajoutant un pied de page.
Personnaliser l’en-tête
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.
- Ouvrez un site en mode de mise à jour.
- Ouvrez le volet latéral en sélectionnant le bouton de bascule
. Sélectionnez Header (En-tête) (sélectionnez Customize (Personnaliser) pour retourner au menu Customize (Personnaliser)). - 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 (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?
- Pour Layout (Mise en page), sélectionnez Box (Boîte) ou Wide (Large).
- 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.
Remarque :
Ajoutez un nom court pour assurer la qualité de votre site quel que soit l’appareil utilisé.
- 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.
- Sélectionnez 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.
- Dans le volet Customize (Personnaliser), sélectionnez Theme (Thème).
- 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, 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.
- 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 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.
Remarque :
Les boutons utilisent les paramètres Body link color (Couleur du lien du corps) et Body background color (Couleur d’arrière-plan du corps) pour que les boutons soient accessibles à tous les types d’utilisateur. Pour en savoir plus, consultez le blog Update to Hub button theme colors. Les onglets verticaux, notamment le bouton de partage, utilisent Body link color (Couleur du lien du corps) pour le remplissage de leur arrière-plan et Body background color (Couleur d’arrière-plan du corps) pour les icônes ou le texte.
- Une fois les couleurs définies, sélectionnez Save (Enregistrer).
- Vous pouvez également appliquer des polices au texte dans l’en-tête et le corps du site.
- 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 d’en-tête).
Remarque :
Pour recommencer depuis le début ou retourner aux couleurs par défaut, sélectionnez Reset fonts (Réinitialiser les polices) en bas du menu Theme (Thème).
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.
- Ouvrez un site en mode de mise à jour.
- Dans le volet Customize (Personnaliser), sélectionnez Header (En-tête).
- Dans le menu Appearance (Apparence), sélectionnez le bouton bascule Logo pour l’activer.
- Ajoutez une image en sélectionnant Image URL (URL de l’image) ou Upload (Charger).
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. - Si vous utilisez l’en-tête Prominent (Majeur), vous pouvez choisir un paramètre pour Logo Alignment (Alignement du logo).
- 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. - Sélectionnez Enregistrer.
Ajouter des liens de réseaux sociaux à un en-tête
Vous pouvez ajouter à l’en-tête des icônes de réseaux sociaux avec des liens vers vos comptes Facebook, Twitter, Instagram ou YouTube.
- Ouvrez un site en mode de mise à jour.
- Dans le volet Customize (Personnaliser), sélectionnez Header (En-tête).
- Développez Social Icons (Icônes de réseaux sociaux).
- Activez les plateformes de réseaux sociaux que vous voulez afficher dans l’en-tête et indiquez l’URL de votre compte sur la plateforme.
- Sélectionnez Enregistrer.
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.
- Dans le volet Customize (Personnaliser), sélectionnez Footer (Pied de page).
- Sélectionnez le bouton bascule à côté de Custom (Personnalisé).
- Modifiez la zone CSS et HTML dans le volet latéral et sélectionnez Save (Enregistrer) 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 ?