Modifier les paramètres de style

Vous pouvez modifier les paramètres de style par défaut de chaque widget dans Experience Builder pour personnaliser des propriétés telles que la taille, la position, l’animation, l’arrière-plan, la bordure et l’ombre de contour. Les options de l’onglet Style dans le panneau de configuration des widgets varient en fonction des contraintes imposées par le type de page auquel vous ajoutez le widget, ou son conteneur parent (par exemple, une ligne, une colonne ou une grille), qui contrôlent automatiquement la taille et la position.

Au lieu de faire glisser les widgets dans la zone d’affichage pour les déplacer et les redimensionner, vous pouvez définir des valeurs explicites pour leur taille et leur position. Les paramètres Size & Position (Taille et position) définissent la manière dont le widget est positionné sur la page, en fonction de sa largeur, de sa hauteur et de sa localisation.Vous pouvez préciser ces valeurs en pixels (px) ou en pourcentage (%). Pour les paramètres de taille et de position applicables aux widgets ajoutés à une page plein écran ou une page déroulante, reportez-vous aux sections ci-après.

Attention :

Déplacer un widget d’un conteneur à un autre réactualise sa taille et sa position sur les valeurs par défaut selon le conteneur cible. La même chose s’applique lorsque vous ajoutez un widget configuré depuis la liste en attente.

Conseil :

Pour vous aider à aligner et positionner les widgets avec précision, les lignes de capture et les valeurs de distance apparaissent lorsque vous faites glisser un widget sur la zone d’affichage ou le déplacer et le redimensionner manuellement dans une mise en page fixe (listes, barres latérales, fenêtres et pages plein écran, par exemple). Les valeurs indiquent la distance, lorsqu’elle peut être calculée, entre le widget et le côté de son conteneur et les widgets voisins. (La distance ne peut pas être calculée si la position du widget est exprimée sous forme de pourcentage et sa taille en pixels). Lorsque les lignes de capture apparaissent, les widgets correspondants sont capturés ensemble quelle que soit la résolution de l’écran dans l’expérience publiée.

D’autres paramètres de style communs à la plupart des widgets sont les suivants :

• Rotation : faites pivoter un widget selon un certain angle en degrés. Une valeur positive fait pivoter le widget dans le sens horaire ; une valeur négative fait pivoter le widget dans le sens anti-horaire.
• Keep within the parent container (Conserver à l’intérieur du conteneur parent) : empêchez un widget imbriqué d’être déplacé en dehors des limites de son widget parent.
• Animation : définissez des styles d’animation accrocheurs, notamment avec des effets d’ouverture par entrée brusque, par virevolte et par fondu. Vous pouvez également définir des modes de transition pour le passage d’une vue de section à une autre.
• Background (Arrière-plan) : définissez l’arrière-plan du widget en choisissant une couleur de remplissage ou une image. Vous pouvez utiliser le bouton Quick style (Style rapide) pour effectuer un choix parmi des conceptions prédéfinies coordonnées au thème de votre application. Si vous choisissez une image, vous pouvez la positionner à l’intérieur des bordures du widget à l’aide de l’option Fit (Ajuster), Fill (Remplir), Center (Centrer), Tile (Tuile) ou Stretch (Étirer). Si vous sélectionnez Fit (Ajuster), le widget affiche la couleur de remplissage de l’arrière-plan autour de l’image.
• Border (Bordure) : définissez la bordure du widget en choisissant sa couleur, son style (tel que tireté ou pointillé) et sa largeur en pixels. Modifiez la taille du rayon (en pixels ou en pourcentage) pour mettre en forme les coins du widget. Vous pouvez utiliser le même rayon pour tous les coins ou définir séparément une taille de rayon spécifique pour chaque coin. Vous pouvez utiliser le bouton Quick style (Style rapide) pour effectuer un choix parmi des conceptions prédéfinies coordonnées au thème de votre application.
• Box shadow (Ombre de contour) - Ajoutez un effet ombré autour du widget. Vous pouvez utiliser le bouton Quick style (Style rapide) pour effectuer un choix parmi des conceptions prédéfinies ou utiliser les paramètres suivants :
  • Offset X (Décalage X) : définissez la distance horizontale de l’ombre. Une valeur négative place l’ombre à gauche du widget et une valeur positive la place à droite.
  • Offset Y (Décalage Y) : définissez la distance verticale de l’ombre. Une valeur négative place l’ombre au-dessus du widget et une valeur positive la place en dessous.
  • Blur radius (Rayon de flou) : appliquez un effet de flou à l’ombre.
  • Spread radius (Rayon de répartition) : ajustez la taille de l’ombre.
  • Color (Couleur) : sélectionnez une couleur d’ombre.

