Añadir ventanas emergentes de texto enriquecido a tus banners

Con Bannerify puedes añadir una ventana emergente sencilla con texto enriquecido (por ejemplo, avisos legales o términos y condiciones) que aparece al hacer clic en una capa concreta del banner.

Tutorial en vídeo: Añade ventanas emergentes de texto enriquecido a banners HTML de Figma

Este vídeo muestra cómo añadir ventanas emergentes de texto enriquecido a banners HTML de Figma con el plugin Bannerify.

Si necesitas incluir en tu banner una ventana emergente superpuesta con texto enriquecido desplazable (que se pueda cerrar) y que se abra al hacer clic en una capa concreta de la línea de tiempo del banner, selecciona las capas que quieres usar como activadores en cada uno de tus banners y elige las opciones de animación que quieras en la sección Generate Popup Overlay Disclaimers de la ventana de acciones en bloque, en la parte inferior del plugin (aparece cuando marcas varias capas en tu línea de tiempo).

Cuando estés conforme con los ajustes de animación de la ventana emergente, haz clic en el botón Create Popup Links. Se creará automáticamente un componente "Popup" (con una capa de texto y un botón de cerrar) en tu página de Figma, y cada una de las capas seleccionadas se vinculará automáticamente como activador a ese nuevo componente Popup mediante la función nativa de enlaces de prototipo de Figma.

Puedes modificar el contenido de la capa de texto, ajustar el tamaño de la fuente y cambiar los rellenos de color sólido del fondo de la ventana emergente, del icono de cerrar y de la capa de texto.

Al exportar tus banners HTML, el plugin busca automáticamente esos enlaces de prototipo de Figma y el componente Popup al que apuntan, y genera los activadores en los que se puede hacer clic y el código de la ventana emergente en el conjunto final de banners exportados.

Personalizar los estilos de la barra de desplazamiento ​

Si quieres personalizar el estilo de la barra de desplazamiento de las capas de texto truncado desplazable o del texto de las ventanas emergentes, activa Inject Custom Code en los ajustes de exportación HTML y pega esto en el campo Custom CSS.

css
:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}

Puedes cambiar los valores de arriba para actualizar el color de la barra de desplazamiento, el color del carril, el ancho, el alto y el radio de las esquinas. Algunos navegadores y dispositivos móviles pueden seguir mostrando las barras de desplazamiento con el estilo nativo del sistema, pero el CSS se aplicará siempre que el cliente permita personalizar el estilo de la barra de desplazamiento.

Ten en cuenta que este componente está pensado para ser muy sencillo, con una sola capa de texto (para el aviso legal) y el botón de cerrar. Puedes personalizar el contenido del texto, los estilos de fuente y los colores, pero cualquier otra personalización o capa adicional puede romper el HTML exportado.