Ajout d’une marge intérieure dans les blocs de contenu et composants dans Adobe Captivate

La marge intérieure permet d’ajouter un espace entre le contenu et sa bordure, ce qui améliore la disposition visuelle et l’alignement de votre projet. Elle peut être appliquée au niveau des blocs de contenu ou au sein des composants afin d’aider à améliorer l’alignement et l’espacement, contribuant ainsi à une meilleure expérience de visionnage.

Avantages de la marge intérieure

Crée un espace uniforme autour des éléments, pour un aspect net et professionnel.
Augmente l’espace autour des éléments interactifs, ce qui facilite la sélection et améliore ainsi l’expérience utilisateur.

Utilisation de la marge intérieure :

Ajustement de la taille : si vous devez ajouter plus d’espace autour d’un élément, vous pouvez ajouter ou augmenter la marge intérieure. Ceci est particulièrement utile pour les éléments interactifs, car l’espace supplémentaire permet d’améliorer l’accessibilité.
Marge intérieure des bordures : la marge intérieure accroît l’espace entre le contenu et la bordure. Elle contribue à assurer un meilleur alignement avec les autres éléments de la page.

Sujets de cette page :

Marge intérieure des blocs de contenu
Marge intérieure au niveau du composant
Exemples de marge intérieure pour différents composants
Mises en page automatiques

Marge intérieure des blocs de contenu

Ajoutez une marge intérieure dans un bloc de contenu complet à partir des bordures et affichez le comportement dans différentes fenêtres d’affichage.

Sélectionnez Propriétés visuelles dans la barre d’outils de droite et développez la section Alignement et espacement pour afficher les valeurs de la marge intérieure.

Marge intérieure des blocs de contenu
Utilisez le curseur Largeur du contenu pour modifier l’espacement horizontal de tout bloc de contenu à gauche ou à droite. Définissez le pourcentage d’espacement de votre choix à l’aide du curseur. Lorsque vous ajustez la largeur, les valeurs de la marge intérieure sont automatiquement mises à jour pour refléter les modifications.
Activez la mise en page automatique pour ajuster la largeur du contenu de manière proportionnelle dans toutes les fenêtres d’affichage de l’appareil ou désactivez-la pour ajuster les valeurs manuellement. En savoir plus sur les dispositions automatiques pour les différentes fenêtres d’affichage.

Si la mise en page automatique est désactivée, vous pouvez définir des valeurs de marge intérieure pour chaque côté. La largeur du contenu de chaque fenêtre d’affichage peut être ajustée individuellement. Cela signifie que vous pouvez ajouter une largeur de contenu pour une fenêtre d’affichage sans affecter les autres.

Marge intérieure des blocs de contenu pour la vue Tablette avec mise en page automatique désactivée

Remarque :

La marge intérieure horizontale des blocs de contenu est définie en pourcentage, car la largeur du projet est fixe. La marge intérieure verticale est définie en pixels pour s’adapter en cas de contenu à défilement long.

Marge intérieure au niveau du composant

Inclure une marge intérieure dans chaque élément au sein d’un bloc de contenu, notamment les images, le texte, les éléments interactifs, les cartes et les objets de widget. La marge intérieure des composants au sein d’un bloc de contenu peut être ajoutée de deux manières :

Marge intérieure uniforme : ajoutez simultanément une marge intérieure aux quatre côtés.

Marge intérieure non uniforme : ajoutez une marge intérieure à chaque côté individuellement. Cette option est sélectionnée par défaut.

Voici un exemple de marge intérieure uniforme définie sur 50 px pour les quatre côtés du bloc de texte.

Lorsque l’utilisateur survole les bords d’un composant, des poignées roses s’affichent permettant d’ajuster l’espacement en les faisant glisser. Pour un remplissage uniforme de chaque côté, maintenez la touche Maj enfoncée en faisant glisser les poignées.

Exemples de marge intérieure pour différents composants

Voici quelques exemples de marge intérieure de divers composants dans un projet de dimension 1366 x 768 px :