Remarque :

Le thème que vous avez sélectionné affecte les couleurs par défaut dans les panneaux de configuration. Cliquez sur More (Plus) pour choisir une couleur personnalisée si vous souhaitez utiliser une couleur qui ne fait pas partie du thème de l’application.

Mise en page sur une page plein écran

Lorsque vous ajoutez une page plein écran à votre application, vous organisez les widgets dans une mise en page de forme libre. Si vous faites glisser le widget autour de la zone d’affichage pour le déplacer ou le redimensionner, les paramètres Position (Position) et Size (Taille) du volet Style sont mis à jour en conséquence.

Les paramètres Size (Taille) représentent une combinaison des largeur et hauteur du conteneur. Vous pouvez définir les valeurs Width (Largeur) et Height (Hauteur) du widget dans les trois modes suivants :

• Custom (Personnaliser) : définissez des valeurs spécifiques.
• Stretch (Étirer) : définissez automatiquement la taille selon la taille du conteneur du widget.
• Auto : définissez automatiquement la taille selon le contenu du widget. Utilisez ce mode pour les widgets qui affichent un contenu dynamique. (Ce mode peut ne pas être disponible pour les widgets imbriqués dans un conteneur de mise en page, comme une colonne qui contrôle automatiquement la largeur par défaut. Par exemple, un widget Image imbriqué dans un widget Column (Colonne) ne dispose que des modes Stretch (Étirer) et Custom (Personnaliser) pour le paramètre Width (Largeur).)

Remarque :

Si la largeur est définie sur Stretch (Étirer) ou Custom (Personnaliser), vous pouvez choisir de conserver les proportions lorsque vous glissez les côtés pour redimensionner le widget.

La position d’un widget est définie par la distance de ses côtés (gauche, droite, haut, bas) vers son conteneur. Par exemple, vous pouvez préciser la manière dont les côtés gauche et haut d’un widget sont décalés vers les côtés gauche et haut de son conteneur parent. Lorsque vous ajoutez un widget, vous pouvez saisir une valeur dans la zone de saisie de la position correspondante. Pour préciser une distance pour le côté opposé, cliquez sur Change to auto (Passer en mode automatique) (ou cliquez sur Change to custom (Passer en mode personnaliser) à l’opposé du diagramme).

Différents modes de taille correspondent à différentes configurations de position. Par exemple, si Width (Largeur) est définie sur Custom (Personnaliser) ou Auto (Automatique), vous pouvez définir la position en modifiant la valeur de distance par rapport aux côtés gauche ou droit, et l’autre valeur est définie automatiquement. Si Width (Largeur) est définie sur le mode Stretch (Étirer), vous pouvez définir sa position en changeant la valeur de distance par rapport aux côtés gauche et droit, tandis que la largeur est définie automatiquement par la longueur restante de la largeur du conteneur. Le paramètre Height (Hauteur) fonctionne de manière similaire, spécifiquement aux côtés haut et bas.

Conseil :

Vous pouvez également utiliser les boutons de la barre d’outils située en haut du volet Style pour changer la position. Par exemple, vous pouvez positionner le widget sur le centre horizontal de son conteneur parent, ce qui définit automatiquement les valeurs de position gauche et droite (masquant les zones de saisie de la distance dans le diagramme).

Les deux paramètres incluent les options d’unité suivantes :

• Px : valeur absolue en pixels
• % : le pourcentage de la largeur et de la hauteur du conteneur

Blocs sur une page déroulante

Lorsque vous ajoutez une page déroulante à votre application, sa mise en page est organisée en blocs. Les blocs utilisent une mise en page en grille à plusieurs colonnes, telle que celle utilisée dans le widget Row (Ligne).

