Lorsque vous créez une page d’atterrissage sur Elementor, la grille de bureau est parfaite: trois colonnes, un ordre strict, tout respire. Ouvrez-la sur une tablette et la troisième colonne passe à la ligne, casse le rythme, laisse un vide à droite. Cela vous semble familier?

Par défaut, Elementor renvoie à la ligne les colonnes qui ne tiennent pas sur une rangée sur les écrans étroits. Mais que faire si sur tablette vous avez besoin non pas de trois, mais exactement de deux colonnes par rangée, sans rupture ni espace vide? Ou sur mobile, non pas une, mais deux?

Voici deux méthodes qui fonctionnent: la méthode native (pour les versions Elementor 2024 et ultérieures) et une méthode en CSS personnalisé (pour un contrôle total sur toutes les versions). Les deux sont testées et n’entrent pas en conflit avec l’optimisation du DOM.

💡 Aperçu rapide:

• Définissez la largeur des colonnes dans Elementor via l’onglet Avancé pour chaque point de rupture séparément
• Si les réglages standard ne suffisent pas, ajoutez du CSS personnalisé avec flex-wrap et des media queries
• Vérifiez la mise en page sur tous les appareils: les colonnes se réorganisent sans rupture ni espace vide

Le processus est clairement montré dans cette vidéo:

1. Méthode native: largeurs de colonnes responsives

À partir d’Elementor 3.18+ (et surtout avec le passage aux conteneurs Flexbox en 2024), vous pouvez contrôler la largeur des colonnes sur chaque appareil sans une seule ligne de code.

Créez une section avec des colonnes

Ajoutez une nouvelle section et choisissez une structure à trois colonnes:

Dupliquez chacune des trois colonnes pour en obtenir six. Cela est nécessaire pour que sur tablette, les colonnes se réorganisent en deux rangées de deux, au lieu de laisser la troisième toute seule:

Pour visualiser la mise en page, remplissez les colonnes avec des chiffres en utilisant le widget «Titre», afin que l’aperçu montre immédiatement quelle colonne va où:

Définir la largeur pour chaque appareil

Allez dans les paramètres de chaque colonne → onglet Avancé. Dans la section Largeur, passez en mode responsive (icône tablette/téléphone) et définissez les valeurs conformément à la documentation Elementor:

• Bureau: trois colonnes par rangée (la largeur sera divisée automatiquement)
• Tablette: deux par rangée
• Mobile: une par rangée (ou deux, si vous avez également besoin de deux sur mobile)

Point clé: la largeur est définie pour chacune des six colonnes séparément, Elementor applique la valeur à toutes les colonnes d’une même section. Il n’y aura aucun retour à la ligne intempestif car sur tablette, six colonnes donnent exactement deux rangées de deux.

2. CSS personnalisé: contrôle total

La méthode native couvre la plupart des scénarios, mais parfois vous avez besoin d’un nombre différent de colonnes sur tablette (2 au lieu de 3) et sur mobile, d’une disposition non standard (2 au lieu de 1). Ou bien vous utilisez une ancienne version d’Elementor sans largeurs responsives. Dans ce cas, passez au CSS.

Attribuez une classe CSS à la section

Ouvrez les paramètres de la section → onglet Avancé → champ Classes CSS. Saisissez une classe unique, par exemple elementor-custom-columns:

Ajoutez les règles CSS

Insérez le code dans les paramètres de la section (onglet Avancé → CSS personnalisé) ou dans l’outil de personnalisation du thème (Apparence → Personnaliser → Styles additionnels). Voici la version actuelle:

1
selector.elementor-custom-columns .elementor-container {
2
  flex-wrap: wrap;
3
  justify-content: center;
4
}

Maintenant, les largeurs de colonnes pour chaque appareil via des media queries. Pour les sections (Sections), utilisez le sélecteur .elementor-top-column, pour les conteneurs (Containers), .e-con-inner > .e-con:

1
/* Base: three columns on desktop */
2
.elementor-custom-columns .elementor-top-column {
3
  width: 33.33%;
4
}
5
 
6
/* Tablet: two columns */
7
@media (min-width: 768px) and (max-width: 1024px) {
8
  .elementor-custom-columns .elementor-top-column {
9
    width: 50%;
10
  }
11
}
12
 
13
/* Mobile: one column */
14
@media (max-width: 767px) {
15
  .elementor-custom-columns .elementor-top-column {
16
    width: 100%;
17
  }
18
}

Ce qui se passe ici: flex-wrap: wrap permet le retour à la ligne des colonnes lorsqu’elles ne tiennent pas sur une rangée, et justify-content: center centre les colonnes restantes (sans espace vide à droite). Les media queries redéfinissent la largeur à chaque point de rupture, exactement le nombre de colonnes par rangée souhaité.

