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 varient en fonction des contraintes imposées par le type de page que vous y ajoutez ou que vous ajoutez à son conteneur parent (par exemple, une ligne ou une colonne), qui contrôle automatiquement la taille et la position.

Paramètres de style

L’onglet Style (Style) du panneau de configuration du widget inclut des options permettant de modifier l’icône et l’étiquette pour distinguer les widgets lorsque vous configurez votre expérience Web.

Remarque :

Vous pouvez télécharger les formats d’image suivants : PNG, GIF, JPG, JPEG et BMP.

L’icône et le nom apparaissent dans la vue Outline (Contour) de la page active et dans les listes d’options lorsque vous connectez des widgets.

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 de taille et de 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 spécifier ces valeurs en pixels (px) ou en pourcentage (%) pour déterminer le mode d’affichage de votre contenu. 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.

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.

Les paramètres de style communs à la plupart des widgets sont les suivants :

• 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. 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.
• Box Shadow (Ombre des zones) : ajoutez un effet d’ombre autour du widget à l’aide des 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.

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 la largeur et la hauteur d’un widget dans les trois modes suivants :

• Custom (Personnalisé) - Vous pouvez définir des valeurs spécifiques pour les options Width (Largeur) et Height (Hauteur) dans le mode Custom (Personnalisé) par défaut. Si la largeur est définie sur Stretch (Étirer) ou Custom (Personnalisé), vous pouvez cliquer sur l’icône de verrou pour conserver les proportions lors d’un redimensionnement par glissement.
• Auto - Si une valeur de taille est définie sur Auto, la propriété est définie automatiquement en fonction du contenu du widget. Ce mode est compatible avec les widgets qui affichent du contenu dynamique.
• Stretch (Étirement) - Définissez la taille d’un widget en fonction de la taille de son conteneur.

Remarque :

Le placement d’un widget à l’intérieur d’un widget de colonne ou de ligne est une exception du paramètre Size (Taille). Par exemple, si vous placez un widget d'image dans un widget de colonne, les seuls modes Width (Largeur) disponibles pour l’image sont Stretch (Étirement) et Custom (Personnalisé). Ils permettent tous les deux de définir la taille conformément aux proportions si l’option Height (Hauteur) est définie sur Custom (Personnalisé).

Le paramètre Position d’un widget est défini par la distance de chacun de ses côtés par rapport à son conteneur (gauche, droite, haut et bas). Par exemple, la position Left (Gauche) représente le décalage du segment gauche d’un widget par rapport au segment gauche de son conteneur parent. Lors de l’ajout d’un widget, vous pouvez spécifier les distances Left (Gauche) et Top (Haut) en saisissant une valeur dans la zone de saisie de la direction, et vous pouvez changer la direction personnalisée en cliquant sur Change to custom (Changer en personnalisée) pour la direction opposée ou sur Change to auto (Changer en auto) pour la direction personnalisée.

Différents modes Size (Taille) correspondent à différents paramètres Position. Par exemple, si la largeur est définie sur le mode Custom (Personnalisé) ou Auto, il vous suffit de modifier l’une des positions (gauche ou droite) pour que l’autre soit définie automatiquement. Si la largeur est définie sur le mode Stretch (Étirement), vous pouvez définir sa position en personnalisant la 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 principe est le même pour la hauteur, mais avec haut et bas.

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, auquel cas les deux directions de position gauche et droite sont en mode Auto.

Vous pouvez également modifier l’unité de longueur de la position et de la taille :

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

Vous pouvez faire pivoter le widget dans le sens horaire en attribuant une valeur positive au paramètre Rotation, et dans le sens antihoraire en lui attribuant une valeur négative.

Exemples

La liste suivante décrit certaines des combinaisons recommandées pour les paramètres de taille et de position :

• Pour une largeur personnalisée, définissez une valeur Left (Gauche) ou Right (Droite) personnalisée et choisissez Auto (Auto) pour l’autre valeur.
• Pour une hauteur personnalisée, définissez une valeur Top (Haut) ou Bottom (Bas) personnalisée et choisissez Auto (Auto) pour l’autre valeur.
• Si vous choisissez Auto (Auto) pour la largeur, définissez des valeurs Left (Gauche) et Right (Droite) personnalisées ou définissez uniquement une valeur personnalisée pour Left (Gauche) ou Right (Droite), puis laissez la largeur s’adapter au contenu du widget.
• Si vous choisissez Auto (Auto) pour la hauteur, définissez des valeurs Top (Haut) et Bottom (Bas) personnalisées ou définissez uniquement une valeur personnalisée pour Top (Haut) ou Bottom (Bas), puis laissez la hauteur s’adapter au contenu du widget.

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 (Étirement) - Toute la hauteur du conteneur parent est utilisée. Il s’agit de l’option par défaut.
• Auto - La hauteur est définie automatiquement par le contenu du widget.
• Custom - Il est possible de définir la hauteur en pixels (px) ou en pourcentage (%). Si vous cochez la case Keep aspect ratio (Conserver les proportions), vous pouvez redimensionner le widget par glissement sans perdre le rapport hauteur/largeur.

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.