Ajoutez une marge intérieure au bloc de texte de votre choix pour créer un espace entre le contenu et sa bordure. Pour chaque composant de texte (titre, sous-titre ou corps de texte), utilisez les poignées roses pour faire glisser et définir la marge intérieure directement dans la zone de travail. Vous pouvez également sélectionner le composant de texte et saisir les valeurs de marge intérieure dans la section Alignement et espacement des Propriétés visuelles.

Cet exemple illustre l’ajout d’une marge intérieure dans un bloc de texte à plusieurs colonnes au sein du composant du corps de texte avec définition d’une marge intérieure inférieure de 100 px.

Sélectionnez l’image et faites glisser les poignées roses situées près des bordures de l’image. Vous pouvez également saisir des valeurs de marge intérieure dans la section Alignement et espacement du menu Propriétés visuelles.

L’exemple illustre une marge intérieure inférieure définie sur 60 pixels à partir de la bordure d’un conteneur d’image :

Ajoutez une marge intérieure aux images présentes dans une grille d’image, dans les widgets, les cartes, les personnages et les images des diapositives de questions. Toutefois, il n’est pas possible d’ajouter de marge intérieure aux images d’arrière-plan.

Voici un exemple d’ajout de marge intérieure dans un composant de bouton interactif. Ajoutez un composant de bouton et sélectionnez le bouton au sein du bloc de contenu. Utilisez les poignées rose pour faire glisser et ajouter un espacement ou saisissez les valeurs de marge intérieure dans la section Alignement et espacement.

Remarque :

Les composants interactifs de bouton radio et de liste déroulante ne prennent pas en charge le paramètre de marge intérieure.

Ajoutez une marge intérieure au composant de votre choix au sein d’un widget, comme le texte pour les titres, les sous-titres, les images, les cartes et les icônes. Dans cet exemple de widget de carte, vous pouvez sélectionner le composant du widget de votre choix et ajuster la marge intérieure à l’aide des poignées roses.

Vous pouvez également sélectionner un composant et ajouter une marge intérieure dans la section Alignement et espacement des Propriétés visuelles. Dans cet exemple, une marge intérieure de 30 px est ajoutée à l’icône de pivotement au sein de la carte. De même, vous pouvez sélectionner le texte ou l’image de votre choix dans chaque carte et ajouter une marge intérieure aux bordures.

Incluez une marge intérieure dans chaque composant des diapositives de questions, notamment le texte, les images et les boutons interactifs. L’espace supplémentaire entre les options des diapositives de questions facilite la sélection et améliore l’esthétique globale de la question. Voici un exemple de question à choix multiples avec marge intérieure au sein des options d’image.

Mises en page automatiques

Lorsque la mise en page automatique est activée, la marge intérieure est ajustée proportionnellement dans les différentes fenêtres d’affichage des appareils pour les blocs de contenu et les composants en appliquant des valeurs réactives aux ordinateurs de bureau, tablettes et appareils mobiles selon les dimensions du projet. En savoir plus sur la procédure de modification des dimensions du projet dans Adobe Captivate.

Comportement de mise en page automatique lorsque l’option est activée

Lorsque la mise en page automatique est activée, la marge intérieure est ajustée proportionnellement sur les différents appareils et les valeurs sont modifiées automatiquement pour chaque fenêtre d’affichage. Dans un projet d’une résolution de 1366 x 768 px, un remplissage de 50 px pour l’affichage Bureau est redimensionné à 28 px pour l’affichage Tablette et à 16 px pour l’affichage Mobile conservant les proportions.

Cette image illustre la vue Bureau lorsque la mise en page automatique est activée — Vue Bureau lorsque la mise en page automatique est activée

Comportement de mise en page automatique lorsque l’option est désactivée

Voici un exemple de projet avec la fonctionnalité de mise en page automatique désactivée pour une taille de projet de 1366 x 768 px. Dans ce cas, l’utilisateur peut ajouter manuellement les valeurs de marge intérieure pour chaque fenêtre d’affichage afin d’offrir une expérience d’affichage optimale.

Vue Bureau (marge intérieure de 50 px) :