Comment inverser l’ordre des colonnes de Divi en version mobile ?

Publié le 08/07/2021 | 7 commentaires

Vous l’avez remarqué et ça vous énerve… Vous aimeriez inverser le sens des colonnes de Divi en version mobile.

En effet, lorsque vous créez une mise en page avec du texte à gauche et une image à droite puis vice-versa dans la ligne suivante, la version mobile est décalée et votre mise en page n’est donc pas optimale.

Si c’est sur votre blog, ça peut passer, mais si c’est sur le site de votre client, il ne lui faudra pas longtemps pour s’en rendre compte et pour qu’il vous demande de corriger cela !

inverser colonnes divi
Inverser les colonnes de Divi en version mobile seulement

Bonne nouvelle, dans cet article, vous allez voir qu’il est très simple d’inverser le sens des colonnes en version mobile et tablette ! C’est parti !

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Inverser les colonnes de Divi : tutoriel en vidéo

Une fois n’est pas coutume, commençons d’abord par regarder la vidéo. Ainsi, vous verrez directement ce que vous devez faire pour corriger ce problème et ensuite, on passe aux explications détaillées…

2 – La flexbox : propriété CSS indispensable

Comme vous l’avez vu dans la vidéo, on peut facilement modifier le sens des colonnes de Divi en version mobile, simplement grâce à 2 ou 3 lignes de CSS !

Cela est possible grâce à la Flexbox, un projet intégré au CSS3 en 2016.

Avec la propriété display:flex, on peut faire des tas de choses ! On peut tout faire en fait :

  • Changer la direction avec la propriété flex-direction
  • Changer le passage à la ligne avec flex-wrap
  • Changer l’alignement horizontal avec justify-content
  • Changer l’alignement vertical avec align-items et align-content
  • Changer l’ordre des éléments enfants avec order
  • etc.

Bref, croyez-moi, la flexbox sauve des vies 🤣 ! Et dans le cas de cet article, c’est flex-direction qui nous permet de changer le sens des colonnes de Divi.

column reverse divi
Propriété : flex-direction – Valeur : column-reverse

Pour mieux comprendre comment cela fonctionne, n’hésitez pas à consulter l’article de CSS Tricks.

Le saviez-vous ? Vous pouvez tester Divi gratuitement en vous rendant sur cette page et en cliquant sur « TRY IT FOR FREE »

3 – Les medias queries : indispensables pour le responsive

L’autre élément indispensable pour modifier le sens des colonnes de Divi sur mobile est l’utilisation des medias queries.

En effet, vous ne souhaitez pas inverser les colonnes sur les versions desktop, n’est-ce pas ? Ce que l’on souhaite, c’est que cela agisse uniquement sur les petites tailles d’écran !

Alors les medias queries sont indispensables. C’est aussi du CSS, donc rien de compliqué à comprendre. Si moi je l’ai appris toute seule à plus de 30 balais, vous le pouvez aussi 🤪.

Les medias queries permettent de créer des règles CSS en fonction de la taille des écrans. C’est la base du responsive design.

Dans notre cas, ici, on a besoin d’agir sur les écrans de petites tailles, inférieurs à 980px. La règle utilisée sera donc @media screen and ( max-width: 980px ).

Pour bien comprendre comment fonctionnent les medias queries, n’hésitez pas à consulter l’article publié sur AlsaCréation.

Besoin de maitriser Divi ? Découvrez ma formation qui vous accompagne pas à pas dans la compréhension et l’utilisation de Divi ! En savoir plus sur la formation Divi.

4 – Inverser le sens des colonnes de Divi en 3 clics

Comme vous l’avez vu dans la vidéo, c’est très facile, voici les étapes :

snippet reverse column
Changer le sens des colonnes de Divi
  1. Tout d’abord, ouvrez les réglages de la ligne (verte) qui contient les colonnes à inverser en version mobile. Allez à l’onglet Avancé et ajoutez une classe CSS nommée inverse (c’est un exemple, vous pouvez la nommer comme vous le souhaitez).
  2. Ensuite, vous allez à l’onglet Divi > Options du thème > Personnaliser CSS (il y a plusieurs manières d’ajouter du code dans Divi).
  3. Vous ajoutez le code suivant :
