AX - Avatar
Descripción general
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 recurre a iniciales o iconos.
Perfecto para encabezados de perfil de usuario, listas de miembros de la comunidad, directorios de contactos o cualquier lugar donde los usuarios del portal necesiten 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 cómo mostrar las iniciales:
Entrada manual
Si conoces las iniciales que deseas mostrar, introdúcelas directamente en el campo "Initials".
Generación dinámica (Expresiones)
Para hacer que tus componentes Avonni sean dinámicos, puedes usar Experience Cloud ExpressionsPor ejemplo, en el componente Avatar abajo, puedes usar la siguiente expresión para mostrar automáticamente el nombre del usuario actualmente conectado:
{!User.Record.Name} Puedes reemplazar Nombre con el nombre real del campo que almacena el nombre del usuario en tu organización de Salesforce.
Si deseas generar automáticamente iniciales a partir de un nombre completo, activa la opción "Initials Auto Formatted". Esto usará expresiones de Experience Cloud para extraer y formatear la primera letra de cada palabra en el nombre.
Imagen personalizada
Agrega una foto de perfil, logotipo o cualquier imagen para que el Avatar sea fácilmente reconocible. Sube tu imagen usando la opción Selected Content —el componente la recorta y formatea automáticamente para ajustarla a la forma del Avatar.
Si no se agrega ninguna imagen, el Avatar muestra iniciales en su lugar
Variante (Forma)
Elige entre círculo o cuadrado usando el campo Variante para que coincida con el 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é tan grande aparece el Avatar en la página usando la Tamaño propiedad. Las opciones varían desde x-small hasta xx-large, para que puedas 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 Primary Text para la información más importante (como un nombre completo) y Secondary Text para detalles de apoyo (como el puesto 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 pequeñas insignias y se pueden estilizar con diferentes colores usando la opción Tag Variant —útil para mostrar estado, departamento, rol o cualquier identificador rápido.
Ejemplos de casos de uso
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 puesto 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 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 facilita seguir las conversaciones.
Páginas de equipo – Muestra a los miembros del equipo con Avatares que incluyen nombres, roles y etiquetas para departamento o especialidad. Esto ayuda a los usuarios del portal a encontrar el contacto adecuado y comprender la estructura del equipo de un vistazo.
Especificaciones
Iniciales
Introduce iniciales específicas para que se muestren dentro del Avatar. Te permite definir manualmente las letras representativas para un usuario o entidad
Initials Auto Formatted
Esta función genera y muestra automáticamente iniciales basadas en un nombre completo proporcionado, asegurando una representación coherente sin entrada manual
Nombre del icono de reserva (fallback)
Determina el icono de respaldo que se mostrará en el Avatar cuando los datos primarios (como una imagen o iniciales) estén ausentes, asegurando continuidad visual
Tamaño
Ajusta las dimensiones generales del Avatar para que encaje en diversos contextos de la interfaz de usuario
Variante
Elige entre una forma circular (círculo) o una cuadrada (cuadrado) para el Avatar y así alinearlo con tus preferencias de diseño
Ocultar detalles del Avatar
Activa o desactiva para mostrar u ocultar detalles adicionales asociados con el Avatar, como textos o etiquetas
Primary Text
El texto principal mostrado junto al Avatar, usado a menudo para nombres o identificadores principales
Estilo del texto primario
Designa el estilo de fuente para el texto primario, eligiendo entre opciones como Heading 1-4 o Paragraph 1-2
Secondary Text
Texto adicional mostrado debajo del texto primario, adecuado para información suplementaria o subtítulos
Estilo del texto secundario
Define el estilo de fuente para el texto secundario, con opciones que van desde Heading 1-4 hasta Paragraph 1-2
Texto terciario
Texto de tercer nivel, típicamente 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 Heading 1-4 y Paragraph 1-2
Posición del texto
Especifica la alineación o posicionamiento de los textos acompañantes en relación con el Avatar, permitiendo un mejor diseño visual
Etiquetas
Configura propiedades para cualquier insignia o etiqueta asociada con el Avatar, proporcionando una forma de añadir marcadores categóricos o indicadores a tus Avatares
Primary Text
Color del texto primario
Establece el color del texto principal dentro del Avatar
Valores de color estándar, clases de utilidad de color
Primary Text
Tamaño de fuente del texto primario
Cambia el tamaño del texto primario
Valores de tamaño de fuente (por ejemplo, 12px, 1rem)
Primary Text
Estilo de fuente del texto primario
Controla el estilo de la fuente (por ejemplo, italic, oblique)
Opciones estándar de estilo de fuente
Primary Text
Peso de fuente del texto primario
Define la negrita del texto primario
Valores de peso de fuente (por ejemplo, normal, bold)
Secondary Text
Color del texto secundario
Establece el color del texto complementario
Valores de color estándar, clases de utilidad de color
Secondary Text
Tamaño de fuente del texto secundario
Cambia el tamaño del texto secundario
Valores de tamaño de fuente (por ejemplo, 12px, 1rem)
Secondary Text
Estilo de fuente del texto secundario
Controla el estilo de la fuente (por ejemplo, italic, oblique)
Opciones estándar de estilo de fuente
Secondary Text
Peso de fuente del texto secundario
Define la negrita del texto secundario
Valores de peso de fuente (por ejemplo, normal, bold)
Texto terciario
Color del texto terciario
Establece el color del texto de tercer nivel
Valores de color estándar, clases de utilidad de color
Texto terciario
Tamaño de fuente del texto terciario
Cambia el tamaño del texto terciario
Valores de tamaño de fuente (por ejemplo, 12px, 1rem)
Texto terciario
Estilo de fuente del texto terciario
Controla el estilo de la fuente (por ejemplo, italic, oblique)
Opciones estándar de estilo de fuente
Texto terciario
Peso de fuente del texto terciario
Define la negrita del texto terciario
Valores de peso de fuente (por ejemplo, normal, bold)
Icono
Color de fondo del icono
Establece el color de fondo del área del icono
Valores de color estándar, clases de utilidad 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 de utilidad de color
Icono
Utilidad de color de primer plano del icono
Aplica un esquema de color predefinido al icono
Nombres de clases de utilidad específicas
Icono
Ajuste del recorte de la imagen del icono (object-fit)
Controla cómo una imagen de icono encaja 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 (por ejemplo, 1px, 2px)
Borde
Radio del borde
Controla el redondeo de las esquinas del Avatar
Valores en píxeles, % (por ejemplo, 50% para un círculo)
Borde
Color del borde
Establece el color del borde del Avatar
Valores de color estándar, clases de utilidad de color
Borde
Estilo del borde
Define la apariencia del borde (por ejemplo, solid, dashed)
Estilos de borde CSS estándar
Iniciales
Color de las iniciales
Establece el color del texto para las iniciales mostradas
Valores de color estándar, clases de utilidad 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 de utilidad de color
Iniciales
Peso de fuente de las iniciales
Controla la negrita del texto de las iniciales
Valores de peso de fuente (por ejemplo, normal, bold)
Iniciales
Color de la entidad
Color de fondo cuando se generan iniciales
Valores de color estándar, clases de utilidad 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 (por ejemplo, normal, bold)
Última actualización
¿Te fue útil?