¿Cómo utilizar Banners en el Editor de bloques de Waclis?

Los Banners del Editor de bloques de Waclis permiten crear áreas visuales destacadas para comunicar un mensaje importante dentro de tu Página web.

Puedes utilizarlos para presentar:

• promociones;

• campañas;

• lanzamientos;

• categorías;

• productos destacados;

• servicios;

• novedades;

• eventos;

• beneficios comerciales;

• mensajes institucionales;

• llamados a la acción;

• información temporal.

Dentro del Editor de bloques encontrarás diferentes alternativas en:

Secciones → Banners

Puedes elegir una composición prediseñada y posteriormente personalizar:

• imagen;

• fondo;

• título;

• texto;

• botón;

• enlace;

• colores;

• Overlay;

• altura;

• espacios;

• comportamiento responsive.

¿Qué es un Banner?

Un Banner es una pieza visual destacada que comunica principalmente un mensaje o propuesta concreta.

Por ejemplo:

┌───────────────────────────────────────────────┐
│                                               │
│           NUEVA COLECCIÓN                    │
│                                               │
│    Descubre nuestras últimas novedades       │
│                                               │
│          [ VER PRODUCTOS ]                   │
│                                               │
└───────────────────────────────────────────────┘

Puede contener:

• una fotografía;

• un color de fondo;

• una imagen de fondo;

• un Heading;

• un Paragraph;

• un Button;

• un Link.

No todos los Banners tienen que utilizar todos estos elementos.

¿Cuándo conviene utilizar un Banner?

Utiliza un Banner cuando quieras destacar claramente una propuesta.

Por ejemplo:

ENVÍOS A TODO EL PAÍS

Consulta las alternativas disponibles.

[ VER INFORMACIÓN ]

o:

NUEVA LÍNEA CORPORATIVA

Productos personalizados para empresas.

[ CONOCER COLECCIÓN ]

o:

SOLICITA TU PRESUPUESTO

Cuéntanos qué necesitas y nuestro equipo podrá asesorarte.

[ CONTACTAR ]

Banner, Slider y CTA no son lo mismo

Estas tres secciones pueden compartir:

• título;

• texto;

• botón;

• imagen;

pero cumplen funciones diferentes.

Banner

Es principalmente una pieza visual destacada.

Por ejemplo:

┌───────────────────────────────────────┐
│      NUEVOS PRODUCTOS                │
│      [ VER NOVEDADES ]               │
└───────────────────────────────────────┘

Normalmente comunica una propuesta concreta.

Slider de imágenes

Permite presentar varias piezas dentro de la misma posición.

Por ejemplo:

Slide 1
Nueva colección

↓

Slide 2
Promoción

↓

Slide 3
Novedades

El contenido va cambiando.

CTA o Llamado a la acción

Su objetivo principal es conseguir que el visitante realice una acción.

Por ejemplo:

¿LISTO PARA COMENZAR?

[ SOLICITAR PRESUPUESTO ]

Puede ser visualmente mucho más simple que un Banner.

Regla práctica

Quiero destacar visualmente una campaña o mensaje

Banner

Quiero alternar varias grandes piezas visuales

Slider

Quiero dirigir al visitante hacia una acción concreta

CTA

Un Banner también puede contener un CTA

Por ejemplo:

NUEVA COLECCIÓN

Conoce nuestros últimos productos.

[ VER COLECCIÓN ]

El Banner es la composición completa.

El botón:

Ver colección

es su llamado a la acción.

¿Cómo agregar un Banner?

Ingresa al Editor de bloques de la página o área editable donde quieras incorporarlo.

Después abre:

Secciones

y selecciona:

Banners

Paso 1: abre Banners

Waclis mostrará las composiciones disponibles.

Elige principalmente según:

• orientación;

• proporción;

• posición del texto;

• tamaño de la imagen;

• presencia de Button;

• cantidad de contenido;

• protagonismo visual.

No necesitas conservar:

• fotografías;

• textos;

• colores;

• botones;

del ejemplo.

Todos estos elementos pueden personalizarse.

Paso 2: agrega el Banner

Selecciona el diseño que quieras utilizar.

Una vez incorporado, pasa a formar parte del contenido de la página.

Paso 3: utiliza Navigator para comprender la estructura

Dependiendo del diseño, puedes encontrar una jerarquía similar a:

Section
└── Container
    └── Banner
        ├── Image
        └── Content
            ├── Heading
            ├── Paragraph
            └── Button

O puede tratarse de:

Section
├── Background Image
├── Overlay
└── Content
    ├── Heading
    ├── Paragraph
    └── Button

La estructura exacta puede variar.

Por eso utiliza Navigator cuando no resulte evidente qué elemento debes seleccionar.

Imagen como componente o como fondo

Este punto es especialmente importante.

Un Banner puede mostrar una fotografía mediante:

Image

Un componente de imagen dentro de la estructura.

O mediante:

Background Image

Una imagen configurada como fondo de un contenedor o Section.

Las dos posibilidades pueden producir un resultado visual parecido, pero se editan de manera diferente.

¿Cómo saber cuál utiliza tu Banner?

Selecciona la imagen o utiliza Navigator.

Si seleccionas un componente:

Image

podrás encontrar opciones como:

• Set Image;

• Width;

• Height;

• Alt.

Si la fotografía pertenece al fondo de la estructura, selecciona el contenedor correspondiente y revisa:

Background Image

o las propiedades de Section.

Section también puede utilizar Background

En las configuraciones disponibles para una Section puedes encontrar:

Background

con alternativas como:

• None;

• Image;

• Video.

Para un Banner puede utilizarse una imagen como fondo cuando el diseño lo requiera.

Paso 4: reemplaza la imagen

Si es Image:

Contenido → Set Image

Si se utiliza Background Image:

selecciona el contenedor correspondiente y configura la imagen desde sus opciones de fondo.

