Apariencia
Resumen
Esta guía explica cómo diseñar y aplicar la marca a los Componentes Avonni dentro de Salesforce Experience Cloud. Ya sea que estés usando el moderno framework LWR o el tradicional framework Aura, puedes adaptar la apariencia de tu sitio para crear una experiencia de usuario coherente.
Lo que aprenderás
Compatibilidad del framework: Distinguir entre las opciones de estilo disponibles en LWR vs. Aura.
Personalización a nivel de componente: Ajustar finamente componentes individuales para que coincidan con tu marca.
Integración del tema: Aprender cómo los componentes heredan los estilos globales del sitio.
Herramientas de eficiencia: Usar "Copiar/Pegar propiedades de estilo" para mantener la coherencia.
Estilado avanzado: Usar CSS personalizado para un control granular
Particularidades del framework: LWR vs. 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 estilado profundo de componentes.
Disponible para el estilado de componentes.
Vinculación con tema global
Soporte completo para conjuntos de marca DXP.
Limitado a la herencia de temas estándar.
Importante
La pestaña Estilo y Visibilidad es una función nativa de Salesforce gestionada directamente por la plataforma. Solo está disponible para sitios construidos con el framework LWR. Si estás utilizando un sitio Aura , utilizarás principalmente los ajustes de Apariencia específicos de Avonni y el CSS global del sitio
Estilado individual
Cada Componente Avonni ofrece una sección de Apariencia dedicada donde puedes ajustar su estilo. Estos ajustes te permiten personalizar la apariencia de tus componentes.
Los Componentes Avonni en Experience Site están diseñados para adaptar automáticamente los ajustes de estilo predeterminados 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.
Consistencia del tema
Adopción automática del tema: Los Componentes Avonni adaptan por defecto los ajustes de tema de tu sitio.
Anular con estilos personalizados: Cualquier ajuste realizado a nivel de componente anulará los estilos predeterminados del tema, ofreciendo control de diseño preciso para cada componente.
Integración con los ajustes del tema global
Integración de tema sin fisuras: Vincula sin esfuerzo los Componentes Avonni a los ajustes de tema global 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 la 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 coherente para tus Experience Sites.
Así es como funciona y los beneficios:
Cómo usarlo
Localiza el componente fuente: Encuentra un componente con la apariencia deseada (colores, fuentes, etc.).
Copiar estilos: En los ajustes de Apariencia del componente, haz clic en "Copiar propiedades de estilo."
Aplicar al componente objetivo: Selecciona el componente que deseas estilizar y luego elige "Pegar propiedades de estilo" en sus ajustes de Apariencia.
Por qué es útil
Coherencia visual: Mantén sin esfuerzo una apariencia unificada para tu sitio.
Ahorra tiempo: Evita ajustes de estilo repetitivos en varios componentes.
Diseño optimizado: Concéntrate en crear excelente contenido y diseños, mientras que el estilado se vuelve más rápido y sencillo.
Estilado 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 exactamente con el diseño o las directrices de marca de tu sitio web.
Efectos avanzados: Logra elementos visuales que no son posibles con los ajustes estándar (por ejemplo, animaciones especiales, efectos al pasar el cursor, etc.).
Control total: Obtén la apariencia exacta que deseas sin limitaciones.
Cómo funciona
Crear CSS: Escribe tus estilos CSS personalizados, definiendo los cambios deseados.
Agregar al sitio: Usa las funciones estándar de Experience Cloud para incluir este CSS en el marcado head de tu sitio.
Aplicar a componentes: Agrega los nombres de tus clases CSS personalizadas a los Componentes Avonni
Última actualización
¿Te fue útil?