Configuración del estilo de los mensajes de la aplicación
La experiencia de edición mediante arrastrar y soltar se divide en dos secciones: Compilación y vista previa & Prueba. Este artículo cubre lo que necesitas saber para trabajar dentro de la pestaña Construir del editor y asume que ya has creado un mensaje in-app.
Estilos de mensaje
En la pestaña Estilos de mensaje puedes definir determinados estilos que se aplicarán a todos los bloques relevantes de tu mensaje in-app. Por ejemplo, puede que desee personalizar el tipo de letra de todo el texto o el color de todos los enlaces de su mensaje.
Los estilos de esta sección se utilizan en todas las partes del mensaje, excepto cuando se anulan para un bloque específico. Si su mensaje tiene varias páginas, también puede anular los estilos a nivel de mensaje para páginas individuales, excepto para el tipo de visualización y el ancho máximo.
Para facilitar el diseño, recomendamos configurar los estilos a nivel de mensaje antes de personalizar los estilos a nivel de bloque.
Para volver a la pestaña Estilos de mensajes en cualquier momento:
- Haga clic en el botón Cerrar X de las propiedades de cada bloque
- Seleccione el contenedor de mensajes, el botón X de cierre de mensajes o el fondo del editor
Fuentes personalizadas
Aceptamos los siguientes tipos de archivo para fuentes: .ttf, .woff, .otf, y .woff2. Para más información, consulta Archivos de activos.
Puede añadir múltiples variaciones de una familia de fuentes, ya que algunas opciones de estilo pueden no estar disponibles para las fuentes personalizadas. Actualmente, no es posible añadir fuentes a través de una URL.
Para añadir una fuente personalizada:
- Vaya a la sección Contenido de la pestaña Estilos de mensaje.
- Haga clic en Añadir fuente personalizada.
- Sube tu fuente utilizando la biblioteca multimedia.
La fuente a nivel de mensaje sólo se aplicará al mensaje actual y a cualquier mensaje duplicado, pero no a futuras plantillas.
Componentes de los mensajes
El editor de arrastrar y soltar utiliza dos componentes clave para componer mensajes in-app: filas y bloques. Todos los bloques deben colocarse en fila.
Cerrar botón x
Para los mensajes dentro de la aplicación Modal y Pantalla completa, puedes personalizar el botón de cierre que se muestra como en la esquina superior derecha de tu mensaje. Las opciones de personalización incluyen la posición del botón, el tamaño, el color de relleno, el color de fondo, el estilo del borde y el radio del borde.
Estilo Span
Añadir un estilo personalizado al texto de los mensajes dentro de la aplicación habilita el uso de diferentes colores, fuentes y tamaños de texto. El estilo Span proporciona a tus usuarios una experiencia más atractiva y visualmente más atractiva, llamando su atención sobre la información clave y mejorando la claridad general del mensaje.
Filas
Las filas son unidades estructurales que definen la composición horizontal de una sección del mensaje mediante celdas.
Cuando se selecciona una fila, puede añadir o eliminar el número de columnas que necesite desde la sección Personalización de columnas para colocar diferentes elementos de contenido uno al lado del otro.
También puede deslizar para ajustar el tamaño de las columnas existentes.
Como práctica recomendada, formatee las propiedades de las filas y columnas antes de formatear los bloques de las filas. Hay muchos lugares donde se puede ajustar el espaciado y la alineación, por lo que empezar desde la base facilita la edición sobre la marcha.
Imagen de fondo
Puedes añadir una imagen de fondo a una fila en el panel de propiedades de la fila. Alterna entre Imagen de fondo y, a continuación, proporciona una URL de imagen o selecciona una imagen de la biblioteca multimedia. Por último, configura el texto alternativo, el tamaño, la posición y si la imagen se repite para crear patrones en toda la fila.
Bloques
Los bloques representan distintos tipos de contenido que puedes utilizar en tu mensaje. Arrastre uno dentro de un segmento de fila existente y se ajustará automáticamente a la anchura de la celda.
Antes de añadir bloques, configura estilos a nivel de mensaje para el contenedor de mensajes, la fuente, los colores y cualquier otra cosa que quieras personalizar. A continuación, puede personalizar bloques individuales según sus necesidades. El botón Cerrar permanecerá en la parte superior del mensaje para que los usuarios siempre tengan la opción de descartar el mensaje.
Cada bloque tiene sus ajustes, como el control granular del relleno. El panel de la derecha cambia automáticamente a un panel de estilos para el elemento de contenido seleccionado. Para más información, consulta Propiedades del bloque de editor.
A medida que construyes tu mensaje in-app, puedes seleccionar una vista de móvil, tableta o escritorio en la barra de herramientas para previsualizar cómo se verá tu mensaje in-app para tus grupos de usuarios. De este modo se asegurará de que su contenido es receptivo y podrá realizar los ajustes necesarios sobre la marcha.
Detalles creativos
Pantalla completa en pantallas grandes
En una tableta o en un navegador de escritorio, un mensaje a pantalla completa aparecerá en el centro de la pantalla de la aplicación. Cualquier modificación de la anchura máxima del mensaje a pantalla completa sólo se aplicará a los dispositivos de escritorio y tabletas.
Añadir una imagen de fondo
Puedes añadir una imagen al fondo de tu mensaje desde la pestaña Estilos de mensaje.
- En el área del lienzo, seleccione el contenedor de fondo. Esta es la sección desplazable de su mensaje.
- En la pestaña Estilos de mensaje, active Imagen de fondo.
- Añade una imagen de tu biblioteca multimedia o introduce la URL donde está alojada tu imagen.
Si tienes problemas para seleccionar un bloque determinado, puedes utilizar la flecha hacia arriba de la barra de herramientas en línea del bloque para desplazar el foco hacia arriba, a cada bloque padre.
Añadir líquido
Para añadir Liquid a tu mensaje in-app, selecciona Añadir personalización en la barra de herramientas del editor. Aquí puede añadir varios tipos de personalización, como atributos predeterminados, atributos de dispositivo, atributos personalizados, etc.
A continuación, tome el fragmento de Liquid generado e insértelo en el mensaje. Después de diseñar y crear tu mensaje dentro de la aplicación, ve a Vista previa & Prueba para previsualizar tu mensaje.
Utilizar el redactor de IA
Cuando seleccione un bloque de texto en su mensaje in-app, haga clic en en la barra de herramientas del bloque para iniciar el asistente de redacción con inteligencia artificial. El asistente de redacción de textos de IA pasa un breve nombre o descripción del producto a la herramienta de generación de textos GPT3 de OpenAI para generar textos de marketing similares a los humanos para sus mensajes.
Puede ahorrarse algunos clics resaltando el texto dentro del bloque antes de hacer clic en el icono. El texto resaltado se añadirá a la herramienta y se generará una copia inmediatamente.
Restablecer los estilos al ajuste predeterminado
Las propiedades que ha cambiado de su estilo por defecto se marcan con un punto naranja. Para restablecer una propiedad específica a su estilo predeterminado, pase el ratón por encima del campo y seleccione Restablecer a predeterminado.
También puede restablecer todos los estilos de un elemento seleccionado seleccionando el botón junto al nombre del panel de propiedades y seleccionando Restablecer estilos por defecto.
Copiar y pegar estilos
Después de realizar cambios en el estilo de un elemento, puede copiar y pegar esos estilos en otro elemento. Al pegar estilos, sólo se aplican las propiedades relevantes para ese elemento.
- Con el elemento seleccionado, seleccione junto al nombre del panel de propiedades (por ejemplo, si tiene seleccionado un botón, junto a “Propiedades de los botones”).
- Haga clic en Copiar estilos y seleccione el elemento en el que desea aplicar el estilo copiado.
- Seleccione de nuevo y seleccione Pegar estilos.
Atajos de teclado
También puedes utilizar atajos de teclado para copiar y pegar estilos:
| Acción | Mac | Windows |
|---|---|---|
| Copiar estilos | ⌘ + Shift + c | Ctrl + Mayús + c |
| Pegar estilos | ⌘ + Mayús + v | Ctrl + Mayús + v |
Editar esta página en GitHub