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

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.

• Les modules sont des mises en page de contenu prédéfinies composées d’en-tête, de texte de paragraphe et d’images. Reportez-vous à la rubrique Ajoutez des mises en page de contenu prédéfinies avec l’éditeur de contenu enrichi.
• Les colonnes sont des conteneurs qui vous permettent de définir une mise en page personnalisée. Reportez-vous à la rubrique Ajouter des colonnes avec l’éditeur de contenu enrichi.

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éposez le composant accordéon dans le canevas.

Configurez le comportement du composant d’accordéon et la conception du bouton bascule/bouton et ajoutez d’autres panneaux.

3. 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	Le choix de cette option permet aux employés de développer plusieurs panneaux à la fois. Si vous désélectionnez cette option, lorsqu’un employé agrandit un panneau, celui-ci se ferme automatiquement.
   Conception du bouton
   Style	Sélectionnez le style du bouton accordéon, ou bouton bascule, sur lequel les employés cliquent pour développer et fermer les panneaux.
   Taille	Utilisez les flèches vers le haut et vers le 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é à carreaux) pour sélectionner une couleur ou entrer 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.

4. 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, tel que 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.

5. 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 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 entrant 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 vers le haut et vers le bas. Style : 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 vers le haut et vers le 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 vers le haut et vers le bas.

Mettre en forme le texte du titre d’accordéon.

6. Pour mettre en forme le texte du titre d’accordéon, cliquez sur le conteneur Accordéon et accédez à l’icône Paramètres > Application d'un style section.

   Tableau 3. Paramètres d’application d’un style au titre d’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. Les choix possibles sont les suivants : Primaire : couleur primaire définie par le thème de votre portail. Désactivé : 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. La 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 une option parmi les 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 apparaisse à gauche et le texte à droite, modifiez les paramètres d’affichage des deux composants sur Côte à côte.
   Aligner	Détermine l’alignement horizontal de votre texte. Choisissez entre : Justification à gauche Justification du 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 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é de votre texte. Cliquez sur la flèche déroulante pour sélectionner une autre pondération.
   Hauteur de ligne	Définit la distance verticale entre deux lignes de texte.
   Couleur de la police	Remplace la couleur de police du thème de votre portail. Pour sélectionner une couleur, entrez 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.

7. Développez le contenu de l’accordéon en ajoutant des images, des vidéos, du texte ou des liens vers les panneaux.
8. Sélectionnez Enregistrer ou Enregistrer et terminer.
   La sélection de l’option 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 modifié le contenu. 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 donner une idée générale de l’apparence de votre contenu. Le contenu peut sembler différent après publication en raison de variations dans la résolution de l’appareil, la différence de thème ou la configuration du style d’application mobile.
• Configurez un plan de publication pour contrôler 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.