Crear banners responsivos

Última actualización:

Para garantizar que los banners de Prisma Campaigns (250x100, 400x400 píxeles, por nombrar dos ejemplos) se adapten a diferentes resoluciones y dispositivos, es necesario anular las dimensiones fijas predeterminadas de acuerdo al tamaño de la pantalla. En este artículo se explica cómo lograr banners responsivos según su tipo (imagen, HTML o emergentes, también llamados popup) utilizando clases CSS específicas. De esta forma, los banners podrán adaptarse fácilmente a diversas resoluciones y dispositivos, mejorando la experiencia del usuario en distintas plataformas.

Banners de imagen

Para que un banner de imagen se ajuste dinámicamente al tamaño de su contenedor:

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

Al completar estos pasos, las dimensiones dejarán de ser fijas, permitiendo que el banner se escale siempre y cuando su contenedor sea de menor tamaño que el placeholder definido. Por ejemplo, se reducirá al visualizarse en dispositivos móviles pero mantendrá su tamaño original en pantallas más grandes. Este método aplica tanto para un carrusel como para banners individuales.

Banners HTML

Para que el contenido HTML del banner se adapte al tamaño de su contenedor:

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

Esta última clase asegura que el contenido HTML renderizado se ajuste dinámicamente al tamaño del contenedor. Es importante que el contenido HTML también esté diseñado para adaptarse a las dimensiones del contenedor padre.

Banners popup

Para garantizar que los banners emergentes (popups) 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.