Kowal PageBuilder Slider Fix – slider responsive sin compromisos
Magento PageBuilder ofrece un slider nativo que, en principio, es una solución excelente:
no requiere bibliotecas externas,
está totalmente integrado con el editor de contenidos,
admite imágenes separadas para desktop y mobile,
funciona correctamente con cache, Varnish y PageBuilder Preview.
Y precisamente por eso merece la pena utilizarlo.
Por desgracia, en la práctica muchas tiendas Magento se encuentran con los mismos problemas, especialmente en layouts modernos y responsive.
Problemas del slider nativo de PageBuilder
En la configuración estándar de PageBuilder:
la altura del slider se fuerza de forma rígida (
min-height),las proporciones de la imagen no se basan en las dimensiones reales del gráfico,
en mobile aparecen márgenes vacíos por encima y por debajo del slider,
el slider no siempre reacciona correctamente al cambio de breakpoints,
el CSS y el JS de PageBuilder imponen comportamientos difíciles de sobrescribir sin intervenir en el core.
¿El resultado?
El slider a menudo solo se ve bien en una pantalla –
y en otras resoluciones pierde sus proporciones o su estética.
¿Qué hace nuestro módulo?
Kowal PageBuilder Slider Fix resuelve estos problemas sin desactivar PageBuilder y sin intervenir en el core de Magento.
El módulo:
elimina el forzado rígido de la altura (
min-height) por parte de PageBuilder,permite que el slider ajuste dinámicamente su altura a la imagen,
mantiene el ancho completo (
100% viewport width),gestiona correctamente imágenes separadas para desktop y mobile,
funciona solo donde el slider realmente existe.
¿Cómo funciona técnicamente?
utiliza
text/x-magento-init– el mecanismo nativo de Magento,no carga JS global en cada página,
funciona por cada slider, no de forma global,
trabaja con el mecanismo
data-background-imagesde PageBuilder,es compatible con PageBuilder Preview y con el editor CMS.
Esto significa:
✔ sin conflictos
✔ sin problemas de cache
✔ sin impacto en el rendimiento de la tienda
¿Para quién es este módulo?
Este módulo es ideal si:
utiliza PageBuilder Slider o Banner Slider,
le importa una responsividad perfecta,
quiere conservar las soluciones nativas de Magento,
no quiere instalar sliders externos pesados,
le importa la estética en mobile, sin márgenes vacíos.
¿Por qué no un slider externo?
Los sliders externos:
a menudo cargan grandes bibliotecas JS,
no trabajan de forma ideal con PageBuilder,
pueden resultar problemáticos con cache / Varnish,
dificultan la edición de contenidos a usuarios no técnicos.
Nuestro módulo corrige exactamente lo necesario, y nada más.
Resumen
Kowal PageBuilder Slider Fix:
conserva las ventajas del slider nativo de Magento,
elimina sus principales inconvenientes,
funciona de forma estable en desktop y mobile,
es ligero, rápido y seguro,
está listo para usarse en tiendas en producción.
Si utiliza PageBuilder, este módulo debería ser su complemento natural.
Proyecto: toursport.pl
Tecnología: Magento 2 + PageBuilder
Problema: El slider de la página de inicio perdía sus proporciones en móvil: aparecían márgenes vacíos por encima y por debajo de la imagen, y la altura se forzaba artificialmente independientemente del tamaño de la pantalla.
Reto
El equipo de Toursport utilizaba el slider nativo de PageBuilder debido a:
la edición sencilla del contenido,
la posibilidad de configurar imágenes independientes para desktop / móvil,
la buena integración con la caché y el rendimiento.
Al mismo tiempo, el comportamiento estándar de PageBuilder provocaba:
un aspecto poco estético del slider en smartphones,
que no se mantuvieran las proporciones de la imagen,
problemas al cambiar de resolución.
Solución
Se aplicó Kowal PageBuilder Slider Fix, que:
eliminó el
min-heightfijo,permitió que el slider ajustara su altura a las proporciones reales de la imagen,
mantuvo el ancho completo de la pantalla,
gestionó correctamente las imágenes móviles.
Resultado
✔ adaptación responsive perfecta en todos los dispositivos,
✔ sin márgenes vacíos en móvil,
✔ PageBuilder nativo conservado sin sliders adicionales,
✔ mejor percepción visual de la página de inicio.
El módulo se implementó sin afectar al rendimiento y sin necesidad de modificar el contenido en PageBuilder.















