Ajuster les styles pour une création dynamique

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é des pages 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 Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour travailler ou créer une expérience en sélectionnant Créer une 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 une 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.
4. En haut, vérifiez que l’icône de création responsive desktop 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 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 : configurer le composant manuellement.
   4. Dans le panneau de configuration, dans 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 à Admin Center de l’espace de travail des opérations critiques.

      

   6. Sélectionnez Enregistrer.
8. Ajoutez un 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 Large dans la liste.

      

   5. Dans Alignement, sélectionnez l’icône centrale.

      

   6. Sélectionnez Enregistrer.
   L’étape se met à jour automatiquement, en affichant l’espace vide 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.

   

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

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

    

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

    

11. Supprimez l’espace de marge supplémentaire et réduisez 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 automatiquement à jour 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 de bureau en haut pour confirmer qu’aucune modification n’a été apportée aux facteurs de forme plus grands.