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 colonnes est un type de conteneur flexible qui peut contenir des composants. Les mises en page en colonnes sont des mises en page simples qui sont préconfigurées, vous permettant 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 en colonne 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 en colonne et pour les colonnes individuelles de la mise en page.

Remarque :

Actuellement, le masquage/l’affichage des colonnes dans une disposition en colonne basée sur des conditions n’est pas pris en charge.

Ajouter une mise en page de colonne

Ajoutez une mise en page Générateur d'IU en 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 Tout > 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 > Expérience.
   Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations 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 du contenu dans l’arborescence de contenu.
5. Sélectionnez l’une des options de base dans l’onglet Mises en page .
   
   La disposition en colonnes apparaît 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 au-dessous.
   • Dans l’arborescence de contenu, sélectionnez et maintenez enfoncé (ou cliquez avec le bouton droit de la souris) sur le nom d’une mise en page en colonne ou sélectionnez l’icône Menu pour une mise en page en colonne. Ensuite, sélectionnez Ajouter avant ou Ajouter après dans la liste et sélectionnez une mise en page.

     

   • À l’étape, sélectionnez une disposition en colonne, puis le signe plus en haut ou en bas.

     

Configurer les mises en page en colonnes

Configurez les Générateur d'IU mises en page en colonnes pour ajouter le nombre approprié de colonnes et l’aspect souhaité sur une page d’expérience.

Avant de commencer

Rôle requis : ui_builder_admin

Procédure

1. Accédez à la Tout > 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 > Expérience.
   Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations 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 et maintenez enfoncé (ou cliquez avec le bouton droit de la souris) sur un nom de colonne 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.

     

   • À l’étape, sélectionnez une 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.

     

   • À l’étape, sélectionnez une colonne et maintenez-la enfoncée (ou cliquez avec le bouton droit de la souris) sur celle-ci, 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 en colonne, puis à l’étape, sélectionnez l’icône + plus pour ajouter des colonnes à droite de la mise en page en colonne.

     

   • Dans l’arborescence de contenu, sélectionnez une mise en page en 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 en 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 et maintenez enfoncé (ou cliquez avec le bouton droit de la souris) sur le nom d’une colonne ou sélectionnez l’icône de menu d’une colonne, puis sélectionnez Renommer.
   • À l’étape, sélectionnez l’icône Menu en regard d’un nom de colonne, puis sélectionnez Renommer.
   • Dans le panneau de configuration, sélectionnez l’icône d’informations en regard du nom de la colonne.

     

   Le fait de 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 et colonnes en colonnes, il est utile de renommer les colonnes.
7. Pour modifier la largeur d’une colonne dans un modèle, sélectionnez la mise en page des colonnes (dans l’arborescence de contenu ou sur l’étape), puis faites glisser un séparateur de colonne sur la scène à gauche ou à droite pour rendre la colonne plus étroite ou plus large.
   
   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 correctement dans des colonnes étroites.
8. Répartissez uniformément les colonnes d’une mise en page sur l’horizontale à l’aide de l’arborescence de contenu, de l’étape ou du panneau de configuration.
   • Dans l’arborescence de contenu, sélectionnez et maintenez enfoncé (ou cliquez avec le bouton droit de la souris) sur un nom de mise en page de colonne 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.
   • À l’étape, sélectionnez une mise en page en colonne, sélectionnez l’icône Menu en regard du nom de la mise en page en 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 autre position (une ligne horizontale bleue indique l’endroit où la colonne peut être déposée).

     

   • À l’étape, sélectionnez un en-tête de colonne, faites-le glisser vers une autre position et déposez la colonne dans la zone de dépôt définie par une ligne magenta verticale.

     

   Si vous réorganisez la colonne dans l’arborescence de contenu, l’étape est mise à jour, et si vous réorganisez l’arborescence de contenu dans l’étape, elle 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 et maintenez l’appui (ou cliquez avec le bouton droit de la souris) sur un nom de mise en page de colonne ou sélectionnez l’icône Menu pour une mise en page de colonne, sélectionnez Mise en page dans la liste, puis sélectionnez une option de taille dans Écart entre les colonnes.
    • À l’étape, sélectionnez une mise en page en colonne, sélectionnez l’icône Menu en regard du nom de la mise en page en colonne, sélectionnez Mise en page dans la liste, puis sélectionnez une option de taille dans Écart entre les colonnes.
    • 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 et maintenez enfoncé (ou cliquez avec le bouton droit de la souris) sur un nom de colonne ou sélectionnez l’icône Menu d’une colonne, puis sélectionnez Supprimer la colonne dans la liste.
    • À l’étape, sélectionnez une 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 mise en page en 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 en colonne.
    Pour en savoir plus sur la modification de l’espacement des colonnes, reportez-vous à la section Définir l’écart entre les composants dans les colonnes.

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

Dans Générateur d'IU, si une colonne contient plusieurs composants, définissez l’écart entre les composants.

Avant de commencer

Rôle requis : ui_builder_admin

Procédure

1. Accédez à la Tout > 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 > Expérience.
   Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations 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. Dans une seule colonne, ajoutez deux composants
   1. Dans l’arborescence de contenu, identifiez une colonne et sélectionnez + Ajouter du contenu sous le nom de la colonne.
   2. Dans la fenêtre de la boîte à outils, sélectionnez un composant, par exemple Avatar.
   3. Dans l’arborescence de contenu, déplacez votre souris sur le nom du composant que vous venez d’ajouter, sélectionnez l’icône d’ouverture du menu (trois points verticaux), puis sélectionnez Ajouter après.
      
   4. Dans la fenêtre de la boîte à outils, sélectionnez un autre composant, par exemple Bouton.
6. Sélectionnez Enregistrer.
7. Dans l’arborescence de contenu, sélectionnez la colonne à laquelle vous avez ajouté les deux composants.
8. Dans le panneau de configuration, sélectionnez une option de taille dans Gap.
   
9. Pour spécifier une taille d’écart exacte en pixels, déplacez votre souris sur le champ Écart , sélectionnez l’icône Utiliser une valeur personnalisée (crayon) et saisissez un nombre, par exemple 300 px.
   
10. Pour alterner entre l’empilement des composants et leur placement les uns à côté des autres dans la colonne, sélectionnez l’icône Ligne ou Colonne dans Direction.
    

    Pour inverser l’ordre et le placement des composants dans la colonne, sélectionnez l’icône Avancé (trois points horizontaux) dans Direction, puis sélectionnez l’option Inversion .

    

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

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

Avant de commencer

Rôle requis : ui_builder_admin

Procédure

1. Accédez à la Tout > 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 > Expérience.
   Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations 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 contenant deux colonnes ou plus dans l’arborescence de contenu.
   
6. Pour définir une largeur de pile, accédez au panneau 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 étroite, une tablette ou un appareil mobile.

   
7. Saisissez une largeur dans les colonnes Pile ci-dessous.
8. Sélectionnez Enregistrer.
9. Pour tester la largeur de la pile mise à jour, 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 largeur inférieure à la largeur de la 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 de navigateur qui s’est ouvert avec le chemin d’accès URL.
12. Pour contrôler la hauteur de la mise en page des colonnes, sélectionnez une mise en page des colonnes avec deux colonnes ou plus dans l’arborescence de contenu, accédez au panneau 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 votre colonne contient un composant qui peut être grand, comme le composant Liste.
13. Sous Dimensionnement, tapez 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 dimensionnement mis à jour, 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 de navigateur qui s’est ouvert avec le chemin d’accès URL.