Guide d'utilisation Annuler

Modification d’une option de conception personnalisée

  1. Guide de l’utilisateur de Captivate
  2. Présentation de Captivate
    1. Nouveautés d’Adobe Captivate
    2. Configuration requise d’Adobe Captivate
    3. Mises à jour d’Adobe Captivate
      1. Notes de mise à jour d’Adobe Captivate (mise à jour 12.5)
      2. Notes de mise à jour d’Adobe Captivate (mise à jour 12.4)
      3. Notes de mise à jour d’Adobe Captivate (mise à jour 12.3)
      4. Notes de mise à jour d’Adobe Captivate (mise à jour 12.2)
      5. Notes de mise à jour d’Adobe Captivate (mise à jour 12.1)
    4. Télécharger Adobe Captivate
    5. Foire aux questions
  3. Ajout d’une diapositive
    1. Navigateur de diapositives dans Adobe Captivate
    2. Ajout d’une diapositive de conversation
    3. Ajout de personnages à votre projet Adobe Captivate
    4. Modification de l’image d’arrière-plan d’une diapositive
    5. Ajout d’une marge intérieure dans les blocs de contenu et composants
    6. Création d’un projet à défilement long
  4. Options de conception dans Adobe Captivate
    1. Présentation des options de conception
    2. Éléments d’une option de conception
    3. Création d’options de conception personnalisées
    4. Modification d’une option de conception personnalisée
    5. Exportation d’une option de conception personnalisée
    6. Importation d’une option de conception personnalisée
  5. Ajouter des blocs de texte
    1. Ajout de texte dans un projet
    2. Ajout de polices Adobe à un projet
  6. Ajouter des blocs de média
    1. Ajout d’images dans un projet
    2. Ajout de vidéos dans un projet
    3. Ajout de citations
    4. Ajout de fichiers SVG dans un projet
    5. Ajout d’objets Web à un projet
  7. Composants interactifs
    1. Ajout d’un bouton
    2. Ajouter un champ de saisie
    3. Ajouter un groupe de boutons radio
    4. Ajout d’une liste déroulante
    5. Ajout d’une case à cocher
  8. Ajout de blocs d’identité visuelle
    1. Ajout d’un en-tête à un projet
    2. Ajout d’un pied de page à un projet
  9. Widgets
    1. Ajout d’une carte
    2. Ajout d’onglets
    3. Ajout d’un certificat
    4. Ajout d’une liste
    5. Ajout d’une zone réactive
    6. Ajout d’un élément de glisser-déposer
    7. Ajout d’un montage chronologique
    8. Ajout d’un élément Cliquer pour afficher
    9. Ajout d’un accordéon
  10. Création de questionnaires
    1. Ajout d’une question à choix multiples
    2. Ajout d’une question de type vrai ou faux
    3. Ajout d’une question d’association de la colonne
    4. Ajout d’une question à réponse courte
    5. Ajout d’une question de séquence
    6. Ajout de groupes de questions et de diapositives de questions aléatoires
    7. Importation de questions au format CSV
  11. Ajout de l’audio à un projet
    1. Ajout d’audio
    2. Ajout de sous-titres
  12. Interactions
    1. Ajout d’interactions dans un projet
    2. Création d’une vidéo interactive avec incrustation
    3. Création d’une interaction au niveau de la diapositive
    4. Création d’une interaction au niveau de l’objet
  13. Animations
    1. Ajout d’animations dans un projet
  14. Accessibilité
    1. Rendre un projet accessible
  15. Personnalisation du montage chronologique
    1. Montage chronologique dans Adobe Captivate
  16. Personnalisation de la table des matières et de la barre de lecture
    1. Table des matières dans Adobe Captivate
  17. Modification des propriétés d’un projet
    1. Variables dans Adobe Captivate
    2. Préférences
    3. Dimensions du projet
    4. Thèmes
  18. Création d’un projet de simulation
    1. Simulation
  19. Prévisualisation d’un projet
    1. Aperçu
  20. Partage d’un projet pour révision
    1. Partage à des fins de révision
    2. FAQ et guide de dépannage pour le partage de projets à des fins de révision   
  21. Publication d’un projet
    1. Publication de votre projet
  22. Mise à niveau de projets dans Adobe Captivate
    1. Passez à la dernière version pour vos projets 

