Style de section

Chaque composant offre un certain degré de personnalisation, bien que cela puisse varier d'une bibliothèque à l'autre si les composants sont créés par des créateurs différents. Il existe deux principales façons de personnaliser une section :

Modification de la conception des composants

Certains composants disposent d'options permettant de modifier leur apparence. Cliquez sur l'icône des paramètres en haut du panneau de l'éditeur. Si le composant que vous utilisez dispose d'options configurables, personnalisez-les selon vos besoins. Vous pouvez également cliquer sur l'onglet « Préréglages » pour accéder aux options préconfigurées par le développeur de la bibliothèque.

Modification des couleurs des sections

En cliquant sur l'icône de la palette, vous pourrez modifier les couleurs de la section en cours. Les couleurs non modifiées seront héritées du site web. Vous pouvez également définir des couleurs différentes pour les modes clair, sombre et atténué ; votre site web s'adaptera alors automatiquement aux préférences de vos visiteurs.

Comment changer les couleurs des sections

Changement de contexte de couleur

1. Depuis l’éditeur de site Web, cliquez sur

   dans la barre d’outils.

2. Sélectionnez Light, Dim ou Dark dans la section Luminosité du panneau de gauche.

Vos couleurs seront automatiquement mises à jour en fonction des couleurs de votre site Web ou des couleurs de base de la section.

Changement de couleurs spécifiques à l'élément

1. Depuis l’éditeur de site Web, cliquez sur

   dans la barre d’outils.

2. Dans le panneau de gauche, cliquez sur Couleurs personnalisées.

3. Ajustez les couleurs des éléments à modifier. Remarque : Les sections utiliseront par défaut les couleurs primaires, secondaires, d'accentuation et neutres, selon les spécifications du créateur de la fondation. Les couleurs par élément remplaceront les couleurs de base.

Application d'arrière-plans et d'effets de section

Certains composants et fondations de site prennent en charge les arrière-plans image/dégradés et les animations avancées. Vous y accédez via le menu de conception.

Changer l'arrière-plan de la section

1. Depuis l’éditeur de site Web, cliquez sur

   dans la barre d’outils.

2. Dans le panneau de gauche, cliquez sur Fond & contraste.

3. Utilisez les onglets du panneau de gauche pour sélectionner ce que vous souhaitez utiliser comme arrière-plan : Dégradé, Image ou Vidéo

4. Pour le dégradé, sélectionnez vos couleurs et vos options de dégradé. Pour l'image ou la vidéo, importez le fichier.

5. Vous pouvez également activer le masque de lisibilité du contenu. Ce masque sera superposé sur une surface semi-transparente blanche ou noire pour garantir que votre contenu respecte les directives d'accessibilité.

Appliquer des animations de section

1. Depuis l’éditeur de site Web, cliquez sur

   dans la barre d’outils.

2. Dans le panneau de gauche, cliquez sur Effets d’animation.

3. Cliquez sur

   à côté de Activer l’effet d’animation.

4. Configurez l'effet et la durée à votre guise.

Transfert de styles de section vers d'autres sections

1. Depuis l’éditeur de site Web, cliquez sur

   dans la barre d’outils.

2. Cliquez sur

   
   en haut du panneau de gauche. Cela copiera tous les paramètres de chaque catégorie (Options des composants, Arrière-plan et contraste, Effets d'animation et Couleurs personnalisées). Remarque : Vous pouvez également sélectionner une catégorie et la copier directement.

3. Accédez à la section que vous souhaitez changer.

4. Cliquez sur

   dans la barre d’outils.

5. Cliquez sur

   
   en haut du panneau de gauche. Remarque : si vous avez copié à partir de l’une des sous-sections des paramètres, vous devez accéder à cette section avant de coller.