L'en-tête, le pied de page et le thème du site

L'en-tête (logo, menu, bouton), le pied de page (liens, coordonnées, réseaux sociaux, newsletter) et le thème (couleurs, polices, forme des coins) sont les mêmes sur toutes les pages d'un site. On les règle une fois, à un seul endroit, et chaque page les reprend.

Cette page dit où se trouvent ces réglages, ce que chacun change et ce qu'il faut surveiller : un changement ici touche tout le site d'un coup, sans passer par la publication d'une page.

Où se règlent l'apparence et la navigation

Les mêmes réglages s'ouvrent à deux endroits : une fenêtre du Builder, la plus pratique, et deux fiches de l'espace Site web et e-commerce.

Dans le Builder

Ouvrez l'espace Site web et e-commerce, onglet Pages, puis Tout le Builder dans le panneau Aller plus loin. Le menu de gauche du Builder propose Thème : la fenêtre Thème, en-tête et pied de page s'ouvre. Vous la retrouvez aussi dans Réglages, rubrique Global, Thème, et, dans l'éditeur d'une page, avec la roue Réglages de la barre du haut.

Cette fenêtre a six rubriques qui se déplient une à une : Couleurs et typographie, En-tête, Menu, Pied de page, Haut de page et Blog (cette dernière n'apparaît que si le site a un blog). Ouverte depuis une page d'un site, elle affiche une ligne « Site : » suivie du nom du site réglé.

Il n'y a ni bouton Enregistrer ni bouton Publier : chaque changement s'enregistre seul, à peine une seconde après, et le site le reprend sans autre étape. La phrase au bas de la fenêtre le rappelle : « Les modifications sont enregistrées automatiquement et s'appliquent à tout le site. »

Seuls les comptes qui ont le rôle Responsable du Site Web ou Responsable Système peuvent régler l'apparence du site : ce sont les mêmes rôles qui modifient les pages du Builder.

Dans l'espace Site web et e-commerce

Ouvrez l'onglet Paramètres, rubrique Sites et apparence. Deux fiches y portent les mêmes réglages que la fenêtre du Builder : Config. en-tête et pied de page du site pour le site principal, Variante en-tête et pied de page du site pour chaque autre site.

1. L'onglet Paramètres. Tous les réglages de l'espace, rangés par rubrique.
2. La rubrique Sites et apparence. « Ce que tous les sites partagent : leur en-tête et leur pied de page, leur thème, leurs scripts. »
3. Config. en-tête et pied de page du site. « En-tête et pied de page du site principal : logo, menu, colonnes ».
4. Variante en-tête et pied de page du site. « En-tête et pied de page de chaque autre site » : une fiche par site.

Chaque fiche se range en cinq onglets, Détails, En-tête, Menu, Pied de page et Thème, et s'enregistre avec le bouton Enregistrer, ce que la fenêtre du Builder n'a pas besoin de faire.

1. Les cinq onglets. L'onglet Détails s'ouvre sur le système de design.
2. Le système de design. Les mêmes quatre réglages que Couleurs et typographie dans la fenêtre du Builder.

Les autres cartes de la rubrique ne règlent ni les couleurs ni le menu du site : Paramètres du Site web (page d'accueil, navigation, statistiques), Réglages Builder (les valeurs par défaut du Builder), Thème du Site Web (« Couleurs et polices des pages en dehors du Builder »), Paramètres de lien social, Script du Site web, Plugin du site et Page emploi. Le tour complet de l'onglet Paramètres se trouve dans Ce que le site propose.

Couleurs et typographie

Ces réglages valent pour tout le site. La fiche, onglet Détails, le dit ainsi : « Défini une fois, respecté partout — en-tête, pied de page et chaque page générée. »

1. Coins. La forme des angles : Carré (0), Subtil (4 px), Arrondi (12 px) ou Doux (20 px).
2. Élévation. À quel point les cartes se détachent de la page : Aucun, Doux ou Fort.
3. Survol des boutons. Ce que fait un bouton sous la souris : Aucun, Assombrir, Soulever ou Agrandir.
4. Animation. La vitesse des transitions : Calme ou Vif ; Aucun les désactive.
5. Les quatre couleurs. Principale, Secondaire, Arrière-plan et Texte, chacune avec son code (par exemple « #1a1a2e ») et son échantillon, qui ouvre un sélecteur de couleur.
6. Les deux polices. Police des titres et Police du corps de texte, à choisir dans une liste de polices courantes.

Gardez un texte lisible sur son fond : une couleur de Texte proche de l'Arrière-plan rend le site illisible partout à la fois.

L'en-tête

Dans la rubrique En-tête :

1. La barre. Disposition, Hauteur, Au défilement et Style d'en-tête.
2. Le logo. Type de logo (Image ou Texte), puis Remplacer le logo.
3. La recherche. Pas de recherche, une icône ou une barre de recherche.
4. Deux interrupteurs. En-tête fixe garde la barre en haut de l'écran quand on fait défiler la page ; Bouton d'appel à l'action affiche le bouton du coin.
5. Le bouton. Texte du bouton, URL du bouton, Style du bouton et Afficher le bouton pour, par exemple « Nous visiter » vers « /contact ».
6. Le compte et le panier. Bouton de compte, Panier et Afficher le panier pour.

Disposition place le logo, le menu et les icônes : Logo | Menu centré | Icônes, Logo | Menu à droite | Icônes ou Menu à gauche | Logo centré | Icônes. Hauteur vaut Fin (56 px), Standard (64 px) ou Haut (76 px).

Au défilement ne joue que sur un en-tête fixe : Toujours visible (la barre ne bouge jamais), Masquer en descendant (elle s'efface pendant la lecture et revient dès que vous remontez) ou Réduire (elle reste, mais plus fine). Style d'en-tête : Classique (barre pleine largeur), Flottant (détaché, arrondi, au-dessus du contenu), Transparent (se fond dans le haut de la page, opaque une fois le défilement commencé) ou Minimal (sans fond, sans bordure).

Remplacer le logo (ou Téléverser un logo tant qu'aucun logo n'est posé) envoie le fichier tout de suite, sans passer par l'enregistrement automatique. L'adresse du logo reste « /files/logo-default.png » et un nouveau fichier remplace l'ancien : ce fichier est commun, donc tous les sites qui utilisent cette adresse affichent le nouveau logo. Un site qui doit garder son propre logo le joint dans le champ Image du logo de sa fiche Variante, onglet En-tête. Le champ URL de l'image du logo n'apparaît que si le logo pointe vers une autre adresse.

Recherche : Aucun, Icône (superposition), Barre de recherche (en ligne) ou Barre de recherche (pleine largeur en bas).

Style du bouton : Principale, Secondaire ou Contour. Afficher le bouton pour : Automatique, Tout le monde, Visiteurs uniquement ou Utilisateurs connectés uniquement ; avec Automatique, un bouton qui mène à la connexion, à l'inscription ou à la demande de compte disparaît une fois le visiteur connecté.

Afficher le panier pour : Automatique (sur un site professionnel, le panier s'affiche une fois le visiteur connecté), Tout le monde ou Utilisateurs connectés uniquement. L'icône du panier se pose d'elle-même dès qu'une fonction remplit le panier : voir Ce que fait l'interrupteur.

La fiche ajoute, dans son onglet En-tête : Bordure inférieure (Aucun ou Subtil), Couleur de fond et Couleur du texte de la barre, la taille du logo (Header Logo Size, affiché en anglais : Petit, Moyenne, Grand), l'icône Liste de souhaits, Forme du bouton (Arrondi, Pilule ou Carré) et Taille du bouton (Moyenne ou Petit).

Le menu

La rubrique Menu liste les entrées de l'en-tête : un libellé et l'adresse qu'il ouvre, avec une corbeille pour retirer la ligne. Ajouter un élément de menu en ajoute une.

1. Le libellé. Ce que le visiteur lit dans le menu.
2. L'adresse. La page ouverte, par exemple « /contact ».
3. La corbeille. Retire l'entrée.
4. Ajouter un élément de menu. Ajoute une ligne.

Une entrée doit mener à une page publiée : un lien vers une page non publiée, ou qui n'existe pas, répond « page introuvable » au visiteur. Le menu garde l'adresse telle que vous l'avez écrite : si vous changez l'adresse d'une page, corrigez aussi son entrée, et pour qu'une nouvelle page apparaisse dans le menu, ajoutez-la ici.

Pour le site principal, ce menu est aussi le tableau Articles de la Barre Supérieure de Paramètres du Site web, onglet Barre de navigation : les deux listes sont liées, et modifier l'une modifie l'autre. Une fiche Variante n'a pas ce lien.

Le pied de page

1. Modèle et Mentions de copyright. La disposition du pied et son texte légal.
2. Description. Une ou deux phrases sous le logo.
3. Menu, colonnes et liens. Les liens du pied, rangés par colonne.
4. Ajouter un lien et Ajouter une colonne. Pour compléter les liens.
5. Bloc personnalisé. Du code propre à votre site, pour qui sait le poser.

Modèle : Minimal (logo, liens et réseaux sociaux sur une ligne, sans description), Standard (logo et description, colonnes de liens, inscription à la newsletter), Étendu (comme Standard, avec les réseaux sociaux sous la description) ou Centré (logo, description, une rangée de liens, réseaux sociaux dessous). Le formulaire d'inscription à la newsletter ne s'affiche qu'avec Standard et Étendu ; la fenêtre d'inscription décrite plus bas ne dépend pas du modèle.

Mentions de copyright : le texte de départ, « © {year} {site_name}. All rights reserved. », remplace {year} par l'année en cours et {site_name} par le nom du site (le Texte du logo quand il est renseigné). Tant que vous le gardez tel quel, il s'affiche dans la langue du visiteur ; si vous l'écrivez vous-même, il s'affiche comme vous l'avez saisi. La mention « Propulsé par Neoffice » reste affichée à côté.

Bloc des horaires : coché, le pied de page montre les horaires d'ouverture de la boutique, les mêmes pour tous les sites ; Affichage des horaires propose alors Compact ou Full week (affiché en anglais). Le bloc ne montre rien tant que les horaires ne sont pas saisis.

Menu : Aucun, Identique à l'en-tête ou Liens personnalisés. Avec les liens personnalisés, chaque colonne a son titre (une colonne sans titre s'appelle « Liens »). Minimal et Centré alignent tous les liens sur une seule rangée, sans titres. Dans ces liens, une adresse qui commence par « http:// » ou « https:// » est un lien vers un autre site : il s'ouvre dans un nouvel onglet.

Le pied de page affiche aussi tout seul, sous le reste, les pages légales publiées dont l'adresse est l'une des adresses usuelles : par exemple « /cgv », « /conditions-generales », « /privacy-policy », « /mentions-legales », « /impressum » ou « /livraison ». Une page déjà placée dans une colonne n'est pas répétée.

Réseaux sociaux affiche les comptes saisis dans les réglages du site : voir la section suivante. Bloc personnalisé (« Votre propre HTML — un formulaire de newsletter, un badge, un widget ») s'affiche au-dessus de la ligne de copyright, tel que vous l'avez écrit.

La fiche, onglet Pied de page, ajoute :

• Couleur de fond et Couleur du texte du pied (par défaut, celles de l'en-tête), Afficher le logo dans le pied de page et la taille de ce logo ;
• les coordonnées que le site publie sur ses pages de contact et ses pages légales : Business Name Shown on the Site et Address Shown on the Site (affichés en anglais, repris de la société quand ils sont vides), Téléphone de l'entreprise, E-mail de l'entreprise et Site web de l'entreprise ;
• la newsletter : Afficher l'inscription à la newsletter, Groupe d'e-mails, Titre de la newsletter et Texte indicatif de la newsletter ;
• une fenêtre d'inscription, Newsletter Popup (affichée en anglais, comme ses champs Popup Title, Popup Text, Popup Consent, Popup Success Message et Popup Delay) : elle s'ouvre une fois chez un nouveau visiteur, après le délai indiqué (8 secondes au départ), ne revient pas avant 30 jours si elle a été fermée, et ne s'ouvre jamais sur le panier, le paiement, la connexion ou un compte ;
• Show Opening Hours et Opening Hours Display, les mêmes réglages que le Bloc des horaires (affichés en anglais).

L'inscription demande un Groupe d'e-mails : sans lui, ni le formulaire ni la fenêtre ne s'affichent. Le message de bienvenue du groupe, s'il en a un, part tout de suite à chaque nouvel abonné.

Les réseaux sociaux

Les comptes se saisissent une seule fois, dans Réglages, rubrique Global, Réseaux sociaux : la fenêtre s'appelle Comptes sociaux. Le pied de page décide seulement de les afficher ou non, avec l'interrupteur Réseaux sociaux. Un champ laissé vide n'affiche aucune icône.

1. Thème. La fenêtre décrite plus haut.
2. Réseaux sociaux. Les comptes de l'entreprise.
3. Le principe. « Les comptes de cette entreprise. Renseignez-les une fois ici ; le pied de page et tout autre emplacement décident seulement de les afficher ou non. »
4. Les cinq comptes. Facebook, Instagram, LinkedIn, Twitter et YouTube, enregistrés automatiquement.

Cette fenêtre règle les comptes du site principal ; ceux d'un autre site se saisissent dans sa fiche Variante, onglet Pied de page, rubrique Réseaux sociaux. La carte Paramètres de lien social de l'onglet Paramètres ne sert pas au pied de page.

Le haut de page et le blog

Haut de page règle la bande en haut de chaque page intérieure, dans le style du site.

1. La rubrique. « La bande en haut de chaque page intérieure, dans le style du site. Une page qui s'ouvre sur son propre titre la conserve, et le fil d'Ariane reste toujours dans la page pour les moteurs de recherche. »
2. Modèle. Aucun, Minimal, Standard, Centré, Scindé ou Builder.
3. Arrière-plan. Aucun, Teinté, Uni ou Image.
4. Pages sans en-tête de page. Une route par ligne, « * » accepté en fin de motif ; vide, la page d'accueil seule.
5. Fil d'Ariane. L'afficher ou le masquer ; il reste dans la page pour les moteurs de recherche.
6. Position du fil d'Ariane. Sous le titre ou Au-dessus du titre.

Avec Teinté ou Uni, une Couleur de fond apparaît (vide, une teinte de la couleur principale) ; avec Image, une URL de l'image de fond (vide, le site utilise sa propre photographie). Avec le modèle Builder, le haut de page est un composant dessiné dans le Builder : Composant du haut de page, Créer un haut de page et Modifier dans Builder.

Blog règle la Liste des articles (Grille, Liste ou Magazine), la Page d'article (Couverture en héros, Couverture au-dessus ou Sans couverture), Afficher l'auteur et Autoriser les commentaires (« Désactivé par défaut. Un espace de commentaires que personne ne surveille se remplit de spam. »).

Un réglage par site

Le site principal a sa fiche Config. en-tête et pied de page du site ; chaque autre site a sa fiche Variante, qui porte le nom du site. Deux sites peuvent donc avoir un logo, un menu, des couleurs et un pied de page différents. Ouverte depuis une page, la fenêtre Thème règle le site de cette page ; ouverte depuis la liste des pages du Builder, elle règle le site de l'adresse sur laquelle vous êtes connecté.

La première fois qu'on modifie l'apparence depuis une page d'un site qui n'a pas encore de fiche Variante, Neoffice la crée en copiant le site principal ; les deux fiches évoluent ensuite chacune de leur côté. Une page « Sur tous les sites » reprend l'en-tête et le pied de page du site sur lequel on la visite.

Quand un site est Hors ligne, ses visiteurs ne voient ni l'en-tête ni le pied de page ; les comptes Responsable du Site Web et Responsable Système les voient encore, pour préparer le site. Voir Le profil d'un site : en ligne, maintenance et accès.

À régler une fois

• Confiez ces réglages à la personne qui administre le site (rôle Responsable du Site Web) : une couleur, une police ou le menu change toutes les pages d'un coup, sans confirmation.
• Posez le logo une seule fois avec Remplacer le logo : toutes les pages le reprennent.
• Saisissez vos comptes sociaux une fois, et seulement ceux que vous voulez montrer.
• Choisissez avec soin le groupe d'e-mails de la newsletter, le texte de consentement et le message de bienvenue : ce sont des promesses faites aux visiteurs.
• Publiez vos conditions générales, votre politique de confidentialité et vos mentions légales à une adresse usuelle : le pied de page les affiche seul sur chaque page.

Au quotidien

• Pour corriger un lien du menu ou du pied de page : le Builder, Thème, Menu ou Pied de page. Rien d'autre à publier.
• Après avoir publié une page, changé son adresse ou retiré une page, repassez dans Menu et Pied de page et vérifiez chaque lien sur le site, en navigation privée si vous y êtes connecté.
• Ne touchez pas au Bloc personnalisé ni aux champs de code : ils servent à la personne qui construit le site.
• Quand un résultat surprend, ouvrez la fiche Config. en-tête et pied de page du site : le bloc Activité en bas liste les dernières modifications, leur auteur et leur date.

Voir aussi

• Ce que le site propose
• Modifier une page avec le Builder
• Créer et publier une page
• Le profil d'un site : en ligne, maintenance et accès
• Ajouter des blocs, des composants et le formulaire de contact