Apariencia
Resumen
Esta página es su guía para estilizar los Componentes Avonni para Experience Site. Aquí descubrirá cómo adaptar la apariencia de su sitio para crear una experiencia de usuario coherente y visualmente atractiva.
Lo que aprenderá
Personalización individual: Ajuste fino de la apariencia de cada Componente Avonni para un estilo distintivo que coincida con su marca.
Integración de tema: Entienda cómo combinar los Componentes Avonni con el tema existente de su Experience Site para obtener una apariencia cohesionada, conservando la flexibilidad de anular estilos cuando sea necesario.
Herramientas de eficiencia: Aprenda a usar copiar/pegar propiedades de estilo para establecer consistencia visual en su sitio rápidamente.
Estilizado avanzado: Descubra cómo usar CSS personalizado para desbloquear aún más opciones de personalización y lograr efectos únicos.
Por qué importa
Un Experience Site bien estilizado establece una presencia profesional, mejora la participación del usuario y refuerza la identidad de su marca. Los Componentes Avonni ofrecen la flexibilidad y las herramientas para lograr la apariencia perfecta sin necesidad de una codificación extensa
Estilizado individual
Cada Componente Avonni ofrece una sección dedicada de Apariencia donde puede ajustar su estilo. Estas configuraciones le permiten personalizar el aspecto y la sensación de sus componentes.
Los Componentes Avonni en Experience Site están diseñados para adaptar automáticamente la configuración de estilo predeterminada del tema de su sitio.
Sin embargo, si realiza ajustes de estilo a nivel de componente, estos cambios reemplazarán específicamente los estilos predeterminados correspondientes establecidos por el tema de su sitio. Esta función permite una personalización de diseño más precisa y individualizada para cada componente.
Consistencia del tema
Adopción automática del tema: Los Componentes Avonni adaptan por defecto la configuración del tema de su sitio.
Anular 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 de tema sin fisuras: Enlace sin esfuerzo los Componentes Avonni a la configuración global del tema de su Plataforma de Experiencia Digital (DXP).
No se requieren entradas de estilo manuales: Conecte directamente los atributos de estilo del componente a los valores de tema predefinidos del DXP, eliminando la necesidad de entradas de estilo manuales.
Copiar/pegar propiedades de estilo
Esta función simplifica la creación de un estilo visual cohesionado para sus Experience Sites.
Así es como funciona y los beneficios:
Cómo usarlo
Localizar componente de origen: Encuentre un componente con la apariencia deseada (colores, tipografías, etc.).
Copiar estilos: En la configuración de Apariencia del componente, haga clic en "Copiar propiedades de estilo".
Aplicar al componente de destino: Vaya al componente que desea estilizar y seleccione "Pegar propiedades de estilo" en su configuración de Apariencia.
Por qué es útil
Consistencia visual: Mantenga sin esfuerzo una apariencia unificada para su sitio.
Ahorra tiempo: Evite ajustes de estilo repetitivos en múltiples componentes.
Diseño simplificado: Concéntrese en crear contenido y diseños excelentes, mientras que el estilizado se vuelve más rápido y fácil.
Estilizado con CSS personalizado
¿Quiere adaptar la apariencia de los Componentes Avonni más allá de las opciones de estilo integradas? He aquí cómo:
Por qué usar CSS personalizado
Marca única: Haga que los componentes coincidan exactamente con el diseño de su sitio web o las directrices de su marca.
Efectos avanzados: Logre elementos visuales que no son posibles con las configuraciones estándar (p. ej., animaciones especiales, efectos al pasar el cursor, etc.).
Control total: Obtenga la apariencia exacta que desea sin limitaciones.
Cómo funciona
Crear CSS: Escriba sus estilos CSS personalizados, definiendo los cambios deseados.
Agregar al sitio: Utilice las funciones estándar de Experience Cloud para incluir este CSS en el marcado head de su sitio.
Aplicar a los componentes: Agregue los nombres de sus clases CSS personalizadas a los Componentes Avonni
Última actualización
¿Te fue útil?