Les blocs possèdent les paramètres Size (Taille) et Position (Position) suivants :

• Width (Largeur) : définissez une largeur fixe en pourcentage de la page.
• Height (Hauteur) : définissez une valeur de hauteur en pixels ou sélectionnez Auto (Auto) pour définir automatiquement la hauteur de bloc.
• Offset X (Décalage X) : définissez le décalage horizontal en pixels.
• Offset Y (Décalage Y) : définissez le décalage vertical en pixels.

Conseil :

Cliquez sur le bouton Pin (Épingler) de la barre d’outils d’un widget, pour que celui-ci reste visible sur les pages de défilement.

Widgets imbriqués dans un bloc

La largeur des widgets que vous ajoutez à un bloc peut être comprise entre une et 12 colonnes dans la mise en page sous forme de grille du bloc. Vous ne pouvez spécifier que les valeurs de hauteur pour les widgets imbriqués dans un bloc ; leur largeur est contrôlée par la grille.

Il existe trois types de mode Height (Hauteur) :

• Stretch (Étirer) : définissez automatiquement la hauteur selon celle de son conteneur parent. Il s’agit de l’option par défaut.
• Auto : définissez automatiquement la hauteur selon le contenu du widget.
• Custom (Personnaliser) : définissez une valeur de hauteur spécifique en pixels ou en pourcentage de la hauteur du conteneur.

Lorsque vous sélectionnez Auto ou Custom (Personnalisé), vous pouvez choisir l’une des options Align (Aligner) suivantes :

• Top (Haut) : alignez le widget verticalement avec la partie supérieure du bloc.
• Bottom (Bas) : alignez le widget verticalement avec la partie inférieure du bloc.
• Center (Centre) : alignez le widget verticalement avec le centre du bloc.

Éléments de grille

Les widgets imbriqués dans un widget Grid (Grille) ou dans une page de grille deviennent des éléments de grille. Les paramètres de taille et de position ne sont pas disponibles pour les éléments de grille. Pour modifier la taille d’un widget dans une grille, vous pouvez redimensionner le widget Grille même et faire glisser les bordures entre les éléments de grille.

Dans les paramètres du widget Grid (Grille) ou de la page de grille, vous pouvez cocher la case Allow expansion (Autoriser le développement) pour inclure des boutons de développement sur lesquels les utilisateurs peuvent cliquer pour faire en sorte que des éléments de grille individuels occupent toute la zone de la grille. Par défaut, le fait de cocher Allow expansion (Autoriser le développement) fait apparaître les boutons de développement pour chaque élément. Vous pouvez néanmoins remplacer ce paramètre pour les widgets individuels. La case Allow expansion (Autoriser le développement) apparaît également dans l’onglet Style des paramètres de chaque élément de grille. Cela est utile si vous voulez que les utilisateurs puissent développer certains éléments de grille mais pas d’autres.

Animation

Utilisez l’animation pour personnaliser la façon dont les widgets et les fenêtres s’affichent auprès des utilisateurs lorsqu’ils chargent et parcourent l’application. Définissez des styles d’animation accrocheurs, avec des effets de transition comme Entrée brusque, Rotation (entrée), Agrandir et Réduire. Vous pouvez également définir des modes de transition pour le passage d’une vue de section à une autre. Avec les paramètres d’animation fournis, vous pouvez créer les exemples d’expérience suivants :

• Une fenêtre s’affiche en virevoltant au moment où vous chargez l’application.
• Les widgets apparaissent brusquement alors que les utilisateurs font défiler la page vers le bas.
• La vue suivante pousse la précédente lorsque les utilisateurs naviguent à travers le contenu dans un widget de section.
• Les descriptions apparaissent en fondu au moment où les utilisateurs survolent un widget de fiche.

Les niveaux suivants d’animation sont pris en charge (répertoriés depuis une animation de niveau supérieur vers le niveau inférieur).

Remarque :

Les animations de niveau inférieur remplacent les animations de niveau supérieur. Par exemple, lorsqu’un widget est ajouté à un widget Ligne, l’animation est lue pour la ligne si le paramètre d’animation du widget ajouté est défini sur None (Aucun). Sinon, l’animation du widget ajouté est lue en lieu et place.

