Tu t’es déjà retrouvé avec des colonnes totalement désordonnées sur mobile alors que tout était nickel sur ordinateur ?
Ne t’inquiète pas, c’est l’un des soucis les plus fréquents avec Elementor et la bonne nouvelle, c’est qu’il se corrige en 30 secondes chrono.
Dans cet article, on va voir pourquoi tes colonnes s’affichent dans le mauvais ordre sur mobile, comment les inverser facilement dans Elementor, et surtout comment anticiper ce problème dès la conception de ton site.
Tu peux aussi regarder la vidéo tuto juste ici 👇
SOMMAIRE
Pourquoi tes colonnes sont inversées sur mobile ?
Quand tu construis une section dans Elementor avec deux colonnes, par exemple image à gauche, texte à droite tout s’affiche parfaitement sur ordinateur.
Mais dès que tu passes en version mobile… surprise : l’ordre se casse la figure.
C’est normal !
Elementor affiche toujours les colonnes de gauche à droite dans la version mobile.
Résultat : si tu alternes image/texte puis texte/image sur desktop, ton mobile affichera image, texte, texte, image, ce qui casse complètement ton rythme visuel.
La solution pour inverser les colonnes sur mobile dans Elementor
Heureusement, Elementor a pensé à tout.
Plus besoin de bidouiller du code ou d’ajouter des marges farfelues.
Voici la méthode la plus simple et la plus propre.
1. Sélectionne la section à modifier
Va sur ta page Elementor, puis clique sur la section contenant les colonnes à inverser.
2. Clique sur la colonne à repositionner
Sélectionne la première colonne (celle que tu veux déplacer sur mobile).
3. Ouvre l’onglet « Avancé »
Dans le panneau de gauche, clique sur Avancé → Ordre.
Tu verras une option avec deux flèches : Début et Fin.
4. Change l’ordre pour la version mobile
Assure-toi d’être bien dans la vue Mobile (icône en bas à gauche de l’éditeur Elementor).
Puis, sélectionne Fin à la place de Début.
👉 Cela indique à Elementor de placer cette colonne après la suivante sur mobile.
5. Vérifie la deuxième colonne
Fais la même vérification sur la deuxième colonne pour t’assurer que son ordre est bien réglé.
Tu devrais maintenant avoir un affichage image → texte → image → texte, bien plus logique sur petit écran.
6. Enregistre tes modifications
Clique sur Mettre à jour / Publier pour sauvegarder ton travail.
Et voilà, en quelques clics, tes colonnes s’affichent dans le bon ordre sur mobile
Astuce : pense à ton mobile dès la conception
Le meilleur moyen d’éviter ces ajustements après coup, c’est d’y penser dès la création de ta maquette.
Quand tu esquisses ton site sur papier ou sur Figma, imagine déjà comment chaque section se transformera sur mobile.
Tu verras vite quelles colonnes devront être inversées pour garder une lecture fluide et logique.
Maintenant que tu sais inverser les colonnes sur Elementor mobile, ton site va être bien plus clair et agréable à parcourir sur smartphone.
Teste cette astuce sur une de tes sections, et tu verras la différence tout de suite !
Si tu as une autre version d’Elementor, peut-être que cette vidéo te conviendra plus👇
