Inverser deux colonnes sur Divi

Divi | Wordpress
Retour au blog
  • Blog
  • 9
  • Inverser deux colonnes sur Divi

3 Table des matières

Publié le 10/03/2024 | Mis à jour le 15/05/2024

Introduction

Le thème Divi propose la création de lignes avec la possibilité d’ajouter des colonnes à l’intérieur. Cependant, on veut parfois modifier l’ordre d’affichage des colonnes en fonction du format d’écran. Cette option n’est pas disponible par défaut sur Divi. Il faut donc le faire avec un peu de code personnalisé.

Structure

Pour changer l’ordre des colonnes dans une ligne, nous avons besoin d’une structure assez classique. Nous avons créé une deux lignes avec chacune deux colonnes. Pour l’exemple, nous avons choisi d’y insérer pour chaque ligne un module texte et une image.

changer colonnes structure

La structure réalisée va ressembler à ça :

Structure des colonnes

On peut remarquer que lorsque l’on passe à un format mobile ou tablette, par défaut dans Divi les colonnes vont se placer l’une en dessous de l’autre.

changer colonnes structure3

On va souhaiter intervenir dans l’ordre des colonnes à l’aide de code CSS.

Comment changer l’ordre des colonnes avec du code personnalisé

Dans un premier temps, on va ajouter une classe css à la ligne qu’on souhaite modifier en version mobile et tablette. Je l’ai appelé “reverse-column” mais elle peut avoir un autre nom.

WPS-Hide-Login

Une fois la classe créée, on va pouvoir lui attribuer du code CSS. Je conseillerai de le mettre directement dans le fichier de style du thème enfant, cela est plus intéressant si vous réutilisez cette classe dans différentes pages. Vous pouvez aussi le placer dans le style de la page.

L’utilisation d’une media queries est nécessaire pour cibler uniquement un écran dont la largeur est de 980 px maximum (ce qui correspond à la largeur maximale au format tablette sur Divi par défaut).

@media screen and ( max-width: 980px ) {
.reverse-column {
display: flex;
flex-direction: column-reverse;
}
}

L’utilisation d’un flexbox va nous permettre d’inverser l’ordre d’affichage des deux colonnes. Cependant, on remarque une petite erreur lorsque l’on voit les changements apportés par cette classe.

changer colonnes structure5

La ligne avec la classe CSS

changer colonnes structure6

La ligne sans la classe CSS

On remarque que la marge entre l’image et le titre n’existe plus dans la version avec la classe CSS.
On va donc devoir la rajouter à l’aide de ce petit bout de code :

.reverse-column .et_pb_column:last-child {
margin-bottom: 30px;
}
.reverse-column .et_pb_column:first-child {
margin-bottom: 0px;
}

Ce code CSS peut être modifié en fonction de l’espacement entre vos colonnes. Pour un espacement standard, on a 30 px de marge. Si vous utilisez différents espacements entre les colonnes dans vos différentes lignes, il peut être intéressant de créer d’autres classes CSS pour ajuster cet espacement.

On obtient donc le résultat suivant :

changer colonnes structure7

Le code final ressemblera à ça :

@media screen and ( max-width: 980px ) {
.reverse-column {
display: flex;
flex-direction: column-reverse;
}
.reverse-column .et_pb_column:last-child {
margin-bottom: 30px;
}
.reverse-column .et_pb_column:first-child {
margin-bottom: 0px;
}
}