Apariencia
Resumen
Esta guía explica cómo dar estilo y personalizar la marca de los Componentes Avonni dentro de Salesforce Experience Cloud. Tanto si usas el marco moderno LWR como el marco tradicional Aura, puedes adaptar la apariencia de tu sitio para crear una experiencia de usuario fluida.
Lo que aprenderás
Compatibilidad con frameworks: Distinguir entre las opciones de estilo disponibles en LWR frente a Aura.
Personalización a nivel de componente: Ajustar con precisión componentes individuales para que coincidan con tu marca.
Integración de temas: Aprende cómo los componentes heredan los estilos globales del sitio.
Herramientas de eficiencia: Usa "Copiar/Pegar propiedades de estilo" para mantener la coherencia.
Estilo avanzado: Usa CSS personalizado para un control granular
Especificidades del framework: LWR frente a Aura
Es importante identificar qué framework utiliza tu sitio de Experience, ya que las herramientas de estilo disponibles difieren significativamente:
Pestaña Estilo y visibilidad
Disponible. Gestionada directamente por Salesforce para un espaciado y diseño granulares.
No disponible.
Pestaña Apariencia de Avonni
Disponible para un estilizado profundo de componentes.
Disponible para el estilizado de componentes.
Vinculación global del tema
Compatibilidad total con los conjuntos de branding de DXP.
Limitada a la herencia estándar del tema.
Importante
La pestaña Estilo y visibilidad es una función nativa de Salesforce gestionada directamente por la plataforma. Solo está disponible para sitios creados con el framework LWR. Si estás usando un Aura sitio, usarás principalmente la configuración de Apariencia específica de Avonni y el CSS global del sitio
Estilizado individual
Cada componente Avonni ofrece una sección de Apariencia dedicada donde puedes ajustar su estilo. Esta configuración te permite personalizar la apariencia de tus componentes.
Los componentes Avonni en Experience Site están diseñados para adaptarse automáticamente a la configuración de estilo predeterminada del tema de tu sitio.
Sin embargo, si realizas ajustes de estilo a nivel de componente, estos cambios anularán específicamente los estilos predeterminados correspondientes establecidos por el tema de tu sitio. Esta función permite una personalización de diseño más precisa e individualizada para cada componente.
Coherencia del tema
Adopción automática del tema: Los componentes Avonni se adaptan de forma predeterminada a la configuración del tema de tu sitio.
Sobrescritura con estilos personalizados: Cualquier ajuste realizado a nivel de componente anulará los estilos predeterminados del tema, ofreciendo un control de diseño preciso para cada componente.
Integración con la configuración global del tema
Integración perfecta del tema: Vincula sin esfuerzo los componentes Avonni a la configuración global del tema de tu Plataforma de Experiencia Digital (DXP).
No se requieren entradas manuales de estilo: Conecta directamente los atributos de estilo del componente con los valores de tema predefinidos de DXP, eliminando la necesidad de entradas manuales de estilo.
Copiar/Pegar propiedades de estilo
Esta función simplifica la creación de un estilo visual cohesivo para tus sitios de Experience.
Así es como funciona y los beneficios:
Cómo usarlo
Localiza el componente de origen: Busca un componente con la apariencia deseada (colores, fuentes, etc.).
Copiar estilos: En la configuración de Apariencia del componente, haz clic en "Copiar propiedades de estilo".
Aplicar al componente de destino: Selecciona el componente al que quieres dar estilo y luego elige "Pegar propiedades de estilo" en su configuración de Apariencia.
Por qué es útil
Coherencia visual: Mantén sin esfuerzo un aspecto unificado para tu sitio.
Ahorra tiempo: Evita ajustes de estilo repetitivos en varios componentes.
Diseño simplificado: Céntrate en crear contenido y diseños excelentes, mientras el estilo se vuelve más rápido y fácil.
Estilizado con CSS personalizado
¿Quieres adaptar la apariencia de los componentes Avonni más allá de las opciones de estilo integradas? Aquí te explicamos cómo:
Por qué usar CSS personalizado
Marca única: Haz que los componentes coincidan con precisión con el diseño o las pautas de marca de tu sitio web.
Efectos avanzados: Consigue elementos visuales que no son posibles con la configuración estándar (por ejemplo, animaciones especiales, efectos al pasar el cursor, etc.).
Control total: Obtén exactamente el aspecto que deseas sin limitaciones.
Cómo funciona
Crear CSS: Escribe tus estilos CSS personalizados, definiendo los cambios que deseas.
Añadir al sitio: Usa las funciones estándar de Experience Cloud para incluir este CSS en el código del encabezado de tu sitio.
Aplicar a los componentes: Añade los nombres de tus clases CSS personalizadas a los Componentes Avonni
Última actualización
¿Te fue útil?