10 exemples de footer pour vous inspirer

10 exemples de footer pour vous inspirer

Les internautes ont tendance à scroller pour parvenir à l'information qu'ils recherchent. Avec un site Web parfaitement organisé, vous les aiderez à naviguer plus facilement. Cela peut se faire grâce à la création d’un footer.

Vous n’avez pas encore trouvé d’idée de footer pour votre site web ? Désormais, sachez qu’il existe de différentes manières d’avoir un pied de page qui serve de référence pour les internautes. Ils pourront ainsi accéder à certaines informations en bas de l’ensemble des pages et articles de votre site. Le but est de mettre en page efficacement ses données avec une petite touche d’originalité pour attirer l’attention des visiteurs. D’où l’importance d’un bon choix de footer.

Pour une page réactive, je vous conseille de choisir un footer stylé. Afin de vous faciliter la tâche, je vous ai sélectionné 10 exemples de footer à titre de source d’inspiration. Pour le reste, la balle est dans votre camp ! Avant d’entrer dans le vif du sujet, je vais vous partager la nécessité d’avoir un footer bien présenté dans un site.

Prêtez attention à votre footer !

Vous vous demandez certainement s’il est capital de soigner son footer. Exactement, si vous souhaitez booster votre site, ne négligez surtout pas la mise en page de votre pied de page. Cette fonction permet d’améliorer l'expérience utilisateur. Pour ce dernier, elle représente un gain de temps. La plupart des visiteurs recherchent des renseignements ou bien des liens utiles au bas d'un site Web. Ainsi si votre footer est mal présenté, les internautes risquent de quitter votre site, car ils espèrent d’accéder rapidement à une information de contact qui se trouve généralement en bas. Quand ils ne sont pas satisfaits des données de votre site, ils retournent vers Google pour une autre recherche ou se rendent à un autre site.

Avec l’outil adéquat, vous obtiendrez un footer enrichissant, captivant et original. Vous pouvez donc travailler avec HTML, CSS ou Bootstrap. Si le visiteur arrive en bas de la page, c’est qu’il a besoin de plus d’information. Votre objectif est de le garder dans votre site ou bien de l’inciter à réagir. C’est pourquoi, en plus de l’esthétique, votre footer doit être structuré. Proposez les menus qui permettent de maintenir la communication avec vos visiteurs pour réussir la conception de votre pied de page. Ces exemples de pied de page vont vous aider à mener à bien votre projet.

1. Un footer Bootstrap avec menus et formulaire d’inscription

Le Footer avec menus et formulaire attire beaucoup l’attention des internautes, car ils pourront y trouver des éléments nouveaux qui correspondent à leur recherche. Ainsi, en cliquant sur un bouton, l’utilisateur peut obtenir rapidement une réponse à ses questions. Lorsqu’il remplit le formulaire, vous aurez son contact. Vous pourrez facilement communiquer avec lui, ce qui engendrera plus de profit pour votre site.

2. Un footer basic

Le Footer basic est simple, mais sophistiqué. Il affiche les bases liées au site comme l’accueil, les services, les boutons de réseaux sociaux et le copyright. Dans ce modèle, les menus sont placés au centre avec un fond de couleur blanche. Vous pouvez aisément personnaliser ce pied de page suivant vos préférences. Ce type de pied de page très classique est fréquemment utilisé, car il offre une facilité de lecture pour les visiteurs. C’est une excellente alternative pour éviter de surcharger votre site.

3. Un footer avec colonnes

Un Footer avec colonnes présente une mise en page plus classique comparée à d’autres types de pied de page. Il offre un large espace pour tous vos liens. Vous pouvez choisir de mettre sur votre site un pied de page avec trois colonnes. Vous y mentionnez dessus les informations que vous considérez importantes. Il est le plus apprécié à cause de la clarté de sa présentation. C’est une méthode efficace pour bien classer vos données, les utilisateurs n’auront pas de difficultés à se situer. Mais n’oubliez pas d’équilibrer les colonnes et de choisir minutieusement les menus à afficher pour chaque colonne. Il faut que les informations mentionnées soient celles dont les internautes souhaitent découvrir.

4. Un footer dark

