Mises en page en colonnes

Les mises en page en colonnes sont utilisées pour concevoir et organiser Générateur d'IU les pages.

Cette vidéo vous montre comment effectuer la procédure suivante.

Les mises en page en colonnes vous permettent de créer des pages utiles et visuellement attrayantes dans une expérience. Une disposition en colonne est un type de conteneur flexible qui peut contenir des composants. Les mises en page en colonnes sont des mises en page simples et préconfigurées, ce qui vous permet de concevoir rapidement une page efficace et attrayante. Il est utile de définir et de définir la structure de la page avec des mises en page en colonnes avant d’ajouter des composants.

Les mises en page en colonnes peuvent avoir des colonnes de largeurs égales ou différentes.

Vous pouvez configurer la mise en page des colonnes dans son ensemble et les colonnes individuelles dans la mise en page. Par exemple, définissez une largeur et une couleur de bordure différentes pour une mise en page de colonne et pour les colonnes individuelles de la mise en page.

Remarque :

Actuellement, il n’est pas possible de masquer/d’afficher des colonnes dans une mise en page de colonnes en fonction de conditions.

Ajouter une mise en page de colonne

Ajoutez une mise en page en Générateur d'IU colonnes pour créer une structure et organiser les composants sur une page d’expérience.

Avant de commencer

Rôle requis : ui_builder_admin

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
   Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus sur la création d’expériences.
3. Créer une page dans Générateur d'IU ou ouvrez une page.
4. Sélectionnez + Ajouter un composant dans l’arborescence de contenu.
5. Sélectionnez l’une des options de base dans l’onglet Mises en page .
   
   La disposition des colonnes s’affiche sur l’étape afin que vous puissiez ajouter des composants aux colonnes. Consultez Ajouter et configurer des composants pour plus d'informations.
6. Ajoutez des mises en page de colonnes supplémentaires au-dessus ou en dessous.
   • Dans l’arborescence de contenu, sélectionnez un nom de mise en page de colonne et maintenez-le enfoncé (ou cliquez avec le bouton droit de la souris) ou sélectionnez l’icône Menu pour une mise en page de colonne. Ensuite, sélectionnez Ajouter avant ou Ajouter après dans la liste et sélectionnez une mise en page.

     

   • Sur la scène, sélectionnez une disposition en colonne, puis sélectionnez le signe plus en haut ou en bas.

     

Configurer les mises en page des colonnes

Configurez les mises en page des colonnes pour Générateur d'IU ajouter le nombre approprié de colonnes et l’apparence que vous souhaitez sur une page d’expérience.

Avant de commencer

Rôle requis : ui_builder_admin

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
   Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus sur la création d’expériences.
3. Créer une page dans Générateur d'IU ou ouvrez une page.
4. Si la page ne contient pas déjà une mise en page en colonne, Ajouter une mise en page de colonne.
5. Ajoutez (jusqu’à un maximum de six) colonnes à l’aide de l’arborescence de contenu, de l’étape ou du panneau de configuration.
   • Dans l’arborescence de contenu, sélectionnez un nom de colonne et maintenez-le enfoncé (ou cliquez avec le bouton droit de la souris) ou sélectionnez l’icône Menu d’une colonne, puis sélectionnez Ajouter une colonne avant ou Ajouter une colonne après dans la liste.

     

   • Dans l’étape, sélectionnez une seule colonne, sélectionnez l’icône Menu en regard du nom de la colonne, puis sélectionnez Ajouter une colonne avant ou Ajouter une colonne après dans la liste.

     

   • Sur la scène, sélectionnez une colonne et maintenez-la enfoncée (ou cliquez avec le bouton droit de la souris), puis sélectionnez Ajouter une colonne avant ou Ajouter une colonne après dans la liste.

     

   • Dans l’arborescence de contenu, sélectionnez une mise en page de colonne, puis sur la scène, sélectionnez l’icône + plus pour ajouter des colonnes à droite de la mise en page de colonne.

     

   • Dans l’arborescence de contenu, sélectionnez une mise en page de colonne, puis dans le panneau de configuration, utilisez l’icône + plus en regard de Colonnes pour ajouter des colonnes à droite de la mise en page de colonne.

     

   Remarque :

   Les colonnes peuvent être imbriquées les unes dans les autres, mais ce niveau de complexité n’est pas souvent requis sur les pages.
