# Breakpoints personnalisés d’Elementor : six points de rupture et leurs pièges

> Depuis Elementor 3.2, jusqu'à six points de rupture additionnels sont disponibles. Voici leur impact réel sur le CSS généré et comment les choisir sans excès.

- Auteur : Clément Hadrot
- Publié le : 2021-05-04
- Mis à jour le : 2021-05-04
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/breakpoints-personnalises-elementor-six-points-rupture/

## L’essentiel

- Les deux breakpoints d'origine (mobile, tablette) restent le socle par défaut
- Chaque breakpoint activé ajoute une media query à chaque fichier CSS de page
- Trop de breakpoints actifs sur trop peu de widgets responsives alourdit inutilement le CSS

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.

> L'essentiel à retenir : Les deux breakpoints d'origine (mobile, tablette) restent le socle par défaut ; Chaque breakpoint activé ajoute une media query à chaque fichier CSS de page ; Trop de breakpoints actifs sur trop peu de widgets responsives alourdit inutilement le CSS

## 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 :

1. Identifier, sur une maquette ou un audit d'un site existant, les largeurs où une mise en page casse réellement.
2. N'activer que les breakpoints correspondant à ces largeurs précises.
3. Documenter, dans le Kit d'agence, la liste des breakpoints activés par défaut et pourquoi.
4. 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.