Aller au contenu principal

Fiche Pratiques | L’entête et le pied de page

L’entête d’un site web est la section située en haut de chaque page, contenant généralement le logo, le menu de navigation et parfois des informations de contact.

 

Le pied de page, quant à lui, est la section en bas de chaque page et contient généralement des liens de navigation supplémentaires, des coordonnées, des mentions légales et des liens vers les réseaux sociaux.

 

Ensemble, l’entête et le pied de page fournissent une structure de navigation cohérente et facilitent l’accès aux informations essentielles sur ton site.

Importance du concept
0%
Facilité
0%
Compatibilité

Configuration de l'entête

Le plugin
Elementor Header & Footer Builder

Plugin WordPress qui permet de créer et de personnaliser facilement l’entête (header) et le pied de page (footer) de votre site web à l’aide de l’interface conviviale d’Elementor. Ce plugin offre une alternative flexible aux thèmes WordPress traditionnels

Création d'un nouvel entête

Type de modèle

La liste déroulante Type de modèle permet de choisir si votre élément sera un entête , un pied de page , un élément avant le pied de page ou un bloc personnalisé.

Afficher sur

La liste déroulante Afficher sur permet de choisir les contenus sur lesquels votre élément s’affichera (toutes les pages, tout le site, page d’accueil etc …)

Roles utilisateurs

La liste déroulante Rôles utilisateurs permet de définir si votre élément sera visible par tous , seulement selon certains rôles ou seulement si connecté(es)

Elementor canevas

La case à cocher indispensable si l’on travaille en Elementor canevas (“page blanche”). Si tu ne la coches pas ton élément sera supprimé par Elementor à l’affichage

Mettre en place un entête

Apparence > Elementor Header & Footer
Voir la liste des entêtes
Liste tout vos éléments existants
Interface de création
Les réglages pour un entête
Création d'un entete
Les réglages pour un pied de page
Création d'un pied de page

Personnalisation avancée

Beaucoup d’effets permettent d’ajouter du mouvement a ton site, mais beaucoup de fonctionnalités d’Elementor a ce sujet sont payantes. Toutefois il existe plusieurs plugins gratuits qui permettent d’ajouter certaines fonctionnalités :

  1. Animations : Ajoutez des animations subtiles comme des effets de fondu, de défilement, d’apparition ou de disparition.

  2. Dégradés : Intégrez des dégradés de couleurs pour créer des arrière-plans .

  3. Effets de survol : Personnalisez les effets de survol des éléments de l’entête et du pied de page, tels que les changements de couleur, les agrandissements ou les transitions fluides, pour améliorer l’expérience utilisateur et encourager l’interaction.

  4. Effets de parallaxe : Utilisez des effets de parallaxe pour créer une sensation de profondeur et de mouvement, en superposant des éléments à différents niveaux de défilement dans l’entête ou le pied de page.

  5. Effets d’ombre et de lumière : Appliquez des effets d’ombre et de lumière pour donner de la profondeur et de la dimension aux éléments de l’entête et du pied de page, créant ainsi un aspect visuel plus dynamique et attrayant.

  6. Effets de transformation : Utilisez des effets de transformation tels que l’échelle, la rotation ou la déformation pour animer les éléments de l’entête et du pied de page.

Quelques exemples d’intégration de widgets et d’éléments dynamiques  :

  1. Widget de barre de recherche : Intégrez un widget de recherche dans l’entête pour permettre aux utilisateurs de rechercher facilement du contenu sur votre site sans avoir à quitter la page actuelle.

  2. Bouton de contact rapide : Intégrez un bouton de contact pour permettre aux utilisateurs d’accéder rapidement à tes coordonnées ou à un formulaire de contact.

  3. Widget de newsletter : Ajoutez un formulaire d’inscription à la newsletter dans le pied de page pour encourager les visiteurs à s’abonner à tes mises à jour et à rester informés.

  4. Indicateur de statut de commande : Affichez un indicateur de statut de commande dans l’entête pour les sites de commerce électronique, permettant aux utilisateurs de suivre en temps réel l’état de leur commande.

  5. Compte à rebours pour une promotion spéciale : Intégres un compte à rebours dans le pied de page pour annoncer une promotion spéciale à venir.

  6. Avis clients en temps réel : Affichez des avis clients récents et dynamiques dans le pied de page pour renforcer la crédibilité de ton site.

Questions fréquentes

Tu trouveras ici quelques réponses aux questions les plus fréquentes et les plus concrètes sur le sujet

Est-ce que je peux avoir plusieurs menus dans un seul entête

Oui, tu peux  avoir plusieurs menus de navigation dans l’entête. Avec Elementor (ou des constructeurs et thèmes similaires), tu peux créer et personnaliser plusieurs zones de menu pour répondre à tes besoins de navigation spécifiques.

Comment créer un autre élément (entête ou pied de page) si j'en ai déjà un

Si tu as déjà un entête ou un pied de page de créé , tu peux simplement te rendre dans les options du plugin (Apparence > Elementor Header & Footer) et cliquer sur “Ajouter nouveau” .

Notes simplement que cela peut faire un effet bizarre si tu as plusieurs entête en même temps et que l’un peut “écraser” l’autre et ne pas s’afficher

Est ce que je peux afficher un entête partout sauf sur un contenu

Oui, il est possible de définir un en-tête ou un pied de page pour qu’ils ne s’affichent que sur les contenus souhaités (c’est le rôle de la liste ‘Afficher sur’).

On peut en plus mettre des exceptions pour plus de finesse dans les réglages (partout sauf sur la page d’accueil ou uniquement sur la page Contact, par exemple).

Bienvenue sur la plateforme de cours numérique Ekolearn

Envie d’une escapade nocturne  ?

Tapes ta recherche puis appuie sur Entrée (↵)

Pas d'autocomplétion, mais pourquoi ?

L’autocomplétion dans un formulaire de recherche consiste à proposer des mots clés, des résultats, à chaque lettre écrite dans le champ. 

Oui cela est pratique, mais en terme de consommation de ressources c’est très gourmand ! Aussi, dans un soucis d’écoconception, ce formulaire de recherche ne régira pas à vos interactions en temps réel, mais il fonctionne quand même !

Bonne pratique n°4 du guide de l’éco-conception web

ATTENTION A TA SANTÉ

Tu ne semble pas avoir bougé depuis
MIN
0

N’hésites pas à lever les yeux , à regarder un peu “au loin” pour les soulager.

Également, n’hésites pas à t’étirer le cou et le dos en suivant quelques gestes simples.