6. Renommez une colonne en modifiant l’étiquette de colonne à partir de l’arborescence de contenu, de l’étape ou du panneau de configuration.
   • Dans l’arborescence de contenu, sélectionnez un nom de colonne et maintenez-le enfoncé (ou cliquez avec le bouton droit de la souris) ou sélectionnez l’icône Menu d’une colonne, puis sélectionnez Renommer.
   • Sur la scène, sélectionnez l’icône Menu à côté d’un nom de colonne, puis sélectionnez Renommer.
   • Dans le panneau de configuration, sélectionnez l’icône d’information en regard du nom de la colonne.
   Renommer des colonnes peut vous aider à distinguer les différentes colonnes de l’étape et de l’arborescence de contenu. Si vous avez une page complexe avec de nombreuses mises en page de colonnes et colonnes, il est utile de renommer les colonnes.
7. Pour modifier la largeur d’une colonne dans une mise en page, sélectionnez-la (dans l’arborescence de contenu ou sur la scène), puis faites glisser un séparateur de colonne sur la scène vers la gauche ou la droite pour réduire ou élargir la colonne.
   
   Les pourcentages de largeur en haut des colonnes changent automatiquement lorsque vous faites glisser le séparateur de colonne. La somme des pourcentages s’élève à 100 %. Lors du redimensionnement d’une colonne, tenez compte de l’espace dont le ou les composants de la colonne ont besoin. Par exemple, les composants de liste et de formulaire ne s’affichent généralement pas bien dans des colonnes étroites.
8. Répartissez uniformément les colonnes d’une mise en page sur la largeur horizontale à l’aide de l’arborescence de contenu, de l’étape ou du panneau de configuration.
   • Dans l’arborescence de contenu, sélectionnez un nom de mise en page de colonne et maintenez-le enfoncé (ou cliquez avec le bouton droit de la souris) ou sélectionnez l’icône Menu pour une mise en page de colonne, puis sélectionnez Répartir les colonnes uniformément dans la liste.
   • Sur la scène, sélectionnez une mise en page de colonne, sélectionnez l’icône Menu en regard du nom de la mise en page de colonne, puis sélectionnez Répartir les colonnes uniformément dans la liste.
   • Sélectionnez une disposition de colonne (dans l’arborescence de contenu ou sur l’étape) et, dans le panneau de configuration, sélectionnez Répartir les colonnes uniformément.
9. Réorganiser les colonnes (y compris leur contenu) dans une mise en page de colonne à l’aide de l’arborescence de contenu ou de l’étape.
   • Dans l’arborescence de contenu, sélectionnez la colonne et faites-la glisser vers une nouvelle position (une ligne horizontale bleue indique l’endroit où la colonne peut être déposée).
   • Sur la scène, sélectionnez un en-tête de colonne, faites glisser la colonne vers une nouvelle position, puis déplacez la colonne dans la zone de dépôt définie par une ligne verticale magenta.
   Si vous réorganisez la colonne dans l’arborescence de contenu, l’étape se met à jour et si vous réorganisez l’étape, l’arborescence de contenu se met à jour.
10. Spécifiez la quantité d’espace entre les colonnes de l’arborescence de contenu, de l’étape ou du panneau de configuration.
    • Dans l’arborescence de contenu, sélectionnez un nom de mise en page de colonne et maintenez-le enfoncé (ou cliquez avec le bouton droit de la souris) ou sélectionnez l’icône Menu d’une mise en page de colonne, sélectionnez Mise en page dans la liste, puis sélectionnez une option de taille dans Écart entre colonnes.
    • Sur l’étape, sélectionnez une disposition de colonne, sélectionnez l’icône Menu en regard du nom de la mise en page de colonne, sélectionnez Mise en page dans la liste, puis sélectionnez une option de taille dans Écart de colonne.
    • Sélectionnez une disposition de colonne (dans l’arborescence de contenu ou sur l’étape) et, dans le panneau de configuration, sélectionnez une option de taille dans Écart entre les colonnes.
11. Sélectionnez l’icône Arborescence pour accéder à une autre couche de contenu, par exemple, d’une colonne à la mise en page de colonne parente ou à un composant enfant.
    
12. Supprimez des colonnes de l’arborescence de contenu ou de l’étape.
    • Dans l’arborescence de contenu, sélectionnez un nom de colonne et maintenez-le enfoncé (ou cliquez avec le bouton droit de la souris) ou sélectionnez l’icône Menu d’une colonne, puis sélectionnez Supprimer la colonne dans la liste.
    • Sur la scène, sélectionnez une seule colonne, sélectionnez l’icône Menu en regard du nom de la colonne, puis sélectionnez Supprimer la colonne dans la liste.
    • Dans l’arborescence de contenu, sélectionnez une disposition de colonne, puis dans le panneau de configuration, utilisez l’icône - moins en regard de Colonnes pour supprimer des colonnes du côté droit de la mise en page de colonne.

