📅 Dernière mise à jour de ces informations le 13 août 2025 par Mélanie
Toutes les explications détaillées (avec copies d’écrans) et la marche à suivre pour maîtriser vos colonnes WordPress, sur PC mais aussi et surtout sur mobile ! Cet article s’adresse aux utilisateurs de WordPress, qu’ils soient débutants ou non.
Il m’arrive souvent, lors de mes formations WordPress ou dans les échanges avec mes clients, d’entendre cette question :
« Sur ordinateur, mes images ou mes blocs sont bien alignés en plusieurs colonnes… mais sur smartphone, tout s’affiche à la verticale. Comment faire pour que ça reste pareil ? »
C’est exactement ce qu’une cliente m’a demandé récemment pour son site : sur son ordinateur portable, elle voyait quatre colonnes côte à côte, parfaitement alignées. Mais sur son téléphone, tout s’empilait les uns sous les autres… et elle n’aimait pas du tout cet affichage.
Pourquoi WordPress affiche les colonnes à la verticale sur mobile
Si vos colonnes WordPress (Gutenberg) s’affichent différemment sur PC et sur smartphone, c’est parce que le site est responsive. Cela signifie que la mise en page s’adapte automatiquement à la taille de l’écran.
Et c’est tant mieux !
Sur mobile, les colonnes s’affichent par défaut les unes sous les autres afin que le texte et les images restent lisibles sans avoir à zoomer.
C’est une excellente pratique pour que vos contenus soient bien lisibles et accessibles… mais dans certains cas, vous pouvez préférer garder vos colonnes côte à côte, même sur petit écran.
L’option à connaître : “Empiler sur mobile”
Quand vous utilisez un bloc “Colonnes”* dans l’éditeur WordPress (Gutenberg), il existe une option appelée Empiler sur mobile. Elle se trouve dans le volet « Réglages du bloc », à droite de l’écran.
- Si cette option est cochée : les colonnes passent automatiquement à la verticale sur mobile.
- Si vous décochez l’option : elles restent côte à côte, quel que soit l’écran.
C’est aussi simple que ça !
* Attention, pour les débutants : je parle bien du bloc « Colonnes » (au pluriel) et non « Colonne » (au singulier. Il faut sélectionner le bloc qui contient l’ensemble des colonnes, pour trouver cette option.
MAIS : option à utiliser avec parcimonie…
Mais… il y a un piège : afficher quatre colonnes sur un écran de smartphone rend les images et le texte minuscules, et donc peu lisibles.
Sur la photo ci-après, vous observez que les titres s’affichent sur 4 ou 5 lignes, les mots sont coupés et les photos sont riquiquis ! Pas très agréable, ni très pro…
Mon astuce ultime pour garder une mise en page agréable
Après avoir vu ma démonstration, vous n’aimez quand-même pas que les colonnes s’affichent seules, les unes sous les autres, sur votre mobile ? Voici la méthode que je conseille souvent en formation. Une sorte de compromis entre les 2 !
1 – Créez un bloc principal à 2 colonnes et laissez cochée l’option Empiler sur mobile
2 – Dans chacune de ces 2 colonnes, insérez un nouveau bloc de 2 colonnes et décochez Empiler sur mobile
Puis, bien sûr, insérez votre contenu dans chaque des « sous-colonnes »…
Ci-dessus, les 2 colonnes principales sont présentées sur fond bleu, et le bloc « 2 colonnes » à l’intérieur de chaque colonne principal est représenté sur fond rose. Enfin, chaque colonne finale est sur fond blanc. OK, ce n’est pas très joli, mais c’est juste pour vous faire ressortir la logique 😉
Vous me suivez ?
Résultat ?
- Sur PC → 4 colonnes côte à côte.
- Sur mobile → 2 colonnes, puis encore 2 colonnes en dessous.
C’est lisible, aéré, et ça conserve une bonne mise en page.
Le responsive design est indispensable pour que votre site reste agréable à consulter sur tous les appareils, mais il est parfois possible de contourner certaines dispositions par défaut.
Si vous débutez sur WordPress et que vous voulez apprendre à structurer vos pages de manière efficace (et sans prise de tête), je vous accompagne dans mes formations WordPress, en présentiel à Lamballe (Bretagne 🏖️) ou à distance.
On y aborde justement ce genre d’astuces pratiques, issues de vrais cas clients comme celui-ci.
📌 Et vous, vos colonnes WordPress… vous les laissez s’empiler sur mobile ou pas ? Dites-le-moi en commentaire !