Añadir y dar estilo a texto y listas en el Flow Builder

Añade títulos, párrafos o listas con un solo clic, dales estilo para que coincidan con tu marca y usa variables dinámicas para personalizar el contenido para cada usuario.

Configurar estilos de texto

El panel Styles incluye estilos de texto preconfigurados: H1, H2, H3, Button Label, Body, Caption y Small Label. Haz clic en cualquier estilo para editar su familia tipográfica, peso, tamaño, alineación, decoración y otras propiedades.

Cuando añades un elemento de texto, puedes elegir entre los estilos que hayas configurado aquí.

Los cambios en un estilo se aplican a todos los elementos de texto que lo usen, en todas las pantallas.

Para crear un nuevo estilo:

  1. Haz clic en Palette para abrir el panel Styles.
  2. En la pestaña Text, haz clic en Create style.
Nuevo estilo de texto
  1. Introduce un nombre y configura la tipografía:
  • Font family: Elige un tipo de letra. Para más información sobre el uso de fuentes personalizadas, consulta la guía.
  • Weight y size: Establece el grosor y el tamaño de la fuente.
  • Color: Establece el color del texto.
  • Line height: Establece el espaciado entre líneas o déjalo en Auto.
  • Alignment: Establece la alineación horizontal (izquierda, centro, derecha) y vertical (arriba, centro, abajo).
  • Decoration: Aplica subrayado o tachado.
  • Truncate: Limita el número de líneas que se muestran. El texto que supera ese límite se trunca. Útil cuando la longitud del contenido varía por variables dinámicas o localización.
  1. Haz clic en Create.

SF Pro no está disponible para uso multiplataforma. Recomendamos Inter como alternativa cercana.

Opciones de configuración de estilo de texto

Añadir texto

Para añadir un elemento de texto:

  1. Haz clic en + en la parte superior izquierda. Selecciona Text. Elige uno de los estilos de texto preconfigurados o definidos por ti.
New text
  1. Haz clic en el nuevo elemento y edita su contenido en la sección Content del panel Design a la derecha.
  2. Si es necesario, ajusta la tipografía en el panel Design. O bien, selecciona el texto en la vista previa para abrir un tooltip con opciones de estilo rápido.
  3. Opcionalmente, en los paneles Design e Interaction, también puedes aplicar cualquier otra configuración disponible para los componentes del flow. Para más detalles, consulta Estilizar elementos.

Si necesitas usar el mismo elemento de texto en varias pantallas, cópialo y pégalo: selecciona el elemento, pulsa Ctrl+C (o ⌘+C en Mac), ve a otra pantalla y pulsa Ctrl+V (o ⌘+V en Mac) para pegarlo.

Configuración del elemento de texto

Cambiar el estilo de partes del texto

Para cambiar el estilo solo de algunas partes de un elemento de texto:

  1. Selecciona una parte del elemento de texto en la sección Content.
  2. En el tooltip que aparece, cambia el color del texto, aplica negrita, subrayado, cursiva o tachado, o añade una URL.

La vista previa se actualiza al instante.

Editar parte del texto

Los flows admiten dos formas de convertir texto en enlaces clicables. Elige según el papel que desempeña el texto:

  • Enlace inline — para una URL dentro de texto continuo, como una referencia “Más información” insertada en un párrafo. Siempre se abre en el navegador integrado de la app.
  • Una acción Open URL — para elementos táctiles independientes, como un botón de Términos de servicio. Puede abrirse en el navegador integrado o en el externo.

Para convertir parte de un elemento de texto en un enlace:

  1. Selecciona el texto en la sección Content.
  2. En el tooltip de formato, haz clic en el icono de enlace.
  3. Pega la URL de destino en el pop up.
Tooltip de formato con el botón de enlace resaltado

Acción Abrir URL

Artículo principal: Acciones

Para convertir un botón entero en un enlace:

  1. Añade un Button — o usa el preset Links, una fila prediseñada con los botones Restore / Terms of Service / Privacy Policy.

    El preset Links en el canvas con los botones Terms of use, Restore y Privacy policy
  2. Selecciona el botón en el panel Layers y abre la pestaña Interactions en el panel derecho.

  3. Establece el destino para la acción Open URL.

    Una acción Open URL vacía bloquea la vista previa y la publicación.

    Configuración de la acción Open URL en el panel de Interactions

Añadir texto condicional

El texto condicional cambia lo que muestra un elemento de texto según una condición. Por ejemplo, un encabezado puede mostrar un mensaje cuando el usuario selecciona el plan anual y un mensaje diferente para el plan mensual. El texto condicional funciona como la visibilidad condicional, pero en lugar de mostrar u ocultar el elemento, intercambia el contenido.

Para configurar el texto condicional:

  1. Selecciona un elemento de texto en el lienzo.
  2. En el panel Design, en la sección Content, selecciona Conditional.
Contenido configurado como Condicional en el panel de Diseño
  1. Crea la condición if. Elige una propiedad de la pestaña Custom, Products o Elements, define el operador e introduce el valor a comparar. Para más información sobre los tipos de propiedad, consulta Visibilidad condicional.
  2. En then, escribe el texto que se mostrará cuando la condición sea verdadera. El formato de texto enriquecido funciona igual que para el texto normal. Para insertar una variable, haz clic en { } Add variable.
  3. En else, escribe el texto alternativo que se mostrará cuando ninguna condición coincida.
  4. (Opcional) Haz clic en + Add else/if para añadir más condiciones, cada una con su propio texto.

Para editar el texto condicional en otro idioma, cambia el idioma activo en la parte inferior del editor. Añade primero los idiomas en el panel Localizations — consulta Añadir idioma en Flow Builder.

Configuración de texto condicional con ramas if, then y else

Añadir listas

Los elementos de lista son contenedores formados por componentes de elementos individuales. Para listas simples de viñetas o numeradas dentro de un texto, usa un elemento de texto y aplica el formato que desees desde el panel Design.

  1. Haz clic en + en la parte superior izquierda. Selecciona List y elige una de las plantillas de lista.

  2. Ve al panel Design de la derecha para editar los elementos de la lista o subir una imagen como marcador de elemento.

Añadir elemento de lista