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, 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 de 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 de 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 dans la mise en page.

Remarque :

Actuellement, le masquage/l’affichage de colonnes dans une disposition en fonction des colonnes en fonction des conditions n’est pas pris en charge.

Ajouter une mise en page en colonnes

Ajoutez une mise en page en colonnes pour Générateur d'IU créer, structurer 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 pour y 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 ouvrir 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 de colonne 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 en dessous.
   • 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 en colonne ou sélectionnez l’icône Menu pour une mise en page en colonne. Sélectionnez ensuite Ajouter avant ou Ajouter après dans la liste et sélectionnez une mise en page.

     

   • Sur l’étape, sélectionnez une mise en page de colonne, puis sélectionnez le signe plus en haut ou en bas.

     

Configurer la mise en page des colonnes

Configurez la mise en page des Générateur d'IU colonnes pour ajouter le nombre de colonnes approprié et l’aspect 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 pour y 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 ouvrir une page.
4. Si la page ne contient pas déjà une mise en page en colonne, Ajouter une mise en page en colonnes.
5. Ajoutez (jusqu’à six) des 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 l’appui (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 et maintenez l’appui (ou cliquez avec le bouton droit de la souris) sur une colonne, 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 de colonne, puis dans le panneau de configuration, utilisez l’icône + plus en regard de Colonnes pour ajouter des colonnes sur le côté droit de la mise en page des colonnes.

     

   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 l’appui (ou cliquez avec le bouton droit de la souris) sur un nom de colonne ou sélectionnez l’icône Menu d’une colonne, sélectionnez Renommer.
   • Sur 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 les 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 en 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 mise en page de colonne (dans l’arborescence de contenu ou sur l’étape), puis faites glisser un séparateur de colonne sur l’étape vers la gauche ou la 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. Les pourcentages totalisent 100 %. Lors du redimensionnement d’une colonne, tenez compte de l’espace dont le ou les composants dans la colonne ont besoin. Par exemple, les composants de liste et de formulaire ne s’affichent généralement pas bien dans les colonnes étroites.
8. Répartissez les colonnes d’une mise en page uniformément horizontalement à l’aide de l’arborescence de contenu, de l’étape ou du panneau de configuration.
   • Dans l’arborescence de contenu, sélectionnez et maintenez (ou cliquez avec le bouton droit de la souris) sur un nom de mise en page en colonne ou sélectionnez l’icône Menu pour une mise en page en 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 mise en page 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 en colonnes à 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).

     

   • Sur l’étape, sélectionnez un en-tête de colonne, faites glisser la colonne 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’étape sur 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 et maintenez (ou cliquez avec le bouton droit de la souris) sur un nom de mise en page en colonne ou sélectionnez l’icône Menu pour une mise en page en colonne, sélectionnez Mise en page dans la liste et sélectionnez une option de taille dans Écart entre les colonnes.
    • Sur 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 et 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 la 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 l’appui (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 une colonne de 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 une colonne de la liste.
    • Dans l’arborescence de contenu, sélectionnez une mise en page 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 des colonnes.
    Pour plus d’informations 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 Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour y 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 ouvrir une page.
4. Si la page ne contient pas déjà une mise en page en colonne, Ajouter une mise en page en colonnes.
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 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 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 Espace.
   
9. Pour spécifier une taille d’écart exacte en pixels, déplacez votre souris sur le champ Espace , sélectionnez l’icône Utiliser une valeur personnalisée (crayon) et tapez un nombre, par exemple 300 px.
   
10. Pour alterner entre l’empilement des composants et les placer 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 Inverser .

    

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 de la pile et la Générateur d'IU hauteur de la disposition des colonnes.

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 pour y 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 ouvrir une page.
4. Si la page ne contient pas déjà une mise en page en colonne, Ajouter une mise en page en colonnes.
5. Sélectionnez une mise en page de colonne contenant deux colonnes ou plus dans l’arborescence de contenu.
   
6. Pour définir la largeur d’une pile, accédez au panneau de configuration > Mise en page et sélectionnez Afficher les options avancées de mise en page.
   Remarque :

   La définition de la largeur d’une 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 à moins que 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 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 en colonnes avec deux colonnes ou plus dans l’arborescence de contenu, accédez au panneau Configuration > Mise en page et sélectionnez Afficher les options avancées de mise en page.
    Remarque :

    La définition de la hauteur est utile si la mise en page de votre colonne 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 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 du navigateur qui s’est ouvert avec le chemin de l’URL.