Ajouter un accordéon avec l’éditeur de contenu enrichi

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 7 minutes de lecture

    • Ajoutez un composant d’accordéon au canevas pour concevoir un contenu qui peut être développé ou réduit.

    Avant de commencer

    Rôle requis : sn_cd.content_manager

    Renseignez les champs du formulaire Nouveau contenu. Reportez-vous à la rubrique Créer du contenu enrichi.

    Créez la mise en page à l’aide de modules ou de colonnes.

    Procédure

    1. Accédez au canevas en sélectionnant le bouton Ouvrir l’éditeur dans l’onglet Conception du formulaire Nouveau contenu .
    2. Faites glisser et déplacez le composant accordéon dans le canevas.
    Configurez le comportement du composant d’accordéon et la conception des boutons d’activation/désactivation, et ajoutez d’autres panneaux.
    1. Accédez au Paramètres > Propriétés Section pour configurer le composant accordéon :
      Tableau 1. Paramètres des propriétés de l’accordéon
      Champ Paramètres Description
      Comportement du panneau
      Agrandir le premier panneau lors du chargement La sélection de cette option charge l’accordéon avec le contenu visible dans le premier panneau.

      Si vous désélectionnez cette option, l’accordéon se charge avec tous les panneaux fermés.
      Autoriser l'agrandissement de plusieurs panneaux La sélection de cette option permet aux employés de développer plusieurs panneaux à la fois.

      Si vous désélectionnez cette option, lorsqu’un employé développe un panneau, le panneau actuellement développé se ferme automatiquement.
      Conception du bouton
      Style Sélectionnez le style du bouton accordéon ou bascule sur lequel les employés cliquent pour développer et fermer les panneaux.
      Taille Utilisez les flèches haut et bas pour ajuster la taille des boutons.
      Positionnement Indiquez si les boutons apparaissent à gauche ou à droite des titres en accordéon.
      Couleur Utilisez le sélecteur de couleurs (carré à damier) pour sélectionner une couleur ou saisissez le code de couleur qui représente la couleur que vous souhaitez afficher.

      Toutes les couleurs HTML sont prises en charge. Pour plus d’informations, voir Noms des couleurs HTML.
    2. Pour ajouter d’autres panneaux à l’accordéon, cliquez sur Ajouter un élément, situé dans Paramètres > Propriétés.
    Configurez le style d’accordéon, comme la couleur d’arrière-plan ou la bordure. Cliquez sur le conteneur du composant externe (accordéons) pour configurer tous les panneaux à la fois. Pour configurer des panneaux individuels, cliquez sur les conteneurs respectifs.
    1. Accédez au panneau Paramètres pour configurer les paramètres de style suivants :
      Tableau 2. Paramètres de style
      Champ Paramètres Description
      Application d'un style
      Couleur d'arrière-plan Utilisez le sélecteur de couleurs (carré à carreaux) pour sélectionner une couleur ou saisissez le code de couleur qui représente la couleur d’arrière-plan que vous souhaitez faire apparaître.

      Toutes les couleurs HTML sont prises en charge. Pour plus d’informations, voir Noms des couleurs HTML.
      Application de style avancée
      Largeur Spécifiez la valeur en saisissant un nombre ou en faisant glisser le côté droit de la cellule.
      Sélectionnez l’unité de mesure :
      • px : pixel
      • % : pourcentage
      Remplissage Le remplissage est l’espace entre le contenu et la bordure d’un élément. Spécifiez la valeur du remplissage supérieur, inférieur, droit ou gauche en entrant un nombre.
      Marge La marge est l’espace entre une ligne et un autre élément/la limite du canevas. Spécifiez la valeur du remplissage supérieur, inférieur, droit ou gauche en entrant un nombre.
      Bordure Modifiez la bordure autour de l’extérieur du bouton.
      Remarque :
      La bordure est le contour autour du bouton.

      Largeur : utilisez les flèches vers le haut et vers le bas pour ajuster la largeur de la bordure. Tout comme la largeur et la hauteur, vous pouvez choisir l’unité de mesure que vous préférez en sélectionnant la touche de flèche vers le bas à gauche des flèches haut et bas.

      Style : le format de la bordure autour du bouton. Sélectionnez la liste déroulante pour sélectionner le type de bordure que vous souhaitez autour du bouton.

      Couleur : la couleur de la bordure autour de votre bouton. Sélectionnez la couleur de votre bouton à l’aide de la palette de couleurs et des barres de défilement de la même manière que vous sélectionnez votre couleur d’arrière-plan.
      Rayon de la bordure Utilisez les flèches haut et bas pour ajuster le rayon de la bordure. Tout comme la largeur et la hauteur, vous pouvez choisir l’unité de mesure que vous préférez en sélectionnant la touche de flèche vers le bas à gauche des flèches haut et bas.
    Formatez le texte du titre d’accordéon.
    1. Pour mettre en forme le texte du titre en accordéon, cliquez sur le conteneur Titre en accordéon et accédez au Paramètres > Application d'un style section.
      Tableau 3. Paramètres d’application d’un style de titre en accordéon
      Champ Paramètres Description
      Application d'un style
      Style de texte Vous permet de modifier rapidement l’aspect de votre texte en sélectionnant un choix préformaté. Vous pouvez sélectionner différents titres ou styles de paragraphe.

      Le titre 1 à 6 correspond aux balises HTML h1 - h6.
      Couleur du texte Utilisez cette liste déroulante pour changer la couleur de votre texte.
      Vos choix sont les suivants :
      • Primaire : couleur primaire définie par le thème de votre portail.
      • Sourdine : couleur définie par le thème de votre portail.
      • Blanc : change la couleur de votre texte en blanc. Ceci est utile lorsque vous utilisez une couleur d’arrière-plan autre que le blanc.

      Couleur du texte : affecte des classes CSS prédéfinies pour la couleur du texte.
      Affichage Configurez l’apparence de plusieurs composants dans la même colonne, tels qu’une image et un composant de texte. Sélectionnez l’une des options suivantes :
      • Haut et bas (par défaut) : l’image apparaît au-dessus de l’autre composant.
      • Côte à côte : l’image apparaît avec l’autre composant à côté.
      Remarque :
      Pour de meilleurs résultats, définissez le même affichage pour les composants. Par exemple, si vous avez des composants d’image et de texte dans une colonne et que vous souhaitez que l’image s’affiche à gauche et que le texte apparaisse à droite, définissez les paramètres d’affichage des deux composants sur Côte à côte.
      Aligner Détermine l’alignement horizontal de votre texte. Choisissez parmi :
      • Justification à gauche
      • Justifier par le centre
      • Justifier à droite
      • Justifier (le texte est aligné sur les deux marges)
      Application de style avancée
      Remplissage Le remplissage est l’espace entre le contenu et la bordure d’un élément. Spécifiez la valeur du remplissage supérieur, inférieur, droit ou gauche en entrant un nombre.
      Marge La marge est l’espace entre une ligne et un autre élément/la limite du canevas. Spécifiez la valeur du remplissage supérieur, inférieur, droit ou gauche en entrant un nombre.
      Nom de la police Définit la police de caractères utilisée pour restituer les caractères.

      Cliquez sur la flèche déroulante pour sélectionner une autre police.
      Taille de police Définit la taille de la police.
      Valeur font-weight Détermine le gras ou la clarté d’affichage de votre texte.

      Cliquez sur la flèche déroulante pour sélectionner un autre poids.
      Hauteur de ligne Définit la distance verticale entre deux lignes de texte.
      Couleur de la police Remplace la couleur de la police du thème de votre portail.

      Pour sélectionner une couleur, saisissez le code hexadécimal ou cliquez sur le sélecteur de couleurs (carré gris à droite de la couleur de police) et sélectionnez une couleur dans la palette de couleurs.
    2. Développez le contenu de l’accordéon en ajoutant des images, des vidéos, du texte ou des liens vers les panneaux.
    3. Sélectionnez Enregistrer ou Enregistrer et terminer.
      Sélectionner Enregistrer enregistre votre contenu et vous restez sur le canevas de l’éditeur de contenu enrichi. Sélectionner Enregistrer et terminer enregistre votre enregistrement et vous renvoie au formulaire Nouveau contenu.

    Que faire ensuite

    • (Facultatif) Traduisez votre contenu.

      Demandez une traduction pour votre contenu. Pour plus d'informations, consultez Prise en charge multilingue dans la bibliothèque de contenu.

      Remarque :
      Ne traduisez le contenu qu’une fois que vous avez terminé de le modifier. Pour de meilleurs résultats, nous vous déconseillons d’ajouter ou de supprimer des composants ou de modifier la mise en forme après la traduction.

      Pour créer du contenu enrichi qui est formaté différemment dans différentes langues, dupliquez le contenu et modifiez la mise en forme selon vos besoins. Ensuite, utilisez Audiences pour cibler le contenu sur les utilisateurs par langue. Reportez-vous à la rubrique Audiences.

    • Prévisualisez votre contenu à partir de l’onglet Publier .
      Remarque :
      L’aperçu du contenu est conçu pour fournir une idée générale de l’apparence de votre contenu. Le contenu peut sembler différent après publication en raison des variations de résolution de l’appareil, de la différence de thème ou de la configuration du style d’application mobile.
    • Configurez un plan de publication pour contrôler l’endroit où le contenu est livré, l’audience et la période pendant laquelle il est disponible : Créer un plan de publication pour votre contenu.