Bloques de editor de arrastrar y soltar
Los bloques de editor son las piezas que arrastras a las filas y columnas en el editor de arrastrar y soltar.
Selecciona el editor que estás usando:
Bloques de editor de correo electrónico
Los bloques de editor se encuentran en la sección Contenido de los mensajes de correo electrónico. Arrastra un bloque dentro de una columna en el editor de arrastrar y soltar; se ajustará automáticamente al ancho de la columna.
Para obtener más información sobre cómo crear correos electrónicos en el editor de arrastrar y soltar, consulta Crear un correo electrónico con arrastrar y soltar y Otras personalizaciones en ese artículo.
También puedes añadir atributos personalizados a cualquier URL dentro de los bloques de editor Image, Button o Text.
Título
Añade texto para encabezados dentro del correo electrónico.
| Propiedad | Descripción |
|---|---|
| Título | Selecciona el estilo del encabezado. |
| Familia de fuente | El estilo de fuente para tu título. |
| Peso de fuente | El grosor general de la fuente. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Color de texto | Modifica el color del título. |
| Color del enlace | Modifica el color del enlace. |
| Alinear | Mueve el título hacia la izquierda, el centro o la derecha. |
| Altura de línea | Modifica la distancia entre líneas de texto. |
| Espaciado de letras | Modifica la distancia entre cada carácter. |
| Dirección del texto | Predeterminado de izquierda a derecha, pero se puede editar para que sea de derecha a izquierda. |
Párrafo
Introduce texto en el mensaje. Una barra de herramientas ayuda con las funciones de edición de fuentes y texto.
| Propiedad | Descripción |
|---|---|
| Familia de fuente | El estilo de fuente para el texto de tu párrafo. |
| Peso de fuente | El grosor general de la fuente. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Color de texto | Modifica el color del texto. |
| Color del enlace | Modifica el color del enlace. |
| Alinear | Mueve el texto hacia la izquierda, el centro o la derecha. |
| Espaciado entre párrafos | Modifica el espacio entre párrafos. |
| Altura de línea | Modifica la distancia entre líneas de texto. |
| Espaciado de letras | Modifica la distancia entre cada carácter. |
| Dirección del texto | Predeterminado de izquierda a derecha, pero se puede editar para que sea de derecha a izquierda. |
Lista
Añade una lista con viñetas.
| Propiedad | Descripción |
|---|---|
| Tipo de lista | El tipo de lista. Puede ser con viñetas o numerada. |
| Tipo de estilo de lista | Determina el estilo de tu lista. |
| Iniciar lista desde | Determina el número inicial de tu lista. |
| Familia de fuente | El estilo de fuente para el texto de tu párrafo. |
| Peso de fuente | El grosor general de la fuente. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Color de texto | Modifica el color del texto. |
| Color del enlace | Modifica el color del enlace. |
| Alinear | Mueve el texto hacia la izquierda, el centro o la derecha. |
| Espaciado de elementos de lista | Modifica el espacio entre los elementos de la lista. |
| Sangría de elementos de lista | Modifica la sangría de los elementos de la lista. |
| Altura de línea | Modifica la distancia entre líneas de texto. |
| Espaciado de letras | Modifica la distancia entre cada carácter. |
| Dirección del texto | Predeterminado de izquierda a derecha, pero se puede editar para que sea de derecha a izquierda. |
Botón
Añade un botón estándar. Las propiedades permiten editar el estilo y configurar el comportamiento de los enlaces.
| Propiedad | Descripción |
|---|---|
| Opciones de botón | Establece varias opciones del botón, como fuente, tamaño, ancho, color y relleno. |
| Botón al pasar el cursor | El estilo del botón cuando un usuario pasa el cursor por encima con el ratón o el trackpad. Incluye el color de fondo del botón, el color de la fuente y los estilos de los bordes. |
Comportamiento al hacer clic
| Propiedad | Descripción |
|---|---|
| Tipo de enlace | Determina la acción al hacer clic en el botón y establece el protocolo adecuado. |
| URL | Dinámico según el tipo de enlace Open web page. |
| Correo electrónico, asunto y cuerpo | Para el tipo de enlace Send email, establece la dirección de correo electrónico del destinatario, el asunto y el contenido que se completarán en un borrador de correo electrónico cuando el usuario seleccione el botón. |
| Tel. | Para los tipos de enlace Make call y Send SMS, establece el número de teléfono al que el usuario llamará o enviará un mensaje de texto al seleccionar el botón. |
| Mensaje | Para el tipo de enlace Send SMS, establece el contenido que aparecerá en un borrador de mensaje SMS cuando el usuario seleccione el botón. |
Divisor
Inserta una línea sólida, punteada o discontinua para ayudar con el espaciado.
| Propiedad | Descripción |
|---|---|
| Transparente | Si se habilita, se eliminan las opciones de línea y ancho. |
| Línea | Los diferentes formatos de línea, ya sean punteados, discontinuos o sólidos. También puedes modificar el grosor y el color de la línea divisoria. |
| Ancho | Ajusta la extensión del divisor en incrementos de 5. |
| Alinear | Mueve la línea hacia la izquierda, el centro o la derecha. |
Espaciador
Añade espacio o relleno entre otros bloques.
| Propiedad | Descripción |
|---|---|
| Altura | Ajusta la altura del bloque espaciador. El valor predeterminado es 60 px. |
Imagen
Inserta una imagen de la biblioteca de medios. Para imágenes dinámicas (imágenes con Liquid o contenido conectado), debes establecer una imagen alternativa para usar la configuración de ancho automático. Para las especificaciones de imágenes, consulta las especificaciones de imágenes de correo electrónico.
Si estás cargando imágenes con Contenido conectado o Liquid, asegúrate de que la URL de tu imagen comience con https://. Usar http:// provocará que tu aplicación se bloquee.
| Propiedad | Descripción |
|---|---|
| Ancho automático | Modifica el ancho de la imagen en píxeles. |
| Alinear | Orienta la imagen hacia la izquierda, el centro o la derecha del bloque. |
| Imagen con Liquid | Usa la lógica de Liquid para establecer dinámicamente diferentes imágenes dentro del mismo bloque de contenido. |
| URL | Establece una imagen usando la dirección donde está alojada. |
| Texto alternativo | Una breve descripción de la imagen que proporciona a los usuarios la misma información que se muestra en la imagen. Esencial para la accesibilidad de lectores de pantalla o cuando la imagen no se carga. |
| Imagen con esquinas redondeadas | Renderiza la imagen con esquinas redondeadas. De forma predeterminada, las imágenes se renderizan con esquinas cuadradas. |
| Acción | Desencadena una acción cuando el usuario hace clic en la imagen. |
| Opciones de bloque | Establece el relleno alrededor del bloque de imagen. |
Para Ancho automático, el redimensionamiento automático de imagen elige el mejor tamaño para la imagen basándose en una combinación del ancho de la imagen y el espacio disponible en el diseño:
- Las imágenes más anchas que el espacio disponible se ajustan al 100 % de ancho y mantienen esta proporción en dispositivos móviles, utilizando todo el ancho de pantalla del dispositivo.
- Las imágenes más pequeñas que el espacio disponible utilizan el tamaño natural de la imagen para evitar efectos de distorsión o imágenes borrosas.
Video
Crea un enlace al contenido de video. Solo son compatibles YouTube y Vimeo.
| Propiedad | Descripción |
|---|---|
| URL | La URL del video. |
| Título | Se genera automáticamente a partir de los metadatos del video o puede personalizarse. |
| Estilo del icono de reproducción | Incluye diferentes opciones para el botón de reproducción ubicado en la parte superior de una imagen de video. |
| Color del icono de reproducción | Opción de seleccionar Light o Dark para el botón de reproducción. |
| Tamaño del icono de reproducción | Elige el tamaño en píxeles del botón de reproducción. Rango predefinido de 50 px a 80 px (incrementado en 5 px). |
Los videos alojados en Vimeo solo funcionan si están configurados como públicos. Todos los demás ajustes de seguridad disponibles en Vimeo (por ejemplo, “Hide from Vimeo.com”) generan un formato de enlace diferente que no es compatible con este bloque de contenido. Este tipo de enlaces son alterados por el constructor, lo que impide que Braze genere una miniatura.
Social
Inserta iconos de plataformas de redes sociales. Puedes cargar imágenes personalizadas para iconos específicos de la marca.
| Propiedad | Descripción |
|---|---|
| Seleccionar colección de iconos | Establece el estilo de tu colección de iconos. |
| Configurar colección de iconos | Establece la URL de cada icono social. Incluye la opción Más opciones para editar el título y el texto alternativo. |
| Alinear | Mueve el icono social hacia la izquierda, el centro o la derecha. |
| Espaciado entre iconos | Determina el espaciado entre cada icono social. |
Iconos
Inserta un icono. Puedes cargar imágenes personalizadas. Braze utiliza un icono de marcador de posición de gran tamaño hasta que cargues una imagen.
| Propiedad | Descripción |
|---|---|
| Familia de fuente | El estilo de fuente para el texto de tu párrafo. |
| Peso de fuente | El grosor general de la fuente. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Color de texto | Modifica el color del título. |
| Color del enlace | Modifica el color del enlace. |
| Alinear | Mueve el icono hacia la izquierda, el centro o la derecha. |
| Espaciado de letras | Modifica la distancia entre cada carácter. |
| Tamaño del icono | Determina el tamaño de tu icono. |
| Espaciado del icono | Modifica el espacio del icono. |
| Relleno del icono | Modifica el relleno del icono. |
HTML
Inserta HTML sin formato. Recomendado para Liquid, como contenido conectado o sentencias condicionales.
| Propiedad | Descripción |
|---|---|
| HTML | Añade o edita HTML sin formato, incluyendo Liquid para personalización o lógica condicional. |
Menú
Crea un menú flexible para el mensaje que estás diseñando.
| Propiedad | Descripción |
|---|---|
| Configurar elementos del menú | Añade un elemento de menú. |
| Familia de fuente | El estilo de fuente para el menú. |
| Tamaño de fuente | El tamaño de tu menú. |
| Color de texto | Modifica el color del menú. |
| Color del enlace | Modifica el color del texto del menú. |
| Alinear | Mueve el menú hacia la izquierda, el centro o la derecha. |
| Espaciado de letras | Modifica la distancia entre cada carácter. |
| Diseño | Determina si el diseño es horizontal o vertical. |
| Separador | Añade carácter(es) entre las opciones del menú. |
| Menú móvil | Incluye opciones para modificar el tamaño, el color y el tipo de icono cuando se muestra en un dispositivo móvil. |
| Relleno de elementos | Modifica el relleno usando los botones + o -, o introduciendo un número específico. |
| Todos los lados | Establece un número de relleno consistente si el relleno de elementos está deshabilitado. |
Producto
Renderiza filas de productos de un catálogo de productos, ya sea como elementos estáticos de una selección de catálogo (hasta 12) o como productos dinámicos impulsados por un desencadenador de comercio electrónico de Canvas (hasta 24).
| Propiedad | Descripción |
|---|---|
| Tipo de contenido | Establece si los productos provienen de una selección fija del catálogo (Estático, hasta 12 productos) o de un desencadenador de recomendación de comercio electrónico de Canvas (Dinámico, hasta 24 productos). Dinámico solo está disponible en pasos de mensaje de Canvas. |
| Catálogo | Selecciona qué catálogo de productos proporciona los datos del producto y los mapeados de campos. |
| Selección | (Solo estático) Selecciona qué conjunto filtrado del catálogo define qué productos aparecen. |
| Mostrar detalles de origen | Alterna el texto de ayuda que muestra el catálogo subyacente o el campo de evento mapeado a cada campo de producto. |
| Imagen de variante | Muestra u oculta la imagen de variante para cada tarjeta de producto. |
| Título del producto | Muestra u oculta el título del producto para cada tarjeta. |
| Precio | Muestra u oculta el precio del producto. |
| Botón para URL del producto | Muestra u oculta un botón de llamada a la acción que enlaza a la URL del producto. |
| Cantidad | (Dinámico, solo Canvas, cuando el desencadenador de entrada no es un evento de vista de producto) Muestra u oculta la cantidad del producto del evento desencadenador. |
| Orientación del producto | Establece la posición de la imagen dentro de cada tarjeta: Imagen a la izquierda, Imagen centrada o Imagen a la derecha. |
| Alineación | Establece la alineación horizontal del contenido dentro de cada tarjeta. |
| Máximo de productos por fila | Establece cuántos productos aparecen por fila: 1, 2 o 3 (3 solo está disponible cuando la orientación es Imagen centrada). |
| Espaciado de productos | Establece el espaciado entre productos: Automático o Personalizado. |
| Espaciado personalizado | (Cuando se selecciona Personalizado) Establece el espacio en píxeles entre productos. |
Personalización
Puedes añadir personalización a tu correo electrónico usando Liquid o contenido conectado.
- Liquid: En Contenido > Personalización, selecciona un atributo, copia el fragmento de código y pégalo en un bloque de título, párrafo o lista (Liquid básico) o en un bloque HTML (Liquid avanzado). En general, aunque puedes usar Liquid básico en bloques de título, párrafo y lista, recomendamos usar bloques HTML para lógica más compleja y así evitar problemas de diseño. Ten en cuenta que Liquid no es compatible en bloques de imagen ni en campos de URL de botones.
- Contenido conectado: Añade un bloque HTML y coloca tu llamada
{% connected_content %}allí.
Bloques de editor de mensajes dentro de la aplicación
Los bloques de editor se encuentran en la sección Build para los mensajes dentro de la aplicación. Arrastra un bloque dentro de una columna; se ajustará automáticamente al ancho de la columna. Selecciona un bloque para editar su configuración en el panel de la derecha.
Para más información sobre cómo crear mensajes dentro de la aplicación en el editor de arrastrar y soltar, consulta Crear un mensaje dentro de la aplicación con arrastrar y soltar.
Título y párrafo
Añade texto de título o párrafo al mensaje.
| propiedad | Descripción |
|---|---|
| Familia tipográfica | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Altura de línea | Modifica la distancia entre líneas de texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Alineación del texto | Mueve el texto para alinearlo a la izquierda, al Centro, a la derecha o justificado. |
| Color del texto | Modifica el color del texto. |
Botón
Añade un botón estándar con estilo, enlaces y análisis configurables.
| propiedad | Descripción |
|---|---|
| Ancho del botón | Modifica el ancho del botón para que sea automático o manual. |
| Familia tipográfica | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Alineación del botón | Mueve el botón para que esté orientado a la izquierda, al centro o a la derecha. |
| Color del texto del botón | Modifica el color del texto en el botón. |
| Color de fondo | Modifica el color del fondo del botón. |
| Estilo del borde | Determina el estilo del borde del botón. |
| Radio del borde | Determina qué tan redondeadas son las esquinas. |
Comportamiento al hacer clic
| Acción | Descripción |
|---|---|
| Enviar formulario cuando se hace clic en el botón | Envía el formulario y ejecuta el comportamiento de clic seleccionado. Desactiva esta opción para ejecutar únicamente el comportamiento de clic. |
| Establecer comportamientos separados para cada plataforma | Personaliza el comportamiento del botón para cada plataforma de forma independiente. |
| Comportamiento de clic | Determina la acción cuando el usuario hace clic en el botón, como cerrar el mensaje, abrir una URL web, crear un vínculo profundo a una página específica de la aplicación, ir a otra página o solicitar permiso push. |
| Registrar atributos personalizados o eventos | Determina si hacer clic en el botón actualiza el perfil del usuario con datos personalizados. También puedes seleccionar el identificador para informes. |
Botón de radio
Añade una lista de opciones entre las que los usuarios pueden seleccionar una. Cuando se envía, el perfil de usuario registra el atributo personalizado asociado, que debe ser una cadena para poder guardarse. Los atributos personalizados con otros tipos de datos no se guardan en el perfil de usuario.
| propiedad | Descripción |
|---|---|
| Nombre del atributo personalizado | Selecciona qué atributo personalizado de usuario almacena la opción seleccionada del usuario cuando se envía el formulario. |
| Opciones totales | La lista de opciones; cada opción tiene un Texto de etiqueta (lo que ven los usuarios) y un Valor de atributo (lo que se almacena). Puedes añadir hasta 15 opciones, con un mínimo de 2. |
| Familia tipográfica | Tipo de letra para el texto del grupo de botones de opción. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto. |
| Tamaño de fuente | Tamaño del texto. |
| Altura de línea | Espaciado vertical entre líneas de texto. |
| Color del texto | Color del texto de la etiqueta de la opción. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
| Alineación | Alineación horizontal de las opciones dentro del bloque. |
| Color de acento | Color utilizado para los controles de botón de opción (como el indicador de estado seleccionado). |
| Relleno | Espaciado alrededor del bloque. |
Imagen
Inserta una imagen de la biblioteca de medios.
Si estás cargando imágenes con Contenido conectado o Liquid, asegúrate de que la URL de tu imagen comience con https://. Usar http:// provocará que tu aplicación se bloquee.
| Propiedad | Descripción |
|---|---|
| URL | La dirección alojada de la imagen. |
| Alineación | Mueve la imagen para que esté orientada a la izquierda, al centro o a la derecha. |
| Color de fondo | Modifica el color del fondo de la imagen. |
| Estilo de borde | Determina el estilo del borde de la imagen. |
| Radio de borde | Determina qué tan redondeadas son las esquinas de la imagen. |
Para conocer las especificaciones de las imágenes, consulta nuestras especificaciones de imágenes de mensajes dentro de la aplicación.
Comportamiento al hacer clic
| Acción | Descripción |
|---|---|
| Texto alternativo | El texto escrito que aparece en lugar de una imagen si esta no se carga. Los lectores de pantalla anuncian el texto alternativo para explicar las imágenes, así que usa un lenguaje sencillo para proporcionar información clave sobre una imagen. |
| Enviar formulario cuando se hace clic en la imagen | Envía el formulario y ejecuta el comportamiento de clic seleccionado. Desactiva esta opción para ejecutar solo el comportamiento de clic. |
| Establecer comportamientos separados para cada plataforma | Personaliza el comportamiento de la imagen para cada plataforma por separado. |
| Comportamiento de clic | Determina la acción cuando el usuario hace clic en la imagen, como cerrar el mensaje, abrir una URL web, crear un vínculo profundo a una página específica de la aplicación, ir a otra página o solicitar permiso push. |
| Registrar atributos personalizados o eventos | Determina si hacer clic en la imagen actualiza el perfil del usuario con datos personalizados. También puedes seleccionar el identificador para informes. |
Enlace
Inserta un hipervínculo en el que los usuarios pueden hacer clic para navegar a una URL específica. Se puede integrar en el texto o utilizarse de forma independiente.
| Propiedad | Descripción |
|---|---|
| Familia de fuentes | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Color del texto | Modifica el color del texto. |
Comportamiento al hacer clic
| Acción | Descripción |
|---|---|
| URL | El hipervínculo al que se navegará. |
| Identificador para informes | Determina el identificador para informes. |
Espaciador
Añade espacio o relleno entre otros bloques.
| Propiedad | Descripción |
|---|---|
| Color de fondo | Modifica el color de fondo del espaciador. |
| Altura | Modifica la altura del espaciador. También puedes modificar esto usando los controles de cambio de tamaño en el espaciador. |
Código personalizado
Inserta HTML, CSS o JavaScript personalizados para una personalización avanzada.
| Propiedad | Descripción |
|---|---|
| Código personalizado | Te permite añadir, editar o eliminar HTML, CSS y JavaScript para un mensaje dentro de la aplicación. |
Captura de teléfono
Inserta un campo de formulario para números de teléfono. Cuando se envía, el usuario queda suscrito al grupo de suscripción de SMS o al grupo de suscripción de WhatsApp.
| Propiedad | Descripción |
|---|---|
| Grupo de suscripción | El grupo de suscripción de SMS o WhatsApp al que el usuario está suscrito al enviar. Incluye una opción para recopilar números de teléfono de todos los países. |
| Alineación del texto | Mueve el texto para alinearlo a la izquierda, al centro, a la derecha o justificado. |
| Texto del marcador de posición | Un número de teléfono de marcador de posición para mostrar. |
Captura de correo electrónico
Inserta un campo de formulario para direcciones de correo electrónico. Cuando se envía, la dirección de correo electrónico se añade al perfil de ese usuario en Braze.
| Propiedad | Descripción |
|---|---|
| Font family | El estilo de fuente del texto. |
| Font weight | Determina el grosor del texto. |
| Font size | Determina el tamaño del texto. |
| Line height | Modifica la distancia entre líneas de texto. |
| Text color | Modifica el color del texto. |
| Letter spacing | Modifica la distancia entre cada carácter. |
| Text alignment | Mueve el texto para alinearlo a la izquierda, al centro, a la derecha o justificado. |
| Placeholder text | Una dirección de correo electrónico de marcador de posición para mostrar. |
Texto corto
Inserta un campo de formulario que admite atributos estándar (como nombre y apellido) o una cadena de atributo personalizado de tu elección.
| Propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si el campo debe completarse antes de poder enviar el formulario. |
| Máximo de caracteres | Limita cuántos caracteres puede escribir un usuario (los atributos personalizados de cadena tienen un límite de 255). |
| Texto del marcador de posición | Texto que se muestra dentro del campo de entrada hasta que el usuario escribe. |
| Atributo | Almacena el valor enviado como Nombre, Apellido o un Atributo personalizado en el perfil de usuario. |
| Nombre del atributo personalizado | Selecciona qué atributo personalizado de cadena recibe el valor enviado (disponible cuando Atributo está configurado como Atributo personalizado). |
| Familia tipográfica | Tipo de letra del texto de entrada. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto de entrada. |
| Tamaño de fuente | Tamaño del texto de entrada. |
| Altura de línea | Espaciado vertical entre líneas de texto. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
| Color | Color del texto escrito en el campo. |
| Alineación del texto | Alineación horizontal del texto de entrada dentro del campo. |
| Relleno | Espaciado alrededor del bloque. |
Desplegable
Inserta un menú desplegable con una lista predefinida de elementos entre los que los usuarios pueden seleccionar uno. Puedes añadir cualquier cadena de atributos personalizados a la lista.
| Propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si el usuario debe seleccionar una opción antes de poder enviar el formulario. |
| Texto del marcador de posición | Texto que se muestra en el menú desplegable hasta que un usuario selecciona una opción. |
| Nombre del atributo personalizado | Selecciona qué atributo personalizado de usuario recibe el valor seleccionado. |
| Total de opciones | La lista de opciones; cada opción tiene una Etiqueta de opción (lo que ven los usuarios) y un Valor del atributo (lo que se almacena). |
| Familia tipográfica | Tipo de letra del texto del menú desplegable. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto. |
| Tamaño de fuente | Tamaño del texto. |
| Altura de línea | Espaciado vertical entre líneas. |
| Color del texto | Color del texto del menú desplegable. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
| Alineación | Alineación horizontal del menú desplegable (izquierda o centro). |
| Relleno | Espaciado alrededor del bloque. |
Casilla de verificación
Inserta una casilla de verificación. Si el usuario marca la casilla, el atributo personalizado booleano del bloque se establece en true. Si no se marca, su atributo se establece en false.
| Propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si la casilla de verificación debe estar marcada antes de que se pueda enviar el formulario. |
| Nombre del atributo personalizado | Selecciona qué atributo personalizado booleano recibe true cuando está marcado o false cuando no lo está. |
| Color de acento | Color utilizado para el estilo del control de la casilla de verificación. |
| Relleno | Espaciado alrededor del bloque. |
Grupo de casillas de verificación
Los usuarios pueden seleccionar entre varias opciones. Los valores se establecen o se añaden a un atributo personalizado de matriz definido.
| propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si el usuario debe seleccionar al menos el número mínimo de opciones antes de enviar. |
| Opciones mínimas | Número mínimo de opciones que un usuario debe seleccionar (cuando el campo es obligatorio). |
| Opciones máximas | Número máximo de opciones que un usuario puede seleccionar. |
| Nombre del atributo personalizado | Selecciona a qué atributo personalizado de tipo array se escriben los valores seleccionados. |
| Acción | Establece si el envío Sets items (reemplaza el array) o Adds items (agrega al array). |
| Total de opciones | La lista de opciones; cada opción tiene un Label text (lo que ven los usuarios) y un Attribute value (lo que se almacena). |
| Familia tipográfica | Tipo de letra para las etiquetas de opciones. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto de la etiqueta de opción. |
| Tamaño de fuente | Tamaño del texto de la etiqueta de opción. |
| Altura de línea | Espaciado vertical entre líneas de texto. |
| Color de texto | Color del texto de la etiqueta de opción. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
| Alineación | Alineación horizontal del grupo (inicio o centro). |
| Color de acento | Color de los controles de casilla de verificación. |
| Relleno | Espaciado alrededor del bloque. |
Texto largo
Campo de texto multilínea para flujos de tipo cuestionario. Si no ves este bloque, ponte en contacto con soporte de Braze o con tu administrador del éxito del cliente de Braze.
| Propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si el campo debe completarse antes de que se pueda enviar el formulario. |
| Caracteres mínimos | El número mínimo de caracteres que un usuario debe introducir. |
| Caracteres máximos | El número máximo de caracteres que un usuario puede introducir. |
| Ocultar recuento de caracteres | Oculta o muestra el contador de caracteres en vivo debajo del área de texto. |
| Texto del marcador de posición | Texto que se muestra dentro del área de texto vacía hasta que el usuario escribe. |
| Altura (filas de texto) | Controla la altura del área de texto, medida en filas. |
| Familia tipográfica | Tipo de letra para el texto del área de texto. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto. |
| Tamaño de fuente | Tamaño del texto. |
| Altura de línea | Espaciado vertical entre líneas de texto. |
| Color del texto | Color del texto. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
Cosas que debes saber
- Video: El compositor estándar no incluye un bloque de video dedicado. Usa Código personalizado para insertar un reproductor si es necesario. Para más información, consulta Mensajes dentro de la aplicación: preguntas frecuentes.
Bloques del editor de páginas de inicio
Los bloques del editor para páginas de inicio se encuentran en la sección Build del Editor de arrastrar y soltar, en Rows y categorías de bloques. Arrastra un bloque a la columna de una fila; se ajusta automáticamente al ancho de la columna. Selecciona un bloque para editar su configuración en el panel de propiedades del lado derecho.
Para más información sobre cómo crear y publicar páginas de inicio, consulta Crear páginas de inicio.
Título y párrafo
Añade texto de encabezado o cuerpo. Útil para estructurar secciones y mejorar la legibilidad.
| propiedad | Descripción |
|---|---|
| Familia tipográfica | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Altura de línea | Modifica la distancia entre líneas de texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Alineación del texto | Mueve el texto para alinearlo a la izquierda, al Centro, a la derecha o justificado. |
| Color del texto | Modifica el color del texto. |
Botón
Añade un elemento sobre el que se puede hacer clic para acciones como abrir un enlace o enviar un formulario.
| propiedad | Descripción |
|---|---|
| Ancho del botón | Modifica el ancho del botón para que sea automático o manual. |
| Familia tipográfica | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Alineación del botón | Mueve el botón para que esté orientado a la izquierda, al centro o a la derecha. |
| Color del texto del botón | Modifica el color del texto en el botón. |
| Color de fondo | Modifica el color del fondo del botón. |
| Estilo del borde | Determina el estilo del borde del botón. |
| Radio del borde | Determina qué tan redondeadas son las esquinas. |
Comportamiento al hacer clic
| Acción | Descripción |
|---|---|
| Enviar formulario cuando se hace clic en el botón | Envía el formulario y ejecuta el comportamiento de clic seleccionado. Desactiva esta opción para ejecutar únicamente el comportamiento de clic. |
| Establecer comportamientos separados para cada plataforma | Personaliza el comportamiento del botón para cada plataforma de forma independiente. |
| Comportamiento de clic | Determina la acción cuando el usuario hace clic en el botón, como cerrar el mensaje, abrir una URL web, crear un vínculo profundo a una página específica de la aplicación, ir a otra página o solicitar permiso push. |
| Registrar atributos personalizados o eventos | Determina si hacer clic en el botón actualiza el perfil del usuario con datos personalizados. También puedes seleccionar el identificador para informes. |
Si configuras un botón con Submit form when button is clicked y abres una URL web en una nueva pestaña, Safari en iOS puede bloquear la navegación. Abre la URL posterior al envío en la misma pestaña cuando envíes formularios. Para más información, consulta Crear páginas de inicio.
Botón de opción
Añade una lista de opciones de las cuales los usuarios pueden seleccionar una. Usa el panel de propiedades para configurar las opciones disponibles y el atributo personalizado que recibe el valor seleccionado. El perfil de usuario registra el valor seleccionado como un atributo personalizado de cadena cuando se envía el formulario. Los atributos personalizados con otros tipos de datos no se guardan en el perfil de usuario.
| propiedad | Descripción |
|---|---|
| Nombre del atributo personalizado | Selecciona qué atributo personalizado de usuario almacena la opción seleccionada del usuario cuando se envía el formulario. |
| Opciones totales | La lista de opciones; cada opción tiene un Texto de etiqueta (lo que ven los usuarios) y un Valor de atributo (lo que se almacena). Puedes añadir hasta 15 opciones, con un mínimo de 2. |
| Familia tipográfica | Tipo de letra para el texto del grupo de botones de opción. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto. |
| Tamaño de fuente | Tamaño del texto. |
| Altura de línea | Espaciado vertical entre líneas de texto. |
| Color del texto | Color del texto de la etiqueta de la opción. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
| Alineación | Alineación horizontal de las opciones dentro del bloque. |
| Color de acento | Color utilizado para los controles de botón de opción (como el indicador de estado seleccionado). |
| Relleno | Espaciado alrededor del bloque. |
Imagen
Muestra una imagen desde una carga o una URL externa.
Si estás cargando imágenes con Contenido conectado o Liquid, asegúrate de que la URL de tu imagen comience con https://. Usar http:// provocará que tu aplicación se bloquee.
| Propiedad | Descripción |
|---|---|
| URL | La dirección alojada de la imagen. |
| Alineación | Mueve la imagen para que esté orientada a la izquierda, al centro o a la derecha. |
| Color de fondo | Modifica el color del fondo de la imagen. |
| Estilo de borde | Determina el estilo del borde de la imagen. |
| Radio de borde | Determina qué tan redondeadas son las esquinas de la imagen. |
Comportamiento al hacer clic
| Acción | Descripción |
|---|---|
| Texto alternativo | El texto escrito que aparece en lugar de una imagen si esta no se carga. Los lectores de pantalla anuncian el texto alternativo para explicar las imágenes, así que usa un lenguaje sencillo para proporcionar información clave sobre una imagen. |
| Enviar formulario cuando se hace clic en la imagen | Envía el formulario y ejecuta el comportamiento de clic seleccionado. Desactiva esta opción para ejecutar solo el comportamiento de clic. |
| Establecer comportamientos separados para cada plataforma | Personaliza el comportamiento de la imagen para cada plataforma por separado. |
| Comportamiento de clic | Determina la acción cuando el usuario hace clic en la imagen, como cerrar el mensaje, abrir una URL web, crear un vínculo profundo a una página específica de la aplicación, ir a otra página o solicitar permiso push. |
| Registrar atributos personalizados o eventos | Determina si hacer clic en la imagen actualiza el perfil del usuario con datos personalizados. También puedes seleccionar el identificador para informes. |
Enlace
Añade un hipervínculo que los usuarios pueden seleccionar para ir a una URL. Puede estar dentro de un texto o de forma independiente.
| Propiedad | Descripción |
|---|---|
| Familia de fuentes | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Color del texto | Modifica el color del texto. |
Comportamiento al hacer clic
| Acción | Descripción |
|---|---|
| URL | El hipervínculo al que se navegará. |
| Identificador para informes | Determina el identificador para informes. |
Espaciador
Añade espacio vertical entre elementos.
| Propiedad | Descripción |
|---|---|
| Color de fondo | Modifica el color de fondo del espaciador. |
| Altura | Modifica la altura del espaciador. También puedes modificar esto usando los controles de cambio de tamaño en el espaciador. |
Código personalizado
Inserta HTML, CSS o JavaScript personalizado para personalización avanzada, como Google Tag Manager.
| Propiedad | Descripción |
|---|---|
| Código personalizado | Te permite añadir, editar o eliminar HTML, CSS y JavaScript. |
Captura de correo electrónico
Añade un campo de formulario para direcciones de correo electrónico. Al enviar, la dirección se guarda en el perfil de Braze del usuario.
| Propiedad | Descripción |
|---|---|
| Font family | El estilo de fuente del texto. |
| Font weight | Determina el grosor del texto. |
| Font size | Determina el tamaño del texto. |
| Line height | Modifica la distancia entre líneas de texto. |
| Text color | Modifica el color del texto. |
| Letter spacing | Modifica la distancia entre cada carácter. |
| Text alignment | Mueve el texto para alinearlo a la izquierda, al centro, a la derecha o justificado. |
| Placeholder text | Una dirección de correo electrónico de marcador de posición para mostrar. |
Captura de teléfono
Añade un campo de formulario para números de teléfono. Al enviar, suscribe al usuario a tu grupo de suscripción de SMS o WhatsApp seleccionado.
| Propiedad | Descripción |
|---|---|
| Grupo de suscripción | El grupo de suscripción de SMS o WhatsApp al que el usuario está suscrito al enviar. Incluye una opción para recopilar números de teléfono de todos los países. |
| Alineación del texto | Mueve el texto para alinearlo a la izquierda, al centro, a la derecha o justificado. |
| Texto del marcador de posición | Un número de teléfono de marcador de posición para mostrar. |
Campo de entrada
Añade un campo de formulario para atributos estándar (por ejemplo, nombre o apellido) o una cadena de atributo personalizado.
| Propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si el campo debe completarse antes de poder enviar el formulario. |
| Máximo de caracteres | Limita cuántos caracteres puede escribir un usuario (los atributos personalizados de cadena tienen un límite de 255). |
| Texto del marcador de posición | Texto que se muestra dentro del campo de entrada hasta que el usuario escribe. |
| Atributo | Almacena el valor enviado como Nombre, Apellido o un Atributo personalizado en el perfil de usuario. |
| Nombre del atributo personalizado | Selecciona qué atributo personalizado de cadena recibe el valor enviado (disponible cuando Atributo está configurado como Atributo personalizado). |
| Familia tipográfica | Tipo de letra del texto de entrada. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto de entrada. |
| Tamaño de fuente | Tamaño del texto de entrada. |
| Altura de línea | Espaciado vertical entre líneas de texto. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
| Color | Color del texto escrito en el campo. |
| Alineación del texto | Alineación horizontal del texto de entrada dentro del campo. |
| Relleno | Espaciado alrededor del bloque. |
Desplegable
Una lista predefinida de elementos; los usuarios eligen uno. Puedes asignar valores a cadenas de atributos personalizados.
| Propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si el usuario debe seleccionar una opción antes de poder enviar el formulario. |
| Texto del marcador de posición | Texto que se muestra en el menú desplegable hasta que un usuario selecciona una opción. |
| Nombre del atributo personalizado | Selecciona qué atributo personalizado de usuario recibe el valor seleccionado. |
| Total de opciones | La lista de opciones; cada opción tiene una Etiqueta de opción (lo que ven los usuarios) y un Valor del atributo (lo que se almacena). |
| Familia tipográfica | Tipo de letra del texto del menú desplegable. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto. |
| Tamaño de fuente | Tamaño del texto. |
| Altura de línea | Espaciado vertical entre líneas. |
| Color del texto | Color del texto del menú desplegable. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
| Alineación | Alineación horizontal del menú desplegable (izquierda o centro). |
| Relleno | Espaciado alrededor del bloque. |
Casilla de verificación
Cuando está marcada, establece el atributo personalizado booleano del bloque en true; cuando no está marcada, en false.
| Propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si la casilla de verificación debe estar marcada antes de que se pueda enviar el formulario. |
| Nombre del atributo personalizado | Selecciona qué atributo personalizado booleano recibe true cuando está marcado o false cuando no lo está. |
| Color de acento | Color utilizado para el estilo del control de la casilla de verificación. |
| Relleno | Espaciado alrededor del bloque. |
Grupo de casillas de verificación
Los usuarios eligen múltiples opciones; los valores establecen o se añaden a un atributo personalizado de array definido.
| propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si el usuario debe seleccionar al menos el número mínimo de opciones antes de enviar. |
| Opciones mínimas | Número mínimo de opciones que un usuario debe seleccionar (cuando el campo es obligatorio). |
| Opciones máximas | Número máximo de opciones que un usuario puede seleccionar. |
| Nombre del atributo personalizado | Selecciona a qué atributo personalizado de tipo array se escriben los valores seleccionados. |
| Acción | Establece si el envío Sets items (reemplaza el array) o Adds items (agrega al array). |
| Total de opciones | La lista de opciones; cada opción tiene un Label text (lo que ven los usuarios) y un Attribute value (lo que se almacena). |
| Familia tipográfica | Tipo de letra para las etiquetas de opciones. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto de la etiqueta de opción. |
| Tamaño de fuente | Tamaño del texto de la etiqueta de opción. |
| Altura de línea | Espaciado vertical entre líneas de texto. |
| Color de texto | Color del texto de la etiqueta de opción. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
| Alineación | Alineación horizontal del grupo (inicio o centro). |
| Color de acento | Color de los controles de casilla de verificación. |
| Relleno | Espaciado alrededor del bloque. |
Texto largo
Campo de texto multilínea para flujos de tipo cuestionario. Si no ves este bloque, ponte en contacto con soporte de Braze o tu administrador del éxito del cliente de Braze. Este bloque no está disponible para páginas de inicio estándar.
| Propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si el campo debe completarse antes de que se pueda enviar el formulario. |
| Caracteres mínimos | El número mínimo de caracteres que un usuario debe introducir. |
| Caracteres máximos | El número máximo de caracteres que un usuario puede introducir. |
| Ocultar recuento de caracteres | Oculta o muestra el contador de caracteres en vivo debajo del área de texto. |
| Texto del marcador de posición | Texto que se muestra dentro del área de texto vacía hasta que el usuario escribe. |
| Altura (filas de texto) | Controla la altura del área de texto, medida en filas. |
| Familia tipográfica | Tipo de letra para el texto del área de texto. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto. |
| Tamaño de fuente | Tamaño del texto. |
| Altura de línea | Espaciado vertical entre líneas de texto. |
| Color del texto | Color del texto. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
Cosas que debes saber
- Video: El compositor estándar no incluye un bloque de video dedicado. Usa Custom code para insertar un reproductor si es necesario. Para más información, consulta Páginas de inicio.
Bloques del editor de Banner
En el compositor de Banner, arrastra filas y bloques desde la sección Build al canvas para diseñar tu mensaje. Selecciona Styles para ajustar el estilo a nivel de página, o selecciona un bloque o fila para editar sus propiedades en el panel lateral.
Para ver el flujo completo de creación de un Banner, consulta Crear un Banner.
El compositor de Banner ofrece los mismos tipos de bloques de diseño que otras superficies de arrastrar y soltar, pero no el conjunto completo de bloques de formulario (por ejemplo, no incluye bloques de botón de opción, texto corto, menú desplegable ni casilla de verificación). Puedes añadir bloques de Phone capture y Email capture; solo se permite un bloque de captura de teléfono y un bloque de captura de correo electrónico por mensaje.
Título y párrafo
Añade texto de encabezado o cuerpo con opciones de texto enriquecido.
| propiedad | Descripción |
|---|---|
| Familia tipográfica | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Altura de línea | Modifica la distancia entre líneas de texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Alineación del texto | Mueve el texto para alinearlo a la izquierda, al Centro, a la derecha o justificado. |
| Color del texto | Modifica el color del texto. |
Botón
Añade un botón en el que se puede hacer clic. Puedes configurar enlaces y opciones de análisis en el panel de propiedades.
| propiedad | Descripción |
|---|---|
| Ancho del botón | Modifica el ancho del botón para que sea automático o manual. |
| Familia tipográfica | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Alineación del botón | Mueve el botón para que esté orientado a la izquierda, al centro o a la derecha. |
| Color del texto del botón | Modifica el color del texto en el botón. |
| Color de fondo | Modifica el color del fondo del botón. |
| Estilo del borde | Determina el estilo del borde del botón. |
| Radio del borde | Determina qué tan redondeadas son las esquinas. |
Comportamiento de clic
| Acción | Descripción |
|---|---|
| Enviar formulario cuando se hace clic en el botón | Envía el formulario y ejecuta el comportamiento de clic seleccionado. Desactiva esta opción para ejecutar únicamente el comportamiento de clic. |
| Establecer comportamientos separados para cada plataforma | Personaliza el comportamiento del botón para cada plataforma de forma independiente. |
| Comportamiento de clic | Determina la acción cuando el usuario hace clic en el botón, como cerrar el mensaje, abrir una URL web, crear un vínculo profundo a una página específica de la aplicación, ir a otra página o solicitar permiso push. |
| Registrar atributos personalizados o eventos | Determina si hacer clic en el botón actualiza el perfil del usuario con datos personalizados. También puedes seleccionar el identificador para informes. |
Para más información, consulta Definir el comportamiento de clic en el artículo de Banner.
Imagen
Muestra una imagen desde una URL alojada. Configura las opciones de visualización en el panel de propiedades.
Si estás cargando imágenes con Contenido conectado o Liquid, asegúrate de que la URL de tu imagen comience con https://. Usar http:// provocará que tu aplicación se bloquee.
| Propiedad | Descripción |
|---|---|
| URL | La dirección alojada de la imagen. |
| Alineación | Mueve la imagen para que esté orientada a la izquierda, al centro o a la derecha. |
| Color de fondo | Modifica el color del fondo de la imagen. |
| Estilo de borde | Determina el estilo del borde de la imagen. |
| Radio de borde | Determina qué tan redondeadas son las esquinas de la imagen. |
Comportamiento de clic
| Acción | Descripción |
|---|---|
| Texto alternativo | El texto escrito que aparece en lugar de una imagen si esta no se carga. Los lectores de pantalla anuncian el texto alternativo para explicar las imágenes, así que usa un lenguaje sencillo para proporcionar información clave sobre una imagen. |
| Enviar formulario cuando se hace clic en la imagen | Envía el formulario y ejecuta el comportamiento de clic seleccionado. Desactiva esta opción para ejecutar solo el comportamiento de clic. |
| Establecer comportamientos separados para cada plataforma | Personaliza el comportamiento de la imagen para cada plataforma por separado. |
| Comportamiento de clic | Determina la acción cuando el usuario hace clic en la imagen, como cerrar el mensaje, abrir una URL web, crear un vínculo profundo a una página específica de la aplicación, ir a otra página o solicitar permiso push. |
| Registrar atributos personalizados o eventos | Determina si hacer clic en la imagen actualiza el perfil del usuario con datos personalizados. También puedes seleccionar el identificador para informes. |
Enlace
Inserta un hipervínculo que los usuarios pueden seleccionar.
| Propiedad | Descripción |
|---|---|
| Familia de fuentes | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Color del texto | Modifica el color del texto. |
Comportamiento de clic
| Acción | Descripción |
|---|---|
| URL | El hipervínculo al que se navegará. |
| Identificador para informes | Determina el identificador para informes. |
Espaciador
Añade espacio vertical entre bloques.
| Propiedad | Descripción |
|---|---|
| Color de fondo | Modifica el color de fondo del espaciador. |
| Altura | Modifica la altura del espaciador. También puedes modificar esto usando los controles de cambio de tamaño en el espaciador. |
Código personalizado
Inserta HTML personalizado para diseños avanzados o contenido incrustado (por ejemplo, video). Los clics dentro de HTML personalizado no se rastrean a menos que llames a brazeBridge.logClick() — consulta Código personalizado y puente JavaScript para Banners.
| Propiedad | Descripción |
|---|---|
| Código personalizado | Añade o edita HTML (y activos relacionados) para el Banner. |
Captura de teléfono
Recopila un número de teléfono. Al enviar, suscribe al usuario a tu grupo de suscripción de SMS o WhatsApp seleccionado. Solo uno por Banner.
| Propiedad | Descripción |
|---|---|
| Grupo de suscripción | El grupo de suscripción de SMS o WhatsApp al que el usuario está suscrito al enviar. Incluye una opción para recopilar números de teléfono de todos los países. |
| Alineación del texto | Mueve el texto para alinearlo a la izquierda, al centro, a la derecha o justificado. |
| Texto del marcador de posición | Un número de teléfono de marcador de posición para mostrar. |
Captura de correo electrónico
Recopila una dirección de correo electrónico y la añade al perfil de Braze del usuario al enviar. Solo uno por Banner.
| Propiedad | Descripción |
|---|---|
| Font family | El estilo de fuente del texto. |
| Font weight | Determina el grosor del texto. |
| Font size | Determina el tamaño del texto. |
| Line height | Modifica la distancia entre líneas de texto. |
| Text color | Modifica el color del texto. |
| Letter spacing | Modifica la distancia entre cada carácter. |
| Text alignment | Mueve el texto para alinearlo a la izquierda, al centro, a la derecha o justificado. |
| Placeholder text | Una dirección de correo electrónico de marcador de posición para mostrar. |
Texto largo
Campo de texto multilínea para flujos de tipo cuestionario. Si no ves este bloque, ponte en contacto con soporte de Braze o tu administrador del éxito del cliente de Braze.
| Propiedad | Descripción |
|---|---|
| Campo de entrada obligatorio | Indica si el campo debe completarse antes de que se pueda enviar el formulario. |
| Caracteres mínimos | El número mínimo de caracteres que un usuario debe introducir. |
| Caracteres máximos | El número máximo de caracteres que un usuario puede introducir. |
| Ocultar recuento de caracteres | Oculta o muestra el contador de caracteres en vivo debajo del área de texto. |
| Texto del marcador de posición | Texto que se muestra dentro del área de texto vacía hasta que el usuario escribe. |
| Altura (filas de texto) | Controla la altura del área de texto, medida en filas. |
| Familia tipográfica | Tipo de letra para el texto del área de texto. |
| Grosor de fuente | Grosor (como ligero, normal o negrita) del texto. |
| Tamaño de fuente | Tamaño del texto. |
| Altura de línea | Espaciado vertical entre líneas de texto. |
| Color del texto | Color del texto. |
| Espaciado entre letras | Espaciado horizontal entre caracteres. |
Cosas que debes saber
- Video: El compositor estándar no incluye un bloque de video dedicado. Usa Custom code para incrustar un reproductor si es necesario. Para más información, consulta Banners: preguntas frecuentes.
- Liquid: La mayoría de Liquid es compatible; hay excepciones como las etiquetas de rerenderizado de Catálogo. Para más información, consulta Banners: preguntas frecuentes.
Bloques del editor del centro de preferencias
Arrastra bloques desde la sección Crear a una fila en el editor del centro de preferencias de arrastrar y soltar. Cada bloque tiene su propia configuración; el panel del lado derecho cambia a propiedades o estilo del elemento seleccionado.
Antes de editar bloques, añade grupos de suscripción y configura el smart block de suscripción (ver más abajo). Para el flujo de configuración completo, consulta Crear un centro de preferencias de correo electrónico con arrastrar y soltar.
Título y párrafo
Añade encabezados o texto del cuerpo con opciones de texto enriquecido.
| propiedad | Descripción |
|---|---|
| Familia tipográfica | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Altura de línea | Modifica la distancia entre líneas de texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Alineación del texto | Mueve el texto para alinearlo a la izquierda, al Centro, a la derecha o justificado. |
| Color del texto | Modifica el color del texto. |
Botón
Añade un botón interactivo (por ejemplo, Guardar o navegación).
| propiedad | Descripción |
|---|---|
| Ancho del botón | Modifica el ancho del botón para que sea automático o manual. |
| Familia tipográfica | El estilo de fuente del texto. |
| Grosor de fuente | Determina el grosor del texto. |
| Tamaño de fuente | Determina el tamaño del texto. |
| Espaciado entre letras | Modifica la distancia entre cada carácter. |
| Alineación del botón | Mueve el botón para que esté orientado a la izquierda, al centro o a la derecha. |
| Color del texto del botón | Modifica el color del texto en el botón. |
| Color de fondo | Modifica el color del fondo del botón. |
| Estilo del borde | Determina el estilo del borde del botón. |
| Radio del borde | Determina qué tan redondeadas son las esquinas. |
Imagen
Muestra una imagen de la biblioteca de medios o de una URL.
Si estás cargando imágenes con Contenido conectado o Liquid, asegúrate de que la URL de tu imagen comience con https://. Usar http:// provocará que tu aplicación se bloquee.
| Propiedad | Descripción |
|---|---|
| URL | La dirección alojada de la imagen. |
| Alineación | Mueve la imagen para que esté orientada a la izquierda, al centro o a la derecha. |
| Color de fondo | Modifica el color del fondo de la imagen. |
| Estilo de borde | Determina el estilo del borde de la imagen. |
| Radio de borde | Determina qué tan redondeadas son las esquinas de la imagen. |
Espaciador
Añade espacio vertical entre bloques.
| Propiedad | Descripción |
|---|---|
| Color de fondo | Modifica el color de fondo del espaciador. |
| Altura | Modifica la altura del espaciador. También puedes modificar esto usando los controles de cambio de tamaño en el espaciador. |
Grupos de suscripción (smart block)
Añade un bloque de plantilla que enumera los grupos de suscripción, controles opcionales de Subscribe to all / Unsubscribe from all, y descripciones. Configúralo después de añadir grupos en el flujo de trabajo del centro de preferencias.
Después de añadir grupos de suscripción, selecciona el smart block en el lienzo para:
- Reordenar grupos de suscripción
- Añadir o quitar grupos
- Añadir o quitar descripciones
- Alternar Subscribe to all y Unsubscribe from all para los grupos en ese bloque
El control Unsubscribe from all en la parte inferior de la plantilla predeterminada es obligatorio y realiza una cancelación de suscripción global del correo electrónico.
Cosas que debes saber
- Estilos comunes: Puedes establecer valores predeterminados para toda la página en Common Styles antes de ajustar bloques individuales. Para más información, consulta Personalizar el centro de preferencias con el editor de arrastrar y soltar.
- Página de confirmación: Cambia a Confirmation Page en la parte superior del editor para dar estilo a la experiencia posterior al guardado usando los mismos tipos de bloques.