No necesitas mantener la imagen de ejemplo

Por ejemplo:

Banner original:

[ fotografía de ejemplo ]

LOREM IPSUM

puede convertirse en:

[ fotografía de productos ]

NUEVA COLECCIÓN

Descubre nuestras últimas incorporaciones.

Elegir una buena imagen para Banner

La imagen debería estar pensada para el espacio que ocupará.

Una fotografía puede tener formato:

• horizontal;

• vertical;

• cuadrado.

Los Banners amplios normalmente utilizan una proporción horizontal.

Por ejemplo:

┌──────────────────────────────────────────────┐
│                                              │
│              IMAGEN HORIZONTAL               │
│                                              │
└──────────────────────────────────────────────┘

Pero recuerda el comportamiento en celular

Una imagen horizontal puede verse en desktop así:

┌────────────────────────────────────────────┐
│ PERSONA        PRODUCTO            FONDO   │
└────────────────────────────────────────────┘

y en celular convertirse en:

┌──────────────┐
│              │
│   PRODUCTO   │
│              │
└──────────────┘

Los extremos pueden quedar recortados.

Esto ocurre especialmente con Cover

Cuando una imagen necesita llenar por completo el área puede utilizarse un comportamiento equivalente a:

object-fit: cover;

o su equivalente en Background Image.

Cover prioriza llenar el contenedor.

Como consecuencia, parte de la imagen puede quedar fuera del encuadre.

Cover no deforma la fotografía

Una diferencia importante:

Cover no debería estirar la imagen para llenar el espacio.

Mantiene su proporción y recorta lo que no entra.

Por ejemplo:

IMAGEN ORIGINAL

┌───────────────────────────────────┐
│ A        PRODUCTO             B  │
└───────────────────────────────────┘

en móvil podría mostrar:

┌──────────────┐
│   PRODUCTO   │
└──────────────┘

Contain

Cuando necesitas ver toda la imagen puede utilizarse:

object-fit: contain;

o una configuración equivalente.

Contain prioriza:

mostrar la imagen completa

pero puede generar espacio libre.

¿Cover o Contain en un Banner?

Depende del objetivo.

Fotografía decorativa o ambiental

Normalmente puede funcionar bien con:

Cover

porque quieres llenar el área.

Producto que debe verse completo

Puede resultar más apropiado:

Contain

si el diseño está preparado para admitir espacios.

No existe una única respuesta correcta

Pregunta:

¿Necesito que el visitante vea toda la imagen o necesito que el fondo ocupe toda el área?

Esto define la elección.

Zona segura de una imagen

Cuando diseñes una fotografía o creatividad para Banner, evita colocar información esencial demasiado cerca de los extremos.

Conceptualmente:

┌───────────────────────────────────────────────┐
│ puede                                     puede│
│ recortarse                             recortarse
│                                               │
│            ┌─────────────────────┐            │
│            │     ZONA SEGURA     │            │
│            │ producto / persona  │            │
│            └─────────────────────┘            │
│                                               │
└───────────────────────────────────────────────┘

La zona central suele tener mayores probabilidades de mantenerse visible al cambiar la proporción.

Evita colocar texto importante dentro de la propia imagen

Una creatividad como:

┌──────────────────────────────────────────────────┐
│ LOGO    50 % DE DESCUENTO        COMPRAR AHORA  │
└──────────────────────────────────────────────────┘

puede verse correctamente en desktop.

Pero en móvil podría terminar mostrando solamente:

┌──────────────┐
│  DESCUENTO   │
└──────────────┘

perdiendo información.

Mejor: utiliza texto editable

Cuando sea posible utiliza:

• Heading;

• Paragraph;

• Button;

del propio Editor de bloques.

Por ejemplo:

[ Imagen visual ]

NUEVA COLECCIÓN

Hasta 30 % en productos seleccionados.

[ VER PRODUCTOS ]

Ventajas de utilizar texto editable

Puedes:

• modificarlo sin editar la imagen;

• cambiar su tamaño responsive;

• cambiar colores;

• modificar alineación;

• actualizar una promoción;

• modificar el Button;

• adaptar el contenido a diferentes dispositivos.

Evita botones falsos dentro de las imágenes

Por ejemplo, si la creatividad contiene gráficamente:

[ COMPRAR AHORA ]

pero ese rectángulo forma parte de la fotografía, el visitante puede interpretar que se trata de un botón.

Es preferible utilizar un Button real.

Paso 5: modifica el Heading

Selecciona el título y reemplázalo.

Ejemplos:

Nueva colección

Productos personalizados

Soluciones para empresas

Novedades

Envíos a todo el país

Mantén el título breve

Un Banner debe poder comprenderse rápidamente.

En lugar de:

Conoce todas las nuevas alternativas de productos que hemos incorporado recientemente a nuestro catálogo

puedes utilizar:

Conoce nuestras novedades

y ampliar debajo.

Paso 6: modifica el texto

El Paragraph puede explicar brevemente la propuesta.

Por ejemplo:

Descubre las últimas incorporaciones disponibles en nuestro catálogo.

o:

Encuentra productos personalizados para acompañar la identidad de tu empresa.

No conviertas el Banner en un artículo

Una estructura eficaz suele ser:

TÍTULO

Texto breve

[ ACCIÓN ]

El visitante puede ampliar después.

Paso 7: configura el Button

Si el diseño contiene un Button, selecciona el elemento correspondiente.

Utiliza un texto claro.

Ejemplos:

Ver productos

Conocer colección

Solicitar presupuesto

Ver novedades

Más información

Evita textos ambiguos

Por ejemplo:

Click aquí

no explica qué ocurrirá.

La acción debe corresponder al mensaje

Por ejemplo:

NUEVA COLECCIÓN

[ VER PRODUCTOS ]

tiene una relación directa.

