Une agence qui gère une trentaine de sites Elementor nous a sollicités pour préparer sa migration progressive vers l’éditeur V4, en commençant par le responsive, considéré à raison comme le chantier le plus structurant. Ses sites reposaient sur une grille de breakpoints assez classique : desktop, tablette paysage, tablette portrait, mobile, chacun avec des valeurs de typographie et d’espacement réglées manuellement, breakpoint par breakpoint, sur chaque page.
Le système d’unités responsive introduit avec l’éditeur V4 ne remplace pas les breakpoints par magie, mais il change profondément la manière de penser l’adaptation d’un design à la largeur d’écran, en introduisant des valeurs qui évoluent de façon continue entre deux bornes, plutôt que par paliers fixes.
Ce que change réellement une unité fluide
Une taille de police réglée en pixels fixes sur chaque breakpoint produit un effet de saut visible au franchissement exact de la largeur seuil : la police change brutalement de taille à huit cent quatre-vingt-un pixels de large, par exemple, sans transition. Une valeur fluide, construite sur le principe de la fonction CSS clamp(), interpole la taille entre une valeur minimale et une valeur maximale sur toute la plage de largeurs intermédiaire, sans palier brutal.
font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.75rem);Sur ce projet, remplacer trois réglages de breakpoint distincts (desktop, tablette, mobile) par une seule valeur fluide de ce type a réduit le nombre de points de contrôle à vérifier lors d’une recette, tout en produisant un rendu visuellement plus soigné, sans à-coup au redimensionnement de la fenêtre.
Ce qui ne devient pas fluide pour autant
Toutes les propriétés ne se prêtent pas à une transition continue. Le nombre de colonnes d’une grille de produits, par exemple, reste une valeur entière par nature : on ne peut pas afficher deux virgule cinq colonnes. Ce type de réglage continue de dépendre de breakpoints fixes classiques, et la migration vers la V4 n’y change rien fondamentalement, si ce n’est la manière dont ces breakpoints se définissent dans l’éditeur.
- Typographie et espacement (marges, paddings) : de bons candidats à l’unité fluide.
- Nombre de colonnes, visibilité d’un élément (afficher/masquer) : restent gérés par breakpoint fixe.
- Largeur d’image ou de conteneur : fluide dans la majorité des cas, sauf contrainte de mise en page précise.
- Position d’éléments superposés : à traiter au cas par cas, souvent encore en breakpoint fixe pour éviter un chevauchement imprévisible.
Méthode de migration progressive utilisée sur ce projet
- Repérer, page type par page type, les propriétés typographiques qui varient sur trois breakpoints ou plus avec une progression régulière (ce sont les meilleurs candidats à la conversion fluide).
- Calculer les bornes minimale et maximale à partir des valeurs existantes aux breakpoints extrêmes du site, sans réinventer une échelle typographique entièrement nouvelle à cette étape.
- Convertir un gabarit de page à la fois, en conservant l’ancien réglage par breakpoint en commentaire dans la documentation interne du projet, pour comparaison rapide en cas de doute visuel.
- Laisser volontairement les réglages de colonnes et de visibilité en breakpoints fixes classiques, sans chercher à tout fluidifier par principe.
Un piège fréquent : la valeur minimale trop basse
Sur les premiers gabarits convertis, une erreur récurrente est apparue : une valeur minimale calculée trop bas, produisant un texte à peine lisible sur les très petits écrans, en dessous de trois cent vingt pixels de large. La correction consiste à toujours vérifier la valeur minimale réellement atteinte sur le plus petit appareil ciblé par le site, pas seulement à faire confiance à la formule mathématique de calcul de la fonction fluide.
Une unité fluide bien calculée disparaît complètement de l’attention du visiteur, elle ne se voit jamais en tant que telle, contrairement à un breakpoint mal placé qui saute aux yeux au moindre redimensionnement de fenêtre.
En résumé
La migration des breakpoints historiques vers le système d’unités fluides de l’éditeur V4 ne consiste pas à supprimer la notion de breakpoint, mais à réserver son usage aux propriétés qui exigent réellement des paliers discrets, tout en confiant la typographie et l’espacement à une progression continue plus soignée visuellement et plus simple à maintenir dans la durée.
