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

Ajoutez et modifiez la conception de 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 CSS (Cascading Style Sheets), telles que Flexbox et CSS Grid.

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 Tout > 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éez ou ouvrez une page.
4. Sélectionnez l’onglet Mise en page .
5. En fonction du type de page, effectuez l’une des opérations 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 de page principale. Lorsque la structure de la page se trouve dans l’arborescence structurée, vous pouvez trouver plus facilement le conteneur que vous souhaitez modifier. Si l’arborescence de contenu comporte 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 de page principale, sélectionnez le corps de votre page. Le corps est l’élément racine de la page.

   Si vous démarrez 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 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. Changez la mise en page 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 changer la mise en page actuelle d’une page existante en une nouvelle. Par exemple, dans une mise en page à trois colonnes, vous pouvez cliquer sur la mise en page à quatre colonnes pour modifier la mise en page.

      Vous pouvez également définir la mise en page d’un conteneur. L’image suivante montre les options de mise en page pour le générateur d’IU.

      

   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 configurer votre page pour qu’elle comporte deux emplacements ou deux colonnes. Ensuite, vous pouvez ajouter des conteneurs à chaque emplacement et modifier la mise en page 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. Ajouter des composants aux emplacements.
   Vous créez votre page avec des composants de conteneurs. Consultez Personnaliser les Générateur d'IU pages à l’aide de 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
   Directement depuis votre page (option 1)	Sélectionnez l’icône Ajouter du contenu (plus), sélectionnez l’onglet Composants , puis sélectionnez un composant.
   Directement depuis votre page (option 2)	Sur une disposition ou un composant en colonne, sélectionnez l’icône Ajouter avant (plus) ou Ajouter après (plus), puis sélectionnez un composant.
   À partir de l’arborescence de contenu	Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu , puis sélectionnez un composant.
   À partir du menu flottant au-dessus de la page	Dans une disposition ou un composant en colonne, sélectionnez l’icône Menu, sélectionnez Ajouter avant ou Ajouter après, puis sélectionnez un composant.

8. Modifiez les options de style de 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 sous forme Flex ou Grille. Pour plus d’informations sur les options Flex ou de grille, reportez-vous à la section Utiliser les mises en page Flexbox dans Générateur d'IU ou Utiliser les mises en page de grille CSS pour créer une page.
   Choisir 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 boîte de styles CSS : Sens du flex : Choisissez entre Ligne, Rangée inversée, Colonne ou Colonne inversée. Justifier le contenu : choisissez l’une des options suivantes : Flex-start : les éléments se trouvent au début de la direction du flex, comme le contenu justifié à gauche. Il s'agit du paramètre par défaut. Extrémité flexible : les éléments sont à 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 transversal. 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 croisé. Flex-end : Placez votre contenu à l’extrémité de l’axe transversal. Centre : Centrez votre contenu sur l’axe croisé. Base de référence : alignez votre contenu de la même manière que votre alignement de 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 Flexbox. Marge intérieure : définissez la marge intérieure de chaque côté de vos éléments de 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. Marge intérieure : définissez le remplissage de chaque côté de vos éléments de grille.