Découvrez comment modifier une option de conception personnalisée dans Adobe Captivate.

Présentation

Cet article contient les étapes à suivre pour modifier une option de conception personnalisée à l’aide de styles CSS, ainsi que quelques exemples. Avant toute chose, découvrez comment créer une option de conception personnalisée et familiarisez-vous avec les éléments d’un fichier d’options de conception.

Sujets de cette page :

Présentation de la structure des options de conception

Conteneurs : il s’agit du conteneur le plus externe qui contient plusieurs composants, tels que les titres, les sous-titres, le corps du texte, les cartes et les images. La personnalisation d’un conteneur externe, tel qu’une carte contenant d’autres composants, aura également un impact sur le style et l’apparence des composants qu’il contient.  

Balises d’élément : ces balises identifient chaque composant d’un conteneur. Pour modifier les styles de chaque conteneur, vous devez d’abord comprendre la convention de balisage dans un conteneur et la façon dont chaque diapositive ou bloc de contenu est structuré. Cela vous aidera à naviguer vers les bonnes sections dans le fichier d’options de conception, en utilisant les balises de l’éditeur de texte pour modifier les propriétés de style.

Telechargement

Référence de conteneur et de balise

Voici un exemple de bloc de contenu d’image, avec ses composants ainsi que les balises correspondantes. À l’aide de ces balises, vous pouvez localiser les sections dans le fichier JSON de l’option de conception et ajouter vos styles CSS ou modifier les propriétés CSS.

Composants d’un bloc de contenu d’image
Balises de chaque composant d’un bloc de contenu d’image

Styles personnalisés et mise en œuvre

Nom de la clé Valeurs Description Requis
"tag" Chaîne Chaque conteneur et élément de diapositive possède un identifiant unique appelé « tag » (« balise »). Il est utilisé pour appliquer les paramètres prédéfinis, customStyles et appearanceProps sur les conteneurs ou l’élément de diapositive correspondants. Oui
"preset" Chaîne Valide uniquement pour les blocs de texte. Nom du paramètre prédéfini qui doit être appliqué à l’élément Non
"designOptionId" Chaîne Nom de l’option de conception à appliquer à un élément. Notez que cela s’applique uniquement aux éléments qui sont des nœuds enfants ou à l’un des composants de l’interface utilisateur, comme les boutons. Non
"customStyles"

Objet

Exemple :

"customStyles": { "all": { /* Toutes les propriétés CSS. */ /* Exemple : "flexDirection": "rowReverse" */ },

"desktop": { /* Toutes les propriétés CSS. */ /* Propriétés à appliquer en plus des propriétés répertoriées dans la section all */ }

, "tablet": { /* Toutes les propriétés CSS. */ /* Propriétés à appliquer en plus des propriétés répertoriées dans la section all */ }

, "mobile": { /* Toutes les propriétés CSS. */ /* Propriétés à appliquer en plus des propriétés répertoriées dans la section all */ },

"mobile_landscape": { /* Toutes les propriétés CSS. */ /* Propriétés à appliquer en plus des propriétés répertoriées dans la section all */ }, }

Utilisé pour appliquer le style CSS directement sur l’élément ou le conteneur. Notez que le nom du style CSS doit être en casse mixte. Par exemple, flex-direction deviendrait flexDirection. Aucun sélecteur CSS n’est autorisé. Les styles mentionnés ici sont appliqués directement en tant que styles CSS à l’élément HTML correspondant. Ils ne sont pas mappés aux propriétés visuelles du conteneur associé. En raison de cette nature même, certaines propriétés, telles que « margin », peuvent ne pas être synchronisées avec les propriétés visuelles, telles que « content-width ».

À titre indicatif, si quelque chose peut être contrôlé via les propriétés visuelles, déclarez ces propriétés sous « customProperties » et le reste sous « customStyles » en tant que propriétés CSS.

