Créer du contenu de style pour des bannières, des blocs/annonces ou des vidéos

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 11 minutes de lecture

    • Créez des bannières, des blocs/annonces ou des vidéos à l’aide du type de contenu de style pour personnaliser des paramètres tels que la couleur du texte, l’alignement du texte, les liens, les couleurs d’arrière-plan et les images.

    Avant de commencer

    Rôle requis : sn_cd.content_manager

    Pourquoi et quand exécuter cette tâche

    Ce type de contenu offre trois options :
    • Bannière : apparaît en haut de la page
    • Bloc : apparaît dans un widget sur la page
    • Vidéo : peut apparaître n’importe où sur une page, y compris en haut à la place d’une bannière
    La bibliothèque de contenu prend en charge les types de vidéos suivants :
    • Le code HTML5
      Remarque :
      Le texte de survol ou les info-bulles ne sont pas pris en charge pour HTML5 pour le moment.
    • Youtube
    • Vimeo

    Lors de la création ou de la modification d'une bannière à l'aide de contenu de style, vous pouvez afficher et modifier l'image d'arrière-plan au lieu de modifier votre image en externe et de l'importer.

    Le menu contextuel du formulaire ( menu contextuel du formulaire) en haut à gauche du formulaire permet de réaliser rapidement des tâches lors de la création de contenu. Sélectionnez l'icône et les choix suivants s'affichent :
    • Cloner : dupliquer l'enregistrement de contenu.
    • Supprimer : supprimer l'enregistrement de contenu et les enregistrements de contenu planifiés associés.
    • Afficher l'enregistrement de contenu : accéder à l'enregistrement de contenu et l'afficher.
    Remarque :
    Vous devez enregistrer l'enregistrement de contenu sous-jacent avant d'activer les sélections de menu contextuel du formulaire.

    Procédure

    1. Accédez à la Publication de contenu > Bibliothèque de contenu > Créer.
    2. Sélectionnez Portail sous la colonne Sélectionner la plateforme.
    3. Sélectionnez Contenu de style sous la section Choisir un format de contenu.
    4. Sélectionnez Continuer.
    5. Remplissez les champs du formulaire Nouveau contenu.
      Tableau 1. Conception
      Champ Description
      Nom du contenu Nom qui décrit le contenu que vous créez ou modifiez.
      Commande Nombre indiquant l’ordre dans lequel le portail et le contenu de style s’affichent dans la liste Contenu.
      Actif Indique que le contenu est actif et peut être utilisé.
      Style du contenu Identifie le type de votre contenu :
      • Bannière
      • Bloc
      • Vidéo
      CONTENU
      Table de référence de l'utilisateur Détermine les variables que vous pouvez utiliser pour personnaliser le texte du contenu de bloc.
      Sélectionnez Profil RH pour sélectionner les variables de la table sn_hr_core_profile.
      Remarque :
      Lorsque le module d'extension Human Resources Scoped App: Core (com.sn_hr_core) est activé, seul le profil RH apparaît.

      Sélectionnez Utilisateur pour sélectionner les variables de la table sys_user.
      Titre Un titre que vous souhaitez faire figurer sur votre contenu.
      Ce champ n’est pas obligatoire si vous souhaitez que votre bannière affiche uniquement un graphique.
      Remarque :
      Ce champ s’affiche uniquement lorsque le widget Expérience de contenu est utilisé.
      Texte d'en-tête Texte qui fournit des informations supplémentaires ou de la clarté à votre titre.
      Corps de texte Le message détaillé que vous souhaitez voir apparaître sur la bannière.
      Colonne d'utilisateur Avec la table Profil RH [sn_hr_core_profile], permet de filtrer les utilisateurs lors de l'évaluation d'une condition.

      Ce champ s'affiche uniquement lorsque vous sélectionnez Profil RH dans le champ Table de référence de l'utilisateur.
      Couleur du texte Indique si vous souhaitez que le texte du corps apparaisse en mode foncé ou clair.
      Remarque :
      Pour le style de contenu Bannière, les modes foncé et clair sont pris en charge. Pour le style de contenu de bloc, seul le mode clair est pris en charge si le champ Texte sur l'arrière-plan est activé (vert).
      Alignement du texte Indique la façon dont vous souhaitez que votre texte s'affiche. Vous pouvez sélectionner justifié à gauche, au centre ou à droite.
      Icône Détermine si vous souhaitez qu'une icône apparaisse. Faites glisser vers la droite pour choisir une icône.

      S'affiche uniquement lorsque vous sélectionnez Bloc dans Style de contenu.
      Choisir une icône Sélectionnez l'icône que vous souhaitez afficher.

      Ce champ n'apparaît que lorsque vous activez le champ Icône (vert).
      Taille de l'icône Indique la taille de votre icône.

      Ce champ n'apparaît que lorsque vous activez le champ Icône (vert).

      La taille suivante est recommandée pour les icônes :
      • Icône de rubrique : 56 x 56 px
      • icône de sous-rubrique : 28 x 28 px
      Appel à l'action Sélectionnez cette option si vous souhaitez afficher un bouton ou un lien.
      Titre du bouton Texte qui apparaît sur le bouton.

      Ce champ n'apparaît que lorsque vous sélectionnez Bouton.
      Lien de bouton Le lien auquel l'utilisateur accède lorsqu'il sélectionne le bouton.

      Sélectionnez la flèche vers le bas pour afficher une liste de liens.

      Ce champ n'apparaît que lorsque vous activez le champ Icône (vert).
      Titre du lien Texte qui s'affiche pour le lien.

      Ce champ n'apparaît que lorsque vous sélectionnez Lien.
      Lien Le lien auquel l'utilisateur accède lorsqu'il sélectionne le lien.

      Sélectionnez la flèche vers le bas pour afficher une liste de liens.

      Ce champ n'apparaît que lorsque vous sélectionnez Lien.
      Lien vidéo Lien vers la vidéo que vous souhaitez afficher sur votre portail.
      Ce champ s'affiche uniquement lorsque vous sélectionnez Vidéo dans Type de contenu.
      Remarque :
      Seules les vidéos YouTube et Vimeo sont prises en charge pour le moment. Assurez-vous d'utiliser le lien vidéo intégré.
      ARRIÈRE-PLAN
      Couleur d'arrière-plan Couleur d'arrière-plan de la bannière ou du texte de bloc. Pour définir la couleur, vous pouvez utiliser :
      • des codes de couleur hexadécimaux
        Remarque :
        pour obtenir la liste des codes de couleur hexadécimaux, consultez Codes de couleur hexadécimaux.
      • Valeur de couleur CSS ; inclut des mots clés, le nom, les décimales RVB ou le numéro hexadécimal RVB de la couleur.
        Remarque :
        Pour en savoir plus, consultez Noms de couleurs HTML (W3CSchools).
      Image d'arrière-plan Indique que vous souhaitez qu'une image apparaisse en arrière-plan. Faites glisser vers la droite pour afficher des champs d'image supplémentaires.
      Fichier image [Charger une image] Sélectionnez le lien pour ajouter une image.

      Ce champ s'affiche uniquement lorsque vous activez Image d'arrière-plan.

      La taille suivante est recommandée pour les bannières :
      • Bannière de la page d'accueil : 1 440 x 400 px
      • Page de rubrique : 1 258 x 300 px
      Bouton Modifier l'image Permet de modifier votre image d'arrière-plan dans le module Bibliothèque de contenu.

      Ce champ s'affiche uniquement après le chargement de votre image d'arrière-plan. Une zone de recadrage apparait sur l'image dans le formulaire Mode éditeur d'images.

      Vous pouvez utiliser la zone de recadrage en faisant glisser les bordures vers l'intérieur ou l'extérieur pour indiquer la partie de votre image que vous souhaitez afficher.

      Lorsque l'éditeur d'image est ouvert, le mode est défini par défaut sur recadrage.

      Lorsque vous chargez et modifiez un fichier .svg, il est enregistré sous forme de fichier .png.
      Remarque :
      Les fichiers .gif ne sont pas pris en charge.

      Les icônes et les boutons suivants apparaissent pour vous permettre de modifier votre image :

      Icônes de modification d'image

      Chaque icône vous permet de modifier l'image que vous avez importée :
      • Rétablir l'original icône Rétablir l'original
        • S'active lorsque vous avez modifié votre image.
        • Sélectionnez cette icône pour afficher la fenêtre contextuelle Rétablir l'original. Sélectionnez le bouton Réinitialisation de l'image pour annuler toutes les modifications que vous avez apportées à votre image.
          Remarque :
          Après avoir sélectionné Enregistrer, vous ne pouvez plus réinitialiser votre image. Vous devrez charger à nouveau l'image si vous n'êtes pas satisfait de vos modifications.
        • Si vous ne souhaitez pas conserver vos modifications, sélectionnez Annuler.
      • Mode déplacement d'image icône Mode déplacement d'image
        • Sélectionnez votre image à un endroit en dehors de la zone de recadrage et, à l'aide de votre souris, déplacez votre image.
        • Utilisez les points pour redimensionner l'image.
        • Appuyez sur le bouton de la souris et maintenez-le enfoncé pour déplacer la zone de recadrage.
      • Mode recadrage de l'image icône Mode recadrage de l'image
        • Sélectionnez cette icône pour définir votre curseur sur recadrage.
        • Maintenez votre curseur et faites-le glisser pour créer une nouvelle zone de recadrage.
        • Maintenez le bouton de la souris enfoncé pour déplacer la zone de recadrage.
        • Redimensionnez la zone de recadrage à l'aide des points.
      • Zoom avant icône Zoom avant
        • Cliquez sur cette icône pour agrandir et élargir l'image.
        • Continuez à cliquer pour effectuer progressivement un zoom avant de l'image.
      • Zoom arrière icône Zoom arrière
        • Cliquez sur cette icône pour réduire et éloigner l'image.
        • Continuez à cliquer pour effectuer progressivement un zoom arrière de l'image.
      • Déplacer vers la gauche de 10 pixels icône Déplacer
        • Cliquez sur cette icône pour déplacer l'image vers la gauche de 10 pixels.
        • Continuez à cliquer pour déplacer l'image vers la gauche par incréments de 10 pixels.
      • Déplacer vers la droite de 10 pixels icône Déplacer
        • Cliquez sur cette icône pour déplacer l'image vers la droite de 10 pixels.
        • Continuez à cliquer pour déplacer l'image vers la droite par incréments de 10 pixels.
      • Monter de 10 pixels icône Monter
        • Cliquez sur cette icône pour monter l'image de 10 pixels.
        • Continuez à cliquer pour déplacer l'image vers le haut par incréments de 10 pixels.
      • Descendre de 10 pixels icône Descendre
        • Cliquez sur cette icône pour déplacer l'image vers le bas.
        • Continuez à cliquer pour déplacer l'image vers le bas par incréments de 10 pixels.
      • Pivoter à gauche de 45 degrés icône Pivoter
        • Cliquez sur cette icône pour faire pivoter l'image à 45 degrés dans le sens inverse des aiguilles d'une montre.
        • Continuez à cliquer pour faire pivoter l'image dans le sens inverse des aiguilles d'une montre par incréments de 45 degrés.
      • Pivoter à droite de 45 degrés icône Pivoter
        • Cliquez sur cette icône pour faire pivoter l'image à 45 degrés dans le sens des aiguilles d'une montre.
        • Continuez à cliquer pour faire pivoter l'image dans le sens des aiguilles d'une montre par incréments de 45 degrés.
      • Recadrage : rectangle court Icône Recadrage : rectangle court
        • Cliquez sur cette icône pour définir l'outil de recadrage sur une forme de rectangle court.
        • Utilisez les points des angles du rectangle pour recadrer davantage votre image.
      • Recadrage : rectangle haut Icône Recadrage : rectangle haut
        • Cliquez sur cette icône pour définir l'outil de recadrage sur une forme de rectangle haut.
        • Utilisez les points des angles du rectangle pour recadrer davantage votre image.
      • Recadrage : carré Icône Recadrage : carré
        • Cliquez sur cette icône pour définir l'outil de recadrage sur une forme carrée.
        • Utilisez les points des angles du carré pour recadrer davantage votre image.
      • Personnalisé Recadrage et rotation personnalisés
        • Cliquez sur cette icône pour afficher la fenêtre contextuelle Modification des détails.
        • Vous pouvez définir la taille de l'outil de recadrage et la taille de votre image en pixels.
        • Vous pouvez également spécifier l'angle de rotation de votre image.
      • Aperçu icône Aperçu
        • Sélectionnez cette icône pour afficher un aperçu de votre image modifiée.
        • Saisissez des informations d'emplacement similaires à celles du contenu que vous publiez. Cela vous permet d'afficher votre image à l'emplacement de votre choix. Pour obtenir des informations sur les champs, consultez Créer un plan de publication pour votre contenu.
      • Annuler et Enregistrer boutons Annuler et Enregistrer
        • Sélectionnez Annuler pour quitter le mode d'édition de votre image sans enregistrer vos changements.
        • Sélectionnez Enregistrer pour enregistrer les modifications que vous avez apportées à votre image. Vous pouvez sélectionner Recadrer et continuer pour poursuivre vos modifications.
          Remarque :
          Lorsque vous avez sélectionné l'option Enregistrer et continuer, vos modifications sont enregistrées et vous ne pouvez pas les annuler.
      Taille de l'image Indique vos préférences d'affichage de l'image.
      • Remplir la largeur : redimensionner l'image pour remplir l'ensemble du conteneur, même si elle doit être étirée ou que les bordures doivent être coupées.
      • Ajuster à la largeur : redimensionner l'image pour assurer sa visibilité dans son intégralité.
      • Taille d'origine : utiliser la taille d'origine de l'image.

      Ce champ s'affiche uniquement lorsque vous activez Image d'arrière-plan.
      Position de l'image Emplacement où vous souhaitez afficher votre image. Sélectionnez une zone pour définir la position de l'image.

      Ce champ s'affiche uniquement lorsque vous activez Image d'arrière-plan.
      Texte sur l'arrière-plan Indique que vous souhaitez que le texte apparaisse sur l'image d'arrière-plan. Si vous ne cochez pas cette option, le texte apparaît sous l'image.

      Faites glisser vers la droite pour sélectionner un dégradé pour votre arrière-plan.
      Ajouter un dégradé Indique que vous souhaitez utiliser un dégradé de couleurs pour rendre votre texte plus facile à lire.

      S'affiche uniquement lorsque vous activez le champ Texte sur l'arrière-plan.
    6. Sélectionnez Enregistrer pour sauvegarder l’enregistrement et rester sur l’onglet Création .
    7. Vous pouvez également sélectionner Enregistrer et continuer à enregistrer l’enregistrement et passer à l’onglet Publier .

    Que faire ensuite

    • Prévisualisez votre contenu à partir du formulaire Nouveau contenu.
      Remarque :
      L’aperçu du contenu vous donne une idée générale de l’apparence de votre contenu. Le contenu peut sembler différent une fois publié en raison de variations dans la résolution de l’appareil, la différence de thème ou la configuration du style de l’application mobile.
    • (Facultatif) Traduisez votre contenu.

      Sélectionnez une autre langue pour afficher votre session ou demander une traduction pour le contenu que vous créez. Pour plus d'informations, consultez Prise en charge de la langue pour Expériences de contenu et Publication de contenu.

      Utilisez le menu déroulant Paramètres de langue pour sélectionner une autre langue dans laquelle afficher votre session ou demander une traduction pour le contenu que vous créez.
      • Changer de langue : Cela vous permet de remplacer la langue des paramètres de votre système par une autre langue. Le processus ressemble à celui permettant de modifier votre langue lors de la connexion. Pour plus d'informations, consultez Changer de langue pour Publication de contenu.
      • Traduire le contenu : lorsque vous activez la propriété système sn_cd.enable_localization_framework_integration, le contenu créé à partir de la bibliothèque de contenu affiche la sélection Traduire le contenu dans la liste déroulante Paramètres de langue . Cela vous permet de demander la traduction du contenu dans la langue que vous avez sélectionnée. Pour plus d'informations, consultez Intégration à Infrastructure de localisation.
        Remarque :
        Traduisez le contenu uniquement 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, ni de modifier le formatage après la traduction.

        Pour créer du contenu riche dont la mise en forme varie selon la langue, dupliquez le contenu et modifiez la mise en forme selon vos besoins. Ensuite, utilisez les audiences pour cibler les utilisateurs de contenu par langue. Reportez-vous à la rubrique Audiences.

    • Configurez un plan de publication pour contrôler l’endroit où le contenu est fourni, l’audience et la période pendant laquelle il est disponible : Créer un plan de publication pour votre contenu.