AX - Avatar
Resumen
AX - Avatar es un componente de Experience Cloud que muestra fotos de perfil, iniciales o iconos en las páginas de Experience Sites para representar usuarios, contactos, cuentas o cualquier registro de Salesforce.
Úsalo para mostrar perfiles de usuarios del portal, representantes de cuentas, listas de contactos o identificadores de entidades con un estilo visual coherente. El componente muestra automáticamente imágenes cuando están disponibles o, en su defecto, iniciales o iconos.
Perfecto para encabezados de perfil de usuario, listas de miembros de la comunidad, directorios de contactos o cualquier lugar en el que los usuarios del portal necesiten una identificación visual de personas o entidades.
Personalización del Avatar
El componente Avonni Avatar te ayuda a crear representaciones visualmente coherentes de usuarios o entidades dentro de tu sitio de Salesforce Experience Cloud. Aquí tienes una guía paso a paso para personalizar el Avatar según tus necesidades:
Mostrar iniciales
El componente Avatar ofrece flexibilidad en la forma en que muestras las iniciales:
Entrada manual
Si conoces las iniciales que quieres mostrar, introdúcelas directamente en el campo "Initials".
Generación dinámica (expresiones)
Para que tus componentes Avonni sean dinámicos, puedes usar expresiones de Experience Cloud. Por ejemplo, en el componente Avatar de abajo, puedes usar la siguiente expresión para mostrar automáticamente el nombre del usuario que ha iniciado sesión:
Puedes reemplazar Nombre por el nombre real del campo que almacena el nombre del usuario en tu organización de Salesforce.
Si deseas generar automáticamente las iniciales a partir de un nombre completo, habilita la opción "Initials Auto Formatted". Esto utilizará expresiones de Experience Cloud para extraer y dar formato a la primera letra de cada palabra del nombre.
Imagen personalizada
Añade una foto de perfil, un logotipo o cualquier imagen para que el Avatar sea reconocible al instante. Sube tu imagen mediante la Contenido seleccionado opción; el componente la recorta y la formatea automáticamente para que encaje en la forma del Avatar.
Si no se añade ninguna imagen, el Avatar muestra iniciales en su lugar
Variante (forma)
Elige entre círculo o cuadrado usando el Variante campo para adaptarlo al diseño de tu portal. Los avatares circulares funcionan bien para personas, mientras que las formas cuadradas son adecuadas para logotipos o iconos de entidad
Tamaño
Controla qué tamaño tiene el Avatar en la página usando la Tamaño propiedad. Las opciones van desde x-small en xx-large, así puedes equilibrarlo con el contenido circundante: más pequeño para listas en línea, más grande para encabezados de perfil.
Texto primario y secundario
Muestra contexto adicional junto al Avatar añadiendo campos de texto. Usa Texto primario para la información más importante (como un nombre completo) y Texto secundario para detalles de apoyo (como el cargo o el correo electrónico).
También puedes establecer estilos de fuente para cada nivel de texto para crear una jerarquía visual entre la información primaria y secundaria.
Etiquetas
Añade etiquetas visuales para categorizar o resaltar información sobre el Avatar. Las etiquetas aparecen como insignias pequeñas y se pueden estilizar con diferentes colores usando la Variante de etiqueta opción, útil para mostrar el estado, el departamento, el rol o cualquier identificador rápido.
Casos de uso de ejemplo
Perfiles de usuario — Crea encabezados de perfil completos combinando una imagen personalizada con texto primario para el nombre del usuario y texto secundario para su cargo o departamento. Esto ofrece a los usuarios del portal una representación clara y profesional en sus páginas de perfil.
Foros de la comunidad — Muestra avatares junto a las publicaciones y comentarios para que los miembros de la comunidad puedan identificar rápidamente quién está contribuyendo. Esto añade un toque personal que fomenta la participación y hace que las conversaciones sean más fáciles de seguir.
Páginas de equipo — Muestra a los miembros del equipo con avatares que incluyan nombres, roles y etiquetas de departamento o especialidad. Esto ayuda a los usuarios del portal a encontrar el contacto adecuado y entender la estructura del equipo de un vistazo.
Especificaciones
Iniciales
Introduce las iniciales específicas que se mostrarán dentro del Avatar. Te permite definir manualmente las letras representativas de un usuario o entidad
Iniciales formateadas automáticamente
Esta función genera y muestra automáticamente iniciales basadas en un nombre completo proporcionado, garantizando una representación coherente sin entrada manual
Nombre del icono de respaldo
Determina el icono de respaldo que se mostrará en el Avatar cuando falten los datos principales (como una imagen o iniciales), garantizando la continuidad visual
Tamaño
Ajusta las dimensiones generales del Avatar para adaptarlo a distintos contextos de la interfaz de usuario
Variante
Elige entre una forma circular (círculo) o una cuadrada (cuadrado) para el Avatar para alinearlo con tus preferencias de diseño
Ocultar detalles del Avatar
Activa o desactiva la visualización de detalles adicionales asociados al Avatar, como textos o etiquetas
Texto primario
El texto principal que se muestra junto al Avatar, a menudo usado para nombres o identificadores principales
Estilo del texto primario
Designa el estilo de fuente para el texto primario, eligiendo entre opciones como Encabezado 1-4 o Párrafo 1-2
Texto secundario
Texto adicional que se muestra debajo del texto primario, adecuado para información complementaria o subtítulos
Estilo del texto secundario
Define el estilo de fuente para el texto secundario, con opciones que van desde Encabezado 1-4 hasta Párrafo 1-2
Texto terciario
Texto de tercer nivel, normalmente usado para detalles extra o atributos relacionados con el Avatar
Estilo del texto terciario
Elige el estilo de fuente deseado para el texto terciario, con opciones que incluyen Encabezado 1-4 y Párrafo 1-2
Posición del texto
Especifica la alineación o el posicionamiento de los textos acompañantes en relación con el Avatar, lo que permite una mejor distribución visual
Etiquetas
Establece propiedades para las etiquetas de insignia asociadas al Avatar, proporcionando una forma de añadir marcadores o indicadores categóricos a tus Avatares
Texto primario
Color del texto primario
Establece el color del texto principal dentro del Avatar
Valores de color estándar, clases utilitarias de color
Texto primario
Tamaño de fuente del texto primario
Cambia el tamaño del texto primario
Valores de tamaño de fuente (p. ej., 12px, 1rem)
Texto primario
Estilo de fuente del texto primario
Controla el estilo de fuente (p. ej., cursiva, oblicua)
Opciones estándar de estilo de fuente
Texto primario
Peso de fuente del texto primario
Define el grosor del texto primario
Valores de peso de fuente (p. ej., normal, negrita)
Texto secundario
Color del texto secundario
Establece el color del texto complementario
Valores de color estándar, clases utilitarias de color
Texto secundario
Tamaño de fuente del texto secundario
Cambia el tamaño del texto secundario
Valores de tamaño de fuente (p. ej., 12px, 1rem)
Texto secundario
Estilo de fuente del texto secundario
Controla el estilo de fuente (p. ej., cursiva, oblicua)
Opciones estándar de estilo de fuente
Texto secundario
Peso de fuente del texto secundario
Define el grosor del texto secundario
Valores de peso de fuente (p. ej., normal, negrita)
Texto terciario
Color del texto terciario
Establece el color del texto de tercer nivel
Valores de color estándar, clases utilitarias de color
Texto terciario
Tamaño de fuente del texto terciario
Cambia el tamaño del texto terciario
Valores de tamaño de fuente (p. ej., 12px, 1rem)
Texto terciario
Estilo de fuente del texto terciario
Controla el estilo de fuente (p. ej., cursiva, oblicua)
Opciones estándar de estilo de fuente
Texto terciario
Peso de fuente del texto terciario
Define el grosor del texto terciario
Valores de peso de fuente (p. ej., normal, negrita)
Icono
Color de fondo del icono
Establece el color de fondo del área del icono
Valores de color estándar, clases utilitarias de color
Icono
Color de primer plano del icono
Establece el color de la imagen del icono o de las iniciales
Valores de color estándar, clases utilitarias de color
Icono
Utilidad de color de primer plano del icono
Aplica un esquema de color predefinido al icono
Nombres específicos de clases utilitarias
Icono
Ajuste del objeto de la imagen del icono
Controla cómo encaja una imagen de icono dentro de su espacio
fill, contain, cover, none, scale-down
Borde
Tamaño del borde
Especifica el ancho del borde del Avatar
Valores en píxeles (p. ej., 1px, 2px)
Borde
Radio del borde
Controla el redondeo de las esquinas del Avatar
Valores en píxeles, % (p. ej., 50% para un círculo)
Borde
Color del borde
Establece el color del borde del Avatar
Valores de color estándar, clases utilitarias de color
Borde
Estilo del borde
Define la apariencia del borde (p. ej., sólido, discontinuo)
Estilos estándar de borde CSS
Iniciales
Color de las iniciales
Establece el color del texto para las iniciales mostradas
Valores de color estándar, clases utilitarias de color
Iniciales
Color de las iniciales al pasar el cursor
Color de las iniciales cuando se pasa el cursor sobre el Avatar
Valores de color estándar, clases utilitarias de color
Iniciales
Peso de fuente de las iniciales
Controla el grosor del texto de las iniciales
Valores de peso de fuente (p. ej., normal, negrita)
Iniciales
Color de la entidad
Color de fondo cuando se generan iniciales
Valores de color estándar, clases utilitarias de color
Iniciales
Peso de fuente de la entidad
Peso de fuente de las iniciales generadas a partir de una entidad
Valores de peso de fuente (p. ej., normal, negrita)
Última actualización
¿Te fue útil?