Configurar los ajustes de la plantilla in-app

Estos ajustes se aplican a toda la plantilla in-app a la vez, en lugar de a un solo bloque. Primero, abre o crea una plantilla en el editor integrado (Contenido → In-apps), luego utiliza Ajustes y Ajustes in-app como se describe a continuación.

Configurar el estilo de toda la plantilla

Los ajustes de la plantilla controlan el estilo de toda la plantilla in-app: tamaño y fondo del documento, apariencia del popup y estilos predeterminados para los bloques.

Abre la pestaña Ajustes en el panel derecho.

Comienza con la apariencia compartida, luego el tamaño y, finalmente, los valores predeterminados para los nuevos bloques:

1. Establece el Esquema de colores y la Tipografía para que los colores y las fuentes se mantengan consistentes en toda la plantilla.
2. Establece el Documento y el Popup para el tamaño, los márgenes, el fondo y cómo se asienta el mensaje sobre el fondo atenuado.
3. Utiliza las secciones de valores predeterminados solo cuando quieras que los nuevos bloques coincidan automáticamente con la plantilla.

En el lienzo, cambia un solo bloque cuando esa pieza deba tener un aspecto diferente. Los valores predeterminados se aplican donde un bloque individual no los anule. Para borrar las anulaciones de estilo en la plantilla y volver a los valores predeterminados, utiliza Restablecer estilos personalizados en el menú ⋮ de la barra superior. Consulta Crear mensajes in-app en el editor integrado.

Tamaño del documento y del popup

Utiliza Documento para controlar el tamaño del mensaje y el espaciado del lienzo. Utiliza Popup para controlar cómo se asienta el mensaje sobre el fondo atenuado. No hay un ajuste de altura. El popup crece con su contenido.

Documento

En Documento, establece el relleno, una imagen de fondo, el espacio entre bloques y un radio de esquina predeterminado para las imágenes.

Para cambiar el ancho del popup en el teléfono, utiliza estos dos campos en Documento.

Ancho máximo (px) es el ancho máximo permitido para el popup, en píxeles. En una pantalla grande, el popup no superará este número.

Márgenes laterales (px) se encuentra justo debajo de Relleno. Establece un espacio vacío a la izquierda y a la derecha del popup. Un solo valor se aplica a ambos lados. Cambia este campo cuando quieras que el popup se vea más ancho o más estrecho:

• Aumenta el número para dejar más espacio vacío y hacer el popup más estrecho.
• Disminuye el número para hacer el popup más ancho.
• Introduce un número negativo y el editor lo tratará como 0.

Las nuevas plantillas comienzan con márgenes de 0 px, por lo que el popup llena el ancho de la pantalla.

Consulta la sugerencia debajo de Ancho máximo para ver qué tan ancho será el popup con tus valores actuales.

Popup

En Popup, establece el radio de esquina y el color de superposición para cómo se asienta el mensaje sobre el fondo atenuado.

Esquema de colores y tipografía

En Esquema de colores, establece roles de color con nombre (encabezado, acento, enlaces, fondo, bordes y más). Esos roles actualizan los colores en toda la plantilla a la vez. Los bloques existentes mantienen los colores que ya estableciste en esos bloques.

En Tipografía, establece la familia de fuentes y el tamaño predeterminados para el texto en la plantilla.

Variante de modo oscuro

Variante de modo oscuro te permite establecer un segundo conjunto de colores para cuando la plantilla se muestre en modo oscuro.

1. En Esquema de colores, activa Variante de modo oscuro.
2. Establece los colores separados para el modo oscuro.
3. Utiliza el icono de sol/luna en la barra superior para verificar el modo claro vs. oscuro mientras editas.

Este interruptor del lienzo no es lo mismo que el panel de solo lectura Vista previa. Hasta que establezcas tus propios colores oscuros, el interruptor puede derivarlos automáticamente. Consulta Crear mensajes in-app en el editor integrado.

Nota

