Crear banners responsivos

Los banners de Prisma Campaigns se crean con las dimensiones fijas de su placeholder (250x100, 400x400 píxeles, por nombrar dos ejemplos). Por defecto, los banners son responsivos: mantienen su tamaño original cuando hay espacio suficiente y se reducen de forma proporcional cuando su contenedor es más pequeño que el placeholder, por ejemplo, en dispositivos móviles. En este artículo se explica cómo funciona este comportamiento para cada tipo de banner (imagen, HTML o emergentes) y qué clases CSS puede utilizar para modificarlo.

Comportamiento por defecto

No se requiere ninguna configuración adicional para que un banner sea responsivo. Cuando el contenedor es más angosto que el placeholder, los banners de imagen, los banners HTML y los carruseles se reducen manteniendo la proporción del placeholder. En pantallas más grandes, se muestran en su tamaño original y nunca se estiran por encima de él.

Nota: En versiones anteriores era necesario agregar la clase prisma_responsive al div del banner para habilitar este comportamiento. Esa clase ya no es necesaria; puede quitarla de su integración o dejarla, ya que no tiene efecto.

Mantener dimensiones fijas

Si un banner debe mostrarse siempre con el tamaño exacto definido por su placeholder, sin importar el tamaño del contenedor o de la pantalla:

1. Localice en su integración el elemento div que contiene el ID del banner.
2. Agregue la clase prisma_fixed a este div.

<div id="banner_element" class="prisma_fixed"></div>

Con esta clase, los banners de imagen y HTML mantienen el ancho y alto fijos del placeholder y no se reducen en pantallas más pequeñas.

Ocupar todo el contenedor

Para que un banner ocupe todo el espacio disponible de su contenedor, en lugar de limitarse al tamaño original del placeholder:

1. Localice en su integración el elemento div que contiene el ID del banner.
2. Agregue la clase prisma_fluid a este div.

<div id="banner_element" class="prisma_fluid"></div>

Esta clase hace que el banner ocupe el 100% del ancho y alto de su contenedor:

• Banners HTML: el contenido HTML renderizado (incluidos los banners que se muestran dentro de un iframe) se expande hasta ajustarse al contenedor. Es importante que el contenido HTML también esté diseñado para adaptarse a las dimensiones del contenedor padre.

• Banners de imagen: la imagen se escala para caber dentro del contenedor manteniendo sus proporciones, por lo que nunca se recorta ni se deforma. Para que la imagen cubra todo el contenedor (recortando los bordes si las proporciones no coinciden), agregue también la clase prisma_banner_cover:

  <div id="banner_element" class="prisma_fluid prisma_banner_cover"></div>
  

Dado que el banner ocupa el 100% del alto del contenedor, asegúrese de que el contenedor tenga una altura definida (por ejemplo, una altura fija en píxeles, o que sus elementos padres tengan height: 100% hasta html y body). De lo contrario, es posible que el banner no se expanda verticalmente.

Banners pop-up

Para garantizar que los banners emergentes (pop-ups) se adapten dinámicamente al contenido y no mantengan dimensiones fijas, es necesario configurar el parámetro adaptToContent en la integración.

Para realizar la configuración, siga estos pasos:

1 ) En la configuración de integración del banner, incluya el parámetro adaptToContent con el valor true:

{
    placeholderId: 'popup_placeholder',
    elementId: 'popup_element',
    isolated: false,
    adaptToContent: true
}

donde:

• placeholderId: ID del contenedor donde se ubicará el banner.
• elementId: ID del elemento del banner.
• isolated: Define si el banner se renderiza en un iframe (true) o no (false).
• adaptToContent: Al establecerlo en true, el banner se ajustará dinámicamente al contenido, eliminando las dimensiones fijas.

2 ) Si adaptToContent se establece en false o se omite, el banner adoptará las dimensiones definidas por el placeholder y mantendrá el tamaño fijo.