Show Menu
SUJETS×

Utiliser le mode Mise en page pour redimensionner les composants

Le formulaire adaptatif et l’interface de création de Web de communication interactive vous permettent de redimensionner des composants à l’aide du mode Mise en page. Faites glisser et déposez des points bleus dans les colonnes pour définir les points d’ et d’extrémité à positionner les composants. Les points bleus s’affichent après avoir appuyé sur le composant dans la grille dynamique. La grille réactive se compose de 12 colonnes égales. L’ombrage blanc et bleu des colonnes de remplacement différencie une colonne de l’autre.
Vous pouvez utiliser le mode Disposition pour redimensionner les composants pour tous les types de périphériques, tels que les ordinateurs de bureau, les tablettes, les smartphones et d’autres périphériques plus petits. La tablette dérive automatiquement la configuration de la mise en page de la version de bureau et les périphériques les plus petits dérivent de la configuration de la mise en page du téléphone. Vous pouvez toutefois remplacer les configurations dérivées automatiquement pour définir une configuration différente pour chaque type de périphérique.
Si vous créez le Web à l’aide de l’ d’ impression en tant que gabarit d’une communication interactive, les composants disponibles pour le redimensionnement comprennent également les sous-formulaires et les champs générés automatiquement dans les Web à l’aide de l’option d’impression deformulaire. Le Web conserve la mise en page des éléments du d’impression en mode Disposition.

Accès au mode Mise en page

Sélectionnez Disposition dans le déroulant qui s’affiche en haut du formulaire adaptatif et de l’interface de création Interactive Communication en regard de l’option de de . Le formulaire s’affiche en mode Disposition.
  1. Connectez-vous à l’instance d’auteur AEM et accédez à Adobe Experience Manager  >  Formulaires  >  Formulaires et documents .
  2. Créez ou ouvrez un formulaire adaptatif existant ou une communication interactive.
  3. Sélectionnez Disposition dans le déroulant qui s’affiche en haut à côté de l’option de du . Le formulaire s’affiche en mode Disposition.

Redimensionner les composants

  1. En mode Mise en page, appuyez sur le composant à redimensionner. Les points bleus s’affichent au et à la fin de la grille dynamique.
  2. Faites glisser les points bleus pour définir la position du composant dans la grille réactive.
    La barre d’outils qui s’affiche après avoir appuyé sur des composants se compose des options suivantes :
    • Parent : Sélectionnez le parent d’un composant.
    • Flotter sur la nouvelle ligne : Déplacez le composant vers la ligne suivante s’il existe plusieurs composants dans la même ligne.
    Vous pouvez annuler toutes les modifications de redimensionnement et appliquer la mise en page par défaut au panneau contenant des composants redimensionnés à l’aide de l’option Rétablir la mise en page du point d’arrêt ( ). Appuyez sur le parent du composant redimensionné pour l’option.
    Vous ne pouvez pas redimensionner les composants de colonne de tableau, de barre d’outils, de bouton de barre d’outils et de zone de à l’aide du mode Disposition. Utilisez le mode Style pour redimensionner ces composants.

Exemple

Objectif : Vous souhaitez insérer un composant de tableau et un composant d’image et les placer en parallèle dans une communication interactive.
  1. Insérez le tableau et les composants d’image à l’aide du mode Edition dans le Web . Le composant d’image s’affiche après le composant de tableau.
  2. Passez en mode Disposition et appuyez sur le composant Tableau. Les points bleus pour redimensionner le composant s’affichent aux colonnes 1 et 12.
  3. Faites glisser le point bleu de la colonne 12 vers la colonne 6 de la grille dynamique.
  4. De même, sélectionnez le composant Image et faites glisser le point bleu de la colonne 1 vers la colonne 7 de la grille dynamique. Les composants de tableau et d’image s’affichent en parallèle.
    Vous pouvez sélectionner le composant Image et appuyer sur l’option Flotter pour passer à la nouvelle ligne disponible dans la barre d’outils pour déplacer le composant Image vers la ligne suivante.

