J’imagine que bon nombre d’entre vous vont sûrement se reconnaitre dans cet article. 🙂
Ce problème de colonnes est très fréquent sur Internet, et je constate bien souvent qu’il n’est pas corrigé…
Mais peut-être connaissez-vous déjà la solution ? Si oui, alors c’est parfait ! Sinon, prenez juste 2 minutes pour lire ce mini tuto.
Le problème
Vous avez certainement déjà réalisé le type de mise en page présenté ci-dessous sur votre site en utilisant le page builder de Divi ?
Il s’agit d’une composition devenue assez classique ces 2 ou 3 dernières années, car rendue célèbre par la tendance graphique du Flat Design, des principes du Material Design de Google et plus généralement du style Bauhaus et du graphisme suisse.
Une disposition reposant sur le rythme, la rigueur et la simplicité des formes pour un rendu efficace.
Sur un écran d’ordinateur, comme vous pouvez le voir, ça fonctionne admirablement.
Mais quid de la déclinaison sur mobiles ?
Évidemment, les 2 colonnes se réorganisent pour n’en former plus qu’une et donc nos 4 blocs se réagencent selon leur ordre d’insertion.
Ce qui a pour résultat de créer une sorte de mauvais sandwich : un pâté de texte coincé entre 2 tranches d’images… bon appétit bien sûr !
La solution
Et oui, nous n’allons pas laisser ça comme ça !
Aussi, vous serez content d’apprendre que pour lutter contre cette “malbouffe graphique”, quelques lignes de CSS suffisent.
Et ceci grâce à la propriété flex permettant d’inverser l’ordre des colonnes. Nous l’appliquerons uniquement à une largeur d’écran ciblant les terminaux de petite taille sur lesquels le problème est susceptible de se produire.
Commencez par copier-coller le code ci-dessus dans les CSS de votre site Divi.
Vous voulez savoir où insérer ce code CSS ? Lisez notre article “7 manières d’ajouter des CSS à Divi“.
Ensuite, il vous faut ajouter la classe dc_inverser_colonnes-section dans les paramètres de la section contenant les colonnes à réorganiser, comme sur la capture d’écran ci-dessous.
Enfin, ajoutez la classe dc_inverser_colonnes-ligne dans les paramètres des lignes (2 pour mon exemple) contenant les colonnes à réorganiser, comme sur la capture d’écran ci-dessous.
Le résultat après inversion des colonnes
Voila qui est mieux !
Les blocs textes et images s’affichent maintenant en alternance, on retrouve un rythme plaisant avec l’image qui introduit le texte.
Merci pierre cela va m’éviter de dupliquer mes sections cool
Bonjour Pierre,
Est-ce que c’est le même code pour 3 voire 4 colonnes?
Merci d’avance
Bonjour,
Merci pour ce code !
Cependant, une chose m’intrigue ^^
Pourriez-vous m’expliquer pourquoi il faut aussi cibler la section et pas seulement la ligne ?
D’avance merci pour votre réponse !
Parce que si tu ne cible pas la section dans lequel se trouve ta ligne, il ne prendra pas en compte le flex
Bonjour
Merci de l’astuce…mais ça ne fonctionne pas pour mon site
J’ai pourtant appliqué à la lettre le code dans le style.css du chidtheme et les classes CSS pour charque rangées (3 dans mon cas)
Une explication ?
Merci d’avance
Tu as pensé à activer “Harmoniser la hauteur des colonnes” dans les réglages de la ligne ?
Tu as pensé à activer “Harmoniser la hauteur des colonnes” dans les réglages de la ligne ?
Cela fait plusieurs fois que j’utilise ce code, une chose à dire : MAGNIFIQUE !
Merci Pierre
Top top top !
Merci