Non
"customProperties"

Objet

Reportez-vous à la table customProperties pour plus de détails.

Entrées présentes dans les propriétés visuelles. Elles sont mappées aux propriétés visuelles du conteneur correspondant. Dans l’exemple à gauche, la propriété « fill » peut par exemple être utilisée pour modifier la couleur du conteneur. En outre, « customProperties » peut avoir différentes valeurs pour différents blocs de contenu. Par exemple, un conteneur de boutons pourrait avoir une propriété nommée « nb-de-boutons », qui permet de contrôler le nombre de boutons à afficher dans le conteneur.  Non

Propriétés personnalisées et mise en œuvre

Nom de la clé           Sous-propriétés Description 
     "appearanceProps"     Génériques à la fois pour la carte et les blocs de contenu. Ajoutez cette propriété dans le fichier JSON d’options de conception si vous souhaitez ajouter un remplissage, une bordure ou une ombre sur le conteneur.
"cornerRadius"

Propriété de conteneur de cartes uniquement.

"cornerRadius": { "type": 1, "value": { "topLeft": 4, "bottomLeft": 4, "bottomRight": 4, "topRight": 4 } },

"fill"

Pour ajouter un arrière-plan à un conteneur, utilisez la propriété fill. Elle comprend les informations suivantes :

  1. Type : spécifie le type de remplissage. Vous avez le choix entre les options suivantes :

    • 1 : fond uni
    • 2 : fond image
    • 3 : dégradé linéaire
    • 4 : dégradé radial
  2. Enabled : valeur booléenne indiquant si la propriété fill est activée.

  3. Props : contient tous les détails sur le remplissage, tels que la couleur, l’opacité (alpha), les taquets de couleur, les extrémités, les points de poignée radiaux et les images d’arrière-plan.

Structure JSON de fond uni

"fill": {
"type": 1,
"props": {
"color": « <couleur de fond (code hexadécimal de couleur)>",
"alpha": <opacité de la couleur (valeur comprise entre 0 et 1)>
}
}

Structure JSON de fond image

"fill": {
"type": 2,
"props": {
"backgroundImage": "<nom de l’image avec extension (l’image doit se trouver dans le même répertoire)>"
}
}

Structure JSON de dégradé linéaire/radial

  • Taquets de couleur : définit la couleur du dégradé à des positions spécifiques. Chaque taquet possède les propriétés suivantes :
    • color : couleur de dégradé (au format hexadécimal).
    • alpha : transparence de la couleur (valeur comprise entre 0 et 1).
    • scaledPosition : position du taquet de couleur (valeur comprise entre 0 et 1).

"fill": {

"type": <Type de fond (3 pour un dégradé linéaire, 4 pour un dégradé radial)>,
"props": {
"colorStops": [
{
"color": "cp-color-c7",
"alpha": 1,
"scaledPosition": 0
},
{
"color": "cp-color-c9",
"alpha": 0.5,
"scaledPosition": 1
}
]
}
}

La propriété fill et les attributs associés vous permettent de définir différents styles d’arrière-plan pour les conteneurs.

"shadow"

Vous pouvez ajouter des ombres aux éléments de type conteneur (blocs de contenu ou conteneurs de cartes, par exemple) à l’aide de la propriété shadow. Les attributs suivants définissent l’apparence de l’ombre :

Propriétés de l’ombre

  • x : décalage horizontal de l’ombre.
  • y : décalage vertical de l’ombre.
  • blur : rayon du flou de l’ombre.
  • color : couleur de l’ombre (au format hexadécimal).
  • type : type d’ombre. Pour une ombre interne, utilisez 1.
  • alpha : opacité de l’ombre (valeur comprise entre 0 et 1).
  • enabled : valeur booléenne permettant d’activer (true) ou de désactiver (false) l’ombre.

Ombre sur un conteneur de blocs de contenu

