Apparence

Aperçu

Ce guide explique comment styliser et marquer les composants Avonni dans Salesforce Experience Cloud. Que vous utilisiez le framework moderne LWR ou le framework traditionnel Aura, vous pouvez adapter l'apparence de votre site pour créer une expérience utilisateur homogène.

Ce que vous apprendrez

• Compatibilité des frameworks: Distinguer les options de stylisation disponibles dans LWR vs. Aura.

• Personnalisation au niveau du composant: Ajuster finement les composants individuels pour correspondre à votre marque.

• Intégration du thème: Apprendre comment les composants héritent des styles globaux du site.

• Outils d'efficacité: Utilisez "Copier/Coller les propriétés de style" pour maintenir la cohérence.

• Stylisation avancée: Utiliser du CSS personnalisé pour un contrôle granulaire

---

Spécificités des frameworks : LWR vs. Aura

Il est important d'identifier quel framework utilise votre site Experience, car les outils de stylisation disponibles diffèrent considérablement :

Fonctionnalité	Framework LWR	Framework Aura
Onglet Style et Visibilité	Disponible. Géré directement par Salesforce pour un espacement et une mise en page granulaire.	Non disponible.
Onglet Apparence Avonni	Disponible pour une stylisation approfondie des composants.	Disponible pour la stylisation des composants.
Liaison au thème global	Prise en charge complète des ensembles de branding DXP.	Limitée à l'héritage de thème standard.

Important

L'onglet Style et Visibilité est une fonctionnalité native de Salesforce gérée directement par la plateforme. Il n'est disponible que pour les sites construits avec le framework LWR. Si vous utilisez un site Aura , vous utiliserez principalement les paramètres d'apparence spécifiques à Avonni et le CSS global du site

---

Stylisation individuelle

Chaque composant Avonni offre une section Apparence dédiée où vous pouvez ajuster sa stylisation. Ces paramètres vous permettent de personnaliser l'apparence de vos composants.

Les composants Avonni dans Experience Site sont conçus pour adapter automatiquement les paramètres de stylisation par défaut du thème de votre site.

Cependant, si vous apportez des ajustements de style au niveau du composant, ces modifications remplaceront spécifiquement les styles par défaut correspondants définis par le thème de votre site. Cette fonctionnalité permet une personnalisation de conception plus précise et individualisée pour chaque composant.

Cohérence du thème

• Adoption automatique du thème : Les composants Avonni adaptent par défaut les paramètres de thème de votre site.

• Remplacement par des styles personnalisés : Tout ajustement effectué au niveau du composant annulera les styles de thème par défaut, offrant un contrôle précis de la conception pour chaque composant.

---

Intégration avec les paramètres de thème globaux

• Intégration transparente du thème : Liez sans effort les composants Avonni aux paramètres de thème globaux de votre plateforme d'expérience numérique (DXP).

• Aucune saisie manuelle de style requise : Connectez directement les attributs de stylisation des composants aux valeurs de thème prédéfinies du DXP, éliminant ainsi le besoin d'entrées de style manuelles.

---

Copier/Coller les propriétés de style

Cette fonctionnalité simplifie la création d'un style visuel cohérent pour vos sites Experience.

Voici comment cela fonctionne et quels sont les avantages :

Comment l'utiliser

1. Localiser le composant source : Trouvez un composant avec l'apparence désirée (couleurs, polices, etc.).

2. Copier les styles : Dans les paramètres Apparence du composant, cliquez sur "Copier les propriétés de style."

3. Appliquer au composant cible : Sélectionnez le composant que vous souhaitez styliser, puis choisissez "Coller les propriétés de style" dans ses paramètres Apparence.

Pourquoi c'est utile

• Cohérence visuelle : Maintenez sans effort une apparence unifiée pour votre site.

• Gain de temps : Évitez les ajustements de style répétitifs sur plusieurs composants.

• Conception rationalisée : Concentrez-vous sur la création de contenu et de mises en page de qualité, tandis que la stylisation devient plus rapide et plus facile.

---

Stylisation avec CSS personnalisé

Vous souhaitez adapter l'apparence des composants Avonni au-delà des options de stylisation intégrées ? Voici comment :

Pourquoi utiliser du CSS personnalisé

• Identité unique : Adaptez précisément les composants au design ou aux directives de votre marque.

• Effets avancés : Obtenez des éléments visuels impossibles avec les paramètres standard (par ex. animations spéciales, effets au survol, etc.).

• Contrôle total : Obtenez l'apparence exacte souhaitée sans limitations.

Comment ça fonctionne

1. Créer du CSS : Rédigez vos styles CSS personnalisés en définissant les changements souhaités.

2. Ajouter au site : Utilisez les fonctionnalités standard d'Experience Cloud pour inclure ce CSS dans le balisage head de votre site.

3. Appliquer aux composants : Ajoutez les noms de vos classes CSS personnalisées aux composants Avonni

Remarque sur le framework

Dans LWR, vous pouvez souvent utiliser l'onglet "Style" pour l'espacement (marge/padding), tandis que dans site Aura, ceux-ci doivent être gérés via des classes CSS personnalisées ou les paramètres d'espacement internes du composant.