Apparence

Aperçu

Cette page est votre guide pour le style des composants Avonni pour Experience Site. 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 apprendrez

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

• Intégration du thème : Comprenez comment intégrer les composants Avonni au thème existant de votre Experience Site pour un rendu cohérent tout en conservant la flexibilité d'outrepasser 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.

• Styling 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 Experience Site bien stylé instaure 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 nécessaires pour obtenir le rendu parfait sans codage intensif

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.

Les composants Avonni dans Experience Site sont conçus pour adapter automatiquement les 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 : Les composants Avonni adaptent par défaut les paramètres du thème de votre site.

• Remplacer par des styles personnalisés : Toute modification effectuée au niveau du composant remplacera 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 : Reliez sans effort les composants Avonni aux paramètres de thème globaux de votre plateforme d'expérience digitale (DXP).

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

Propriétés de style Copier/Coller

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

Voici comment cela fonctionne et quels en sont 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 : Accédez 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 facilement un rendu unifié 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 de contenus et de mises en page de qualité, tandis que le style devient plus rapide et plus simple.

Stylisation CSS personnalisée

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

Pourquoi utiliser du CSS personnalisé

• Marque 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 cela fonctionne

1. Créer du 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 la balise head de votre site.

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