Les propriétés suivantes sont utilisées pour appliquer une ombre au conteneur :

  • x : décalage horizontal de l’ombre.
  • y : décalage vertical de l’ombre.
  • blur : rayon du flou de l’ombre.
  • color : couleur de l’ombre (au format hexadécimal).
  • type : utilisez 1 pour les ombres internes.
  • alpha : opacité de l’ombre (valeur comprise entre 0 et 1).
  • enabled : valeur booléenne permettant d’activer ou de désactiver l’ombre.

Exemple :

"shadow": { "x": 1, "y": 2, "blur": 4, "color": "#b3b3b3", "type": 1, "alpha": 0.5, "enabled": false }

Ombre sur un conteneur de cartes

Les propriétés suivantes sont utilisées pour ajouter une ombre au conteneur de cartes :

  • x : décalage horizontal de l’ombre.
  • y : décalage vertical de l’ombre.
  • blur : rayon du flou de l’ombre.
  • color : couleur de l’ombre (au format hexadécimal).
  • enabled : valeur booléenne permettant d’activer ou de désactiver l’ombre.

Exemple :

"shadow": { "x": 0, "y": 0, "blur": 10, "color": "#666666", "enabled": true }

 

  "border"

Les bordures peuvent être appliquées aux éléments de conteneur, tels que les blocs de contenu ou les cartes, à l’aide de la propriété border. Les attributs suivants définissent l’apparence de la bordure :

Propriétés de la bordure :

  • type : spécifie le type de bordure. Les valeurs sont comprises entre 0 et 5, ce qui correspond aux options du menu déroulant de bordure Charm.
  • capType : définit le type de limite de bordure. Les valeurs sont comprises entre 0 et 2.
  • width : spécifie la largeur de la bordure.
  • color : spécifie la couleur de la bordure (au format hexadécimal).
  • alpha : détermine l’opacité de la bordure (valeur comprise entre 0 et 1).
  • enabled : valeur booléenne permettant d’activer (true) ou de désactiver (false) la bordure.

Exemple :

"border": { "enabled": false, "color": "cp-color-c4", "width": 8, "type": 0 }

Propriétés de bordure pour le conteneur de cartes

  • enabled : valeur booléenne permettant d’activer (true) ou de désactiver (false) la bordure.
  • color : spécifie la couleur de la bordure (au format hexadécimal).
  • width : spécifie la largeur de la bordure.
  • type : spécifie le type de bordure.

Exemple :

"border": { "enabled": true, "color": "#666666", "width": 5, "type": 1 }

 

"components"  

Modification de l’alignement des composants

  • Chaque composant du bloc de contenu possède une entrée dans la propriété components.
  • La propriété alignment spécifie l’alignement de chaque composant et accepte les valeurs suivantes :
    • left
    • right
    • center

Contrôle de la visibilité des cartes

  • La propriété card peut être utilisée pour contrôler la visibilité de la carte.
  • La valeur true active la carte, tandis que la valeur false la désactive.

Exemple :
Propriétés du conteneur de cartes

Le conteneur de cartes contient des composants ou des éléments de diapositive. Vous pouvez personnaliser leur alignement et leur visibilité à l’aide de la propriété components.

Modification de l’alignement des composants

  • Chaque composant du bloc de contenu possède une entrée dans la propriété components.
  • La propriété alignment spécifie l’alignement de chaque composant et accepte les valeurs suivantes :
    • left
    • right
    • center

Contrôle de la visibilité des cartes

  • La propriété card peut être utilisée pour contrôler la visibilité de la carte.
  • La valeur true active la carte, tandis que la valeur false la désactive.

Exemple

"components": {
"label": {
"alignment": "left"
},
"checkbox": {
"alignment": "left"
},
"buttons": {
"alignment": "left"
},
"card": false
}

"cardPadding"   La propriété de conteneur de cartes vous permet d’ajouter un marge intérieure au conteneur de cartes. Elle accepte les valeurs en pixels, et la marge intérieure est appliquée à tous les côtés du conteneur
"alignmentAndSpacing" "padding"

Vous pouvez définir la marge intérieure de tout objet, conteneur de cartes ou bloc de contenu à l’aide de la propriété padding de la section alignAndSpacing.

