Le pied de page d’un site institutionnel que je reprenais ressemblait à un mur de texte sur mobile : logo, liens légaux, coordonnées et réseaux sociaux s’entassaient sur une seule colonne interminable, sans logique de lecture. Le thème bloc utilisé faisait pourtant du bon travail sur desktop, avec trois colonnes bien réparties.
Le problème ne venait pas du contenu mais de la structure des blocs Groupe imbriqués, mal configurée pour le passage en colonne. Voici la recette que j’utilise désormais par défaut pour un pied de page à trois colonnes qui se réordonne proprement, sans écrire une seule ligne de CSS additionnel.
Le problème : un Groupe flex qui ne sait pas s’empiler
Par défaut, un bloc Groupe en disposition flex avec l’option Empiler sur mobile désactivée garde ses enfants côte à côte à toutes les tailles d’écran, ce qui écrase le contenu sur un téléphone. À l’inverse, activer l’empilement sans revoir l’ordre des blocs produit un footer où le copyright apparaît avant les coordonnées de contact, ce qui n’a aucun sens pour l’utilisateur qui scrolle jusqu’en bas.
Le réglage clé se trouve dans le panneau Disposition du bloc Groupe parent : Type doit être Flex, Direction sur Ligne, et surtout la case Empiler sur mobile cochée. C’est cette dernière option qui bascule automatiquement la direction en colonne sous le point de rupture mobile, sans média query manuelle.
Construire les trois colonnes dans le bon ordre
Une fois le Groupe parent configuré, chaque colonne devient elle-même un bloc Groupe imbriqué. L’ordre dans lequel on les place dans l’éditeur détermine l’ordre d’empilement mobile : c’est ce détail qui est souvent négligé. Sur ce projet, j’ai réorganisé les trois blocs enfants dans cet ordre logique de lecture verticale :
- Colonne « À propos » : logo, courte description, réseaux sociaux.
- Colonne « Navigation » : liens vers les pages principales.
- Colonne « Contact » : adresse, téléphone, formulaire de contact.
Le balisage obtenu ressemble à ceci, avec la largeur relative de chaque colonne fixée via flexBasis plutôt qu’une largeur en pourcentage codée en dur :
<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"layout":{"flexSize":"30%"}}} -->
<div class="wp-block-group">...colonne à propos...</div>
<!-- /wp:group -->
<!-- wp:group {"style":{"layout":{"flexSize":"25%"}}} -->
<div class="wp-block-group">...colonne navigation...</div>
<!-- /wp:group -->
<!-- wp:group {"style":{"layout":{"flexSize":"35%"}}} -->
<div class="wp-block-group">...colonne contact...</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->Justification et alignement : les deux réglages qui évitent le CSS
Le réglage justifyContent sur space-between répartit les colonnes sur toute la largeur en desktop, mais devient sans effet une fois empilé, ce qui est exactement le comportement voulu. L’alignement vertical (blockGap et verticalAlignment) mérite aussi attention : sur mobile, un espacement vertical de var(--wp--preset--spacing--50) entre colonnes évite que les blocs se touchent visuellement, sans recourir à des marges manuelles qui casseraient l’espacement en desktop.
Le cas des réseaux sociaux qui débordent
Un souci récurrent avec ce type de footer : le bloc Réseaux sociaux, en flex par défaut, refuse de passer à la ligne si l’espace se réduit trop. La solution consiste à activer flexWrap: wrap sur ce bloc précis, en plus du Groupe parent, pour que les icônes de réseaux sociaux passent proprement sur deux lignes si nécessaire plutôt que de déborder du conteneur.
Quand accepter un peu de CSS malgré tout
Sur ce projet, un seul cas a nécessité une règle CSS additionnelle dans les styles globaux : la colonne contact devait passer en premier sur mobile pour des raisons d’accessibilité téléphonique (un numéro de SAV visible immédiatement). Plutôt que de réordonner les blocs et perdre la logique visuelle en desktop, j’ai utilisé la propriété order via un attribut de style personnalisé sur le Groupe concerné :
.wp-block-group.contact-column {
order: -1;
}
@media (max-width: 600px) {
.wp-block-group.contact-column {
order: -1;
}
}C’est le seul endroit du projet où j’ai dérogé à la règle « zéro CSS additionnel », et uniquement parce que l’ordre visuel souhaité en mobile différait réellement de celui souhaité en desktop.
Avant d’écrire une seule ligne de CSS sur un footer FSE, vérifiez que la case « Empiler sur mobile » est bien cochée sur le Groupe parent. C’est l’oubli le plus fréquent, et il explique la moitié des footers illisibles que j’ai vus en audit.
Ce qu’il faut retenir
Un pied de page à trois colonnes bien pensé repose sur trois réglages natifs du bloc Groupe : l’empilement mobile activé, un ordre de blocs qui correspond à l’ordre de lecture souhaité, et une justification en space-between pour la répartition desktop. Le CSS additionnel ne devrait intervenir qu’en dernier recours, pour des cas d’ordre visuel spécifiques comme celui du numéro de contact prioritaire.
