- Ajouter du CSS personnalisé
- Appliquer votre code CSS aux éléments du widget
- Ajouter du code JS
- Modifier l’affichage du code
Exemple de cas d’utilisation
Un cas d’utilisation courant du code personnalisé consiste à appliquer le même style aux éléments du widget plusieurs fois, plutôt que de configurer manuellement les propriétés de style sur chaque élément. Si vous n’êtes pas un utilisateur technique, demandez à l’un de vos développeurs de créer des classes CSS prédéfinies pour vous.Ajouter du code CSS personnalisé
- Cliquez sur Code personnalisé dans le menu de gauche. La page s’ouvre avec l’option CSS personnalisé sélectionnée.
- Ajoutez votre code CSS dans l’éditeur de code.
Appliquer le code CSS aux éléments du widget
- Ouvrez la section Design.
- Sélectionnez un élément. Cet élément sera stylé selon l’une des classes que vous avez créées dans l’éditeur de code.
- Faites défiler vers le bas et déployez la section Css et classes.
- Ajoutez le nom de votre classe dans le champ Element ClassName ou dans Container ClassName si vous souhaitez appliquer cette classe à l’élément parent.
Votre élément sélectionné stylé selon votre code personnalisé n’apparaîtra pas dans la zone d’aperçu à droite. Vous devez cliquer sur l’icône de caméra pour voir vos modifications.
Ajouter du code JS
L’ajout de code JS vous permet d’exécuter un script personnalisé à la demande dans votre widget.- Cliquez sur Code personnalisé dans la barre latérale gauche.
- Cliquez sur JS personnalisé.
- Ajoutez votre code JS dans l’éditeur de code.
Pour vérifier l’exécution de votre script, cliquez sur l’icône de caméra.
Modifier l’affichage du code
Si vous travaillez avec à la fois du code CSS et JS, vous voudrez peut-être lire les deux codes en même temps. Pour ajouter plusieurs éditeurs de code :- Cliquez sur l’icône Ajouter un panneau dans le coin supérieur droit au-dessus de l’éditeur de code.
- Redimensionnez manuellement chaque panneau selon vos besoins.