Définir l’écart entre et dans les colonnes

Définir l’écart entre les colonnes d’une mise en page de colonne dans Générateur d'IU. Si un poteau contient plusieurs composants, définissez l’écart horizontal ou vertical entre les composants.

Avant de commencer

Rôle requis : ui_builder_admin

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
   Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus sur la création d’expériences.
3. Créer une page dans Générateur d'IU ou ouvrez une page.
4. Si la page ne contient pas déjà une mise en page en colonne, Ajouter une mise en page de colonne.
5. Spécifiez la quantité d’espace entre les colonnes de l’arborescence de contenu, de l’étape ou du panneau de configuration.
   • Dans l’arborescence de contenu, sélectionnez un nom de mise en page de colonne et maintenez-le enfoncé (ou cliquez avec le bouton droit de la souris) ou sélectionnez l’icône Menu d’une mise en page de colonne, sélectionnez Mise en page dans la liste, puis sélectionnez une option de taille dans Écart entre colonnes.
   • Sur l’étape, sélectionnez une disposition de colonne, sélectionnez l’icône Menu en regard du nom de la mise en page de colonne, sélectionnez Mise en page dans la liste, puis sélectionnez une option de taille dans Écart de colonne.
   • Sélectionnez une disposition de colonne (dans l’arborescence de contenu ou sur l’étape) et, dans le panneau de configuration, sélectionnez une option de taille dans Écart entre les colonnes.
6. Pour spécifier la quantité d’espace entre plusieurs composants dans une seule colonne, sélectionnez la colonne dans l’arborescence de contenu.
7. Dans le panneau de configuration, sélectionnez une option de taille dans Gap.
8. Pour alterner entre l’empilement des composants et leur placement les uns à côté des autres, sélectionnez l’icône Ligne ou Colonne dans Direction.

Définir des options avancées de mise en page des colonnes

Définissez des options avancées de mise en page des colonnes en Générateur d'IU incluant la largeur de la pile et la hauteur de la disposition des colonnes.

Avant de commencer

Rôle requis : admin

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
   Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus sur la création d’expériences.
3. Créer une page dans Générateur d'IU ou ouvrez une page.
4. Si la page ne contient pas déjà une mise en page en colonne, Ajouter une mise en page de colonne.
5. Sélectionnez une mise en page de colonne avec au moins deux colonnes dans l’arborescence de contenu.
   
6. Pour définir une largeur de pile, accédez au panneau de configuration > Mise en page et sélectionnez Afficher les options de mise en page avancées.
   Remarque :

   La définition d’une largeur de pile vous permet de contrôler l’apparence d’une page avec des mises en page en colonnes dans une fenêtre de navigateur, une tablette ou un appareil mobile étroit.

   
7. Saisissez une largeur dans les colonnes Empiler ci-dessous.
8. Sélectionnez Enregistrer.
9. Pour tester la nouvelle largeur de pile, sélectionnez la flèche en regard de Aperçu et sélectionnez Ouvrir le chemin de l’URL.
10. Réduisez la largeur de la fenêtre du navigateur à une valeur inférieure à la largeur de pile que vous avez spécifiée pour vérifier que les colonnes de droite se déplacent en dessous de la première colonne.
11. Fermez l’onglet du navigateur qui s’est ouvert avec le chemin de l’URL.
12. Pour contrôler la hauteur de la mise en page des colonnes, sélectionnez une mise en page de colonne avec au moins deux colonnes dans l’arborescence de contenu, accédez au panneau de configuration > Mise en page, puis sélectionnez Afficher les options de mise en page avancées.
    Remarque :

    La définition de la hauteur est utile si la mise en page de vos colonnes contient un composant qui peut être haut, comme le composant Liste.
13. Sous Dimensionnement, saisissez des nombres dans une ou plusieurs des options (Hauteur, Min. H, et Max. H) et définissez l’unité de dimensionnement (par exemple, px, % ou em).
    
14. Sélectionnez Enregistrer.
15. Pour tester le nouveau dimensionnement, sélectionnez la flèche en regard de Aperçu et sélectionnez Ouvrir le chemin de l’URL.
16. Réduisez et développez la hauteur de la fenêtre du navigateur pour tester les valeurs spécifiées.
17. Fermez l’onglet du navigateur qui s’est ouvert avec le chemin de l’URL.