Comment concevoir un pied de page (tutoriel 2025)

Le pied de page de votre site Web est plus qu'un simple endroit pour les informations sur le droit d'auteur; Il peut s'agir d'un outil précieux pour augmenter la crédibilité de la marque, améliorer l'expérience utilisateur et même conduire des conversions. Dans cet article, nous expliquerons pourquoi vous avez besoin d'un pied de page bien conçu sur votre site, présenter quelques meilleures pratiques et vous montrer comment concevoir un pied de page en utilisant le thème Divi WordPress.

Plongeons-nous.

Qu'est-ce qu'un pied de page de site Web?

Pour ceux qui ne le savent pas, un pied de page de site Web est la section qui apparaît en tout en bas de chaque page de votre site. C'est un domaine important qui va souvent négligé mais qui remplit plusieurs fonctions importantes. Les pieds de pied incluent généralement des informations essentielles, comme les coordonnées, les droits d'auteur et les informations juridiques et les liens sur les réseaux sociaux. Bien que apparemment petit, le pied de page joue un rôle important dans l'amélioration de l'expérience utilisateur, l'amélioration de la crédibilité de votre marque et même l'optimisation de votre moteur de recherche (SEO).

Pourquoi un pied de page est-il important?

Les pieds de page jouent un rôle essentiel dans le succès de tout site Web. Ils servent de centre pour des informations importantes et contribuent à l'expérience utilisateur. Il y a plusieurs raisons pour lesquelles vous devriez avoir un pied de page efficace, notamment:

• Renforcement de la marque: les pieds de page affichent constamment votre logo, vos couleurs et vos polices, renforçant l'identité de la marque sur toutes les pages.
• Informations de contact: Les coordonnées facilement accessibles du pied de page permettent aux visiteurs de vous contacter rapidement et facilement.
• Informations juridiques et de confidentialité: les pieds de page fournissent un emplacement central pour les informations juridiques et de confidentialité cruciales, assurant la transparence et la conformité.
• Amélioration de l'expérience utilisateur: les pieds de page bien organisés améliorent la navigation des utilisateurs en offrant un accès facile aux pages importantes et aux sites, améliorant la convivialité globale.
• Avantages SEO: les pieds de page bien conçus peuvent inclure des liens précieux avec d'autres sites Web (backlinks) et les profils de médias sociaux, améliorant le placement dans les pages de classement des moteurs de recherche (SERP) et SEO.

Éléments de pied de page essentiels

Un pied de page bien conçu est plus qu'une simple note de bas de page. Il s'agit d'un espace précieux qui fournit des informations essentielles, améliore l'expérience utilisateur et stimule la crédibilité de votre marque.

1. Contacteurs

Votre pied de page devrait être un centre pratique pour les visiteurs pour se connecter avec vous. Incluez votre numéro de téléphone pour encourager les visiteurs à appeler, votre adresse e-mail ou un formulaire de renseignements, et votre adresse physique si vous en avez une. N'oubliez pas d'ajouter des liens vers vos profils de médias sociaux en utilisant des icônes attrayantes et visibles. Cela encourage les visiteurs à se connecter avec vous de diverses manières.

2. Copyright et informations juridiques

La transparence est essentielle, donc votre pied de page devrait clairement décrire vos informations juridiques et de confidentialité. Incluez un avis de droit d'auteur pour protéger votre contenu d'origine. Fournissez des liens faciles à trouver vers votre politique de confidentialité et vos pages de services. Cela renforce la confiance avec vos visiteurs et garantit qu'ils comprennent comment vous gérez leurs données. Le cas échéant, incluez une politique de non-responsabilité ou de cookie pour répondre aux préoccupations ou limitations spécifiques.

3. Navigation