Mientras:

NUEVA COLECCIÓN

[ CONTACTAR ]

puede ser apropiado solamente si la forma de acceder a esa colección requiere contacto.

Configura correctamente la URL

Selecciona el Link o Button correspondiente y revisa el destino.

Por ejemplo:

Ver productos
→ /productos

o:

Solicitar presupuesto
→ /contacto

según la estructura de tu Página web.

Banner completamente clicable

Algunos diseños pueden utilizar un Link que envuelve:

• imagen;

• contenido;

• pieza completa.

Conceptualmente:

Link
└── Banner
    ├── Image
    ├── Heading
    └── Paragraph

En ese caso utiliza Navigator para identificar el Link.

Si todo el Banner es clicable

Comprueba que el destino sea claro.

Evita una pieza visual que parezca únicamente decorativa pero cambie de página inesperadamente al hacer clic.

Puedes reforzar la acción mediante:

• Button;

• Hover;

• texto claro.

Revisa el Link después de clonar un Banner

Si duplicas una pieza existente, puede conservar su URL.

Por ejemplo:

Banner original:

Productos
→ /productos

Banner clonado:

Servicios
→ /productos

hasta que actualices su enlace.

Overlay

Cuando una fotografía funciona como fondo y el texto aparece encima, puede resultar necesario utilizar:

Overlay

¿Qué es un Overlay?

Es una capa colocada visualmente entre:

imagen

y

contenido

Conceptualmente:

FOTOGRAFÍA
↓
CAPA SEMITRANSPARENTE
↓
TÍTULO / TEXTO / BOTÓN

Ejemplo

Imagen clara:

[ cielo blanco + edificio claro ]

Texto:

SOLUCIONES PARA TU EMPRESA

en blanco puede tener poco contraste.

Un Overlay oscuro puede mejorar la lectura.

Waclis permite configurar Overlay en Section

Cuando corresponda a la estructura seleccionada, puedes utilizar esta opción.

Comprueba siempre el resultado.

Overlay oscuro

Puede combinar bien con:

texto blanco

Overlay claro

En determinados diseños puede utilizarse con:

texto oscuro

No agregues Overlay automáticamente

Si la fotografía ya proporciona buen contraste, quizá no sea necesario.

Un Overlay demasiado fuerte puede:

• ocultar detalles;

• alterar colores;

• perder impacto visual.

El objetivo es legibilidad

Pregunta:

¿El título y el botón pueden leerse fácilmente en toda la imagen?

Si la respuesta es no:

• agrega Overlay;

• cambia color;

• mueve contenido;

• utiliza otra imagen.

No dependas de una única zona de la fotografía

Una fotografía puede cambiar de encuadre responsive.

Por ejemplo, en desktop el título puede aparecer sobre:

una pared oscura

pero en móvil esa parte puede recortarse y quedar sobre:

una ventana clara

Por eso debes comprobar todas las vistas.

Color del texto

Puedes utilizar:

• blanco;

• negro;

• color de marca;

siempre que el contraste sea suficiente.

Color del Button

El Button debe distinguirse del fondo.

Por ejemplo:

Fondo oscuro
→ botón claro

o:

Fondo claro
→ botón principal de marca

Hover del Button

Puedes personalizar:

• fondo;

• texto;

• borde;

para proporcionar respuesta visual.

No necesitas agregar JavaScript para un Hover de Button.

Posición del contenido

Los Banners pueden utilizar texto:

• izquierda;

• centro;

• derecha.

La posición debería coordinarse con la imagen.

Ejemplo

Si el producto se encuentra a la derecha:

┌──────────────────────────────────────┐
│ TÍTULO                 PRODUCTO      │
│ TEXTO                  PRODUCTO      │
│ BOTÓN                  PRODUCTO      │
└──────────────────────────────────────┘

la izquierda puede ser una buena zona para el contenido.

Si el producto está en el centro

Quizá resulte más adecuado colocar:

• texto arriba;

• texto abajo;

• utilizar otra imagen.

Evita tapar el elemento principal.

Alineación centrada

Puede funcionar bien para una imagen abstracta o un fondo con suficiente espacio.

┌──────────────────────────────────────┐
│                                      │
│          NUEVA COLECCIÓN            │
│                                      │
│            [ VER ]                   │
│                                      │
└──────────────────────────────────────┘

Revisa la alineación en celular

Un bloque alineado a izquierda en desktop puede seguir funcionando bien.

Pero asegúrate de que:

• no tenga posiciones rígidas;

• no quede fuera del área visible;

• mantenga Padding apropiado.

Evita Position rígido si no es necesario

Por ejemplo:

left: 650px;
top: 200px;

puede funcionar en una resolución y fallar en otra.

Utiliza preferentemente:

• Grid;

• Container;

• alineaciones;

• Padding;

• herramientas responsive.

Ancho completo o contenido

Una Section permite elegir:

Container width → Boxed

o:

Full

según la estructura.

Banner Full

Puede ocupar todo el ancho disponible.

Conceptualmente:

┌─────────────────────────────────────────────────┐
│                                                 │
│                    BANNER                       │
│                                                 │
└─────────────────────────────────────────────────┘

Puede resultar apropiado para una pieza principal.

Banner Boxed

Puede aparecer dentro de un ancho contenido.

      ┌──────────────────────────────┐
      │            BANNER            │
      └──────────────────────────────┘

Puede funcionar bien como pieza intermedia entre otras secciones.

No todo Banner necesita ser Full

Una promoción secundaria puede integrarse mejor dentro del ancho general del contenido.

Altura del Banner

La altura influye mucho en su protagonismo.

Puedes tener:

Banner grande

┌──────────────────────────────────────┐
│                                      │
│                                      │
│               BANNER                 │
│                                      │
│                                      │
└──────────────────────────────────────┘

Banner compacto