Le paramètre Rotation vous permet de faire pivoter le widget dans le sens horaire ou antihoraire en lui attribuant respectivement une valeur positive ou négative.

Animation

La fonctionnalité d’animation prise en charge dans Experience Builder permet de personnaliser l’apparence des widgets. Avec les options et les effets à votre disposition, vous pouvez mettre au point les expériences suivantes :

• Une fenêtre s’affiche en virevoltant au moment où vous chargez l’application.
• Les widgets apparaissent brusquement alors que vous faites défiler la page vers le bas.
• La vue suivante pousse la vue précédente alors que vous parcourez une section.
• Les descriptions apparaissent en fondu au moment où vous survolez un widget de fiche.

Quatre niveaux d’animation sont pris en charge :

1. Niveau de la page/fenêtre - Pris en charge par la structure et disponible dans les paramètres de page/fenêtre. Il contrôle l’animation d’apparition de tous les widgets de premier niveau.

   Remarque :

   Les widgets de premier niveau sont ceux qui sont ajoutés directement à la page/fenêtre, ce qui exclut les widgets imbriqués dans des widgets de mise en page. La relation imbriquée se trouve dans la vue Outline (Contour).

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 et Section. Il contrôle l’apparence du conteneur, ainsi que l’animation d’apparition des widgets qu’il contient directement (ce qui exclut les widgets imbriqués). Dans le cas des widgets Section, il contrôle également le mode de changement des vues.
3. Niveau du widget seul - Pris en charge par la structure et disponible dans l’onglet Style des paramètres d’un widget. Il contrôle l’apparence du widget lui-même.

   Remarque :

   Les animations de niveau inférieur remplacent (prévalent sur) les animations de niveau supérieur. Par exemple, lorsqu’un widget est ajouté à une ligne, l’animation définie au niveau de la ligne est lue si l’animation est définie sur None (Aucune) dans les paramètres du widget. Sinon, c’est l’animation définie dans les paramètres du widget qui est lue.

4. Niveau interne du widget - Pris en charge par le widget lui-même et disponible dans l’onglet Content (Contenu) des paramètres d’un widget. Il contrôle l’animation des interactions utilisateur à l’intérieur du widget. Par exemple, le widget Géosignet exécute des effets de transition lorsque les utilisateurs activent un géosignet, et le widget Fiche déclenche une animation de survol pour afficher des informations supplémentaires.

L’animation des conteneurs de mise en page (Bloc, Volet fixe, Barre latérale, Ligne, Colonne) se décompose en deux parties. Avec l’animation de conteneur, vous pouvez personnaliser l’apparence du volet du conteneur. Avec l’animation Contained widget (Widget contenu), vous pouvez personnaliser l’apparence des widgets ajoutés directement dans le conteneur. La lecture des deux effets d’animation est simultanée, et l’animation finale est l’effet de leur superposition. Vous pouvez cliquer sur le bouton Preview (Aperçu) pour prévisualiser le résultat combiné.

Outre l’animation In (Ouverture) qui contrôle l’effet d’apparition d’un volet Section, les widgets Section compte un autre paramètre d’animation (appelé une animation Transition) qui contrôle les animations de leurs vues. L’onglet View (Vue) contrôle le mode de transition des volets de la vue, et l’onglet Widget contrôle le mode d’affichage des widgets dans la vue. À l’apparition du widget Section (lors du chargement ou défilement d’une page), l’animation du widget de la vue actuelle est lue parallèlement à l’animation In (Ouverture). Lors du passage d’une vue à une autre, l’animation du widget est lue après l’animation de la vue.

Paramètres d’animation

• Cliquez sur la miniature d’animation ou le bouton Change (Modifier) pour ouvrir le volet des effets.
• Cliquez sur la miniature d’effet pour sélectionner et prévisualiser l’effet seul.
• Cliquez sur le bouton Preview (Aperçu) pour prévisualiser l’effet général ou l’effet combiné.
• D’autres options de paramètre peuvent être disponibles pour certains effets :
  • Effect (Effet) - Met à disposition des options pour définir des micro-effets naturels continus.
  • Direction - Définit le sens de déplacement des effets tels que l’ouverture par entrée brusque ou l’ouverture flottante.