--- sourceDocument: Yokohama Créer ou modifier des applications sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development Release : - yokohama ft:locale : - fr-FR ft:publication_title : - Yokohama Créer ou modifier des applications ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Modifier la mise en page d'une page créée dans Quebec ou Rome ============================================================= Modifier la mise en page d'une page créée dans Quebec ou Rome {#ariaid-title1} ============================================================================== * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 minutes de lecture 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 ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience. Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences. 3. [Créez](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs.") 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. ![Flèche pointant vers l’élément corps dans l’arborescence de contenu.]() | |----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#change-layout__choicetable_cc5_jsb_dqb} 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 ![le bouton Aperçu qui ouvre votre page en cours d’exécution, qui est un aperçu de l’apparence de la page sur une page Web.]() {#change-layout__substeps_j3q_hrb_dqb} 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](https://servicenow-prod.fluidtopics.net/8tYb7jRqzKxCUrT7qBbj1w "Découvrez ce qu’est un composant dans Générateur d'IU. Découvrez également comment les composants fonctionnent dans le générateur d’IU.") 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. | |------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------| {#change-layout__choicetable_dzv_llh_wnb} 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 | 1. 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. 2. Dans le menu flottant au-dessus de la page, cliquez sur Mise en page. ![Emplacement de l’icône de changement de mise en page dans le menu flottant.]() 3. 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](https://servicenow-prod.fluidtopics.net/d5eHiDNfIDixvzGi4vjBng#flexbox-uib "Créez une mise en page Flexbox pour Générateur d'IU créer des pages puissantes afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d’améliorer vos performances.") ou [Utiliser les mises en page de grille CSS pour créer une page](https://servicenow-prod.fluidtopics.net/MmgwGp2BL3iTZf7~4FzZPA#css-grid-uib "Créez une mise en page de grille CSS pour Générateur d'IU créer des pages puissantes afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d’améliorer vos performances."). {#change-layout__ol_ncw_hms_tjb} | | Choisir Flex | 1. Dans la liste Affichage, sélectionnez Flex. 2. 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. {#change-layout__ul_qyp_wxw_pnb} * 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. {#change-layout__ul_blf_bzw_pnb} * 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. {#change-layout__ul_yrc_qvw_pnb} {#change-layout__ol_gpf_mvw_pnb} | | Sélectionner une grille | 1. Dans la liste Affichage, sélectionnez Grille. 2. 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. {#change-layout__ul_jqq_5bx_pnb} {#change-layout__ol_zzl_pbx_pnb} | |--------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#change-layout__choicetable_n3q_gmd_jjb}