┌──────────────────────────────────────┐
│          ENVÍOS A TODO EL PAÍS       │
└──────────────────────────────────────┘

Ambos son Banners.

Elige la altura según el mensaje

Una propuesta principal puede necesitar más espacio.

Una comunicación secundaria puede ser compacta.

No utilices una altura enorme sin necesidad

Un Banner de gran altura puede obligar al visitante a desplazarse mucho antes de llegar al contenido siguiente.

Especialmente en celular.

Banner en desktop

Puede utilizar una altura amplia.

Por ejemplo:

500 px

conceptualmente.

Pero esto no significa que debas utilizar el mismo valor en móvil.

Revisa Height y Min Height responsive

Una altura fija puede generar problemas.

Por ejemplo:

height: 600px;

puede verse bien en desktop pero ocupar casi toda una pantalla móvil.

También puede ocurrir lo contrario

Si reduces demasiado la altura, puede no entrar:

• Heading;

• Paragraph;

• Button.

Debe existir un equilibrio.

Evita diseñar solamente para una resolución

Comprueba:

• computadora;

• tablet;

• celular.

Texto en Banner móvil

Por ejemplo:

Desktop:

┌──────────────────────────────────────┐
│ TÍTULO                 PRODUCTO      │
│ Texto                  PRODUCTO      │
│ Button                              │
└──────────────────────────────────────┘

Mobile:

┌───────────────┐
│   PRODUCTO    │
│               │
│   TÍTULO      │
│   Texto       │
│   Button      │
└───────────────┘

Puede ser necesario reorganizar el contenido.

No mantengas tamaños gigantes de título en celular

Un Heading de gran tamaño puede ocupar cuatro o cinco líneas.

Utiliza las configuraciones responsive o CSS adicional cuando corresponda.

Ejemplo conceptual

Desktop:

Título → 48 px

Mobile:

Título → 30/32 px

Los valores concretos dependen del diseño.

Mantén títulos legibles

No reduzcas demasiado la tipografía solamente para evitar saltos de línea.

Un título en dos líneas puede ser perfectamente correcto.

Textos largos en móvil

Puede resultar conveniente resumir el contenido.

Por ejemplo:

Desktop:

Descubre nuestras últimas soluciones diseñadas especialmente para acompañar el crecimiento de empresas de diferentes sectores.

puede ser demasiado extenso para una pieza compacta móvil.

Una frase más directa puede funcionar mejor en todos los tamaños.

Una misma estructura responsive es preferible cuando sea posible

Antes de crear:

Banner Desktop

Banner Mobile

intenta adaptar un único Banner mediante:

• Grid;

• tamaños;

• Padding;

• Background;

• responsive.

¿Cuándo puede justificarse una versión diferente?

Cuando el diseño visual de desktop y celular necesita ser realmente distinto.

Por ejemplo, una creatividad específica muy horizontal puede no tener una adaptación razonable a formato vertical.

En ese caso puedes considerar estructuras distintas, pero recuerda que implican mantener dos versiones.

Si creas una versión desktop y otra móvil

Identifica claramente cada una.

Por ejemplo:

banner-campania-desktop

banner-campania-mobile

y configura correctamente la visibilidad.

No olvides actualizar ambas versiones

Si cambia:

• promoción;

• fecha;

• precio;

• Link;

debes revisar ambas.

Este es uno de los costos de duplicar contenido por dispositivo.

Banner promocional temporal

Los Banners suelen utilizarse para campañas que vencen.

Por ejemplo:

PROMOCIÓN HASTA EL 31 DE AGOSTO

Después de esa fecha debe:

• actualizarse;

• eliminarse;

• reemplazarse.

Revisa periódicamente contenido temporal

Especialmente:

• porcentajes de descuento;

• cuotas;

• fechas;

• eventos;

• promociones;

• disponibilidad;

• campañas estacionales.

Un Banner vencido afecta la confianza

Por ejemplo, si en octubre todavía aparece:

PROMOCIÓN VÁLIDA HASTA JULIO

el sitio parece desactualizado.

Evita incluir fechas dentro de la propia imagen cuando puedas

Si la fecha está como texto editable:

Válido hasta el 31 de agosto

puedes actualizarla rápidamente.

Si está incrustada en una imagen, necesitas editar o reemplazar el archivo.

Banner de envío

Ejemplo compacto:

┌──────────────────────────────────────────────┐
│ 🚚 ENVÍOS A TODO EL PAÍS                    │
│ Consulta modalidades y tiempos disponibles. │
│                       [ VER INFORMACIÓN ]    │
└──────────────────────────────────────────────┘

Banner de categorías

┌──────────────────────────────────────────────┐
│ [ imagen ]                                  │
│                                             │
│  COLECCIÓN CORPORATIVA                     │
│                                             │
│  [ EXPLORAR CATEGORÍA ]                    │
└──────────────────────────────────────────────┘

Banner institucional

TRABAJAMOS JUNTO A EMPRESAS DE TODO EL PAÍS

Conoce nuestras soluciones.

[ SOBRE NOSOTROS ]

Banner de contacto

¿NECESITAS AYUDA PARA ELEGIR?

Nuestro equipo puede asesorarte.

[ CONTACTAR ]

En este caso el contenido se acerca bastante a un CTA.

Banner vs CTA en ese caso

Si el protagonismo principal está en:

mensaje + botón

y la imagen es secundaria o inexistente:

CTA puede ser una alternativa más apropiada.

Si existe una gran composición visual:

Banner puede tener más sentido.

Banner como enlace a categoría

Puedes utilizar:

BANNER DE BOTELLAS
→ categoría Botellas

Es una buena forma de crear navegación visual.

No conviertas demasiadas categorías en Banners gigantes

Si tienes:

10 categorías

puede ser mejor utilizar:

• Galería;

• Carrusel;

• Cards.