Dans cet exemple, vous avez un pied de page de site web avec un thème foncé. Il s’agit également d’un footer classique. Il attire les utilisateurs puisque les mots seront d’une couleur plus claire. En effet, il comprend tous les menus qu’on peut trouver sur un footer comme la description de l’entreprise, les services offerts, et les onglets qui apportent plus d’informations sur le site. Ces menus sont disposés en colonne pour une meilleure visibilité. Les icônes de médias sociaux et du copyright se placent en bas.

5. Un footer avec des liens internes et externes

Mettre des liens externes permet de mieux référencer votre site. Pour ce type de footer, vous aurez le même style que le footer avec colonne. Mais, vous ajoutez une autre colonne qui affiche des liens permettant à l’utilisateur de se rendre à une page donnée. Il pourrait s’agir d’un ou plusieurs liens. Choisissez d’y inclure des liens utiles qui se rapportent à votre page, des liens qui augmenteront votre valeur ajoutée, des liens ajustables en fonction de vos objectifs. Mettez par exemple des liens qui mènent vers votre compte sur les réseaux sociaux. De cette façon, l’utilisateur pourra vous suivre juste en un seul clic. Vous pouvez créer ce pied de page en utilisant Bootstrap 4. Vous obtiendrez ainsi un footer bien stylé qui attire de nombreux visiteurs.

6. Un footer design

Un footer, pour être attirant, ne doit pas paraitre comme un élément rajouté de l’ensemble du site. Assurez-vous qu’il y ait un design extraordinaire. Cela peut se faire facilement à l’aide de Bootstrap 4. Le footer design vous permet d’avoir un pied de page clair, mais plus original. Il regroupe toutes les informations concernant le site avec un style en colonne. En effet, il affiche les contacts et les liens que les utilisateurs devront connaitre. En plus, il permet aux visiteurs de voir un petit résumé de la présentation de la page. En bas, vous pouvez trouver les onglets pour accéder aux réseaux sociaux.

7. Un footer avec animation

Le footer avec animation attire beaucoup l’attention grâce à l’effet qu’il affiche. C’est une façon de se démarquer. Des images qui bougent ou une simple animation, ce sera toujours un véritable succès. Ce modèle regroupe tous les éléments d’un pied de page, mais avec une ligne animée qui attire l’attention. Cette animation permet d’inciter les visiteurs à cliquer sur vos liens et à souscrire sur votre page.

8. Un footer élégant

Ce style est plus original. Les lettres sont présentées en gris accompagnés d’un fond plus sombre. Ce footer met en valeur les renseignements concernant le propriétaire du site. Ses contacts et son adresse sont affichés sur ce pied de page. Il a également un aspect classique avec une présentation en colonne et une partie consacrée aux réseaux sociaux. Dans ce footer, vous pouvez apercevoir un champ dédié aux recherches. Il sera ainsi plus facile pour l’utilisateur de se rendre une option particulière.

9. Un footer avec plusieurs menus

Ce footer est très enrichissant puisqu’il contient de nombreux menus pouvant répondre aux besoins des visiteurs du site. Les différentes options sont placées en colonne et superposées. Vous pouvez proposer sur ce pied de page les menus : à propos, les liens de la page, les nouveaux articles de blogs et les contacts. La présentation est classique avec un fond sombre qui met en valeur chaque onglet.

10. Un footer avec navigation

L’affichage d’un pied de page avec menu de navigation est plus moderne. Votre footer aura plusieurs niveaux de lecture. Passer alors d'onglet en onglet pour explorer les différents renseignements que le site vous offre. Les boutons concernant les contacts se mettent au milieu sur une même ligne. En dernier niveau, vous trouverez un footer présenté en colonne comportant les détails sur l’adresse, les services, les informations supplémentaires sur le site. N'oubliez surtout pas le copyright de votre site pour la garantie et la protection de votre création. Pour ce type de footer, le fond de chaque niveau aura une couleur différente même en survolant tout simplement le curseur sur chaque menu.

Conclusion

Je vous le dis, de nos jours mettre un pied de page sur un site web est obligatoire. Les visiteurs se rendent assez rapidement en bas de la page pour obtenir plus d’information. Offrez-leur la possibilité de vous connaitre davantage grâce à votre footer. Pour cela, vous avez le choix entre ces exemples qui sont parfaits pour avoir un pied de page réactif. En vous inspirant de ces différents designs, j’espère que vous aurez de beaux footer.

Quels sont ceux que vous préférez ? En avez-vous d'autres à nous montrer ? J'attends vos commentaires ci-dessous.

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.