Maintenant que vos textes et visuels sont personnalisés lors de l’Étape 2, il est temps de structurer votre site avec un en-tête (header) et un pied de page (footer) professionnels.
Ces deux éléments apparaissent sur toutes les pages de votre site. Ils permettent à vos visiteurs de mieux naviguer, de vous contacter facilement et de renforcer l’image de votre marque. Un header et footer bien conçus inspirent confiance et facilitent la conversion.
Dans cette étape, vous allez apprendre à personnaliser ces zones stratégiques pour créer une expérience utilisateur cohérente et professionnelle.
Sommaire
Personnaliser l’en-tête de votre site (header)
L’en-tête est la première chose que vos visiteurs voient en arrivant sur votre site. Il doit être clair, professionnel et faciliter la navigation.
Accéder à l’éditeur d’en-tête
Dans l’éditeur de votre site, cliquez sur la zone d’en-tête en haut de la page. Cette zone devient alors éditable et vous pouvez modifier tous ses éléments.
L’en-tête typique contient : votre logo ou nom de marque, le menu de navigation principal, et parfois un bouton d’action (Contact, Devis, etc.).
Ajouter ou modifier votre logo
Le logo est l’élément d’identité visuelle le plus important de votre header :
- Cliquez sur la zone logo pour télécharger votre propre logo
- Utilisez un format PNG avec fond transparent pour un rendu professionnel
- Ajustez la taille pour qu’il soit visible sans dominer l’en-tête
- Vérifiez qu’il reste lisible sur mobile
Si vous n’avez pas de logo : Vous pouvez simplement afficher le nom de votre entreprise en texte avec une police distinctive.
Configurer le menu de navigation
Le menu de navigation est essentiel pour permettre à vos visiteurs d’accéder facilement à vos différentes pages :
Ajouter des liens au menu
- Cliquez sur « Ajouter un élément » dans le menu
- Sélectionnez la page à laquelle vous souhaitez lier
- Le lien apparaît automatiquement dans votre menu
Renommer les liens
- Cliquez sur un élément du menu pour modifier son texte
- Utilisez des noms courts et explicites (Accueil, Services, À propos, Contact)
- Évitez les noms trop longs qui encombrent le menu
Réorganiser les liens
- Glissez-déposez les éléments pour changer leur ordre
- Placez les pages les plus importantes en premier
- L’ordre typique : Accueil, Services/Produits, À propos, Blog, Contact
Supprimer des liens
- Cliquez sur un élément du menu
- Sélectionnez « Supprimer » ou cliquez sur l’icône de suppression
- Le lien disparaît du menu (la page existe toujours)
Ajouter un bouton d’appel à l’action
Un bouton CTA (Call To Action) bien visible dans votre header peut considérablement améliorer vos conversions :
- Ajoutez un bouton distinct des liens de menu classiques
- Utilisez un texte d’action : « Devis gratuit », « Nous contacter », « Essayer », « Réserver »
- Choisissez une couleur contrastante pour le faire ressortir
- Liez-le à votre page de contact ou formulaire
Vérifier la cohérence visuelle
Assurez-vous que l’en-tête est cohérent avec le reste du site :
- Couleurs : Respectez votre charte graphique
- Police : Utilisez la même typographie que le site
- Style : Moderne, classique ou minimaliste selon votre identité
- Espacement : Laissez respirer les éléments, évitez la surcharge
Tester la version mobile
Plus de 60% des visiteurs accèdent aux sites depuis leur smartphone. Vérifiez que votre header s’adapte correctement :
- Prévisualisez votre site en mode mobile
- Le menu doit se transformer en menu hamburger (trois barres)
- Le logo reste visible et proportionné
- Tous les liens sont accessibles
Personnaliser le pied de page (footer)
Le pied de page est la dernière chose que vos visiteurs voient après avoir parcouru votre contenu. C’est l’endroit idéal pour récapituler vos informations essentielles et offrir des options de contact supplémentaires.
Accéder à l’éditeur de footer
Faites défiler la page jusqu’en bas et cliquez sur la zone de pied de page. Cette zone devient éditable et vous pouvez personnaliser son contenu.
Ajouter vos informations de contact
Le footer est l’emplacement privilégié pour vos coordonnées complètes :
- Adresse physique : Si vous avez un local ou bureau
- Numéro de téléphone : Format international recommandé
- Email de contact : Adresse professionnelle avec votre domaine
- Horaires d’ouverture : Si pertinent pour votre activité
Intégrer vos réseaux sociaux
Ajoutez des liens vers vos profils sociaux pour développer votre communauté :
- Utilisez des icônes reconnaissables (Facebook, Instagram, LinkedIn, etc.)
- Assurez-vous que les liens s’ouvrent dans un nouvel onglet
- N’ajoutez que les réseaux que vous utilisez activement
- Vérifiez que les liens fonctionnent correctement
Ajouter les mentions légales obligatoires
Selon la législation marocaine et internationale, certaines pages légales sont obligatoires :
- Mentions légales : Informations sur l’éditeur du site
- Politique de confidentialité : Comment vous traitez les données personnelles
- Conditions générales : Si vous vendez en ligne
- Cookies : Politique d’utilisation des cookies
Vous pouvez créer ces pages à l’Étape 4 et les lier depuis le footer.
Ajouter une newsletter ou formulaire
Le footer est un excellent emplacement pour un formulaire d’inscription newsletter :
- Proposez un champ email simple
- Ajoutez un titre accrocheur : « Restez informé de nos actualités »
- Mentionnez la fréquence d’envoi (hebdomadaire, mensuelle)
- Rassurez sur la confidentialité des données
Structurer le footer en colonnes
Pour un footer professionnel, organisez les informations en colonnes thématiques :
- Colonne 1 : À propos, description courte, logo
- Colonne 2 : Navigation rapide (liens vers pages principales)
- Colonne 3 : Informations de contact
- Colonne 4 : Réseaux sociaux et newsletter
Cette organisation facilite la lecture et aide les visiteurs à trouver rapidement l’information recherchée.
Ajouter le copyright
En bas du footer, ajoutez une ligne de copyright :
- Format : « © 2026 [Nom de votre entreprise]. Tous droits réservés. »
- Vous pouvez ajouter « Site créé avec Nindohost » si vous le souhaitez
- Utilisez une police discrète et petite
Bonnes pratiques pour header et footer
Suivez ces recommandations pour optimiser l’efficacité de votre navigation.
Cohérence entre header et footer
Vos deux zones de navigation doivent être visuellement cohérentes :
- Utilisez la même palette de couleurs
- Respectez les mêmes espacements
- Conservez un style uniforme
- Les informations ne doivent pas se contredire
Simplicité et clarté
Évitez la surcharge d’informations :
- Menu header : Maximum 7 liens principaux
- Footer : Organisez en sections claires
- Hiérarchie : Mettez en avant les éléments importants
- Espaces blancs : Laissez respirer les éléments
Optimisation pour la conversion
Votre navigation doit guider vers vos objectifs :
- Bouton CTA visible dans le header
- Liens vers pages de conversion (contact, devis, achat)
- Réseaux sociaux pour développer votre communauté
- Newsletter pour fidéliser vos visiteurs
Accessibilité et responsive
Assurez-vous que votre navigation fonctionne pour tous :
- Mobile-friendly : Menu hamburger fonctionnel sur smartphone
- Liens descriptifs : Textes clairs, évitez « cliquez ici »
- Contraste : Texte lisible sur le fond
- Taille des clics : Boutons assez grands pour être cliqués facilement
Astuce importante
Votre en-tête et pied de page sont les premières et dernières choses que vos visiteurs voient. Profitez-en pour inspirer confiance : ajoutez un slogan percutant dans le header, un bouton « Contact » visible ou des témoignages clients dans le footer.
Ces zones stratégiques doivent renforcer votre crédibilité et faciliter l’action que vous souhaitez que vos visiteurs entreprennent.
Prochaine étape
Félicitations ! Votre site a maintenant une structure de navigation cohérente et professionnelle.
Passez à l’Étape 4 pour apprendre à ajouter des pages supplémentaires à votre site ou à supprimer celles dont vous n’avez pas besoin :
→ Étape 4 : Ajouter des pages à votre site
Vue d’ensemble des 7 étapes
- Créer votre site avec l’IA
- Modifier les textes et images
- Structurer la navigation (header/footer) (vous êtes ici)
- Ajouter des pages à votre site
- Lancer une boutique en ligne (optionnel)
- Optimiser les réglages de votre site
- Publier votre site en ligne
Pour en savoir plus :
- Guide complet de création de site web
- Créer votre site avec WordPress et l’IA
- Découvrir le Site Builder IA Nindohost
- Tous nos guides hébergement et création web
Guide mis à jour : Février 2026