La Variante de modo oscuro se muestra solo en iOS y web. En Android, los usuarios siempre ven los colores claros. Las plantillas antiguas guardadas antes de que existiera la Variante de modo oscuro solo tienen colores claros, hasta que las abras y las vuelvas a guardar.

Las imágenes de fondo y de portada que ya tienen un color integrado en el archivo no cambian para el modo oscuro. Si necesitas eso, utiliza una imagen transparente o proporciona una imagen separada para el modo oscuro.

Valores predeterminados de bloque y diseño

Utiliza estas secciones para que el nuevo contenido coincida con la plantilla hasta que diseñes un bloque en el lienzo:

• Valores predeterminados de bloque: estilos iniciales compartidos para los bloques que agregues más tarde.
• Valores predeterminados de columnas: espaciado para cada diseño de Columnas (relleno exterior, relleno dentro de cada columna y el espacio entre columnas).
• Valores predeterminados de tarjeta: apariencia inicial para los contenedores de Tarjeta que agrupan contenido en el diseño.
• Valores predeterminados de grupo de botones: espaciado y alineación cuando varios botones se sientan juntos como un grupo.
• Valores predeterminados de botón: apariencia inicial para los nuevos bloques de Botón para que los CTA se mantengan consistentes en toda la plantilla.
• Valores predeterminados de divisor: estilo de línea inicial, color, grosor y ancho para los nuevos bloques de Divisor.

Cuando termines en Ajustes, haz clic en Guardar en la barra superior para mantener los cambios de la plantilla.

Configurar cómo se ve el in-app en el dispositivo

Los Ajustes in-app controlan cómo aparece y se comporta el mensaje en el dispositivo: posición, animaciones, gestos de deslizamiento y el botón de cierre. La posición, las animaciones y el deslizamiento se aplican en iOS y Android Nativo. El estilo del botón de cierre es diferente. Se almacena con esta plantilla y se muestra en cada plataforma que muestra el mensaje.

Haz clic en Ajustes in-app en la barra superior.

Posición en la pantalla

Elige Pantalla completa, Superior, Centro o Inferior.

Para un mensaje a pantalla completa, también establece el Ancho máximo en Documento como se describe en Documento.

Animaciones

• Animación de presentación / Animación de cierre: Ninguna, Desvanecer, Izquierda, Derecha, Arriba o Abajo. Elige Predeterminado para usar el mismo movimiento de abrir/cerrar que tu aplicación ya utiliza para los in-apps.
• Duración de la animación (ms): 100 a 3000 milisegundos. Déjalo vacío para mantener el tiempo habitual de tu aplicación.

Nota

Ninguna y Desvanecer funcionan actualmente en Android. En iOS, el mensaje aparece y desaparece instantáneamente.

Deslizar para cerrar

Habilita cualquier combinación de Izquierda, Derecha, Arriba y Abajo.

Botón de cierre

Activa o desactiva Mostrar botón de cierre.

Cuando está activado, establece:

• Posición: Superior derecha, Superior izquierda, Inferior derecha o Inferior izquierda.
• Fondo: un color o Transparente.
• Radio de esquina: redondea las esquinas del fondo del botón de cierre. Disponible solo cuando el Fondo es un color (no Transparente). Establece 0–16 px. 16 px hace un círculo (predeterminado). 0 px hace un cuadrado.
• Color del icono: color del icono de cierre.
• Margen: espacio alrededor del botón de cierre en cada lado (Superior, Derecha, Inferior, Izquierda).

A diferencia de la posición, las animaciones y el deslizamiento, el estilo del botón de cierre se almacena con esta plantilla y se muestra en cada plataforma que muestra el mensaje, no solo en iOS y Android Nativo.

1. Haz clic en Aplicar para guardar tus elecciones de Ajustes in-app, o en Cancelar para descartarlas.
2. Abre la Vista previa desde el menú ⋮ de la barra superior para verificar la posición, las animaciones y el botón de cierre antes de guardar.
3. Haz clic en Guardar en la barra superior para almacenar la plantilla.