Sur ordinateur, trois colonnes peuvent présenter côte à côte des services, des témoignages ou des étapes de parcours. Sur un téléphone, cette même composition doit rester lisible sans imposer au visiteur de zoomer, de faire défiler horizontalement ou de chercher le début du texte. Dans WordPress, Gutenberg propose plusieurs façons de construire cette mise en page, et le choix du bloc compte autant que les réglages appliqués à chaque appareil.
Le bloc Colonnes empile généralement les éléments sur les petits écrans afin de préserver leur lisibilité. Une grille de mise en page, lorsqu’elle est disponible, offre un contrôle plus fin sur le nombre de colonnes et leur largeur selon les points d’adaptabilité. Pour obtenir un bon affichage mobile, il faut donc comprendre ces comportements, vérifier le résultat dans l’éditeur et ajuster la composition au contenu plutôt que de chercher à conserver à tout prix la même disposition partout.
En bref :
- Le bloc Colonnes est adapté aux mises en page simples et s’empile habituellement sur téléphone.
- Une grille de mise en page permet de régler plus précisément les colonnes selon l’ordinateur, la tablette et le mobile.
- Sur une grille à quatre lignes pour mobile, les valeurs de décalage et d’extension doivent être pensées en fonction de cette largeur disponible.
- La prévisualisation sur plusieurs tailles d’écran révèle les problèmes d’ordre, de lisibilité et d’espacement.
- Le responsive design doit privilégier une expérience utilisateur claire, plutôt qu’une reproduction miniature de la version de bureau.
Choisir entre le bloc Colonnes et la grille de mise en page dans Gutenberg
Le premier choix consiste à déterminer si le contenu a simplement besoin d’être réparti en quelques zones ou s’il exige une composition plus précise. Pour une présentation classique — une photo à gauche et un texte à droite, par exemple — le bloc Colonnes de Gutenberg suffit souvent. On ajoute le bloc depuis l’inserteur, on choisit une structure de départ, puis on insère dans chaque colonne des blocs de paragraphe, d’image, de titre ou de bouton.
Ce bloc est particulièrement pratique lorsque les contenus doivent suivre un ordre de lecture évident. Une petite entreprise fictive, Atelier Rivage, pourrait présenter trois prestations dans trois colonnes sur ordinateur. Sur téléphone, les cartes se suivent généralement verticalement : le visiteur lit chaque service l’un après l’autre, sans avoir à faire défiler la page de côté. Cette adaptation automatique n’est pas une anomalie, mais un comportement conçu pour préserver la largeur utile des textes.
La grille de mise en page répond à un besoin différent. Elle structure la page à partir de lignes verticales que l’on peut regrouper pour composer des colonnes de diverses largeurs. Dans la configuration présentée par certaines interfaces WordPress, la grille repose sur 12 lignes pour un affichage d’ordinateur, 8 pour une tablette et 4 pour un téléphone. Les lignes ne sont pas des colonnes de contenu en elles-mêmes : elles servent d’unités pour déterminer l’extension et le décalage des éléments.
Cette différence devient utile lorsqu’une mise en page n’est pas symétrique. Atelier Rivage pourrait vouloir une grande colonne de texte accompagnée d’une image plus étroite sur ordinateur, puis afficher l’image au-dessus du texte sur téléphone. Une grille permet d’ajuster plus finement les proportions dans les interfaces qui proposent cette fonction, alors que le bloc Colonnes est plus direct pour une structure régulière. L’offre disponible dépend toutefois de l’édition WordPress, du thème et des blocs activés ; il vaut mieux vérifier l’inserteur plutôt que supposer que chaque site possède exactement les mêmes outils.
Pour une présentation professionnelle, par exemple, un agencement simple de texte, de portrait et de coordonnées peut être conçu avec les blocs natifs. Un guide sur les blocs utiles pour une page À propos sur WordPress aide à réfléchir à cette organisation avant de choisir la structure. Le bon bloc est celui qui rend le contenu évident sur petit écran, même si la composition de bureau paraît moins spectaculaire.
À retenir : le bloc Colonnes privilégie la simplicité, tandis qu’une grille offre davantage de contrôle lorsque la mise en page doit varier selon l’écran.
Régler les colonnes pour un affichage mobile lisible
Une fois le bloc choisi, il faut décider ce qui doit se passer lorsque la largeur disponible diminue. Avec le bloc Colonnes, le réglage « Empiler sur mobile », lorsqu’il apparaît dans l’interface, transforme les colonnes en éléments pleine largeur sous un certain seuil d’écran. La documentation du bloc mentionne notamment un seuil de 599 pixels dans certains contextes, mais le comportement exact peut varier selon la version de WordPress, le thème ou les outils utilisés. Il est donc préférable de vérifier l’aperçu réel, plutôt que de se fier uniquement à une valeur générale.
L’empilement est généralement le meilleur choix pour des paragraphes longs, des fiches détaillées ou des images accompagnées de légendes. Imaginez qu’Atelier Rivage présente trois prestations avec un titre, une description de plusieurs phrases et un bouton. Si les colonnes restent côte à côte sur un écran étroit, chaque texte se retrouve comprimé ; les mots se cassent sur de nombreuses lignes et les boutons deviennent difficiles à toucher. En les empilant, on rend à chaque bloc une largeur plus confortable et on conserve une lecture verticale familière.
Une grille de mise en page peut, elle, permettre de régler séparément les appareils. Dans l’éditeur, on sélectionne le point d’adaptabilité correspondant à l’ordinateur, à la tablette ou au téléphone, puis on modifie les dimensions propres à cette vue. La grille de référence compte 12 lignes sur ordinateur, 8 sur tablette et 4 sur mobile. Une colonne peut ainsi occuper toute la largeur mobile, tandis que deux éléments peuvent rester côte à côte s’ils sont assez courts et si leur largeur cumulée le permet.
Pour garder deux éléments côte à côte sur téléphone, il ne suffit pas de réduire visuellement leurs dimensions. Il faut vérifier que leur extension et leur décalage ne dépassent pas l’espace disponible dans la grille mobile. Par exemple, deux colonnes ayant chacune une extension de 2 et aucun décalage occupent ensemble les quatre lignes prévues pour le téléphone. Cette solution peut convenir à deux icônes avec de courts libellés, mais pas nécessairement à deux blocs de texte développés.
| Affichage | Repère de grille | Usage pratique |
|---|---|---|
| Ordinateur | 12 lignes | Composer plusieurs colonnes ou une zone principale accompagnée d’un contenu secondaire. |
| Tablette | 8 lignes | Réduire le nombre de colonnes ou équilibrer des blocs de largeur intermédiaire. |
| Téléphone | 4 lignes | Privilégier l’empilement ou réserver le côte à côte aux contenus très courts. |
La règle de conception reste simple : une disposition côte à côte est pertinente uniquement si chaque élément conserve assez d’espace pour être compris et utilisé. Mieux vaut une colonne empilée, confortable et lisible, que deux zones minuscules maintenues ensemble par principe.
Utiliser les réglages de grille sans créer de chevauchement
Les réglages avancés d’une grille reposent notamment sur deux notions : l’extension et le décalage. L’extension indique combien de lignes un élément occupe ; le décalage correspond à l’espace de grille qu’il saute avant de commencer. En jouant sur ces paramètres, on peut construire une composition équilibrée, mais les valeurs doivent rester compatibles avec la largeur totale disponible pour le point d’adaptabilité sélectionné.
Sur une grille de bureau à 12 lignes, trois colonnes de même largeur peuvent chacune occuper quatre lignes sans décalage. Une autre composition peut donner davantage d’espace à la première colonne et réduire les suivantes, à condition que les valeurs de la rangée restent valides. Si l’on augmente l’extension d’une colonne sans réduire celle d’une autre, les blocs risquent de se chevaucher ou de se déplacer sur une nouvelle rangée, selon les règles appliquées par le bloc.
Sur tablette et téléphone, le raisonnement doit être repris au lieu de simplement recopier les valeurs de bureau. Une colonne occupant six lignes dans une configuration de bureau ne peut pas conserver cette extension dans une grille mobile qui n’en compte que quatre. Pour la version étroite, il faut soit réduire l’extension, soit laisser les éléments s’empiler. C’est ce réglage par appareil qui transforme une mise en page fixe en véritable design adaptatif.
Modifier les dimensions dans l’éditeur
Les poignées de glissement situées au bord des colonnes permettent souvent d’ajuster leur largeur directement dans la zone de travail. Cette méthode est intuitive pour trouver rapidement un rapport visuel : on peut, par exemple, donner plus de place à un texte explicatif qu’à une image décorative. Les commandes correspondantes dans la colonne latérale offrent un réglage plus précis, notamment pour les valeurs d’extension et de décalage.
La gouttière règle l’espace entre les colonnes. Une gouttière trop étroite rend les contenus visuellement confus, tandis qu’une séparation trop large peut donner l’impression que les éléments ne font pas partie du même ensemble. Certaines interfaces autorisent aussi la suppression des gouttières aux extrémités pour aligner la grille sur les bords du conteneur. Ce choix doit rester cohérent avec les marges du reste de la page.
Chaque colonne peut également avoir ses propres paramètres d’arrière-plan et de remplissage intérieur. Le padding est utile pour empêcher un texte de toucher un fond coloré, mais il réduit l’espace réellement disponible à l’intérieur du bloc. Sur mobile, un remplissage excessif peut donc rendre une colonne déjà étroite encore plus serrée. Il faut vérifier le résultat après chaque ajustement, en particulier lorsque des boutons ou des images occupent toute la largeur.
Enfin, une colonne supprimée lors de la réduction du nombre de colonnes peut entraîner la disparition de son contenu. Avant de modifier la structure, il est prudent de vérifier où se trouvent les blocs et de sauvegarder le brouillon. Une mise en page propre se construit autant par des valeurs cohérentes que par une manipulation attentive de l’éditeur.
Repère utile : régler les dimensions séparément pour chaque appareil permet de corriger la composition sans compromettre l’alignement des autres versions.
Tester le responsive design dans l’éditeur WordPress
Une page qui semble équilibrée sur un grand écran n’est pas nécessairement agréable sur téléphone. La prévisualisation mobile permet de repérer les textes trop étroits, les images qui dominent la page, les boutons rapprochés et les suites de colonnes dont l’ordre de lecture paraît inattendu. Dans Gutenberg, les contrôles d’aperçu et les outils de prévisualisation du site facilitent cette vérification, même si un test sur un appareil réel reste utile pour apprécier le confort de navigation.
Atelier Rivage peut, par exemple, afficher ses prestations dans l’ordre « conseil, réalisation, suivi » sur ordinateur. Après empilement, il faut vérifier que cet ordre reste logique du haut vers le bas et que le visiteur rencontre l’information importante sans parcourir toute la page. Si une image passe avant un titre alors que le titre devrait guider la lecture, il faut réorganiser les blocs ou choisir une structure plus adaptée.
Un contrôle efficace ne se limite pas à réduire la fenêtre. Il consiste à tester plusieurs largeurs, notamment un écran de téléphone étroit, une tablette et un ordinateur. Sur chaque format, on vérifie que les titres ne sont pas coupés, que les textes ne forment pas des lignes excessivement longues ou courtes, et que les liens demeurent faciles à sélectionner. Le responsive design concerne aussi les espaces tactiles et la hiérarchie visuelle, pas seulement le nombre de colonnes.
- Contrôler l’ordre de lecture : les éléments doivent se suivre dans une séquence compréhensible lorsque les colonnes s’empilent.
- Examiner la largeur des textes : un bloc trop étroit fatigue la lecture et peut déséquilibrer la page.
- Tester les actions : boutons, liens et formulaires doivent rester faciles à toucher sans déclencher un élément voisin.
- Vérifier les images : leurs dimensions et leur cadrage ne doivent pas repousser inutilement les informations essentielles.
- Revenir à l’aperçu bureau : un ajustement mobile ne doit pas dégrader la composition sur grand écran.
La grille peut aussi comporter des colonnes volontairement décalées pour créer du rythme sur ordinateur. Ce décalage ne doit pas produire un espace vide disproportionné sur téléphone. Si un élément secondaire perd sa fonction ou repousse le contenu principal sous la ligne de flottaison, il vaut mieux simplifier la composition mobile plutôt que conserver l’effet graphique à tout prix.
Pour apprendre à construire ces structures avec les outils natifs, une formation à Gutenberg pour créer une page sans constructeur externe peut aider à comprendre les blocs, leurs réglages et leurs limites. Le test sur plusieurs formats transforme ensuite ces connaissances en décisions concrètes : garder, empiler, réordonner ou supprimer un élément.
Le test décisif n’est pas de savoir si la page tient sur l’écran, mais si elle reste agréable à parcourir et à utiliser.
Une démonstration vidéo peut compléter l’exploration de l’éditeur, mais les libellés et les options évoluent selon les versions et les thèmes. Il reste important de comparer les étapes montrées avec les réglages réellement disponibles sur son propre site.
Améliorer l’expérience utilisateur avec une adaptation mobile réfléchie
Adapter des colonnes ne revient pas à reproduire la page de bureau en format réduit. Sur un téléphone, les visiteurs consultent souvent une information précise, parcourent une page par sections ou utilisent les boutons avec le pouce. Une expérience utilisateur réussie donne donc la priorité aux contenus essentiels, à un ordre de lecture naturel et à des actions faciles à atteindre. Le nombre de colonnes est un moyen de structurer ces informations, pas un objectif en soi.
Pour Atelier Rivage, une section de trois témoignages peut fonctionner en trois colonnes sur un grand écran, à condition que chaque citation soit courte. Sur mobile, les empiler permet de lire chaque avis sans interrompre la phrase à chaque mot. À l’inverse, deux éléments très simples — une icône accompagnée d’un intitulé bref, par exemple — peuvent parfois rester côte à côte si leur contraste et leur espacement demeurent confortables.
Il faut également prendre en compte la longueur du contenu. Deux titres de longueur différente n’occupent pas nécessairement la même hauteur ; deux boutons dont les libellés varient peuvent se retrouver mal alignés ; une photo verticale peut rendre une colonne beaucoup plus longue que sa voisine. Ces différences sont souvent peu visibles dans l’éditeur quand on se concentre sur les bordures de la grille. Il faut examiner les éléments tels qu’ils seront réellement publiés, avec les textes, les images et les liens définitifs.
Les gouttières et le remplissage intérieur contribuent à la clarté. Un espace régulier sépare les colonnes sans isoler excessivement les contenus, tandis qu’un fond distinct peut signaler qu’une carte est cliquable ou qu’elle présente une information particulière. Sur un petit écran, les mêmes marges prennent proportionnellement plus de place ; un style qui paraît raffiné sur ordinateur peut alors réduire la zone de lecture. L’aperçu mobile permet de rééquilibrer ces choix plutôt que de leur appliquer une valeur uniforme.
Les blocs Gutenberg sont aussi utiles pour construire des pages riches sans multiplier les outils. Pour autant, l’accumulation de colonnes, de couleurs et de décalages n’améliore pas automatiquement le résultat. Une structure courte et cohérente rend souvent mieux service qu’une mosaïque compliquée. Pour chaque rangée, on peut se demander : les éléments sont-ils comparables, leur proximité aide-t-elle à comprendre l’information, et leur empilement conserve-t-il le bon ordre ?
Les réponses à ces questions guident les ajustements plus sûrement qu’une règle universelle. L’adaptation mobile peut conduire à empiler les colonnes, à modifier les extensions d’une grille ou à simplifier le contenu ; la meilleure solution est celle qui conserve l’intention de la page tout en évitant les gestes inutiles.
Les réglages avancés, comme l’ajout d’une classe CSS personnalisée, sont utiles lorsque les options intégrées ne suffisent pas et que l’on maîtrise les conséquences de ses styles. Pour un besoin courant, commencer par les contrôles disponibles dans Gutenberg réduit le risque de casser l’affichage lors d’une mise à jour ou d’un changement de thème. Un design adaptatif efficace se mesure finalement à la facilité avec laquelle chaque visiteur comprend la page, quel que soit son écran.
Questions fréquentes sur les colonnes Gutenberg sur mobile
Pourquoi mes colonnes Gutenberg s’empilent-elles sur téléphone ?
C’est généralement le comportement adaptatif prévu pour préserver la largeur et la lisibilité des contenus sur petit écran. Le bloc Colonnes peut proposer un réglage d’empilement mobile ; les options disponibles dépendent de la version de WordPress et du thème.
Peut-on conserver deux colonnes côte à côte sur mobile ?
Oui, lorsque le bloc et les réglages le permettent et que les contenus sont assez courts. Avec une grille de quatre lignes pour mobile, deux colonnes de deux lignes chacune peuvent occuper toute la largeur, sans décalage. Vérifiez toutefois le confort de lecture et la facilité d’utilisation.
Quelle différence entre le bloc Colonnes et la grille de mise en page ?
Le bloc Colonnes sert à répartir simplement des contenus en plusieurs zones, souvent empilées sur mobile. La grille de mise en page offre un contrôle plus précis sur la largeur, le décalage et l’organisation des éléments selon les points d’adaptabilité, lorsqu’elle est disponible.
Comment contrôler le rendu mobile avant publication ?
Utilisez les options d’aperçu de Gutenberg et vérifiez plusieurs tailles d’écran. Examinez notamment l’ordre des blocs, la largeur des textes, les images, les espaces et les boutons ; un essai sur un téléphone réel peut compléter la prévisualisation.