Un Banner grande para cada una haría la página excesivamente larga.

Banner principal y secundarios

Puedes establecer jerarquías.

Por ejemplo:

Banner principal
→ Nueva colección

Banner secundario
→ Envíos

Banner secundario
→ Financiación

Los secundarios pueden ser más compactos.

No hagas que todos compitan

Si todas las piezas utilizan:

• enorme Heading;

• colores intensos;

• gran altura;

• animaciones;

ninguna terminará destacándose.

La jerarquía visual es importante.

Background Color

Un Banner no necesita obligatoriamente una fotografía.

Puedes utilizar:

• color;

• degradado mediante CSS personalizado;

• estructura limpia.

Por ejemplo:

██████████████████████████████████

     SOLICITA TU PRESUPUESTO

       [ CONTACTAR ]

██████████████████████████████████

Banner sin imagen

Puede ser más:

• rápido de cargar;

• flexible;

• fácil de mantener.

Utiliza la imagen únicamente si aporta valor.

Banner con video de fondo

La configuración de Section puede contemplar Background de tipo Video.

Si utilizas una composición de este tipo, presta especial atención a:

• legibilidad;

• peso;

• movimiento;

• contraste;

• experiencia móvil.

No es necesario utilizar video solamente para hacer la sección más llamativa.

Evita fondos excesivamente dinámicos

El texto sigue siendo la información principal.

Un fondo que distrae demasiado puede dificultar:

• lectura;

• identificación del CTA.

Imágenes y rendimiento

Los Banners suelen utilizar archivos grandes.

Optimiza las imágenes para web.

Evita utilizar una imagen de dimensiones y peso muy superiores a lo necesario.

Una imagen de Banner puede ser de alta calidad sin ser innecesariamente pesada

Busca equilibrio entre:

• nitidez;

• peso;

• velocidad de carga.

Múltiples Banners pesados

Una página con:

Banner 1 → imagen enorme
Banner 2 → imagen enorme
Banner 3 → imagen enorme
Banner 4 → imagen enorme

puede aumentar considerablemente el contenido descargado.

Utiliza solo las piezas necesarias.

Alt en imágenes de Banner

Si la imagen es un componente Image y aporta información relevante, completa:

Alt

Por ejemplo:

Botellas térmicas de la nueva colección

Si la imagen es principalmente decorativa

La información principal debería seguir estando disponible mediante:

• Heading;

• Paragraph;

• Button.

No dependas exclusivamente del contenido visual.

Banner con imágenes de productos

Si estás mostrando un producto concreto, comprueba que:

• no se recorte de manera problemática;

• no se deforme;

• conserve colores;

• sea reconocible.

Cover puede no ser ideal para todos los productos

Si el objeto debe verse completo, puede ser mejor:

• otro diseño;

• otro contenedor;

• Contain;

• una imagen preparada específicamente.

Banner con personas

Presta atención al encuadre.

En desktop:

[ persona completa ]

en móvil, Cover puede mostrar:

[ solo parte del rostro ]

o eliminarla completamente.

Utiliza fotografías pensadas para recorte flexible.

No coloques el rostro en un extremo

Una posición más central o moderadamente desplazada suele tolerar mejor las distintas proporciones.

Banner con texto y persona

Una composición clásica:

┌───────────────────────────────────────┐
│ TÍTULO               PERSONA         │
│ Texto                 PERSONA         │
│ Button                                │
└───────────────────────────────────────┘

Pero comprueba que en móvil la persona y el contenido sigan funcionando.

Estructura responsive alternativa

Puede transformarse en:

┌──────────────────┐
│     PERSONA      │
│                  │
│ TÍTULO           │
│ Texto            │
│ Button           │
└──────────────────┘

dependiendo de cómo esté construido el Banner.

Grid Row

Si la composición utiliza:

imagen | contenido

puedes encontrar:

Grid Row
├── Grid Column
│   └── Image
└── Grid Column
    ├── Heading
    ├── Paragraph
    └── Button

Esto permite adaptar las columnas responsive.

Por ejemplo

Desktop:

[ IMAGEN ][ TEXTO ]

Mobile:

[ IMAGEN ]

[ TEXTO ]

Antes de escribir CSS responsive

Revisa las opciones de:

Grid Row

y sus columnas.

Orden de contenido móvil

También debes comprobar si quieres:

Imagen
↓
Texto

o:

Texto
↓
Imagen

según el objetivo.

Clonar un Banner

Si necesitas otra pieza similar:

1. utiliza Navigator;

2. selecciona el contenedor completo;

3. utiliza Clonar elemento;

4. reemplaza:

   • imagen;

   • título;

   • texto;

   • Button;

   • URL;

   • IDs si existen.

No clones solamente la imagen

Si quieres un Banner completo.

No clones solamente el Button

Si quieres duplicar toda la composición.

Comprueba qué seleccionaste

La barra contextual y Navigator te ayudarán.

Eliminar un Banner

Selecciona la estructura completa que deseas eliminar.

Recuerda:

Waclis no solicita confirmación.

Si eliminas algo incorrecto:

Deshacer

inmediatamente.

Atención al nivel Section

Si el Banner es prácticamente todo el contenido de una Section, eliminar Section puede ser correcto.

Pero si esa Section contiene otros elementos, podrías eliminarlos también.

Comprueba Navigator.

Mover un Banner

Si quieres cambiar su posición respecto de otras secciones, selecciona la unidad adecuada.

Por ejemplo:

Antes:

Beneficios
Banner
Productos

Después:

Banner
Beneficios
Productos

Mantén el Banner como unidad

No muevas solamente:

• imagen;

• Heading;

dejando el resto atrás.

Classes compartidas

Un Banner puede utilizar Classes para:

• título;

• contenido;

• Button;

• imagen.

Si varios elementos comparten una Class, Waclis puede mostrar:

