Personnalisation de l'en-tête et du pied de page

Personnalisation de l'en-tête et du pied de page

Les en-têtes et les pieds de page sont des éléments essentiels qui apparaissent sur chaque page de votre site web. Un en-tête bien conçu offre une navigation claire et une identité de marque, tandis qu'un pied de page réfléchi propose des liens importants, des coordonnées et des signaux de confiance. Ce guide couvre tout ce dont vous avez besoin pour créer des en-têtes et des pieds de page professionnels.

Comprendre les en-têtes

L'en-tête est la section supérieure de votre site web qui contient généralement :

• Logo : L'identifiant de votre marque, généralement lié à la page d'accueil
• Menu de navigation : Liens vers les pages et sections principales
• Appel à l'action : Boutons comme "Contactez-nous" ou "Commencer"
• Recherche : Fonctionnalité de recherche sur l'ensemble du site
• Sélecteur de langue : Pour les sites multilingues
• Compte utilisateur : Connexion/inscription ou menu du compte

Options de mise en page de l'en-tête

Personnaliser l'en-tête

Changer le logo

1. Cliquez sur le logo actuel dans l'en-tête
2. Cliquez sur Remplacer ou sur l'icône d'image
3. Téléversez votre logo (recommandé : SVG ou PNG transparent)
4. Ajustez la taille à l'aide des poignées d'angle
5. Définissez la destination du lien (généralement la page d'accueil)

Bonnes pratiques pour le logo

Configuration du menu de navigation

Structure du menu

Le menu de navigation est géré via l'éditeur de menu du site web :

1. Allez dans Site web → Site → Configurer le menu
2. Ou cliquez sur Éditer puis sur l'icône du menu dans l'en-tête
3. Glissez-déposez pour réorganiser les éléments
4. Imbriquez les éléments pour créer des sous-menus

Types d'éléments de menu

Créer des menus déroulants

1. Ajoutez un élément de menu parent (par ex., "Services")
2. Faites glisser les éléments enfants en dessous et indentez-les
3. Les éléments enfants apparaissent dans le menu déroulant au survol
4. Définissez l'alignement du menu déroulant (gauche, droite, centre)

Configuration du méga menu

Les méga menus affichent un contenu riche en colonnes :

1. Créez un élément de menu et définissez le type sur Méga menu
2. Cliquez sur Éditer le contenu du menu
3. Utilisez des blocs de construction pour créer des colonnes
4. Ajoutez des images, des icônes, des descriptions et des liens
5. Enregistrez le contenu du méga menu

Paramètres de comportement de l'en-tête

Définir le comportement de l'en-tête

1. Cliquez sur l'en-tête en mode Édition
2. Ouvrez le panneau Options sur la droite
3. Trouvez la section Comportement de l'en-tête
4. Choisissez votre comportement préféré
5. Ajustez les paramètres supplémentaires (déclencheur de défilement, animation)

Appel à l'action de l'en-tête

Ajoutez des boutons bien visibles pour générer des conversions :

Emplacement du bouton CTA

• Côté droit : Le plus courant, facile à trouver
• Après la navigation : Flux naturel après les éléments du menu
• Couleur contrastée : Se démarquer des liens de navigation

Options du bouton CTA

• Contactez-nous : Lien vers le formulaire de contact
• Commencer / S'inscrire : Parcours d'inscription
• Demander une démo : Demande commerciale
• Acheter maintenant : Boutique e-commerce
• Télécharger : Ressource gratuite ou application

Comprendre les pieds de page

Le pied de page apparaît en bas de chaque page et comprend généralement :

• Informations sur l'entreprise : À propos, mission, adresse
• Liens de navigation : Liens rapides vers les pages importantes
• Coordonnées : Téléphone, e-mail, adresse
• Réseaux sociaux : Liens vers les profils sociaux
• Liens juridiques : Politique de confidentialité, conditions, cookies
• Inscription à la newsletter : Formulaire d'abonnement par e-mail
• Signaux de confiance : Certifications, méthodes de paiement, récompenses

Options de mise en page du pied de page

Sections de contenu du pied de page

Section Entreprise

• Logo (généralement plus petit que l'en-tête)
• Brève description de l'entreprise (1-2 phrases)
• Icônes des réseaux sociaux

Section Liens rapides

Organisez les liens importants par catégorie :

• Entreprise : À propos, Équipe, Carrières, Presse
• Produits/Services : Offres principales
• Ressources : Blog, Centre d'aide, FAQ
• Support : Contact, Documentation

Section Contact

• Numéro de téléphone (cliquable sur mobile)
• Adresse e-mail (lien mailto:)
• Adresse physique
• Heures d'ouverture
• Lien vers le formulaire de contact

Section Newsletter

1. Ajoutez un bloc Formulaire au pied de page
2. Configurez-le pour l'abonnement par e-mail
3. Connectez-le à votre liste de diffusion
4. Ajoutez un texte d'avis de confidentialité

Section juridique

Généralement dans une ligne séparée en bas :

• Mention de copyright : © 2024 Nom de l'entreprise
• Lien vers la politique de confidentialité
• Lien vers les conditions d'utilisation
• Lien vers la politique de cookies
• Avis de conformité RGPD (le cas échéant)

Ajouter des liens vers les réseaux sociaux

Icônes sociales dans l'en-tête

1. Cliquez sur l'en-tête pendant l'édition
2. Ajoutez un bloc Liens vers les réseaux sociaux
3. Sélectionnez les plateformes à afficher
4. Entrez les URL de vos profils
5. Choisissez le style d'icône (couleur, monochrome, contour)

Options des icônes sociales

Optimisation mobile de l'en-tête/pied de page

Considérations pour l'en-tête mobile

• Menu hamburger : La navigation se réduit automatiquement
• Taille du logo : Une version plus petite peut être nécessaire pour le mobile
• Bouton CTA : Assurez-vous qu'il est visible et cliquable
• Comportement fixe : Tenez compte de l'impact de la hauteur sur le mobile

Considérations pour le pied de page mobile

• Les colonnes s'empilent verticalement sur mobile
• Gardez le contenu concis
• Rendez les liens téléphone/e-mail cliquables
• Assurez-vous que les boutons occupent toute la largeur pour faciliter le clic

Mise en forme de l'en-tête/pied de page

Options d'arrière-plan

• Couleur unie : Couleurs du thème ou personnalisées
• Dégradé : Transitions subtiles
• Image : Image d'arrière-plan avec superposition
• Transparent : Le contenu apparaît à travers

Bordures et ombres

• Bordure inférieure : Ligne subtile séparant du contenu
• Ombre portée : Ajoute de la profondeur en mode fixe
• Sans bordure : Apparence homogène

Espacement

• Marge interne : Espace interne autour du contenu
• Compact : Marge interne réduite pour un en-tête moins imposant
• Spacieux : Marge interne plus grande pour plus d'emphase

Bonnes pratiques