Pendant longtemps, Elementor n’a proposé que deux points de rupture : Tablette et Mobile. Suffisant pour la majorité des sites, mais frustrant pour toute mise en page qui casse différemment entre un iPad Mini en portrait et un ordinateur portable 13 pouces. Depuis la version 3.2, sortie début 2021, Elementor a ouvert un panneau de réglages permettant d’activer jusqu’à six breakpoints supplémentaires, chacun personnalisable en largeur.
C’est une fonctionnalité puissante, mais qui se paie en complexité et en poids de CSS si elle est activée sans discernement. Voici comment nous l’abordons sur nos projets.
Les six breakpoints additionnels disponibles
Dans Elementor > Réglages > Style > Additional Breakpoints, il est possible d’activer, en plus des breakpoints Tablette (768px) et Mobile (767px) par défaut :
- Mobile Portrait / Mobile Landscape : pour distinguer un téléphone tenu verticalement d’un téléphone tenu horizontalement.
- Tablet Extra : entre tablette et petit écran d’ordinateur.
- Laptop : pour cibler les écrans d’ordinateur portable, souvent plus étroits que les écrans de bureau.
- Widescreen : au-delà d’une largeur définie, pour les très grands écrans où un contenu peut sembler perdu s’il n’est pas recadré.
Chaque breakpoint activé devient immédiatement disponible dans le sélecteur d’appareil de l’éditeur, avec sa propre icône, et chaque contrôle de style (marges, tailles de police, colonnes) peut recevoir une valeur spécifique à ce point de rupture.
Ce que cela change dans le CSS généré
Chaque breakpoint actif ajoute potentiellement une media query supplémentaire dans le fichier CSS généré pour chaque page. Sur un widget qui n’a aucune valeur personnalisée à un breakpoint donné, Elementor n’ajoute rien — mais dès qu’une seule propriété diffère, la media query complète est écrite.
/* Exemple simplifié pour un titre avec Laptop + Mobile actifs */
.elementor-1 .elementor-element-abc123 h2 { font-size: 42px; }
@media(max-width:1024px){
.elementor-1 .elementor-element-abc123 h2 { font-size: 34px; }
}
@media(max-width:767px){
.elementor-1 .elementor-element-abc123 h2 { font-size: 26px; }
}
Sur une page qui compte plusieurs dizaines de widgets, activer les six breakpoints en même temps, « au cas où », peut faire gonfler sensiblement le poids du fichier CSS généré, même si la majorité des widgets n’utilisent en réalité qu’un ou deux points de rupture personnalisés.
Comment choisir sans excès
Notre méthode consiste à partir des vrais problèmes rencontrés plutôt que d’activer tous les breakpoints par précaution :
- Identifier, sur une maquette ou un audit d’un site existant, les largeurs où une mise en page casse réellement.
- N’activer que les breakpoints correspondant à ces largeurs précises.
- Documenter, dans le Kit d’agence, la liste des breakpoints activés par défaut et pourquoi.
- Revoir cette liste à chaque nouveau projet plutôt que de la reconduire par habitude.
Le breakpoint Widescreen, un cas à part
Contrairement aux autres, Widescreen fonctionne en min-width et non en max-width : il cible les écrans au-delà d’une largeur donnée, typiquement 2400px. Il est particulièrement utile pour empêcher un conteneur en pleine largeur de s’étirer démesurément sur un moniteur 4K, un défaut visuel fréquent sur les sites qui n’ont jamais été testés au-delà de 1920px.
| Breakpoint | Type de règle | Cas d’usage typique |
|---|---|---|
| Mobile / Mobile Extra | max-width | Distinguer portrait et paysage sur téléphone |
| Tablet Extra | max-width | Petites tablettes ou grands téléphones |
| Laptop | max-width | Ordinateurs portables 13-14 pouces |
| Widescreen | min-width | Moniteurs très larges, au-delà de 2400px |
Sur nos projets récents, deux breakpoints supplémentaires suffisent presque toujours : Laptop pour rattraper les mises en page en grille qui cassent avant la tablette, et Widescreen pour contenir les sections pleine largeur sur les grands écrans.
En résumé
Les breakpoints additionnels d’Elementor offrent un contrôle fin, mais chaque point de rupture activé est un multiplicateur potentiel de poids CSS sur l’ensemble du site. Mieux vaut partir des problèmes réels de mise en page constatés qu’activer les six breakpoints par réflexe : un site avec deux ou trois breakpoints bien choisis reste plus léger et plus facile à maintenir qu’un site qui en active six sans jamais s’en servir vraiment.