Linked styles

Esto no necesariamente es un problema

Por ejemplo:

banner-title

puede utilizarse en:

• Heading;

• versiones relacionadas;

• varios Banners.

Si todos deben compartir el estilo, Linked styles es útil.

Si quieres una excepción

Agrega:

• Class adicional;

• ID único.

No elimines automáticamente la Class compartida.

Ejemplo

class="banner-title banner-title-dark"

para un Banner que necesita texto oscuro.

CSS personalizado

Para un Banner avanzado puedes utilizar una Class principal.

Por ejemplo:

campania-banner

Elementos:

campania-banner-title
campania-banner-text
campania-banner-button
campania-banner-image

Ejemplo CSS

.campania-banner .campania-banner-title {
    font-size: 48px;
    font-weight: 700;
}

Responsive

@media (max-width: 768px) {
    .campania-banner .campania-banner-title {
        font-size: 32px;
    }
}

Limita el scope

Evita:

.banner h2 {
}

si existen diferentes Banners y no sabes qué otros elementos pueden utilizar esa Class.

Más de un Banner

Puedes identificar cada uno:

home-campania-banner

productos-promo-banner

servicios-contacto-banner

Esto facilita mantener CSS localizado.

IDs

Si utilizas un ID:

id="banner-campania"

debe ser único dentro de la página.

Revisa IDs después de clonar

No mantengas:

Banner 1
id="banner-campania"

Banner 2
id="banner-campania"

Hover sobre Banner completo

Si todo el Banner es clicable puedes utilizar un Hover moderado para indicar interacción.

Por ejemplo:

• cambio de Overlay;

• pequeña variación de imagen;

• borde.

No utilices Hover fuerte si el Banner no es clicable

Puede sugerir una interacción inexistente.

Hover en imagen

Puedes utilizar una ampliación suave.

Por ejemplo:

.categorias-banner .banner-image {
    transition: transform .3s ease;
}

.categorias-banner:hover .banner-image {
    transform: scale(1.03);
}

cuando la estructura lo permita.

Cuidado con Overflow

Si la imagen aumenta dentro de una estructura con Border radius, puede ser necesario controlar lo que sobresale.

En personalizaciones avanzadas puede utilizarse:

overflow: hidden;

sobre el contenedor correcto.

Hover y móvil

El Banner debe seguir siendo comprensible y utilizable sin Hover.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

para animar:

• Banner completo;

• contenido;

cuando corresponda.

Evita animar cada elemento por separado

Por ejemplo:

imagen → una animación
Heading → otra
texto → otra
Button → otra

puede resultar excesivo.

Una entrada coherente de la composición completa suele ser suficiente.

Banner ya es un elemento de alto impacto

No necesita necesariamente más efectos.

Banner en Home

Puede colocarse en áreas editables como:

• debajo del menú;

• debajo del banner existente;

• arriba de productos destacados;

• antes del área inferior.

La posición dependerá de la estructura que quieras crear.

Evita duplicar mensajes

Si la Home ya presenta una gran campaña en su contenido principal, agregar inmediatamente debajo otro Banner casi idéntico puede ser redundante.

Banner antes de Productos destacados

Puede utilizarse para:

• presentar una colección;

• destacar una categoría;

• explicar una promoción.

Banner después de contenido

Puede utilizarse para:

• contacto;

• campaña secundaria;

• newsletter;

• información comercial.

Banner en Productos

Puedes utilizar un área editable para incorporar:

COLECCIÓN DE TEMPORADA

[ EXPLORAR ]

antes del catálogo dinámico.

No reemplaces el catálogo

El Banner complementa el contenido dinámico.

Banner en Blog

Puede utilizarse para:

• destacar una categoría;

• invitar a suscribirse;

• dirigir hacia otro contenido.

Pero evita que tape visualmente el listado principal sin aportar valor.

Banner en Contacto

Puede reforzar:

¿NECESITAS AYUDA?

Nuestro equipo está disponible.

[ CONTACTAR ]

aunque en esta página quizá un CTA sencillo sea suficiente.

Banner en una nueva sección personalizada

Puedes construir páginas completas con múltiples Banners.

Por ejemplo:

Página de colecciones

Banner principal
↓
Galería
↓
Banner categoría A
↓
Banner categoría B

Mantén siempre una jerarquía clara.

No abuses de Banners

Si todo es un Banner:

BANNER
BANNER
BANNER
BANNER
BANNER

el visitante pierde referencias sobre qué es realmente importante.

Combina diferentes tipos de secciones.

Banner + Beneficios

Ejemplo:

BANNER PRINCIPAL

↓

BENEFICIOS

[ 1 ] [ 2 ] [ 3 ]

Banner + Galería

BANNER DE PROYECTOS

↓

[ imágenes ]

Banner + CTA

BANNER DE SERVICIO

↓

información

↓

CTA
[ SOLICITAR PRESUPUESTO ]

Cada sección cumple una función distinta.

Ejemplo práctico: Banner promocional

Queremos:

NUEVA COLECCIÓN

Descubre las últimas incorporaciones.

[ VER PRODUCTOS ]

sobre una imagen.

Paso 1

Abre:

Secciones → Banners

Paso 2

Elige una composición.

Paso 3

Utiliza Navigator para comprender la estructura.

Paso 4

Reemplaza la fotografía.

Paso 5

Comprueba:

Cover / Contain

Paso 6

Modifica Heading.

Paso 7

Modifica Paragraph.

Paso 8

Configura Button y URL.

Paso 9

Comprueba contraste.

Paso 10

Configura Overlay si es necesario.

Paso 11

Revisa desktop.

Paso 12

Revisa tablet.

Paso 13

Revisa celular.

Presta especial atención al recorte.

Paso 14

Guarda.

Paso 15

Utiliza:

Ver página

y prueba el Button.

