Concevoir l'en-tête, le pied de page et les styles généraux

Utilisez Paramètres du site pour conserver une apparence uniforme entre les pages. Configurez la navigation, la typographie, les couleurs réutilisables et les valeurs par défaut des sections, puis ajoutez l'en-tête, le pied de page, la barre supérieure et, au besoin, une fenêtre destinée aux visiteurs.

# Ouvrir les paramètres du site

Dans le créateur de site Web, sélectionnez Paramètres du site dans la barre supérieure. L'inspecteur contient les valeurs générales et les blocs partagés du site. Enregistrez chaque groupe modifié ou utilisez Tout enregistrer dans le menu des modifications non enregistrées.

Ces paramètres touchent le site Web actuel. Si l'organisation gère plusieurs sites, confirmez le nom et l'adresse du site avant de modifier sa marque ou son contenu partagé.

# Définir la navigation et les valeurs par défaut

Les principaux paramètres comprennent :

• la disposition de navigation : en haut à gauche, en haut à droite, centrée en haut ou latérale à gauche;
• le style de la page active : pastille, soulignement ou barre;
• l'espacement par défaut entre les sections : espacé, étroit ou bord à bord;
• la langue principale et le mode bilingue;
• le sous-domaine Activity Messenger;
• l'exclusion générale des moteurs de recherche;
• la typographie et les nuances de couleur réutilisables.

Un changement de sous-domaine modifie les liens publics. Mettez à jour les messages, favoris, codes QR et liens externes après l'enregistrement de la nouvelle adresse.

L'option générale Exclure des moteurs de recherche ajoute une directive noindex à chaque page et retire le site de son plan de site pendant qu'elle est activée. Elle ne rend pas le site privé. Utilisez l'état de publication ou la protection par mot de passe pour restreindre l'accès.

# Créer un système visuel cohérent

Choisissez une police de corps pour les paragraphes et les contrôles, puis une police d'affichage pour les titres. Une police personnalisée peut utiliser une valeur CSS font-family et l'URL facultative d'une feuille de style fiable.

Ajoutez les couleurs de marque fréquentes comme nuances du site. Les éditeurs pourront les sélectionner rapidement dans les contrôles compatibles. Un site peut conserver jusqu'à 24 nuances uniques.

Définissez les valeurs par défaut des modèles de section pris en charge :

• couleurs des titres, du corps, des accents et de l'arrière-plan;
• tailles du texte des titres et du corps;
• forme et effet de survol des boutons;
• intensité de l'ombre des cartes.

Comprendre les valeurs héritées et les remplacements

Une section qui utilise une valeur générale suit les changements ultérieurs de cette valeur. Une section pour laquelle une valeur précise a été choisie conserve plutôt ce remplacement.

Par exemple, le changement de la couleur générale des titres met à jour les sections qui en héritent. Une section de campagne dont le titre a été réglé manuellement en blanc reste blanche. Ouvrez ses contrôles de conception et replacez le champ à sa valeur par défaut ou héritée si la section doit de nouveau suivre le site.

Réservez les remplacements de section aux exceptions. Évitez de reproduire manuellement toute la marque sur chaque page.

# Configurer la barre supérieure

La barre supérieure facultative peut afficher les coordonnées et destinations sociales partagées, notamment l'adresse courriel et le téléphone. Utilisez des renseignements courts qui demeurent utiles sur mobile. Testez chaque lien, y compris les actions téléphoniques et de courriel, dans l'aperçu public.

# Configurer l'en-tête

L'en-tête peut comprendre :

• le logo du site;
• la navigation des pages;
• le sélecteur de langue sur un site bilingue;
• le panier, lorsque pertinent;
• une action de compte client avec un libellé et une URL personnalisés;
• un bouton d'action principal.

Gardez le libellé de l'action principale court. Si l'action du compte et le bouton principal sont tous deux activés, vérifiez que l'en-tête demeure lisible aux formats tablette et mobile. La disposition de navigation choisie détermine l'organisation de ces éléments.

# Configurer le pied de page

Choisissez le type de pied de page selon la quantité d'information :

• Pied de page standard pour un logo, une description, une infolettre, les liens principaux, l'adresse, les réseaux sociaux et les renseignements juridiques.
• Méga pied de page pour un appel à l'action plus important, plusieurs groupes ou colonnes de liens, des logos complémentaires, les réseaux sociaux, les liens juridiques et une ligne inférieure détaillée.

Remplissez les textes et les liens localisés dans les deux langues. Le pied de page prend en charge un jeton d'année afin que l'année de droit d'auteur reste à jour sans modification annuelle.

Sur mobile, confirmez que les colonnes s'empilent dans un ordre clair et que les longues adresses et les longs libellés passent à la ligne sans défilement horizontal.

# Ajouter une fenêtre au site Web

La fenêtre du site peut contenir du texte mis en forme ou un formulaire Activity Messenger intégré. Configurez :

1. le titre et le contenu localisés, ou le formulaire;
2. un délai de 0 à 60 secondes;
3. un affichage unique par session du navigateur ou un nouvel affichage après un nombre de jours choisi, de 1 à 365.

Utilisez l'aperçu de la fenêtre dans l'éditeur. Son ouverture automatique est destinée au site public; testez-la donc de nouveau sur la page publique après la publication.

N'utilisez pas une fenêtre pour une information que chaque visiteur doit lire immédiatement. Placez les renseignements essentiels sur l'accessibilité, l'annulation ou la sécurité directement dans la page.

# Utiliser prudemment les paramètres avancés

CSS personnalisé

Le CSS personnalisé permet d'ajuster le site lorsque les paramètres intégrés ne suffisent pas. Le champ accepte uniquement du CSS, jusqu'à 50 000 caractères. Le HTML et les constructions exécutables sont refusés.

Limitez les règles aux éléments visés. Testez les formats ordinateur, tablette et mobile après chaque changement. Des règles personnalisées peuvent annuler des styles adaptatifs ou réduire le contraste; documentez donc le but de chaque règle pour les futurs éditeurs.

Une feuille de style de police externe crée une requête vers un tiers. Utilisez une source fiable que votre organisation est autorisée à charger.

Scripts soumis au consentement aux témoins

Les paramètres avancés peuvent charger l'URL d'un script fournisseur ou du JavaScript personnalisé pour des services comme l'analyse ou les outils destinés aux visiteurs. Considérez ce code comme ayant accès à toute la page publique.

• Si la bannière facultative de témoins est activée, le code configuré s'exécute seulement après l'acceptation des témoins facultatifs.
• Si la bannière est désactivée, le code s'exécute au chargement de la page.

Ajoutez uniquement des scripts fournis ou approuvés par un administrateur de confiance. Vérifiez les obligations de confidentialité de l'organisation, mettez ses avis à jour au besoin et confirmez qu'un refus des témoins facultatifs empêche l'exécution du script.

# Révision finale

Avant la publication, vérifiez :

• tous les liens de l'en-tête et du pied de page dans les deux langues;
• la qualité du logo et de l'icône de navigateur;
• la navigation et les actions à chaque largeur d'aperçu;
• le contraste du texte et la visibilité du focus;
• le délai et la fréquence de la fenêtre;
• les styles hérités et les exceptions intentionnelles;
• le consentement de tout script tiers.

# Articles connexes

• Configurer un site Web et ouvrir le créateur
• Gérer les pages, la navigation et le référencement
• Traduire un site Web bilingue
• Gérer les domaines, les mots de passe et plusieurs sites