Ajuster les styles pour la création dynamique

Lors de la création de pages avec la création dynamique pour différents facteurs de forme, découvrez comment modifier les options de style pour améliorer la convivialité de la page à 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é des pages consiste à adapter les composants à l’aide de différents styles entre 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 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 une page à partir de zéro avec la création dynamique.
   Pour plus d’informations sur la création d’une page, voir Créer une page dans le générateur d’IU.
4. En haut de l’écran, vérifiez que l’icône de création dynamique de bureau est sélectionnée.
   
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 de l’étape.
   2. Dans l’onglet Composants , recherchez et sélectionnez le composant Texte stylisé .
   3. Dans le panneau de configuration, sélectionnez Aucun : configurer 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 entrant dans l’Admin Center de l’Espace de travail des opérations critiques.

      

   6. Sélectionnez Enregistrer.
8. Ajoutez de l’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 du centre.

      

   6. Sélectionnez Enregistrer.
   L’étape 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 du facteur de forme de la tablette.

   

   L’espacement et la taille de l’en-tête du composant de texte stylisé sont adaptés à la taille d’une tablette.

10. Sélectionnez l’icône du facteur de forme mobile.

    

    Le composant de texte stylisé utilise beaucoup d’espace vertical à la plus petite taille.

    

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.
    L’étape se met à jour automatiquement pour montrer que le composant de texte stylisé utilise moins d’espace.

    

12. Sélectionnez les icônes du facteur de forme de la tablette et du bureau en haut pour confirmer qu’aucune modification n’a été apportée aux facteurs de forme plus grands.