Résultat sur les appareils

Sur bureau, trois colonnes bien alignées:

Sur tablette, exactement deux par rangée, sans rupture ni espace vide:

Sur mobile, une colonne en pleine largeur:

Pour ceux qui ont activé l’optimisation du DOM

Si dans les paramètres d’Elementor (Elementor → Paramètres → Expériences) l’option Optimisation du DOM améliorée est active, les sélecteurs changent, .elementor-row disparaît. Le CSS adapté pour ce mode:

1
selector.elementor-custom-columns {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
}
6
 
7
.elementor-custom-columns .elementor-top-column {
8
  width: 33.33%;
9
}
10
 
11
@media (min-width: 768px) and (max-width: 1024px) {
12
  .elementor-custom-columns .elementor-top-column {
13
    width: 50%;
14
  }
15
}
16
 
17
@media (max-width: 767px) {
18
  .elementor-custom-columns .elementor-top-column {
19
    width: 100%;
20
  }
21
}

Un exemple de code vérifié pour ce scénario est également disponible dans ce Gist GitHub de oooh-boi, fonctionnel, testé sur Elementor 3.19+ avec l’optimisation du DOM activée.

Quelle méthode choisir: tableau comparatif

Si vous avez une version récente d’Elementor et une grille standard (2-4 colonnes), utilisez la méthode native, elle est plus rapide et ne nécessite pas de CSS. Si vous avez besoin d’une disposition non standard, que vous utilisez une ancienne version du plugin ou que l’optimisation du DOM est activée, le CSS personnalisé vous donne un contrôle total.

⁉️🤔 Foire aux questions

Pourquoi les colonnes passent-elles à la ligne avec une rupture sur tablette?

Par défaut, Elementor utilise flex-wrap: nowrap pour la rangée de colonnes. Lorsque trois colonnes ne tiennent pas dans la largeur d’une tablette, une rupture se forme: la deuxième colonne sur la première rangée, la troisième passe à la deuxième et reste seule. Avec flex-wrap: wrap et des largeurs de colonnes à la moitié de la rangée sur tablette, six colonnes s’intègrent exactement en trois rangées de deux, sans rupture. justify-content: center centre les colonnes s’il y en a moins que nécessaire dans la dernière rangée. Solution: soit la largeur responsive via l’interface (méthode 1), soit flex-wrap: wrap avec des media queries (méthode 2).

La méthode fonctionne-t-elle avec les conteneurs (conteneurs Flexbox)?

Oui, mais les sélecteurs sont différents. Pour les conteneurs, au lieu de .elementor-top-column, utilisez .e-con-inner > .e-con, et au lieu de .elementor-container, le conteneur lui-même. La méthode responsive native (n°1) fonctionne avec les conteneurs sans modification.

Est-il obligatoire de dupliquer les colonnes?

Oui, si sur tablette vous avez besoin de moins de colonnes par rangée que sur bureau. Par exemple: bureau, 3 colonnes, tablette, 2. Trois colonnes originales ne peuvent pas être réorganisées en deux rangées nettes de deux. Six colonnes (chaque colonne dupliquée) se réorganisent en trois rangées de deux.

Cela entre-t-il en conflit avec les plugins de cache?

Les règles CSS ajoutées via le CSS personnalisé de la section ou l’outil de personnalisation aboutissent dans les styles en ligne ou dans wp_head, elles passent sans problème à travers n’importe quel plugin de cache (WP Rocket, W3 Total Cache, LiteSpeed). Après avoir modifié le CSS, videz le cache.

Que faire si les colonnes sont trop étroites sur mobile?

Vérifiez que la largeur n’est pas héritée du point de rupture tablette. Dans Elementor, les paramètres sont en cascade: le mobile hérite de la tablette, la tablette hérite du bureau. Définissez explicitement la largeur à chaque point de rupture, même si la valeur correspond à celle du point de rupture supérieur.

Cela vaut-il la peine de s’embêter avec du CSS en 2026?

Les paramètres responsifs natifs d’Elementor suffisent pour la plupart des tâches, utilisez-les comme outil principal. Mais lorsque sur tablette vous avez besoin non pas de deux ni de trois, mais disons de quatre colonnes avec des largeurs inégales, le CSS personnalisé reste le seul moyen de faire exactement ce qui est prévu.

Essayez les deux méthodes sur une page de test: commencez par la méthode native (plus rapide), et si vous manquez de flexibilité, utilisez l’approche CSS. La compétence de paramétrer des media queries pour Elementor vous sera utile pour d’autres tâches: polices personnalisées sur les appareils, masquage de blocs, espacements non standard pour les tablettes.