Homepage Banner Grid - collage de imágenes clicable, tres diseños responsive, sin tocar la plantilla

Tu página de inicio tiene unos tres segundos para señalar un camino

Un carrusel que todo el mundo se salta y una fila de «productos destacados» no son merchandising. Una cuadrícula de banners sí lo es: unas pocas imágenes, cada una con una ruta pensada hacia la parte del catálogo a la que realmente quieres llevar a tus clientes. Este módulo crea esa cuadrícula desde el back office, sin tocar ni un archivo de la plantilla.

Tres diseños, listos para rellenar

• Feature Split (bloque protagonista) — un mosaico grande y cuatro secundarios. Cinco en total, para una tienda con un mensaje principal y algunas rutas de apoyo.
• Mosaic (mosaico) — una cuadrícula rica de dieciséis mosaicos, al estilo de una página de revista, para catálogos con muchas categorías que merece la pena destacar.
• Showcase (escaparate equilibrado) — una composición editorial de cinco mosaicos, para cuando nada debe destacar por encima del resto.

Cada diseño tiene una vista previa en vivo en la página de configuración, así que eliges mirando, no adivinando.

Cómo funciona

• 1. Elige un diseño — haz clic en una de las tres tarjetas de vista previa; la página se recarga y muestra los huecos de imagen de ese diseño.
• 2. Ajusta las opciones de estilo — zoom al pasar el ratón, títulos superpuestos, esquinas redondeadas, apertura en una pestaña nueva y el espaciado entre mosaicos, de 0 a 16 px.
• 3. Rellena los mosaicos — sube una imagen para cada uno, define el enlace que abre y añade un título si quieres que aparezca como texto superpuesto. Guarda y ya está publicado en tu página de inicio.

Cada mosaico es un enlace de verdad

Un mosaico puede abrir una categoría, una marca, un producto o cualquier página que quieras: una ruta interna como /3-clothes o una dirección https:// completa. Los enlaces se validan, de modo que solo se aceptan rutas internas y URL http(s), y todo lo demás se ignora. Los títulos sirven a la vez como texto superpuesto y como etiqueta de accesibilidad del enlace.

Responsive, con una sola hoja de estilos

La versión 1.x incluía una hoja de estilos distinta para cada ancho fijo en píxeles — 980, 1000, 1110, 1170 — y una plantilla diferente por cada versión de PrestaShop. Las diez hojas de estilos y las siete plantillas han desaparecido: ahora hay una única hoja de estilos CSS-Grid y una sola plantilla basada en datos. Cada diseño pasa por sí solo del escritorio a una cuadrícula de dos columnas en tablet y a una sola columna en móvil. Ya no tienes que elegir un ancho en píxeles para tu tienda.

Comprueba su propia instalación

El panel Estado, en la parte superior de la página de configuración, te indica si la cuadrícula está realmente enganchada a la página de inicio y si la carpeta de imágenes tiene permisos de escritura, con un botón Mostrar en la página de inicio que lo resuelve en un clic cuando no es así. Las viejas instrucciones del tipo «pon la carpeta en 777» y «mueve el módulo a la primera posición» dan paso a comprobaciones reales.

Más seguro que el módulo al que sustituye

Las imágenes subidas se validan como imágenes reales frente a una lista blanca de extensiones y se guardan en libs/custom/ con nombres propios, así que ninguna actualización futura del módulo podrá sobrescribir tus banners con los ejemplos incluidos, un fallo latente del diseño de la 1.x. La hoja de estilos se carga mediante actionFrontControllerSetMedia en lugar del antiguo hook displayHeader, y el bloque se renderiza a través de la interfaz de widgets de PrestaShop, por lo que también puedes colocarlo donde quieras con {widget name='blockpicturecollagepro'}.

Compatibilidad

PrestaShop 1.7, 8 y 9, en ocho idiomas: alemán, español, francés, inglés, italiano, neerlandés, polaco y turco. Compatible con multitienda, así que puedes subir banners distintos en cada tienda. Se engancha al hook Home al instalarse y nunca modifica ni sobrescribe un archivo de la plantilla: al desinstalarlo se eliminan sus ajustes, enlaces, títulos e imágenes subidas y tu plantilla queda exactamente como estaba.

Preguntas frecuentes

¿Qué tamaño deben tener mis banners?

Los mosaicos recortan la imagen para rellenar el espacio, así que las dimensiones exactas no son críticas. Unos 1200×800 px para los mosaicos grandes y 600×400 px para los pequeños se ven nítidos. Se aceptan JPG, PNG, GIF y WEBP.

¿Puede llevar cada mosaico a un sitio distinto?

Sí: cada mosaico tiene su propia imagen, su enlace y un título opcional, y puede apuntar a cualquier categoría, marca, producto o página.

¿Funciona en el móvil?

Sí. Una sola hoja de estilos CSS-Grid adapta cada diseño desde el escritorio a una cuadrícula de dos columnas en tablet y a una única columna en móvil.

¿Tengo que editar mi plantilla?

No. El módulo se engancha al hook Home durante la instalación. Si tu plantilla usa un hook de inicio personalizado, colócalo con {widget name='blockpicturecollagepro'}.

La cuadrícula no aparece en mi página de inicio, ¿qué hago?

El panel Estado te dice si está bien enganchada y ofrece un botón «Mostrar en la página de inicio» de un solo clic. También puedes revisar el hook displayHome en Diseño → Posiciones y subir la cuadrícula por encima de tu carrusel.

¿Puedo usar banners diferentes en cada tienda?

Sí, el módulo es compatible con multitienda: los banners se suben tienda por tienda.

¿Qué pasa con mis banners cuando el módulo se actualiza?

Nada. Las imágenes se guardan en libs/custom/ con nombres propios precisamente para que ninguna actualización pueda sustituirlas por los ejemplos incluidos.