Ejemplo práctico: Banner de categoría

┌─────────────────────────────────────────┐
│                                         │
│        PRODUCTOS CORPORATIVOS           │
│                                         │
│   Personaliza productos para tu marca.  │
│                                         │
│       [ EXPLORAR CATEGORÍA ]            │
│                                         │
└─────────────────────────────────────────┘

Puede dirigir hacia la categoría correspondiente.

Ejemplo práctico: Banner compacto

┌─────────────────────────────────────────────────┐
│ ENVÍOS A TODO EL PAÍS     [ VER INFORMACIÓN ]  │
└─────────────────────────────────────────────────┘

No todos los Banners tienen que ser altos.

Ejemplo práctico: Banner imagen + texto

Desktop:

┌──────────────────────────────────────────────┐
│ [      IMAGEN      ] │ NUEVOS PRODUCTOS     │
│                      │ Conoce la colección. │
│                      │ [ VER PRODUCTOS ]    │
└──────────────────────────────────────────────┘

Mobile:

┌──────────────────┐
│      IMAGEN      │
├──────────────────┤
│ NUEVOS PRODUCTOS │
│ Texto            │
│ [ VER PRODUCTOS ]│
└──────────────────┘

Puede construirse con Grid Row y columnas.

¿Qué hacer si el texto no se lee?

Comprueba:

1. color;

2. Overlay;

3. fotografía;

4. posición;

5. Typography.

No agregues automáticamente una sombra enorme al texto.

¿Qué hacer si la imagen se corta en móvil?

Decide si:

• el recorte es aceptable;

• necesitas reposicionar;

• necesitas otra fotografía;

• el diseño debería utilizar Contain;

• necesitas una variante móvil.

Muchas veces cambiar la imagen es la solución más limpia.

¿Qué hacer si desaparece el producto?

La fotografía probablemente no está preparada para ese recorte.

Utiliza una imagen donde el objeto principal permanezca dentro de una zona segura.

¿Qué hacer si el logo de la imagen se corta?

Es preferible utilizar el logo como elemento separado cuando corresponda.

El contenido incrustado dentro de la fotografía no puede adaptarse independientemente.

¿Qué hacer si el Button queda fuera en móvil?

Revisa:

• Height;

• Min Height;

• Padding;

• tamaño de textos;

• Position.

No utilices Overflow oculto simplemente para esconder el problema.

¿Qué hacer si el Banner genera scroll horizontal?

Revisa:

• Width;

• Min Width;

• imágenes;

• Margin;

• Position;

• Grid;

• CSS.

No utilices globalmente:

body {
    overflow-x: hidden;
}

sin identificar la causa.

¿Qué hacer si el Banner tiene demasiado espacio vacío?

Revisa:

• Height;

• Min Height;

• Padding;

• contenido;

• Container.

Identifica dónde está realmente el espacio antes de reducir valores.

¿Qué hacer si está demasiado pegado a otras secciones?

Revisa:

• Padding de Section;

• Margin;

• estructura.

Una separación adecuada ayuda a distinguir el Banner.

¿Qué hacer si al cambiar un título también cambia otro?

Puede deberse a:

Linked styles

si estás cambiando Estilo.

Si quieres modificar el texto, utiliza:

Contenido

Cada Heading puede tener contenido distinto aunque comparta estilos.

¿Qué hacer si quiero cambiar solo el color de un título?

Puedes utilizar:

• Class adicional;

• ID;

• selector más específico;

si el estilo compartido no debe aplicarse a esa excepción.

¿Qué hacer si cloné un Banner y ambos tienen el mismo enlace?

Modifica la URL de la copia.

¿Qué hacer si eliminé toda la Section?

Utiliza:

Deshacer

si fue accidental.

¿Qué hacer si el Hover afecta otros Banners?

Revisa el selector CSS.

En lugar de:

.banner:hover {
}

puede ser más seguro:

.campania-home .banner-item:hover {
}

según tus Classes.

IA para personalizar un Banner

ChatGPT, Claude o Gemini pueden ayudarte.

Por ejemplo:

Estoy trabajando con un Banner dentro del Editor de bloques de Waclis.

La sección utiliza:
.campania-banner

El título utiliza:
.campania-banner-title

El texto utiliza:
.campania-banner-text

El Banner funciona correctamente.

Necesito:
- título de 46 px en desktop;
- título de 30 px en celular;
- texto máximo de 600 px de ancho;
- Padding horizontal de 48 px en desktop;
- Padding horizontal de 20 px en celular.

No modifiques otros Banners.

No modifiques HTML.

No agregues JavaScript.

No elimines Classes existentes.

Devuélveme solamente el CSS necesario.

IA para analizar una creatividad

También puedes enviar una imagen y solicitar:

Quiero utilizar esta creatividad como Banner de ancho completo en Waclis.

Debe funcionar con Cover en desktop y celular.

Analiza qué textos, logotipos, personas o productos pueden quedar recortados al pasar de formato horizontal a vertical.

Indícame qué elementos debería acercar a la zona central antes de utilizarla.

IA para redactar un Banner

Por ejemplo:

Necesito un Banner para una Página web de [sector].

Objetivo:
Presentar una nueva colección.

Necesito:

- Heading máximo de 6 palabras.
- Descripción máxima de 18 palabras.
- CTA máximo de 3 palabras.

Utiliza español neutro.

No inventes descuentos ni condiciones comerciales.

IA para simplificar un Banner

Puedes pedir:

Este Banner contiene demasiado texto:

[pegar contenido]

Reduce el contenido manteniendo:

- propuesta principal;
- beneficio;
- CTA.

No agregues información nueva.

Buenas prácticas para Banners

Recomendamos:

• utilizar un Banner para un mensaje concreto;

• establecer una jerarquía clara;

• elegir imágenes preparadas para su proporción;