1. Niveau de la page et de la fenêtre : pris en charge par la structure et disponible dans les paramètres de page et de fenêtre, ce niveau contrôle l’animation pour la page ou la fenêtre et tous les widgets qui sont ajoutés directement à une page ou à une fenêtre (widgets de premier niveau).

   Remarque :

   Les widgets imbriqués dans les widgets de mise en page ne sont pas des widgets de premier niveau. Basez-vous sur le contour pour identifier les widgets imbriqués.

2. Niveau du conteneur : pris en charge par la structure et disponible dans l’onglet Style des widgets Bloc, Volet fixe, Barre latérale, Ligne, Colonne, Grille et Section, ce niveau contrôle l’animation pour la façon dont le conteneur apparaît, ainsi que les widgets qui y sont ajoutés directement (mais pas les widgets imbriqués dans ces widgets ajoutés). Ce niveau contrôle également l’animation pour basculer d’une vue à l’autre dans les widgets de section.
3. Niveau du widget seul : pris en charge par la structure et disponible dans l’onglet Style d’un widget, ce niveau contrôle la façon dont chaque widget apparaît.
4. Niveau interne du widget : pris en charge par le widget lui-même et disponible dans l’onglet Content (Contenu) d’un widget, ce niveau contrôle l’animation pour les interactions de l’utilisateur dans le widget. Par exemple, le widget Bookmark (Géosignet) exécute des effets de transition lorsque les utilisateurs activent un géosignet, et le widget Card (Fiche) déclenche une animation de survol pour afficher des informations supplémentaires.

Les widgets de section ont deux paramètres d’animation. Le paramètre d’animation In (Ouverture) contrôle l’effet d’apparition d’un volet Section et le paramètre Transition contrôle l’animation de leurs vues. Les paramètres de l’onglet View (Vue) contrôlent la manière dont le mode de transition des volets de vue est défini. Les paramètres de l’onglet Widget contrôlent la manière dont les widgets apparaissent dans la vue. Lorsque le contenu d’un widget Section s’affiche sur la page, (lorsque la page charge ou lorsque l’utilisateur fait défiler la page), l’animation du widget pour la vue actuelle est lue parallèlement à l’animation In (Ouverture). Lors du passage d’une vue à l’autre, l’animation du widget est lue une fois l’animation de la vue lue.

Paramètres d’animation

Pour ouvrir le volet Animation Settings (Paramètres de l’animation), cliquez sur la miniature ou sur le bouton Change (Modifier). Cliquez sur une miniature d’animation, comme Float in (Flottant entrant)ou Zoom in (Zoom avant), pour la sélectionner et afficher un aperçu de l’animation sur la zone d’affichage. Vous pouvez également configurer les paramètres supplémentaires suivants :

• Effect (Effet) : offre des options pour définir des micro-effets naturels continus comme léger, accentué et lent.
• Direction : définit le sens de déplacement (du haut, du bas, de la gauche ou de la droite) pour les effets applicables, tels que l’ouverture par entrée brusque ou l’ouverture par balayage.

Les paramètres d’animation pour les conteneurs de mise en page (Bloc, Volet fixe, Barre latérale, Ligne, Colonne et Grille) comprennent également un paramètre Contained widget (Widget contenu) pour préciser l’animation pour les widgets qui sont ajoutés directement au conteneur. Outre Effect (Effet) et Direction, vous pouvez configurer les paramètres suivants pour les widgets contenus :

• Start (Début) : définissez quand l’animation du widget contenu démarre par rapport à l’animation du widget de conteneur. Sélectionnez With previous (Avec le précédent) pour lire l’animation du widget contenu en même temps que l’animation du widget de conteneur. Sélectionnez After previous (Après le précédent) pour lire l’animation du widget contenu après l’animation du widget de conteneur.
• Play the animation (Lancer l’animation) : indiquez le mode de lecture des animations si plusieurs widgets contenus sont présents.
  • All at once (Tous en même temps) : les animations de tous les widgets contenus sont lancées en même temps.
  • One by one (Un par un) : les animations de tous les widgets contenus sont lancées l’une après l’autre.

Vous pouvez prévisualiser les animations en cliquant sur le bouton Preview (Aperçu).