Un autre composant crucial lors de la conception d'un pied de page pour votre site Web est l'inclusion d'un menu. La navigation permet aux utilisateurs de naviguer facilement sur votre site Web et aide les visiteurs à trouver rapidement les informations qu'ils souhaitent. N'oubliez pas d'inclure des liens vers des pages importantes sur votre site, y compris votre blog (si vous prévoyez d'en avoir un). Cela garantit un accès facile aux domaines clés de votre site Web.

4. Appel à l'action (CTA)

Enfin, pensez à ajouter un CTA à votre pied de page. Encouragez-les à vous abonner à votre newsletter pour recevoir des mises à jour et des offres exclusives. Vous pouvez également utiliser cet espace pour promouvoir un produit ou un service spécifique. Alternativement, envisagez d'offrir une précieuse ressource gratuite comme un ebook ou un webinaire pour inciter les visiteurs à passer à l'étape suivante.

Principes de conception pour les pieds de page efficaces

Lorsque vous avez décidé de concevoir un pied de page pour votre site Web, vous devez penser au-delà de la simple énumération des informations. Vous devez avoir un plus grand objectif à l'esprit et intégrer certains principes de conception clés pour le rendre efficace.

• Gardez-le concis: évitez de laisser tomber une grande quantité de texte dans votre pied de page, car cela peut submerger vos visiteurs. Prioriser la clarté et éviter l'encombrement.
• Concentrez-vous sur la lisibilité: choisissez des polices claires et faciles à lire. Utilisez un espacement suffisant entre les éléments et assurez-vous que les tailles de police conviennent à une lecture facile.
• Maintenir la cohérence de la marque: votre pied de page doit avoir le même apparence que le reste de votre site Web. Utilisez les couleurs, la typographie et les logos de manière cohérente pour renforcer votre identité de marque.
• Rendez-le réactif: les principes de conception Web dictent que les sites Web doivent être dimensionnés de manière appropriée pour toutes les tailles d'écran - y compris le pied de page de votre site.
• L'accessibilité est importante: assurez-vous que votre pied de page est conçu pour tous les utilisateurs, y compris ceux qui ont handicapé. Utilisez des structures d'en-tête appropriées, des balises ALT pour les images et un contraste de couleur suffisant.

Comment concevoir un pied de page pour votre site Web

Il existe de nombreuses façons de concevoir un pied de page pour votre site Web. Les outils de conception Web comme Figma, Framer ou Sketch sont idéaux pour repasser un prototype pour vos conceptions, ou vous pouvez plonger avec un outil comme Divi et concevoir votre pied de page en temps réel. Pour ce tutoriel, nous utiliserons Divi pour vous montrer à quel point il est facile de concevoir un pied de page avec un logo, des icônes de médias sociaux, une opt-in par e-mail et des liens importants - le tout en quelques minutes.

Qu'est-ce que Divi?

Divi est l'un des thèmes WordPress les plus puissants du marché. Avec un frontal, un constructeur de pages sans code et la possibilité de concevoir tous les aspects de votre site Web, Divi a la flexibilité et la conception de côtelettes pour tout faire. Avec son constructeur visuel intuitif, vous pouvez facilement créer des sites Web étonnants et uniques, y compris les pieds de page, sans avoir besoin d'écrire de code.

Divi comprend également une grande bibliothèque de dispositions de pré-avant, y compris une grande variété de conceptions de pied de page. Ces dispositions préfabriquées peuvent servir de point de départ pour votre conception, offrant l'inspiration et vous éviter de gagner du temps. En plus des dispositions, Divi propose également des sites rapides, ce qui vous donne un moyen rapide et facile de générer un site Web complet à partir d'une collection de sites de démarrage. Le processus consiste à choisir un site de démarrage et à fournir à Divi des informations sur votre entreprise, y compris votre logo, vos couleurs de marque et vos polices.

Chaque site Web Les sites rapides génèrent sont livrés avec toutes les pages Web de base, les modèles de générateur de thèmes, les préréglages de modules de conception et les styles globaux, en gardant la conception cohérente sur l'ensemble du site Web. En plus des sites de démarrage, vous pouvez opter pour un site Web généré par l'AI-gracieuseté de Divi AI. Avec Divi AI, votre site est livré avec tout ce que le site de démarrage fait mais vous permet d'utiliser une invite de texte pour écrire une description du site que vous souhaitez créer. Vous pouvez également choisir votre marque ou permettre à Divi AI de le générer.

Se faire divi

Comment concevoir un pied de page à partir de zéro

Bien que vous puissiez utiliser des sites Divi AI ou rapides pour générer un pied de page efficace, vous pouvez en concevoir un à partir de zéro à partir des constructeurs visuels et de thème.

Avant de commencer à concevoir un pied de page, c'est une bonne idée d'avoir un modèle de directives de marque comme celui illustré ci-dessous. Ce modèle vous permet de commencer par les directives de logo, les couleurs de la marque et les polices pour vous aider lorsque vous concevez un pied de page. À l'avenir, nous utiliserons ce modèle comme guide.

Connectez-vous à votre site Web WordPress et accédez à Divi> Builder de thème .

Ensuite, cliquez sur Ajouter un pied de page mondial, puis créez le pied de page mondial pour lancer le constructeur de thème.

Lorsque le constructeur de thème sera lancé, vous serez accueilli avec une ardoise vierge. Commencez par cliquer sur l' icône verte pour ajouter une ligne au pied de page.

Ensuite, sélectionnez la disposition à trois colonnes dans les options disponibles.

Avant d'ajouter du contenu, nous devrons ajouter une couleur d'arrière-plan à notre section. Pour ce faire, cliquez sur l' icône de vitesse (paramètres) en haut à gauche de la section.

Cliquez sur + Ajouter une couleur d'arrière-plan pour sélectionner une couleur d'arrière-plan pour notre section.

Utilisez # 406171 comme couleur. Pour enregistrer la couleur comme une icône +, cliquez sur l' icône + pour l'ajouter. Une fois que vous avez ajouté une couleur d'arrière-plan, cliquez sur le bouton vert pour l'enregistrer.

Ajouter un logo

Avec notre structure de ligne en place, il est temps d'ajouter du contenu. Commencez par ajouter le module d'image à la première colonne de la ligne.

Sélectionnez + Ajouter une image pour télécharger votre logo avec les paramètres du module d'image actifs.

Une fois votre logo téléchargé, nous devrons apporter quelques modifications, alors cliquez sur l' onglet Conception pour commencer.

Dans le menu déroulant d'alignement, définissez l' alignement de l'image à gauche sur le bureau et centre sur la tablette et le mobile. Ensuite, cliquez sur l' onglet de dimensionnement et définissez la largeur à 50% pour le bureau et la tablette et 40% pour le mobile.

Une fois terminé, cliquez sur le bouton vert pour enregistrer le module.

Ajouter les icônes des médias sociaux

Cliquez sur l' icône Gray + sous le logo pour ajouter un nouveau module et sélectionnez le module Suivre des médias sociaux .

Avec les paramètres du module actifs, cliquez sur le bouton + Ajouter un nouveau réseau social pour ajouter les plateformes de médias sociaux choisies. Pour ce tutoriel, nous ajouterons Facebook, X et Instagram.

Pour ajouter un arrière-plan à chaque plate-forme de médias sociaux, cliquez sur l' icône du matériel pour la modifier.

Utilisez # EE8B22 pour la couleur d'arrière-plan. Répétez ces étapes pour modifier les icônes pour X et Instagram.

Ensuite, passez à l'onglet Design et ajoutez les paramètres suivants:

• Alignement du module: gauche (bureau), centre (tables et mobile)
• Couleur de l'icône: #ffffff
• Utilisez la taille de l'icône personnalisée: oui
• Taille de l'icône personnalisée: 20px
• Corners arrondis de bordure: 100px

Une fois terminé, vos icônes devraient ressembler à l'image ci-dessous.

Ajouter un module d'en-tête

Ensuite, nous allons ajouter un module d'en-tête à notre deuxième colonne. Cliquez sur l'icône Gray + et sélectionnez le module d'en-tête pour l'ajouter. Écrivez nos services dans le champ d'en-tête lorsque la boîte de dialogue apparaît.

Cliquez sur l'onglet Conception et ajoutez les paramètres suivants:

• Niveau de cap: H3
• Police de tête: gars le plus chanceux
• Alignement du texte de la tête: centre
• Couleur du texte de tête: #ffffff
• Taille du texte de la tête: 24px
• Espacement des lettres de tête: 1px

Une fois tous les paramètres en place, votre cap doit ressembler à l'image ci-dessous.

Ajouter un module de texte

Ensuite, nous allons ajouter un module de texte sous le module d'en-tête pour présenter des liens importants dans notre deuxième colonne. Divi ajoute du texte d'espace réservé dans le module par défaut, nous devons donc supprimer cela avant d'ajouter un nouveau texte.

Bien que nous puissions utiliser un module de menu ici, il est plus logique d'utiliser un module de texte et d'ajouter des liens à chaque ligne de texte. Étant donné que nous créons un pied de page pour un site de nourriture pour animaux de compagnie, nous voulons inclure des liens importants vers des pages intérieures qui sont les plus bénéfiques pour l'utilisateur, comme les aliments et les friandises pour animaux de compagnie, les jouets, les laisses, etc. chaque lien.

Avec vos liens en place, cliquez sur l'onglet Conception et ajoutez les paramètres suivants dans le menu du lien texte :

• Police texte: inter
• Alignement du texte du lien: gauche (bureau), centre (tablette et mobile)
• Couleur du texte du lien: # EE8B22
• Taille du texte du lien: 16px
• Hauteur de la ligne de liaison: 1.3EM

Ajouter un module d'opt-in par e-mail

Dans notre troisième colonne, nous ajouterons un module d'opt-in par e-mail pour capturer des données utilisateur. L'idée est d'amener les clients potentiels à s'inscrire à une newsletter pour recevoir des mises à jour sur les nouveaux produits et services.

Dans l'onglet Contenu, ajoutez les paramètres suivants:

• Titre: Inscrivez-vous pour de bonnes affaires!
• Bouton: Inscrivez-vous maintenant!
• Corps: Rejoignez notre pack! Inscrivez-vous à notre newsletter et recevez des remises exclusives, un accès précoce aux nouveaux produits et des mises à jour sur les ventes à venir. De plus, obtenez une offre de bienvenue spéciale juste pour vous abonner!
• Compte de messagerie: Choisissez parmi l'un des 20+ fournisseurs de messagerie, y compris MailChimp, ActiveCampaign, HubSpot, etc. Si vous avez besoin d'aide pour configurer votre opt-in, consultez ce message.
• Champs: basculer le champ de nom unique à OUI
• Action de réussite: choisissez d'afficher un message ou de rediriger vers une autre URL.
• Contexte: transparent

Dans l'onglet Design, ajoutez les paramètres de mise en page suivants:

• Disposition: corps en haut, forme en bas
• Nom FullWidth: Togle à OUI
• Envoyez un courriel à FullWidth: Togle à OUI

Paramètres de champ:

• Couleur d'arrière-plan des champs: #ffffff
• Couleur du texte du champ: # 406171
• Couleur d'arrière-plan du champ: # EE8B22
• Couleur de texte de mise au point sur le terrain: #ffffff
• Fields Police: inter
• Champs arrondi coins: 5px
• Fields Largeur de la bordure: 2px
• Fields Border Couleur: # EE8B22

Paramètres du texte de titre:

• Police de titre: gars le plus chanceux
• Alignement du texte du titre: gauche
• Couleur du texte du titre: #ffffff
• Titre Taille du texte: 24px
• Espacement des lettres de titre: 1px

Paramètres du texte du corps:

• Police corporelle: inter
• Alignement du texte du corps: à gauche
• Couleur du texte du corps: #ffffff
• Hauteur de la ligne du corps: 1.3EM

Paramètres de bouton:

• Utilisez des styles personnalisés pour le bouton: Basculez vers OUI
• Taille du texte du bouton: 16px
• Couleur du texte du bouton: #ffffff
• Fond de bouton: # EE8B22
• Largeur de la bordure du bouton: 0px
• Radius de bordure boutonné: 5px
• Police bouton: inter
• Poids de la police boutonné: semi-mire
• Afficher l'icône du bouton: non
• Rembourrage de bouton: 12px (haut et en bas)

Ajouter une nouvelle section

Enfin, nous devrons ajouter une nouvelle section pour les informations sur le droit d'auteur et notre menu de services à notre pied de page. Cliquez sur l' icône bleue dans la section existante et choisissez une section régulière .

Choisissez une ligne de colonne 1/3 + / 2/3 .

Définissez la couleur d'arrière-plan de la section sur # 38A2DB et l'espacement (dans l'onglet Design) en haut et en bas 10px , puis enregistrez les modifications.

Ajoutez un module de texte à la colonne de gauche. Au lieu d'ajouter du texte dans le corps, cliquez sur l' icône de contenu dynamique . Nous allons ajouter nos informations sur le droit d'auteur ici afin que elles se mettent à jour chaque année sans que vous les modifiez manuellement.

Lorsque la boîte de dialogue apparaît, sélectionnez la date actuelle dans la liste des options.

Lorsque la boîte de dialogue du texte apparaît, entrez les paramètres suivants:

• Avant: Symbole de copyright (option + G sur votre clavier)
• Après: le nom de votre entreprise. Assurez-vous de laisser un espace avant d'entrer du texte!
• Format de date: Custom
• Format de date personnalisé: y

Enregistrez les modifications avant de vous diriger vers l'onglet Design pour styliser votre texte. Dans l'onglet Design, laissez tous les paramètres à leurs paramètres par défaut, sauf pour la fabrication du texte #ffffff et la modification de la famille des polices en inter .

Ajouter un module de menu

Le dernier module à ajouter à notre pied de page est un module de menu. Nous l'ajouterons à la bonne colonne de notre nouvelle section. Vous devez créer un menu à l'avance en naviguant vers l'apparence> Menus. Ce menu de pied de page doit contenir des informations juridiques sur votre site, telles qu'une politique de politique de confidentialité ou des conditions générales.

Avec les paramètres du module de menu actifs, sélectionnez les options suivantes:

• Menu: sélectionnez votre menu d'informations juridiques
• Contexte: transparent

Dans les paramètres de conception, choisissez les paramètres suivants:

Mise en page:

• Style: laissé aligné

Texte du menu:

• Couleur du lien actif: #ffffff
• Police de menu: inter
• Couleur du texte du menu: #ffffff
• Alignement du texte: Droite

Paramètres du menu déroulant:

Il n'y a que quelques choses à changer ici car votre menu n'a pas de liens sous-menu. Ces paramètres s'appliqueront uniquement à la version mobile de votre menu lorsque les gens consultent votre site à partir d'un smartphone ou d'une tablette:

• Couleur d'arrière-plan du menu mobile: # 38A2DB
• Couleur de texte du menu mobile: #ffffff

Enfin, modifiez la couleur de l'icône du menu Hamburger sous l'onglet Icônes en #ffffff .

Ajout des touches finales

Maintenant que notre conception de pied de page est terminée, il y a quelques correctifs errants que nous devrons faire. Comme vous le remarquerez, le titre du module d'opt-in par e-mail ne s'aligne pas tout à fait avec le menu de service qui se dirige dans la colonne voisine. En effet, Divi ajoute un rembourrage par défaut. Pour résoudre ce problème, ouvrez les paramètres du module d'option E-mail et accédez à l'onglet Conception. Sous le menu déroulant d'espacement, ajoutez 0px un rembourrage en haut et en bas et en gauche et à droite pour supprimer l'espacement maladroit.

Enfin, bien que nos informations sur le droit d'auteur et notre menu juridique soient alignés sur le bureau, ils ne s'alignent pas tout à fait sur des écrans plus petits.

Pour résoudre ce problème, cliquez sur l' onglet avancé de la ligne. Sous CSS personnalisé, choisissez l'élément principal et accédez aux paramètres réactifs. Dans le champ CSS, ajoutez ce qui suit pour la tablette:

display:flex;

Une fois que vous avez terminé les modifications, cliquez sur le bouton Green Enregistrer pour enregistrer votre pied de page.

Cliquez sur le X en haut à droite du constructeur de thème pour quitter.

Enfin, cliquez sur le bouton Enregistrer les modifications pour rendre votre pied de page en direct.

Comme vous pouvez le voir, Divi facilite la conception d'un pied de page de site Web en quelques minutes.

Élevez le pied de page de votre site Web avec Divi

Un pied de page de site Web bien conçu est plus qu'une simple réflexion. C'est une partie importante de tout site Web réussi, offrant un bien immobilier précieux pour des informations importantes, un renforcement de la marque et l'expérience utilisateur globale. En incorporant des principes de conception clés comme la lisibilité, la cohérence de la marque et le contenu riche en référencement, vous pouvez concevoir un pied de page qui sert efficacement vos visiteurs et stimule votre présence en ligne. Concevoir un pied de page beau et fonctionnel avec des outils comme Divi est incroyablement facile. En suivant ces étapes, vous pouvez créer un pied de page qui répond à vos besoins et laisse une impression durable sur votre public.

Nous avons créé une table pratique qui présente toutes les fonctionnalités du thème Divi pour vous aider à comprendre sa véritable puissance.