• considerar el recorte móvil desde el comienzo;

• mantener elementos importantes dentro de zonas seguras;

• utilizar texto editable cuando sea posible;

• evitar botones falsos dentro de imágenes;

• mantener Heading breve;

• utilizar CTA claros;

• revisar todos los Links;

• utilizar Overlay solamente cuando sea necesario;

• mantener buen contraste;

• adaptar Height responsive;

• utilizar Navigator;

• revisar IDs después de clonar;

• limitar CSS al Banner correspondiente;

• mantener campañas temporales actualizadas;

• optimizar las imágenes;

• comprobar Ver página.

Errores frecuentes

Confundir Banner con Slider

Banner comunica una pieza concreta; Slider alterna varias.

Confundir Banner con CTA

CTA prioriza la acción; Banner suele tener mayor protagonismo visual.

Utilizar una imagen horizontal sin revisar móvil

Puede perder información.

Colocar texto importante en los extremos de la imagen

Cover puede recortarlo.

Incrustar todos los textos dentro de la creatividad

Dificulta actualización y responsive.

Dibujar un botón dentro de la imagen

Puede parecer interactivo sin serlo.

No utilizar contraste suficiente

El texto debe seguir siendo legible.

Oscurecer demasiado mediante Overlay

La imagen también debe aportar valor.

Utilizar Height fijo sin comprobar celular

Puede ocupar demasiado o cortar contenido.

Posicionar textos con valores rígidos

Pueden fallar en otras resoluciones.

Duplicar versión desktop/mobile sin mantener ambas

Cada variante necesitará futuras actualizaciones.

Clonar y olvidar la URL

Comprueba Links.

Repetir IDs personalizados

Mantén IDs únicos.

Aplicar CSS general a todos los Banners

Limita el scope.

Agregar demasiadas animaciones

El Banner ya tiene gran protagonismo.

Utilizar demasiados Banners consecutivos

Se pierde jerarquía.

Dejar promociones vencidas

Revisa fechas y condiciones.

Utilizar imágenes demasiado pesadas

Optimiza para web.

No comprobar el Button

Prueba la interacción final.

No utilizar Ver página

El frontend es la validación final.

Flujo recomendado

1. DEFINIR EL MENSAJE
↓
2. DECIDIR SI BANNER ES LA SECCIÓN ADECUADA
↓
3. ELEGIR DISEÑO
↓
4. AGREGAR BANNER
↓
5. REVISAR NAVIGATOR
↓
6. REEMPLAZAR IMAGEN / FONDO
↓
7. REVISAR COVER / CONTAIN
↓
8. MODIFICAR HEADING
↓
9. MODIFICAR TEXTO
↓
10. CONFIGURAR BUTTON / LINK
↓
11. REVISAR CONTRASTE
↓
12. CONFIGURAR OVERLAY SI ES NECESARIO
↓
13. ADAPTAR ALTURA Y ESTRUCTURA RESPONSIVE
↓
14. REVISAR RECORTE EN CELULAR
↓
15. GUARDAR CAMBIOS
↓
16. VER PÁGINA
↓
17. PROBAR EL CTA

Checklist antes de publicar un Banner

• Banner es realmente la sección adecuada.

• El mensaje principal es claro.

• El Heading es breve.

• El texto complementa el título.

• El CTA describe claramente la acción.

• El Link apunta al destino correcto.

• Reemplacé la imagen de ejemplo.

• La imagen tiene calidad suficiente.

• La imagen está optimizada para web.

• Revisé si utiliza Image o Background Image.

• Elegí conscientemente Cover o Contain.

• La imagen no se deforma.

• Revisé el recorte en desktop.

• Revisé el recorte en tablet.

• Revisé el recorte en celular.

• El producto, persona o elemento principal sigue visible.

• No hay información importante pegada a los extremos.

• El texto principal es editable cuando corresponde.

• No hay botones falsos dentro de la imagen.

• Existe suficiente contraste.

• Overlay está correctamente configurado si se utiliza.

• La altura funciona en todos los dispositivos.

• El Padding es adecuado.

• No existe scroll horizontal inesperado.

• Revisé Navigator.

• Los IDs personalizados son únicos.

• Revisé URLs después de clonar.

• Linked styles tiene el alcance esperado.

• El CSS personalizado está limitado a esta sección.

• Las promociones y fechas siguen vigentes.

• No agregué animaciones innecesarias.

• Guardé los cambios.

• Probé el Banner mediante Ver página.

• Probé el Button o Link.

En resumen

Los Banners permiten destacar visualmente un mensaje importante dentro de la Página web.

Puedes utilizarlos para:

• campañas;

• colecciones;

• productos;

• categorías;

• servicios;

• promociones;

• mensajes institucionales;

• novedades.

Recuerda la diferencia:

Banner → una pieza visual destacada.

Slider → varias grandes piezas que se alternan.

CTA → una sección principalmente orientada a generar una acción.

Al trabajar con un Banner presta especial atención a la imagen.

Si utiliza:

Cover

la fotografía puede recortarse al cambiar de desktop a celular.

Por eso:

mantén productos, personas y otros elementos importantes dentro de zonas visualmente seguras.

Cuando sea posible utiliza:

imagen + Heading + Paragraph + Button

en lugar de incorporar todo el contenido dentro del propio archivo gráfico.

Esto facilita:

• responsive;

• actualización;

• legibilidad;

• mantenimiento.

También comprueba:

• Overlay;

• contraste;

• altura;

• Padding;

• URLs;

• campañas temporales.

Y recuerda que un Banner debe tener un objetivo claro.

No necesitas llenar toda la Página web de grandes piezas visuales.

Una buena jerarquía permite que el Banner realmente destaque cuando tiene algo importante que comunicar.

Finalmente:

Guardar Cambios → Ver página → probar el enlace → revisar desktop, tablet y celular.