CTA Banner Double

Banner doble que divide el espacio horizontal en dos paneles independientes (50 % / 50 % en desktop). Cada panel tiene su propia imagen, texto superpuesto (título y descripción), botones CTA y enlace. En mobile los paneles se apilan verticalmente.

Vista previa

Sin imagen disponible aún. Añade una captura en ./img/cta-banner-double.jpg y descomenta la línea siguiente.

Comportamiento

Dos paneles en paralelo: En desktop (lg:) cada panel ocupa el 50 % del ancho. En mobile se apilan en vertical con un margen superior entre ellos.
Ancho completo: Si fullwidth: true, el bloque ocupa todo el viewport. Si false (default), queda centrado con ancho máximo de página.
El bloque entero es invisible si no hay ítems visibles: Si todos los ítems tienen visible: false, el componente no renderiza nada.
Texto siempre superpuesto: A diferencia de ctaBannerDoped, el bloque de texto siempre flota sobre la imagen. La propiedad position controla su posición vertical tanto en mobile como en desktop.
Imagen con lazy loading: Las imágenes usan lazyload con data-src / data-srcset. Si no se proporciona imagen desktop, el componente usa la imagen mobile como fallback en ambas resoluciones.
Enlace en toda la imagen: Cada panel se envuelve en un <a> que apunta a link.url. Si la URL está vacía, el enlace existe igualmente pero sin destino.
Botones en horizontal o vertical: La propiedad buttons.alignment controla si los botones de cada panel se muestran en línea ("horizontal") o apilados ("vertical").
Título y descripción admiten HTML: Los campos title.text y description.text se renderizan sin escapar, por lo que aceptan etiquetas HTML (<strong>, <u>, etc.).

Configuración

Content Asset

El widget se configura mediante un JSON en Business Manager → Content Assets y se incluye en cualquier página mediante <iscontentasset aid="ID_DEL_ASSET" />.

{
  "fullwidth": true,
  "items": [
    {
      "visible": true,
      "position": {
        "mobile": "bottom",
        "desktop": "center"
      },
      "title": {
        "visible": true,
        "tag": "h2",
        "text": "Título de <strong>ejemplo</strong>",
        "color": "#FFFFFF"
      },
      "description": {
        "visible": true,
        "tag": "p",
        "text": "Lorem ipsum dolor sit amet, <u>consectetur</u> elit, sed do <strong>eiusmod</strong> tempor.",
        "color": "#E1E1E1"
      },
      "images": {
        "mobile": "pages/banners/double/img/panel-1-mobile.jpg?$staticlink$",
        "desktop": "pages/banners/double/img/panel-1-desktop.jpg?$staticlink$"
      },
      "link": {
        "url": "$url('Search-Show', 'cgid', 'gafas-sol')$",
        "target": "_self"
      },
      "buttons": {
        "alignment": "horizontal",
        "items": [
          {
            "visible": true,
            "text": "Ver colección",
            "link": {
              "url": "$url('Search-Show', 'cgid', 'gafas-sol')$",
              "target": "_self"
            },
            "color": {
              "text": {
                "default": "#000000",
                "hover": "#FFFFFF"
              },
              "background": {
                "default": "#FFFFFF",
                "hover": "#000000"
              }
            }
          }
        ]
      }
    },
    {
      "visible": true,
      "position": {
        "mobile": "bottom",
        "desktop": "center"
      },
      "title": {
        "visible": true,
        "tag": "h2",
        "text": "Segundo <strong>panel</strong>",
        "color": "#FFFFFF"
      },
      "description": {
        "visible": false,
        "tag": "p",
        "text": "",
        "color": "#FFFFFF"
      },
      "images": {
        "mobile": "pages/banners/double/img/panel-2-mobile.jpg?$staticlink$",
        "desktop": "pages/banners/double/img/panel-2-desktop.jpg?$staticlink$"
      },
      "link": {
        "url": "$url('Search-Show', 'cgid', 'gafas-graduadas')$",
        "target": "_self"
      },
      "buttons": {
        "alignment": "horizontal",
        "items": [
          {
            "visible": true,
            "text": "Descubrir",
            "link": {
              "url": "$url('Search-Show', 'cgid', 'gafas-graduadas')$",
              "target": "_self"
            },
            "color": {
              "text": {
                "default": "#000000",
                "hover": "#FFFFFF"
              },
              "background": {
                "default": "#FFFFFF",
                "hover": "#000000"
              }
            }
          }
        ]
      }
    }
  ]
}

Propiedades

Raíz

Propiedad	Tipo	Obligatorio	Descripción
`fullwidth`	`boolean`	No	Si `true`, el bloque ocupa todo el ancho del viewport. Si `false` (default), queda centrado con ancho máximo.
`items`	`array`	Sí	Array de paneles. Se renderizan solo los que tengan `visible: true`. Si no hay ninguno visible, el bloque no aparece.

`items[]`

Propiedad	Tipo	Obligatorio	Descripción
`items[].visible`	`boolean`	No	Si `false`, el panel no se renderiza. Default: `true`.
`items[].position`	`object`	No	Posición vertical del bloque de texto superpuesto sobre la imagen.
`items[].position.mobile`	`string`	No	Posición en mobile. Valores: `"top"`, `"center"`, `"bottom"`. Default: `"bottom"`.
`items[].position.desktop`	`string`	No	Posición en desktop. Valores: `"top"`, `"center"`, `"bottom"`. Default: `"bottom"`.
`items[].title`	`object`	No	Título del panel, superpuesto sobre la imagen.
`items[].description`	`object`	No	Descripción o subtexto del panel, superpuesto bajo el título.
`items[].images`	`object`	Sí	Rutas de imágenes mobile y desktop del panel.
`items[].link`	`object`	No	Enlace que envuelve toda la imagen del panel.
`items[].buttons`	`object`	No	Bloque de botones CTA del panel.

