Bloque de Banners en PrestaShop: guía completa del módulo Baires (imágenes y video)

Paso a Paso — Módulo Baires Bloque de Banners

1️⃣ Introducción

El módulo Baires Bloque de Banners permite agregar de forma sencilla banners de imágenes o videos en diferentes secciones de tu tienda PrestaShop 8.1. Es un módulo desarrollado a medida por Baires Servicios, pensado para ofrecer máxima flexibilidad visual sin necesidad de editar código o plantillas. Este módulo es ideal para: destacar promociones, mostrar categorías o productos destacados, incluir videos comerciales, crear sliders o bloques informativos, y mejorar el impacto visual y la experiencia del usuario. 

2️⃣ ¿Para qué sirve?

• ✔ Subir imágenes y videos para ser usados como banners
• ✔ Configurar enlaces, textos alternativos y comportamiento al hacer clic
• ✔ Elegir la posición o sección donde se mostrará el banner
• ✔ Activar y desactivar banners sin eliminarlos
• ✔ Crear múltiples bloques personalizados

3️⃣ Beneficios

• ✅ Mejora la presentación visual de tu tienda
• ✅ No requiere conocimientos técnicos ni edición de código
• ✅ Permite agregar banners ilimitados
• ✅ Compatible con imágenes JPG/PNG/GIF y videos MP4
• ✅ Totalmente integrado con PrestaShop 8.1
• ✅ Optimizado para velocidad y carga responsiva en móviles

4️⃣ Acceso al módulo

Para ingresar al panel de configuración:

• 1. Ir a Módulos → Módulos instalados.
• 2. Buscar Baires Bloque de Banners.
• 3. Hacer clic en Configurar.

5️⃣ Pantalla principal del módulo: Grupo de Banners

Al ingresar al módulo se muestra la pantalla principal llamada Grupo de Banners, donde se administran todos los bloques o conjuntos de banners creados. En esta vista encontrarás:

• 🔹 Listado de grupos creados: cada grupo con información clave:
• • Nombre de grupo → identificación del bloque.
• • Disposición de la imagen → cómo se acomodarán los banners (horizontal, vertical, slider, mosaico, etc.).
• • Hook → ubicación donde se mostrará el grupo en la tienda.
• • Tipo de contenedor → determina el ancho o comportamiento visual del bloque.
• • Categorías → si el grupo aparece solo en categorías específicas.
• • Posición → orden de aparición respecto a otros bloques.
• • Cronograma → fechas programadas de inicio o finalización.
• • Estado → indica si el grupo está activo o desactivado.

🔹 Botón “Nuevo Grupo”: crea un nuevo bloque de banners. 🔹 Botón “Respaldos”: guarda/restaura configuraciones para evitar pérdida de datos. 

6️⃣ Configuración del Grupo de Banners

Al crear o editar un grupo, se muestra Configuración de Grupo para definir los parámetros del bloque:

• 🔸 Nombre de Grupo — texto interno del grupo.
• 🔸 Disposición de la imagen — p.ej., “Imagen ampliada (zoom)”.
• 🔸 Hook — p.ej., displayTop.
• 🔸 Tipo de Contenedor — p.ej., Normal.
• 🔸 Eliminar espacios de margen — opción Sí/No.
• 🔸 Block position — orden del grupo en el hook.
• 🔸 Activo — interruptor Sí/No.
• 🔸 Fecha desde — opcional (si se deja vacío, duración indefinida).
• 🔸 Fecha hasta — fecha de finalización.

7️⃣ Configuración de Categorías

Debajo aparece el bloque Categorías para definir dónde se mostrará el grupo. Incluye: Contraer todo, Expandir todo, Marcar todas, Desmarcar todas, cuadro de búsqueda y listado de categorías (ejemplo visible: Inicio). Seleccioná una o varias categorías y luego Guardar. 

8️⃣ Configurar un Grupo existente

En el listado general, con el grupo activo, usá el botón Configurar para editar nombre, disposición, hook, tipo de contenedor, posición, fechas, categorías y estado del grupo. Este botón modifica la configuración general del grupo (no carga imágenes). Recordá Guardar cambios. 

9️⃣ Gestión de bloques del grupo

Con el grupo creado, el botón Bloques abre “Bloque de Banners del Grupo”. Aquí definís el contenido que se mostrará en el sitio:

• 🖼️ IMAGE BLOCK: agrega un bloque de imagen (promociones, marcas, campañas).
• 🎥 VIDEO BLOCK: agrega un bloque de video (promos/institucionales).

Ambos tipos pueden convivir en el mismo grupo. El botón Volver a Grupos retorna al listado. 

🔟 Crear un Image Block (ejemplo práctico)

Ejemplo: crear un banner de imagen para una promoción destacada dentro del grupo “Imágenes x 4”. En “Bloque de Banners del Grupo | Imágenes x 4” hacer clic en IMAGE BLOCK.

• 🖼️ Imagen del Banner — ejemplo: promo-envio-gratis.jpg.
• 🏷️ Etiqueta ALT — ejemplo: Promoción Envío Gratis.
• ⚡ Carga diferida — ejemplo: No (carga inmediata).
• 🔗 Enlace (opcional) — ejemplo: https://www.tutienda.com.ar/promociones.
• 🪟 Destino del enlace — ejemplo: Ventana activa.
• 📐 Tamaño del bloque – Escritorio (Requerido) — ejemplo: 1/12 = FullWidth: 1920px.
• 📱 Tamaño del bloque – Móviles (Requerido) — ejemplo: 1/12 = 60px.
• 🎨 Clase para el bloque — ejemplo: banner-promo-envio.
• ✨ Efecto al pasar el mouse — ejemplo: Sin efecto.
• 📝 Contenido del bloque (opcional) — ejemplo:
  <h3>Envío gratis a todo el país</h3><p>Válido por tiempo limitado</p>
• 📍 Posición del bloque flotante — dejar vacío si no se usa contenido flotante.
• 👥 Grupo de usuarios — ejemplo: Visitante, Invitado, Cliente.

💾 Guardar para crear el Image Block. Resultado: el grupo “Imágenes x 4” contiene un banner promocional visible en desktop y mobile, con enlace y segmentación para todos los usuarios. 

🧱 11: Crear un Bloque de Video

Tras seleccionar VIDEO BLOCK:

• 1️⃣ Video del Banner — subir archivo (ej.: promo-home.mp4).
• 2️⃣ Reproducción infinita — Sí recomendado.
• 3️⃣ Controles de reproducción — No recomendado.
• 4️⃣ Reproducción automática — requiere video silenciado — Sí recomendado.
• 5️⃣ Video silenciado — Sí recomendado.
• 6️⃣ Carga diferida — Sí recomendado.
• 7️⃣ Tamaño del bloque – Escritorio (Requerido) — ejemplo: 1/12 ⇒ FullWidth (160px / 1920px).
• 8️⃣ Tamaño del bloque – Móviles (Requerido) — ejemplo: 1/12 ⇒ 60px.
• 9️⃣ Grupo de Usuarios — seleccionar quiénes verán el banner (p.ej., Visitante, Cliente).

🧪 Ejemplo completo: Video promo-home.mp4 · Autoplay: Sí · Silenciado: Sí · Loop: Sí · Controles: No · Escritorio: FullWidth · Móvil: 1/12 · Usuarios: Visitante + Cliente. Guardar para finalizar.