Apparence

Aperçu

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

Ce que vous allez apprendre

• Compatibilité des frameworks: Distinguer les options de style disponibles dans LWR par rapport à Aura.
• Personnalisation au niveau du composant: Ajuster finement des 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é: Utiliser « 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 du framework : LWR vs Aura

Il est important d’identifier le framework utilisé par votre site Experience, car les outils de style disponibles diffèrent considérablement :

Fonctionnalité	Framework LWR	Framework Aura
Onglet Style et visibilité	Disponible. Géré directement par Salesforce pour un contrôle précis de l’espacement et de la mise en page.	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é à l’héritage standard du thème.

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 créés 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 propose une section Apparence dédiée dans laquelle vous pouvez ajuster son style. Ces paramètres vous permettent de personnaliser l’apparence et le style de vos composants.

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

Cependant, si vous effectuez 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 : Par défaut, les composants Avonni adoptent les paramètres de thème de votre site.
• Remplacement par des styles personnalisés : Toute modification apportée au niveau du composant remplacera les styles de thème par défaut, offrant un contrôle précis de la conception pour chaque composant.

---

Intégration aux paramètres de thème globaux

• Intégration fluide du thème : Liez facilement 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 style des composants aux valeurs de thème prédéfinies de DXP, éliminant ainsi le besoin de saisies manuelles de style.

---

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 en sont les avantages :

Mode d’emploi

1. Localiser le composant source : Trouvez un composant présentant l’apparence souhaité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 des ajustements de style répétitifs sur plusieurs composants.
• Conception rationalisée : Concentrez-vous sur la création d’un excellent contenu et de mises en page, tandis que la stylisation devient plus rapide et plus simple.

---

Stylisation CSS personnalisée

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

Pourquoi utiliser du CSS personnalisé

• Image de marque unique : Faites correspondre précisément les composants au design ou aux directives de marque de votre site web.
• Effets avancés : Obtenez des éléments visuels impossibles à réaliser avec les paramètres standards (par exemple, des animations spéciales, des effets au survol, etc.).
• Contrôle total : Obtenez exactement l’apparence souhaitée sans limitations.

Fonctionnement

1. Créer le CSS : Rédigez vos styles CSS personnalisés en définissant les modifications souhaitées.
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

Note sur le framework

Dans LWR, vous pouvez souvent utiliser l’onglet « Style » pour l’espacement (marges/espacements intérieurs), tandis que dans Aura, cela doit être géré via des classes CSS personnalisées ou les paramètres d’espacement internes du composant.