`items[].title`

Propiedad	Tipo	Obligatorio	Descripción
`items[].title.visible`	`boolean`	No	Si `true` y `text` no está vacío, muestra el título.
`items[].title.tag`	`string`	No	Etiqueta HTML: `"h1"`–`"h6"` o `"p"`. Default: `"p"`.
`items[].title.text`	`string`	No	Contenido del título. Admite HTML (`<strong>`, `<em>`, etc.).
`items[].title.color`	`string`	No	Color del texto. Formato hexadecimal. Default: `currentColor`.

`items[].description`

Propiedad	Tipo	Obligatorio	Descripción
`items[].description.visible`	`boolean`	No	Si `true` y `text` no está vacío, muestra la descripción.
`items[].description.tag`	`string`	No	Etiqueta HTML: `"h1"`–`"h6"` o `"p"`. Default: `"p"`.
`items[].description.text`	`string`	No	Contenido de la descripción. Admite HTML.
`items[].description.color`	`string`	No	Color del texto. Formato hexadecimal. Default: `currentColor`.

`items[].images`

Propiedad	Tipo	Obligatorio	Descripción
`items[].images.mobile`	`string`	Sí	Imagen para mobile. Referencia: 528 × 600 px. Debe terminar en `?$staticlink$`.
`items[].images.desktop`	`string`	No	Imagen para desktop (viewport ≥ 768 px). Referencia: 528 × 600 px. Si está vacío, se usa la imagen mobile.

`items[].link`

Propiedad	Tipo	Obligatorio	Descripción
`items[].link.url`	`string`	No	URL de destino de la imagen. Admite expresiones `$url` de SFCC. Si está vacío, el enlace no navega.
`items[].link.target`	`string`	No	`"_self"` (misma pestaña) o `"_blank"` (nueva pestaña). Default: `"_self"`.

`items[].buttons`

Propiedad	Tipo	Obligatorio	Descripción
`items[].buttons.alignment`	`string`	No	Disposición de los botones: `"horizontal"` (en línea) o `"vertical"` (apilados). Default: horizontal.
`items[].buttons.items`	`array`	No	Lista de botones del panel.
`items[].buttons.items[].visible`	`boolean`	No	Si `true` y `text` no está vacío, el botón se renderiza.
`items[].buttons.items[].text`	`string`	Sí	Texto del botón.
`items[].buttons.items[].link.url`	`string`	Sí	URL de destino del botón. Admite expresiones `$url` de SFCC.
`items[].buttons.items[].link.target`	`string`	No	`"_self"` o `"_blank"`.
`items[].buttons.items[].color.text.default`	`string`	No	Color del texto del botón en estado normal. Default: `currentColor`.
`items[].buttons.items[].color.text.hover`	`string`	No	Color del texto del botón al hacer hover.
`items[].buttons.items[].color.background.default`	`string`	No	Color de fondo del botón en estado normal. Default: `transparent`.
`items[].buttons.items[].color.background.hover`	`string`	No	Color de fondo del botón al hacer hover.

Notas y consejos

Ficheros

Plantilla de contenido
Componente

content/ctaBannerDouble.isml

components/cta/bannerDouble.isml

Imágenes y $staticlink$

Todas las rutas de imagen deben terminar en ?$staticlink$. Las imágenes de referencia son 528 × 600 px para ambas resoluciones (los paneles siempre tienen el mismo ratio):

"images": {
  "mobile":  "pages/banners/double/img/panel-1.jpg?$staticlink$",
  "desktop": "pages/banners/double/img/panel-1-desk.jpg?$staticlink$"
}

Si images.desktop está vacío, el componente usa la imagen mobile como fallback en desktop.

Etiquetas semánticas para title y description

El campo tag controla la jerarquía HTML. Usa "h2"–"h6" para títulos y "p" para textos de apoyo. Evita "h1" salvo que sea el único H1 de la página:

"title":       { "tag": "h2", "text": "Colección verano" },
"description": { "tag": "p",  "text": "Hasta 30% de descuento" }

Enlaces dinámicos ($url)

Usa expresiones $url de SFCC para garantizar que los enlaces funcionen en todos los entornos:

"url": "$url('Search-Show', 'cgid', 'gafas-sol')$"
"url": "$url('Product-Show', 'pid', '123456789')$"
"url": "$url('Page-Show', 'cid', 'about-us')$"

Colores en formato hexadecimal

Usa siempre formato hexadecimal para los colores de texto y botones:

"color": {
  "text":       { "default": "#FFFFFF", "hover": "#000000" },
  "background": { "default": "#000000", "hover": "#FFFFFF" }
}

Alineación de botones

Si hay dos botones en el panel, usa "alignment": "vertical" para evitar que se desborden en pantallas estrechas:

"buttons": {
  "alignment": "vertical",
  "items": [ ... ]
}

El texto siempre flota sobre la imagen

En ctaBannerDouble el texto se superpone siempre sobre la imagen. No existe opción para colocarlo fuera. Asegúrate de que las imágenes tengan suficiente contraste o zona oscura en la posición configurada para que el texto sea legible.

Vista previa​

Comportamiento​

Configuración​

Content Asset​

Propiedades​

Raíz​

items[]​

items[].title​

items[].description​

items[].images​

items[].link​

items[].buttons​

Notas y consejos​