@media screen and ( max-width: 980px ) {
    .inverse {
        display: flex;
        flex-direction: column-reverse;
    }
}
  1. Sauvegardez vos modifications.

Voilà, rien de plus simple ! Maintenant vos colonnes affichent le bon ordre lorsque vous visitez votre site en version mobile.

Bien évidemment, comme indiqué dans la vidéo, il faudra ajouter la classe CSS inverse dans toutes les rangées (en vert) de votre site qui posent un problème. Celles qui sont dans le bon ordre en version mobile n’ont pas besoin de cette classe.

5 – En conclusion

Alors que dites-vous de ce mini-tips facile à appliquer ?

En faisant quelques recherches sur le web, j’ai trouvé des tutoriels bien plus compliqués pour arriver finalement au même résultat ! Pour exemple, en voici deux :

Et vous, qu’en pensez-vous ?

inverser colonne mobile
inverser colonnes
reverse column

740 mots

3

Ça devrait vous plaire aussi :

La bibliothèque des Snippets pour Divi

La bibliothèque des Snippets pour Divi

Cet article vous propose un condensé des bouts de code (snippets) à copier-coller sur votre site afin de régler quelques détails visuels/graphiques. Vous allez l’adorer !

Comment fixer la barre d’outils du module Texte de Divi ?

Comment fixer la barre d’outils du module Texte de Divi ?

Découvrez cette astuce rapide qui permet de fixer la barre d’outils du module Texte, afin qu’elle soit accessible de manière constante (au scroll). Ainsi vous gagnerez en efficacité et en productivité lors de la création de vos contenus avec Divi.

Les Lotties pour Divi : comment ça marche ?

Les Lotties pour Divi : comment ça marche ?

Utilisez les Lotties pour animer et égayer vos mises en page Divi. Ces fichiers sont très légers et améliorent l’engagement de vos utilisateurs, pourquoi s’en priver ?

7 Commentaires

  1. françoise

    Bravo!
    Comme d’habitude, clair, simple et efficace!

  2. Denis

    Super bien, je vais utiliser. En effet, combien de fois je me suis enquiquiné à faire de belles présentations sur Mac pour les retrouver sans queue ni tête sur portable et obligé de recomposer tout ce que j’avais fait pour que cela soit cohérent.
    Intéressant d’autant qu’aujourd’hui on ne peut pas se passer du visuel sur portable. Beaucoup de consultations de site commencent sur l’iPhone pour finir sur l’IPad ou le Mac.

  3. Lycia Diaz

    Merci Françoise

  4. Lycia Diaz

    Merci Denis. Oui tu as raison… moi pour mes blogs c’est surtout sur desktop que vient le trafic mais c’est normal car c’est ma thématique qui veut ça. Pour les autres thématiques, c’est clairement les versions mobiles qui s’imposent.

  5. Lucie

    Trop bien, merci !! 😀

  6. Gransart

    Bonjour Lycia, je voudrais te soumettre un petit problème auquel je suis confronté et pour lequel je ne trouve pas la solution idéale.
    Quand tu utilises le module témoignage dans Divi, celui-est relativement bien fait mais lorsque tu en as beaucoup, cela va vite occuper un espace visuel important, tu peux toujours les mettre sur quatre colonnes et cinq rangs, mais ça risque d’être pénible à l’écran surtout sur ton iPhone, une vraie litanie.
    Alors, je m’étais dit pourquoi ne pas essayer de faire ça sous mode carrousel, mais les plugins que j’ai testés ne sont pas terrible (wowcarousel -divi people par exemple) et au niveau du responsive c’est la cata.
    Aurais-tu une idée comment gérer le sujet ?
    Merci par avance de ta réponse

  7. Lycia Diaz

    Salut Gransart, non je n’ai pas trop de solution, il faut trouver un autre plugin, mais tu peux essayer des plugins pas obligatoirement conçus pour Divi, sur le répertoire de WordPress, tu en trouveras certainement un qui convient

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This