Redimensionnement des panneaux

Exécutez les étapes suivantes si vous souhaitez redimensionner l’ensemble du panneau au lieu de composants individuels :
  1. Appuyez sur l’un des composants du panneau que vous souhaitez redimensionner, sélectionnez , puis sélectionnez la première option dans le déroulant, si le panneau est le parent immédiat du composant.
    Les points bleus s’affichent au et à la fin de la grille dynamique.
  2. Faites glisser les points bleus pour définir la position du panneau dans la grille réactive. Vous pouvez répéter les étapes 1 et 2 et sélectionner pour déplacer le panneau redimensionné vers la ligne suivante.

Définition d’une disposition à plusieurs colonnes pour un panneau

Exécutez les étapes suivantes pour définir le nombre de colonnes d’un panneau :
  1. En mode Edition , appuyez sur le panneau, sélectionnez , puis sélectionnez Réactif - tout sur la page sans navigation dans le déroulant Disposition du panneau.
  2. Appuyez sur pour enregistrer les propriétés.
  3. En mode Disposition , appuyez sur l’un des composants du panneau, sélectionnez , puis sélectionnez le panneau.
  4. Appuyez sur et sélectionnez le nombre de colonnes dans le déroulant. Le nombre de colonnes peut être compris entre 1 et 12. Le panneau est divisé en une disposition à plusieurs colonnes.

Activer la nouvelle grille réactive pour les anciennes mises en page réactives

Activez la nouvelle grille réactive pour les formulaires que vous créez à l’aide d’AEM Forms 6.4 ou d’une version antérieure pour redimensionner les composants.
Le passage à la nouvelle grille réactive élimine les propriétés de mise en page déjà définies pour les composants utilisés dans le formulaire.
Effectuez les étapes suivantes pour activer la nouvelle grille réactive :
  1. Sélectionnez Disposition dans le déroulant qui s’affiche en haut à côté de l’option de du . Une confirmation pour activer le mode Disposition s’affiche.
  2. Appuyez sur Oui pour activer le mode Disposition du formulaire.

Incorporer un ancien fragment dans un formulaire adaptatif avec une nouvelle disposition réactive

La nouvelle disposition réactive pour le formulaire adaptatif vous permet d’ajouter un fragment de formulaire adaptatif avec l’ancienne disposition réactive au formulaire. Toutefois, la nouvelle mise en page ignore les propriétés de mise en page déjà définies pour les composants utilisés dans le fragment. Vous pouvez passer en mode Disposition pour définir les propriétés de disposition des composants utilisés dans le fragment.

Incorporer un fragment avec une nouvelle disposition réactive dans un ancien formulaire adaptatif

Si vous incorporez un fragment avec la nouvelle disposition réactive dans un formulaire adaptatif avec une ancienne disposition réactive, le système vous invite à activer le mode Mise en page du formulaire et à réincorporer le fragment.
Pour activer le mode Disposition, sélectionnez Disposition dans le déroulant qui s’affiche en haut à côté de l’option de du et appuyez sur Oui pour confirmer. Sélectionnez le mode Edition pour réincorporer le fragment.

Désactivation du mode Disposition pour les formulaires avec une ancienne disposition réactive

Vous pouvez désactiver le mode Disposition pour les formulaires avec une ancienne disposition réactive en modifiant les propriétés du modèle utilisé dans le formulaire.
Pour désactiver le mode Disposition, procédez comme suit :
  1. Sélectionnez Outils > Général > Modèles et ouvrez le modèle utilisé dans le formulaire en mode Edition.
  2. Sélectionnez le dans le volet de gauche et appuyez sur Stratégie.
  3. Appuyez sur l’onglet Paramètres de mise en page et sélectionnez Désactiver le mode de mise en page.
  4. Tap to save the template properties.