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 la façon dont les composants sont affichés sur une page à l’aide des technologies de mise en page Web de feuilles de style en cascade (CSS), 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 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éez ou ouvrez une page.
4. Sélectionnez l’onglet Mise en page .
5. Selon le 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 la page principale. 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 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 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 de 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 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 du 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 disposition 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 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 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 à partir de votre page (option 1)	Sélectionnez l’icône Ajouter du contenu (plus), sélectionnez l’onglet Composants , puis sélectionnez un composant.
   Directement à partir de votre page (option 2)	Dans une mise en page de colonne ou un composant, 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.
   Dans le menu flottant au-dessus de la page	Dans une disposition de colonne ou un composant, 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 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 la forme Flex ou Grille. Pour plus d’informations sur les options de flex ou de grille, reportez-vous à la section Utiliser des mises en page Flexbox dans Générateur d'IU ou Utiliser des mises en page CSS Grid 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 des styles CSS : Sens de flexion : 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 flexible, comme pour 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. Espace uniformément : 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 transversal. Flex-end : Placez votre contenu à l’extrémité de l’axe transversal. Centrer : centrez votre contenu dans l’axe transversal. Ligne de base : alignez votre contenu de la même manière que l’alignement de votre ligne de base. 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 Flexbox. 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é des éléments de votre grille.