Propriétés de marge intérieure

  • left : marge intérieure sur le côté gauche (en pixels).
  • right : marge intérieure sur le côté droit (en pixels).
  • top : marge intérieure en haut (en pixels ou en pourcentage, selon le contexte).
  • bottom : marge intérieure en bas (en pixels ou en pourcentage, selon le contexte).
  • isDTMLinked : valeur booléenne qui détermine si le marge intérieure est lié entre différents types d’appareils (par exemple ordinateur de bureau, tablette, mobile).
  • tablet : marge intérieure propre aux appareils de type tablette (par exemple top).
  • mobile : marge intérieure propre aux appareils de type mobile (par exemple top).

Exemple :

"alignmentAndSpacing": { "padding": { "left": 10, "right": 10, "top": 50, "bottom": 50, "isDTMLinked": false, "tablet": { "top": 80 }, "mobile": { "top": 80 } } }

 

« autoFit"

Ajustement automatique : s’applique uniquement aux blocs de contenu. Ils s’adaptent automatiquement à l’espace disponible.

Exemple :

"alignmentAndSpacing": { "autoFit": false, "padding": { "left": 10, … } },

"textProps"  

S’applique uniquement aux blocs de texte. Exemple :

"customProperties":{

"textProps": {

        "listProps":{

          "listDepth":4,

          "listColor": "#EB2699",

          "listSize":"120%",

          "listType":"OrderedListRoman1"

        }

}

  }

"imageHeight"

"imageAspectRatio"

"imageBehavior"

 

S’applique uniquement aux blocs de contenu d’image et aux blocs de contenu de grille d’image. Si « imageBehavior » est défini sur « IG_SCALE », « imageAspectRatio » est respecté pour mettre l’objet à l’échelle dans différentes fenêtres d’affichage. Mais, s’il est défini sur « IG_FIXED_HEIGHT », c’est la propriété « imageHeight » qui est suivie.

Exemple :

