Kowal PageBuilder Slider Fix – un slider responsive sans compromis
Magento PageBuilder propose un slider natif qui, par conception, constitue une excellente solution :
il ne nécessite aucune bibliothèque externe,
il est entièrement intégré à l’éditeur de contenu,
il prend en charge des images distinctes pour desktop et mobile,
il fonctionne correctement avec le cache, Varnish et PageBuilder Preview.
C’est précisément pour cette raison qu’il vaut la peine de l’utiliser.
Malheureusement, dans la pratique, de nombreuses boutiques Magento rencontrent les mêmes problèmes, en particulier avec des layouts modernes et responsives.
Problèmes du slider natif PageBuilder
Dans la configuration standard de PageBuilder :
la hauteur du slider est imposée de manière rigide (
min-height),les proportions de l’image ne découlent pas des dimensions réelles du visuel,
sur mobile, des marges vides apparaissent au-dessus et au-dessous du slider,
le slider ne réagit pas toujours correctement aux changements de breakpoints,
le CSS et le JS de PageBuilder imposent des comportements difficiles à surcharger sans intervenir dans le core.
Le résultat ?
Le slider s’affiche souvent correctement sur un seul écran –
mais sur d’autres résolutions, il perd ses proportions ou son esthétique.
Que fait notre module ?
Kowal PageBuilder Slider Fix résout ces problèmes sans désactiver PageBuilder et sans intervenir dans le cœur de Magento.
Le module :
supprime l’imposition rigide de la hauteur (
min-height) par PageBuilder,permet au slider d’adapter dynamiquement sa hauteur à l’image,
conserve la pleine largeur (
100% viewport width),gère correctement les images distinctes pour desktop et mobile,
fonctionne uniquement là où le slider existe réellement.
Comment fonctionne-t-il techniquement ?
il utilise
text/x-magento-init– le mécanisme natif de Magento,il ne charge pas de JS global sur chaque page,
il fonctionne par slider, et non globalement,
il fonctionne avec le mécanisme
data-background-imagesde PageBuilder,il est compatible avec PageBuilder Preview et l’éditeur CMS.
Cela signifie :
✔ pas de conflits
✔ pas de problèmes de cache
✔ aucun impact sur les performances de la boutique
À qui s’adresse ce module ?
Ce module est idéal si :
vous utilisez PageBuilder Slider ou Banner Slider,
vous recherchez une responsivité parfaite,
vous souhaitez conserver les solutions natives de Magento,
vous ne voulez pas installer de sliders externes lourds,
vous accordez de l’importance à l’esthétique sur mobile, sans marges vides.
Pourquoi ne pas utiliser un slider externe ?
Les sliders externes :
chargent souvent de grandes bibliothèques JS,
ne fonctionnent pas toujours parfaitement avec PageBuilder,
peuvent poser problème avec le cache / Varnish,
compliquent l’édition de contenu pour les personnes non techniques.
Notre module corrige uniquement ce qui doit l’être – rien de plus.
Résumé
Kowal PageBuilder Slider Fix :
préserve les avantages du slider natif Magento,
élimine ses principaux défauts,
fonctionne de manière stable sur desktop et mobile,
est léger, rapide et sûr,
est prêt à être utilisé dans des boutiques en production.
Si vous utilisez PageBuilder – ce module devrait en être le complément naturel.
Questions et réponses
Projet : toursport.pl
Technologie : Magento 2 + PageBuilder
Problème : le slider de la page d’accueil perdait ses proportions sur mobile : des marges vides apparaissaient au-dessus et au-dessous du visuel, et la hauteur était imposée artificiellement, quelle que soit la taille de l’écran.
Défi
L’équipe Toursport utilisait le slider natif de PageBuilder en raison de :
la facilité de modification du contenu,
la possibilité de définir des images distinctes pour desktop / mobile,
la bonne intégration avec le cache et les performances.
Dans le même temps, le comportement standard de PageBuilder entraînait :
un rendu peu esthétique du slider sur smartphone,
un non-respect des proportions de l’image,
des problèmes lors des changements de résolution.
Solution
Le module Kowal PageBuilder Slider Fix a été appliqué, ce qui a permis de :
supprimer le
min-heightfixe,permettre au slider d’adapter sa hauteur aux proportions réelles de l’image,
conserver toute la largeur de l’écran,
gérer correctement les images mobiles.
Résultat
✔ responsivité idéale sur tous les appareils,
✔ absence de marges vides sur mobile,
✔ conservation du PageBuilder natif sans sliders supplémentaires,
✔ meilleure perception visuelle de la page d’accueil.
Le module a été déployé sans impact sur les performances et sans nécessité de modifier le contenu dans PageBuilder.


















