Footer Webflow : créer un pied de page clair et réutilisable

À quoi sert un footer ?

Le footer, ou pied de page, est le dernier bloc de chaque page. Il répond à quatre besoins : retrouver une page sans remonter en haut, contacter l'entreprise, accéder aux informations légales et, souvent, passer à l'action une dernière fois (contact, newsletter).

Créer un footer dans Webflow, étape par étape

Webflow détaille la méthode dans sa vidéo officielle « Build a website footer » (série Webflow 101). Voici les étapes, adaptées à l'interface actuelle.

1. Ajoutez une Section en bas de la page, depuis le panneau Add (touche A). Dans ses réglages, choisissez la balise Footer : le navigateur et les lecteurs d'écran reconnaissent alors le pied de page sémantique (MDN).
2. Ajoutez un Container pour limiter la largeur, puis un bloc en Grid (par exemple 4 colonnes) ou en Flexbox horizontal.
3. Remplissez les colonnes : logo et phrase de positionnement, liens de navigation, coordonnées, appel à l'action. Utilisez des Link Blocks ou des Text Links, pas des boutons déguisés.
4. Ajoutez une barre légale en dessous : copyright, mentions légales, confidentialité, cookies.
5. Transformez le tout en composant (clic droit sur la section, puis Create component). Insérez ensuite le composant sur chaque page et template CMS.

Pourquoi un composant et plus un Symbol ?

Webflow a renommé les Symbols en Components le 9 novembre 2022. Le principe ne change pas : une modification du composant se répercute partout. Les propriétés permettent en plus de varier un texte ou d'afficher un bloc selon la page. Détails dans notre guide pour créer des composants Webflow.

Chez Synqro, nous créons le footer en composant dès la première page intégrée. L'année du copyright, l'adresse ou un nouveau lien légal se modifient alors une seule fois, et l'équipe du client peut le faire sans toucher à la structure.

Rendre le footer responsive

• Tablette : passez la grille de 4 à 2 colonnes.
• Mobile : une colonne, avec l'appel à l'action en premier.
• Zones tactiles : espacez les liens d'au moins quelques pixels et donnez-leur un padding vertical pour qu'on ne clique pas sur le voisin.
• Contraste : un texte gris clair sur fond sombre est souvent trop pâle. Vérifiez-le avec un outil de contraste.

Les mentions légales dans le footer

En France, un site professionnel doit afficher des mentions obligatoires : identité de l'entreprise, immatriculation, contact, hébergeur. La fiche Service-public.gouv.fr sur les sites internet professionnels les détaille et rappelle la sanction : jusqu'à 1 an d'emprisonnement et 75 000 € d'amende. Le footer est l'endroit où les visiteurs cherchent ce lien.

Ajoutez aussi la politique de confidentialité et un lien pour rouvrir le choix des cookies. Voir notre guide pour rendre un site Webflow conforme au RGPD.

Le footer et le SEO

Les liens du footer sont des liens internes comme les autres : ils aident Google à découvrir les pages clés. Suivez les règles de la documentation Google Search Central sur les liens : de vraies balises a avec un href, et des ancres descriptives (« Création de site Webflow » plutôt que « Service 1 »). Pour le reste de la stratégie, voir notre article sur le maillage interne.

Évitez l'inverse : des dizaines de liens bourrés de mots-clés (« plombier Paris 1 », « plombier Paris 2 »...). Ils n'aident pas l'internaute et donnent une impression de manipulation. Si vous ciblez une zone locale, affichez plutôt le nom, l'adresse et le téléphone, identiques à votre fiche Google Business Profile.

Garder le footer en bas de page avec Flexbox

Sur une page très courte (page 404, remerciement), le footer peut remonter au milieu de l'écran. La correction tient en trois réglages :

1. Sélectionnez le Body, choisissez Body (All pages) dans le sélecteur, puis Display: Flex, direction verticale.
2. Donnez au Body une hauteur minimale de 100vh (Min H), sinon il n'y a pas d'espace à répartir.
3. Sur le footer, réglez la marge supérieure sur auto : il est poussé en bas sur les pages courtes et reste à sa place normale sur les pages longues.

Ne confondez pas avec position: sticky ou fixed, qui garderaient le footer à l'écran pendant le défilement et masqueraient le contenu. Les différences sont expliquées dans notre guide des positions Webflow.

Trois modèles de footer selon le type de site

Les erreurs fréquentes

• Un footer copié-collé sur chaque page au lieu d'un composant : les liens finissent par diverger.
• Une année de copyright figée ou une adresse qui n'est plus la bonne.
• Des icônes de réseaux sociaux sans texte alternatif : un lecteur d'écran annonce juste « lien ».
• Des liens morts après une refonte. Un crawl régulier (Screaming Frog, par exemple) les repère.

Synqro, Webflow Premium Partner fondé en 2019, a accompagné plus de 150 entreprises. Si votre site Webflow manque d'une base propre (composants, conventions, footer à jour), notre équipe Webflow peut la reprendre.