{

"customProperties": {

        "alignmentAndSpacing": {

        …

        "imageHeight": 768,

        "imageAspectRatio": 3.415,

        "imageBehavior": "IG_SCALE"

      }

"videoHeight"  

S’applique uniquement aux conteneurs de cartes vidéo. Définit la hauteur de l’objet vidéo dans le bloc de contenu. Exemple :

{"tag": "videoCard",

      "customStyles": {

        …

        },

             "customProperties": {…

            "videoHeight": 400

      }

    }

 

 "imageHeight"        "minImageHeight"  

S’applique uniquement aux blocs de contenu de caractère et de scénario. 

  •  "imageHeight » : hauteur par défaut du caractère dans le bloc de contenu.
  •  "minImageHeight » : en cas de redimensionnement, il s’agit de la hauteur minimale conservée pour l’objet.


Voici un exemple :

{

"tag": "character-block-container",

      "customStyles": {

       …

      "customProperties": {

        "imageHeight": 600,

        "minImageHeight": 200

}

}

 

"Position"  

S’applique uniquement aux objets de sous-titres des diapositives de questions. Définit la position des légendes dans la diapositive de question :

  • Haut 
  • Milieu
  • Bas

Exemple :

 {

      "tag": "slide-item-question-caption",

      "customProperties": {

        "position": 1

      },

}

 

Exemples d’options de conception personnalisées

Modification de la mise en page à l’aide de la grille CSS

Pour utiliser la grille CSS, commencez par localiser l’élément conteneur parent (dans ce cas, container-image-card (étiquette b)) et modifiez son type d’affichage en sélectionnant le type grille. 

  1. Depuis l’emplacement d’installation, copiez \content_blocks\Image\Single Image Default Design Option dans le dossier personnalisé dans eLearning Assets et nommez le dossier en conséquence. Dans cet exemple, le nouveau nom est Custom Single Image design.

  2. Ouvrez ce dossier à l’aide de n’importe quel éditeur de texte et mettez à jour les valeurs des champs de nom et de description dans le fichier localized.json.

    {
      &quot;en-US&quot;: {
        &quot;name&quot;: &quot;Test personnalisé 123&quot;,
        &quot;description&quot;: &quot;Option de conception personnalisée pour une seule image&quot;
      },
      &quot;fr-FR&quot;: {}
    }
    
  3. Ajoutez un nom unique à designOptionID et définissez « isDefault » sur false.

    {
      &quot;type&quot;: &quot;image&quot;,
      &quot;name&quot;: &quot;$$name&quot;,
      &quot;description&quot;: &quot;$$description&quot;,
      &quot;version&quot;: &quot;1.0&quot;,
      &quot;isDefault&quot;: false,
      &quot;designOptionId&quot;: &quot;Test personnalisé 123&quot;,
  4. Localisez la balise « container-image-card ».

  5. Définissez le flux du conteneur sur grid.

    &quot;tag&quot;: &quot;container-image-card&quot;,
    
          &quot;customStyles&quot;: {
    
            &quot;all&quot;: {
    
              &quot;display&quot;: &quot;grid&quot;,
    
              &quot;gridTemplateColumns&quot;: &quot;1fr 1fr&quot;,
    
              &quot;gap&quot;: &quot;50px&quot;
    
            },
  6. Maintenant, pour positionner les composants dans la grille pour le bloc de contenu d’image, localisez la balise « slide-item-image » et placez le conteneur d’images à gauche dans la grille. Notez que tout style appliqué au conteneur d’images est fourni sous les styles personnalisés de l’objet image avec la clé « imageContainerStyles ».

    &quot;tag&quot;: &quot;slide-item-image&quot;,
      &quot;customStyles&quot;: {
        &quot;all&quot;: {
          &quot;imageContainerStyles&quot;: {
            &quot;minWidth&quot;: &quot;100%&quot;,
            &quot;maxWidth&quot;: &quot;100%&quot;,
            &quot;gridArea&quot;: &quot;1 / 1 / span 1 / span 1&quot;
          }
        },
        &quot;tablet&quot;: {},
        &quot;mobile&quot;: {}
      }
    
    Remarque :

    L’ajout de styles sous « all » les applique à toutes les fenêtres d’affichage d’appareil. Vous pouvez également choisir de les ajouter spécifiquement sous les affichages tablette ou mobile.

  7. Modifiez la position du conteneur de texte à l’intérieur de la grille. Localisez la balise « container-image-text » et ajoutez les styles suivants :

      &quot;tag&quot;: &quot;container-image-text&quot;,
      &quot;customStyles&quot;: {
        &quot;all&quot;: {
          &quot;gap&quot;: &quot;8px&quot;,
          &quot;gridArea&quot;: &quot;1 / 2 / span 1 / span 1&quot;
        },
        &quot;tablet&quot;: {},
        &quot;mobile&quot;: {}
      }
  8. Placez les boutons dans la balise « container-image-card » sur la ligne suivante.

    {
          &quot;tag&quot;: &quot;container-image-card&quot;,
          &quot;customStyles&quot;: {..
          },
          &quot;customProperties&quot;: {…
          },
          &quot;childNodesCustomStyles&quot;: {
            &quot;slide-item-buttons&quot;: {
              &quot;all&quot;: {
                &quot;gridArea&quot;: &quot;2 / 1 / span 1 / span 2&quot;
              },
              &quot;tablet&quot;: {},
              &quot;mobile&quot;: {}
            }
          }
        }
    
  9. Définissez les paramètres prédéfinis de texte. Les paramètres prédéfinis font partie d’un thème dans Captivate qui peut être configuré dans l’éditeur de thème.

    Paramètres prédéfinis de texte dans Propriétés visuelles
    Paramètres prédéfinis de texte dans Propriétés visuelles

    Localisez la balise « slide-item-caption » et remplacez le paramètre prédéfini Caption par « Heading4 ».

    &quot;preset&quot;: &quot;text-heading-4&quot;,
     &quot;tag&quot;: &quot;slide-item-caption&quot;,

    Localisez la balise « slide-item-subtitle » et remplacez le paramètre prédéfini Subtitle par « Detail 1 ».

    &quot;preset&quot;: &quot;text-detail-1&quot;,
     &quot;tag&quot;: &quot;slide-item-subtitle&quot;,

Voici une comparaison de l’aspect de la conception personnalisée par rapport à l’option de conception par défaut après l’application des modifications de la grille CSS :

Remarque :

Relancez Captivate pour voir les modifications apportées aux options de conception personnalisées. Celles-ci apparaîtront sous la section Options de conception du panneau Propriétés visuelles.

Option de conception par défaut pour un bloc de contenu d’une seule image
Option de conception personnalisée pour un bloc de contenu d’une seule image

Définition de propriétés personnalisées

Les propriétés personnalisées sont accessibles et ajustées dans le panneau Propriétés visuelles pour tout bloc de contenu ou objet. En outre, ces propriétés peuvent être modifiées à l’aide du fichier d’options de conception. Dans cet exemple de conception personnalisée pour le bloc de contenu d’image, nous allons mettre à jour quelques propriétés personnalisées.

  1. Activez l’ajustement automatique en définissant le paramètre autoFit sur true. Lorsque l’ajustement automatique est activé, le contenu s’étend pour occuper toute la hauteur de la diapositive. Nous vous recommandons d’activer l’ajustement automatique pour les blocs de contenu utilisés dans les diapositives de mise en page, tels que les blocs de contenu image et texte. Il est appliqué à toutes les fenêtres d’affichage d’appareil.

    Localisez la balise « container-image », puis, sous « customProperties », définissez autoFit sur true.

    &quot;tag&quot;: &quot;container-image&quot;,
      &quot;customStyles&quot;: {
        …
      }
      &quot;customProperties&quot;: {
        &quot;alignmentAndSpacing&quot;: {
          …
          &quot;autoFit&quot;: true
        }
      }
  2. Sous la même balise : « container-image », puis, sous « customProperties », définissez imageHeight et imageBehavior.

    &quot;imageBehavior&quot;: &quot;IG_TILE_CENTRE&quot;,
    &quot;imageHeight&quot;: 768,
  3. Alignez le texte de la légende et du sous-titre au centre en modifiant les customProperties de « container-image-card », le conteneur parent qui contient ces éléments de texte. Pour ce faire, repérez la balise « container-image-card » dans le fichier d’options de conception. Sous la section customProperties, recherchez les composants et mettez à jour leurs paramètres d’alignement sur center.

    &quot;tag&quot;: &quot;container-image-card&quot;,
          &quot;customStyles&quot;: {
            &quot;all&quot;: {
              &quot;display&quot;: &quot;grid&quot;,
              &quot;gridTemplateColumns&quot;: &quot;1fr 1fr&quot;,
              &quot;gap&quot;: &quot;50px&quot;
    
            },
            &quot;tablet&quot;: {},
            &quot;mobile&quot;: {}
          },
          &quot;customProperties&quot;: {
            &quot;components&quot;: {
              &quot;image&quot;: {
                &quot;alignment&quot;: &quot;left&quot;
              },
              &quot;caption&quot;: {
                &quot;alignment&quot;: &quot;center&quot;
              },
              &quot;subtitle&quot;: {
                &quot;alignment&quot;: &quot;center&quot;

Voici un aperçu de la conception personnalisée après l’application des modifications aux propriétés personnalisées. Démarrez un nouveau projet dans Captivate. Vous remarquerez que l’ajustement automatique en hauteur est activé par défaut, ce qui permet au contenu d’occuper toute la hauteur de la diapositive. En outre, les composants de texte tels que Caption et Subtitle sont centrés.

Cette image montre les modifications des propriétés personnalisées d’une option de conception personnalisée d’un bloc de contenu d’image
Modification de l’ajustement automatique en hauteur et de l’alignement du texte pour l’option de conception personnalisée

Définition de mises en page pour différentes fenêtres d’affichage

Modifiez les styles personnalisés de l’élément container-image-card afin d’optimiser son apparence pour les affichages tablette et mobile. Cela garantit une apparence homogène pour les différents types d’appareil.

  1. Localisez "tag": "container-image-card" dans le fichier designOption.json et ajoutez des styles personnalisés pour tablette et mobile.

  2. Définissez les modes mobile et tablet sur flexDirection.

    &quot;tag&quot;: &quot;container-image-card&quot;,
        &quot;customStyles&quot;: {
            &quot;all&quot;: {…},
            &quot;tablet&quot;: {
                &quot;display&quot;: &quot;flex&quot;,
                &quot;flexDirection&quot;: &quot;column&quot;
            },
            &quot;mobile&quot;: {
                &quot;display&quot;: &quot;flex&quot;,
                &quot;flexDirection&quot;: &quot;column&quot;
            }
        }

Voici un aperçu de la conception personnalisée pour l’affichage tablette après avoir défini flexDirection sur « column ». Démarrez un nouveau projet dans Captivate et appliquez l’option de conception personnalisée pour afficher tout le contenu aligné sur une seule colonne.

Modification de l’affichage tablette en remplaçant la valeur de flexDirection par column
Affichage tablette avec flexDirection défini sur column

Réutilisation des options de conception

L’un des principaux avantages de la création d’options de conception personnalisées est la possibilité de réutiliser des conceptions existantes dans vos nouvelles options de conception personnalisées. Dans cet exemple, l’option de conception de bloc de contenu d’image personnalisée créée lors des étapes précédentes sera utilisée comme image pour la mise en page de la diapositive Introduction.

  1. Depuis l’emplacement d’installation, copiez layouts\Introduction\Introduction default dans le dossier personnalisé dans eLearning Assets et nommez le dossier en conséquence. Dans cet exemple, le nouveau nom est Diapositive d’introduction personnalisée.

  2. Ouvrez l’option de conception de la mise en page de l’introduction personnalisée à l’aide d’un éditeur de texte et mettez à jour les valeurs des champs name et description dans le fichier localized.json.

    {
      &quot;en-US&quot;: {
        &quot;name&quot;: &quot;Diapositive d’introduction personnalisée&quot;,
        &quot;description&quot;: « Option de conception personnalisée pour l’introduction&quot;
      },
      &quot;fr-FR&quot;: {}
    }
  3. Ajoutez un nom unique à designOptionID.

    {
      &quot;type&quot;: &quot;Introduction&quot;,
      &quot;name&quot;: &quot;$$name&quot;,
      &quot;description&quot;: &quot;$$description&quot;,
      &quot;designOptionId&quot;: &quot;Diapositive d’introduction personnalisée&quot;,
      &quot;isDefault&quot;: false,
      &quot;version&quot;: &quot;1.0&quot;,
      &quot;thumbnail&quot;: &quot;thumbnail.png&quot;,
      &quot;styles&quot;: [
        {
          &quot;tag&quot;: &quot;image&quot;,
          &quot;designOptionId&quot;: &quot;INTRODUCTION_SINGLE_IMAGE_OPTION&quot;
        }
      ]
    }
  4. Définissez « isDefault » sur false.

  5. Réutilisez l’option de conception du bloc de contenu d’image créé précédemment et ajoutez son ID designOption unique.

    {
      &quot;type&quot;: &quot;Introduction&quot;,
      &quot;name&quot;: &quot;$$name&quot;,
      &quot;description&quot;: &quot;$$description&quot;,
      &quot;designOptionId&quot;: &quot;Diapositive d’introduction personnalisée&quot;,
      &quot;isDefault&quot;: false,
      &quot;version&quot;: &quot;1.0&quot;,
      &quot;thumbnail&quot;: &quot;thumbnail.png&quot;,
      &quot;styles&quot;: [
        {
          &quot;tag&quot;: &quot;image&quot;,
          &quot;designOptionId&quot;: &quot;Test personnalisé 123&quot;
        }
      ]
    }
  6. Démarrez un nouveau projet dans Captivate et ajoutez une diapositive d’introduction.

  7. Sélectionnez la nouvelle option de conception personnalisée pour la diapositive d’introduction dans le panneau Propriétés visuelles.

    Option de conception personnalisée pour la diapositive d’introduction
    Option de conception personnalisée pour la diapositive d’introduction réutilisant une option de conception d’image personnalisée

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?