Apparence

Aperçu

Cette page est votre guide pour le style des composants Avonni pour Salesforce Experience Cloud. Ici, vous découvrirez comment adapter l'apparence de votre site afin de créer une expérience utilisateur fluide et visuellement attrayante.

Ce que vous allez apprendre

• Personnalisation individuelle : Ajustez l'apparence de chaque composant Avonni pour un style distinct correspondant à votre marque.

• Intégration au thème : Comprenez comment intégrer les composants Avonni au thème existant de votre Experience Cloud pour une apparence cohérente tout en conservant la possibilité de remplacer les styles si nécessaire.

• Outils d'efficacité : Apprenez à utiliser les propriétés de style copier/coller pour établir rapidement une cohérence visuelle sur votre site.

• Style avancé : Découvrez comment utiliser du CSS personnalisé pour débloquer encore plus d'options de personnalisation et obtenir des effets uniques.

Pourquoi c'est important

Un site Experience Cloud bien stylé établit une présence professionnelle, améliore l'engagement des utilisateurs et renforce l'identité de votre marque. Les composants Avonni offrent la flexibilité et les outils pour obtenir l'apparence parfaite sans codage approfondi

Style individuel

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

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.

• Remplacer par des styles personnalisés : Tous les ajustements effectués au niveau du composant remplaceront les styles par défaut du thème, offrant un contrôle de conception précis pour chaque composant.

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

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

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

Propriétés de style copier/coller

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

Voici comment cela fonctionne et les avantages :

Comment l'utiliser

1. Localiser le composant source : Trouvez un composant avec 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 : Allez au composant que vous souhaitez styliser et sélectionnez "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.

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

• Design rationalisé : Concentrez-vous sur la création de contenus et de mises en page de qualité, tandis que le stylisme devient plus rapide et plus simple.

Style CSS personnalisé

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

Pourquoi utiliser du CSS personnalisé

• Branding unique : Adaptez 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 avec les paramètres standards (par ex. animations spéciales, effets au survol, etc.).

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

Comment cela fonctionne

1. Créer du CSS : Écrivez 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