---
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


---

Ajuster les styles pour une création dynamique
==============================================

Ajuster les styles pour une création dynamique {#ariaid-title1}
===============================================================

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes de lecture

Lors de la création de pages avec une création dynamique pour différents facteurs de forme, découvrez comment modifier les options de style pour augmenter la convivialité de la page dans des tailles plus petites.

Avant de commencer
------------------

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche
--------------------------------------

Une méthode pour améliorer la convivialité de la page consiste à adapter les composants à l'aide de styles différents sur les points d'arrêt. Il existe de nombreuses options pour modifier les styles. Dans cette procédure, modifiez la marge autour du composant de texte stylisé et réduisez la taille du texte afin qu'il utilise moins d'espace sur des facteurs de forme plus petits.

Procédure
---------

1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU.
2. Ouvrez une expérience pour 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](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 une page à partir de zéro avec la création dynamique.  
   Pour plus d'informations sur la création d'une page, consultez [Créer une page dans Générateur d'IU](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.").
4. En haut, vérifiez que l'icône Desktop responsive authoring est sélectionnée.  
   ![Flèche noire pointant vers l’icône de facteur de forme de bureau en haut d’une page du générateur d’IU en mode Éditeur.]()
5. À l'étape, sélectionnez + Ajouter du contenu.
6. Dans l'onglet Mises en page , sélectionnez Colonne unique.
7. Ajoutez le composant de texte stylisé.
   1. Sélectionnez l'icône + au centre de la colonne sur l'étape.
   2. Dans l'onglet Composants , recherchez et sélectionnez le composant Texte stylisé .
   3. Dans le panneau de configuration, sélectionnez Aucun : configurez le composant manuellement.
   4. Dans le panneau de configuration, sous l'onglet Configurer , double-cliquez (ou utilisez le raccourci clavier) dans le champ Texte pour sélectionner le texte par défaut.
   5. Remplacez le texte par défaut en accédant au <kbd class="ph userinput">Centre d’administration de l’espace de travail des opérations critiques</kbd>.  
   6. Sélectionnez Enregistrer.
   {#responsive-authoring-adjust-styles__substeps_z3n_1cn_5bc}
8. Ajoutez un peu d'espace autour du composant de texte stylisé et centrez-le.
   1. Dans l'arborescence de contenu, sélectionnez Texte stylisé 1.
   2. Dans le panneau de configuration, sélectionnez l'onglet Styles .
   3. Dans Espacement, sélectionnez Marge.
   4. Sélectionnez Grand dans la liste.  
   5. Dans Alignement, sélectionnez l'icône centre.  
   6. Sélectionnez Enregistrer.

   {#responsive-authoring-adjust-styles__substeps_zt1_dym_5bc}  
   La scène se met à jour automatiquement, en affichant l'espace blanc supplémentaire autour du composant de texte stylisé et en le centrant.
9. Sélectionnez l'icône de facteur de forme de la tablette.  
   ![Flèche noire pointant vers l’icône de facteur de forme de tablette en haut d’une page du générateur d’IU en mode Éditeur.]()

   L'espacement et la taille d'en-tête du composant de texte stylisé sont corrects pour la taille d'une tablette.
10. Sélectionnez l'icône du facteur de forme mobile.  
    ![Flèche noire pointant vers l’icône de facteur de forme mobile en haut d’une page d’UI Builder en mode Éditeur.]()

    Le composant de texte stylisé utilise une grande quantité d'espace vertical pour une taille plus petite.

11. Supprimez l'espace de marge supplémentaire et réduisez la taille de l'en-tête uniquement pour le facteur de forme mobile.
    1. Dans l'arborescence de contenu, sélectionnez Texte stylisé 1.
    2. Dans le panneau de configuration, sélectionnez l'onglet Styles .
    3. Dans Espacement, sélectionnez Marge.
    4. Sélectionnez 0 dans la liste.
    5. Sélectionnez l'onglet Configurer .
    6. Dans l'onglet HTML, sélectionnez H3.
    7. Sélectionnez Enregistrer.

    {#responsive-authoring-adjust-styles__substeps_mf2_tzm_5bc}  
    L'étape se met à jour automatiquement et indique que le composant de texte stylisé utilise moins d'espace.

12. Sélectionnez les icônes de facteur de forme de tablette et d'ordinateur de bureau en haut pour confirmer qu'aucun changement n'a été apporté aux facteurs de forme plus grands.