Tu as créé une magnifique page sur Elementor avec une alternance texte-image qui rend super bien sur ordinateur… Mais quand tu regardes sur mobile : c’est la catha !
Tes deux images se retrouvent l’une sous l’autre, ou pire : ton texte important apparaît en dernier alors qu’il devrait être en premier.
Pas de panique, c’est ultra-courant.
En fait, sur mobile, Elementor empile automatiquement tes colonnes de gauche à droite, de haut en bas. Ce qui crée parfois un ordre d’affichage complètement incohérent.
La bonne nouvelle ? Tu peux inverser l’ordre de tes colonnes en 30 secondes chrono, sans toucher une seule ligne de code.
Dans ce tutoriel, tu vas apprendre à :
✅ Inverser l’ordre des colonnes sur mobile (sans changer l’affichage desktop)
✅ Comprendre pourquoi ce problème arrive
✅ Appliquer la solution sur tablette aussi (si besoin)
Tu peux aussi regarder la vidéo tuto juste ici 👇
SOMMAIRE
Pourquoi tes colonnes Elementor s'inversent sur mobile ?
Avant de résoudre le problème, comprends rapidement pourquoi ça arrive.
Le principe d’affichage sur desktop :
Sur ordinateur, tu as suffisamment d’espace horizontal pour placer des colonnes côte à côte :
[Colonne 1 : Texte] [Colonne 2 : Image]
[Colonne 3 : Image] [Colonne 4 : Texte]
Résultat : une belle alternance texte-image-image-texte qui donne du rythme à ta page.
Ce qui se passe sur mobile :
Sur smartphone, l’écran est trop étroit pour afficher deux colonnes côte à côte. Alors Elementor empile automatiquement tes colonnes de haut en bas, dans l’ordre de création :
Colonne 1 : Texte
Colonne 2 : Image
Colonne 3 : Image ← Problème ! Deux images se suivent
Colonne 4 : Texte
Résultat : ton alternance parfaite devient un « sandwich » texte-image-image-texte complètement bancal.
Autre problème fréquent : Imagine que ta Colonne 1 contient une image et ta Colonne 2 du texte de présentation important. Sur mobile, l’image apparaît en premier alors que ton texte devrait être lu avant.
C’est exactement pour ça qu’on a besoin d’inverser les colonnes sur mobile.
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
Pour aller plus loin
Checklist : Optimiser ton site Elementor pour mobile
Maintenant que tu sais inverser les colonnes, voici d’autres réglages essentiels pour un rendu mobile parfait :
Espacement et marges
- Réduis les marges internes (padding) des sections sur mobile
- Diminue l’espace entre tes sections
- Vérifie que tes blocs ne débordent pas de l’écran
Typographie
- Réduis la taille des titres (souvent trop gros sur mobile)
- Augmente la hauteur de ligne pour faciliter la lecture
- Vérifie la lisibilité de tes textes sur petit écran
Images
- Assure-toi que tes images ne sont pas coupées
- Vérifie qu’elles ne ralentissent pas le chargement
- Utilise des images optimisées pour mobile
Boutons et CTA
- Vérifie que tes boutons sont facilement cliquables
- Centre tes boutons sur mobile pour faciliter l’accès
- Teste que tous les liens fonctionnent
Organisation générale
- Teste TOUTES tes pages en mode responsive
- – Vérifie sur un vrai smartphone (pas seulement la prévisualisation)
- – Demande l’avis d’un proche qui n’est pas familier avec ton site
Méthode alternative : Conteneurs Flexbox (Elementor nouvelle génération)
Si tu utilises les nouveaux conteneurs Flexbox d’Elementor (disponibles depuis la version 3.16), la manipulation est légèrement différente : Avec conteneurs Flexbox
1. Clique sur ton conteneur* (pas la section)
2. Va dans l’onglet « Mise en page »
3. Dans « Direction », sélectionne la vue Mobile
4. Change la direction pour « Colonne inversée »
Avantage des conteneurs Flexbox : Plus de flexibilité et de contrôle sur la disposition. Tu n’es pas sûr(e) d’utiliser les conteneurs ? Si tu vois « Section » et « Colonne » dans ton panneau, tu utilises l’ancien système. Si tu vois « Conteneur », tu utilises Flexbox.
Conclusion : Un site mobile parfait en 30 secondes
Inverser les colonnes Elementor sur mobile, c’est littéralement l’affaire de quelques clics.
Récapitulatif ultra-rapide :
- Sélectionne ta section
- Va dans Avancé > Responsive
- Active « Inverser les colonnes (Mobile) »
- Vérifie le résultat en mode responsive
Le résultat ? Une expérience utilisateur cohérente sur tous les appareils, sans code ni prise de tête.
Maintenant que tu maîtrises ça, pense à tester toutes tes pages en mode mobile. Tu seras surpris(e) du nombre de petits ajustements qui peuvent transformer l’expérience de tes visiteurs.
Si tu as une autre version d’Elementor, peut-être que cette vidéo te conviendra plus👇
Les questions que tu peux te poser !
C’est normal ! Parfois, la prévisualisation responsive d’Elementor ne reflète pas exactement le résultat final.
Solutions :
1. Publie ou enregistre ta page
2. Ouvre-la dans un nouvel onglet en mode incognito
3. Teste avec un vrai smartphone ou utilise l’outil d’inspection de ton navigateur (F12)
Vérifie que tu as bien :
– Sélectionné la section (pas une colonne ou un widget)
– Cliqué sur l’onglet « Avancé »
– Scrollé jusqu’à la section « Responsive » Si l’option n’existe toujours pas, tu utilises probablement les conteneurs Flexbox (voir méthode alternative ci-dessus).
