Modifier la mise en page d’une page créée dans Quebec ou Rome

Ajoutez et modifiez votre mise en page pour changer l’apparence de votre page. Choisissez le mode d’affichage des composants sur une page grâce aux technologies de mise en page Web de feuilles de style en cascade (CSS), telles que Flexbox et Grille CSS.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Les mises en page contrôlent quels conteneurs et composants sont disponibles sur une page, et où ils se trouvent. Les règles CSS s’appliquent à eux. Vous pouvez modifier la mise en page comme suit.

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éez ou ouvrez une page.
4. Sélectionnez l’onglet Mise en page .
5. Selon le type de page, effectuez l’une des actions suivantes pour sélectionner un conteneur à mettre à jour.

   Type de page	Instruction
   Page existante	Sélectionnez le conteneur de votre page dont vous souhaitez modifier la mise en page. Remarque : Vous pouvez également sélectionner le conteneur dans l’arborescence de contenu à gauche de la zone principale de la page. Lorsque la structure de la page se trouve dans l’arborescence structurée, vous pouvez plus facilement trouver le conteneur que vous souhaitez modifier. Si l’arborescence de contenu contient de nombreux composants et conteneurs, utilisez la barre de recherche pour trouver un conteneur spécifique.
   Nouvelle page	Dans l’arborescence de contenu à gauche de la zone principale de la page, sélectionnez le corps de votre page. Le corps est l’élément racine de la page.

   Si vous commencez une nouvelle page, vous pouvez sélectionner la mise en page au niveau de la page, puis au niveau du conteneur. Si vous n’êtes pas le propriétaire d’une page existante, soyez conscient de l’impact de la modification de la mise en page au niveau de la page.
6. Modifiez la disposition de votre conteneur.
   1. Dans le volet Configuration de la page, sélectionnez l’onglet Mise en page pour sélectionner la mise en page que vous souhaitez utiliser.

      Vous pouvez modifier la mise en page actuelle d’une page existante pour en créer une nouvelle. Par exemple, dans une mise en page à trois colonnes, vous pouvez cliquer sur la mise en page à quatre colonnes pour la modifier.

      Vous pouvez également définir la disposition d’un conteneur. L’image suivante montre les options de mise en page pour UI Builder.

      

   2. Si vous créez une page, ajoutez des composants aux nouvelles zones de votre mise en page.
   3. Cliquez sur Enregistrer.
   4. Affichez et testez votre page en sélectionnant
   Pour modifier une page existante, la vidéo suivante montre comment modifier la mise en page du conteneur de trois à quatre colonnes, puis ajouter un nouveau composant à la quatrième colonne.

   

   Pour définir la mise en page d’une nouvelle page, la vidéo suivante vous montre comment définir la mise en page souhaitée pour la page. Par exemple, vous pouvez définir votre page pour qu’elle comporte deux emplacements ou colonnes. Ensuite, vous pouvez ajouter des conteneurs à chaque emplacement et modifier la disposition de chaque conteneur. Vous pouvez également définir la mise en page au niveau du conteneur après avoir ajouté des conteneurs à votre page.

   Figure 1. Modifier la mise en page d’une page

   

7. Ajoutez des composants aux emplacements.
   Vous construisez votre page avec des composants de conteneurs. Consultez Personnaliser les pages à l’aide de Générateur d'IU composants pour plus d'informations.

   Vous pouvez ajouter des composants de l’une des façons suivantes.

   Pour ajouter un composant	Faites ce qui suit
   À partir de la liste des composants	Sélectionnez l’icône Boîte à outils dans la colonne de gauche de Générateur d'IU. Faites glisser un composant de la liste des composants vers votre page.
   Directement à partir de votre page	Dans votre page, sélectionnez + et choisissez un composant dans la liste. Vous pouvez rechercher un composant ou faire défiler la liste.
   Menu flottant au-dessus de la page	Sélectionnez le menu flottant au-dessus de votre composant. Sélectionnez Ajouter avant ou Ajouter après. Choisissez un composant dans la liste des composants.
   Arborescence de contenu	Vous pouvez ajouter un composant à partir de l’arborescence de contenu des deux manières suivantes. Sélectionnez +Ajouter un composant sous le conteneur dans l’arborescence de contenu. Choisissez ensuite un composant dans la liste des composants. Sélectionnez +Ajouter à droite de l’arborescence de contenu, puis sélectionnez Composant. Choisissez ensuite un composant dans la liste des composants.

8. Modifiez les options d’application d’un style à la mise en page de l’une des façons suivantes.

   Option	Instruction
   Modifier le style de la mise en page	Cliquez sur un conteneur dont vous souhaitez modifier la mise en page. Vous pouvez cliquer sur le conteneur dans l’arborescence de contenu ou sur le conteneur de la page. Dans le menu flottant au-dessus de la page, cliquez sur Mise en page. Choisissez d’afficher votre contenu au format Flex ou Grille. Pour plus d’informations sur les options de flex ou de grille, reportez-vous à la section Utilisation des mises en page Flexbox dans Générateur d'IU ou Utiliser des mises en page de grille CSS pour créer une page.
   Choisissez Flex	Dans la liste Affichage, sélectionnez Flex. Sélectionnez les options suivantes en fonction de la façon dont vous souhaitez afficher le contenu de votre conteneur sur la page. Les options peuvent également être saisies dans la zone de styles CSS : Sens du flex : choisissez entre Ligne, Inversion de ligne, Colonne ou Inversion de colonne. Justifier le contenu : choisissez l’une des options suivantes : Flex-start : les éléments se trouvent au début de la direction de flexion, de la même manière que le contenu justifié à gauche. Il s'agit du paramètre par défaut. Fin flexible : les éléments se trouvent à la fin de la direction flexible, comme le contenu justifié à droite. Espace entre : les éléments sont répartis uniformément. Espace autour : les éléments sont répartis uniformément avec un espace égal autour d’eux. Uniformément dans l’espace : l’espacement entre les éléments est égal. Aligner les éléments : définit la façon dont vous souhaitez afficher votre contenu Flex le long de l’axe croisé. Les choix sont les suivants : Étirer : étirez votre contenu pour remplir le conteneur. Il s'agit du paramètre par défaut. Flex-start : placez votre contenu au début de l’axe transversal. Extrémité flexible : placez votre contenu à l’extrémité de l’axe transversal. Centrer : centrez votre contenu dans l’axe transversal. Base de référence : alignez votre contenu de la même manière que l’alignement de votre base de référence. Hauteur : définissez la hauteur automatiquement ou manuellement. Largeur : définissez la hauteur de vos éléments Flexbox automatiquement ou manuellement. Marge : définissez votre distance minimale entre les éléments de la boîte flexible. Remplissage : définissez le remplissage de chaque côté de vos éléments Flexbox.
   Sélectionner une grille	Dans la liste Affichage, sélectionnez Grille. Renseignez les informations suivantes : Hauteur : définissez la hauteur automatiquement ou manuellement. Largeur : définissez la hauteur de vos éléments de grille automatiquement ou manuellement. Marge : définissez votre distance minimale entre les éléments de la grille. Remplissage : définissez le remplissage de chaque côté de vos éléments de grille.