Mise en page dynamique de Visual Designer

Last Updated novembre 25, 2024

Download as PDF

Aperçu rapide

La mise en page dynamique peut être utilisée pour créer des ShoutOuts dans le Visual Designer. Elle offre la possibilité d'adaptabilité de la toile de la mise en page flex, tout en fournissant plus de liberté et de flexibilité aux utilisateurs.

Cet article couvre les nouvelles fonctionnalités et les fonctionnalités clés de la mise en page.

Avantages clés de mise en page dynamique

• Les ShoutOuts s'adaptent automatiquement à la taille et à l'orientation de l'écran sur lequel ils sont affichés
• Réduit le temps de création : des arrangements de contenu sont prêts à être utilisés dans la toile
• Possibilité de créer des mises en page dynamiques qui sont faciles à lire et à naviguer, quel que soit l'appareil utilisé
• Améliore l'expérience de l'utilisateur en rendant les popups plus faciles à utiliser sur tous les appareils
• Augmente les performances générales du site en permettant aux popups de se charger plus rapidement et d'utiliser moins de ressources
• Vous permet de créer un design unique qui peut être facilement adapté pour prendre en charge différentes langues
• Lorsque la taille du texte traduit dépasse la langue d'origine, le ballon s'adaptera en fonction

Fonctionnalités clés de mise en page dynamique

La toile de mise en page dynamique se compose des couches suivantes :

• Toile : Corps du ShoutOut, qui affiche à quoi il ressemblera à l'écran pour un utilisateur
  • Les cadres et les widgets peuvent être ajoutés au canevas
• Cadre : Espace désigné sur la toile qui peut être déplacé et créé
  • Les widgets peuvent être ajoutés à l'intérieur du cadre
• Widget : Élément à l'intérieur du cadre
  • Types de widgets : Texte, Image, Bouton, Line, Webview

Généralités

Spécifications de couleur

Chaque niveau du design, lorsque sélectionné, est mis en évidence avec une couleur spécifique :

• Toile : Vert
• Cadre : Rose
• Widget : Bleu

Styles

• Pour la toile et les cadres, une couleur d'arrière-plan, un rayon d'angle et une largeur de bordure peuvent être définis dans l'onglet Style

Couleur et image d'arrière-plan

• Sélectionnez une couleur d'arrière-plan pour remplir la toile ou le cadre ou téléchargez une image
• Jouez avec l'opacité de l'image pour la rendre plus ou moins lumineuse par rapport au texte
• Sélectionnez la façon dont l'image sera insérée dans la toile ou le cadre :
  • Remplir : l'image remplira tout l'espace. Les proportions de l'image seront conservées, mais une partie de l'image peut être coupée.
  • Ajuster : l'image sera redimensionnée pour s'adapter à la toile. L'image entière sera affichée, mais certaines parties de la toile peuvent être vides.
  • Étirer : le ratio d'aspect sera ignoré, l'image remplira la toile entière.
  • Tuile : l'image sera répétée en motifs et couvrira l'ensemble de la toile. Utilisez l'échelle de zoom pour jouer avec la taille de l'image et le motif.
• Utilisez l'échelle de zoom pour agrandir ou réduire l'image

  

• Faites pivoter l'image, retournez-la verticalement ou horizontalement
• Modifier le positionnement de l'image (par exemple, si certaines parties sont réduites, vous pouvez ajuster le positionnement pour décider de la partie qui sera affichée et de celle qui sera rognée)

Les fils d'Ariane

• Les fils d'Ariane sont disponibles dans le sac de propriété et sur la toile
• Par exemple, lors de la sélection d'un widget, vous verrez le cadre auquel il appartient
• Les fils d'Ariane peuvent être cliqués et utilisés pour naviguer

Toile

Styles

• Le rayon d'angle, la largeur de bordure, la couleur de remplissage et la couleur de bordure peuvent être modifiés à partir de l'onglet Style
  
  
• Il y a désormais la possibilité d'ajouter de l'ombre à la toile du Shoutout. L'utilisateur peut sélectionner entre les options prédéfinies suivantes : Aucune ombre, ombre douce, ombre régulière et ombre rétro
• Les coins peuvent être commandés individuellement et être différents
  

Mise en page

Taille

• La largeur du ShoutOut peut être modifiée en l'étendant directement à partir de la toile ou en appliquant des mesures dans le sac de propriété
• La hauteur s'ajustera automatiquement en fonction de la quantité de contenu
• Seule la largeur de la toile peut être redimensionnée par un utilisateur

Espacement intérieur

• La distance entre les côtés de la toile et les cadres peut être ajustée dans le sac de propriété - l'indication s'affichera sur la toile
• Par défaut, la même distance est définie pour toutes les côtés
• Pour appliquer une valeur différente à l'une des côtés, cliquez sur l'icône des bordures

Bouton de fermeture

• La désactivation du bouton Afficher le bouton de fermeture masquera le bouton Fermer de la toile
  • Pour le faire apparaître à nouveau, passez la souris sur l'emplacement du bouton Fermer et cliquez dessus, puis activez le bouton Afficher le bouton de bouton Fermer
• Le bouton de fermeture peut être personnalisé à partir de l'onglet Style : couleur de taille de l'icône, rayon de bouton et remplissage, largeur de frontière et couleur peuvent être modifiés
• La taille du bouton peut être modifiée à partir de la toile
• La position peut être modifiée (coin supérieur droit / gauche) à partir de l'onglet Mise en page.

Position

• La position de la toile à l'écran peut être modifiée uniquement à partir du sac de propriété
• Sélectionnez l'une des options par défaut ou activez le bouton de position personnalisée et saisissez les paramètres préférés pour des modifications plus spécifiques

Cadre

Styles

• Le rayon d'angle, la largeur de la bordure, la couleur de remplissage et la couleur de bordure peuvent être modifiés à partir de l'onglet Style

Mise en page

Redimensionner

• Le cadre peut être redimensionné horizontalement par rapport à un autre cadre. Pour ce faire, faites glisser le cadre que vous souhaitez redimensionner.
• Vous pouvez redimensionner les cadres uniquement à partir du côté qui est partagé avec un autre cadre
• La taille du cadre est basée sur le pourcentage de la taille de toile La largeur du cadre est affichée en pourcentage.
• Le cadre ne peut pas être plus petit que le contenu dans le cadre

Alignement vertical

• Au niveau du cadre, les éléments peuvent être alignés horizontalement ou verticalement
• L'option est disponible lorsque l'élément est à l'intérieur d'un cadre qui est à côté d'un autre cadre ayant plus de contenu

Espacement du widget

• Ajuster l'espacement vertical par défaut entre les widgets dans le cadre
• Il est également possible de définir un espacement différent pour un widget spécifique au niveau du widget

Ajout de cadres

• Les cadres peuvent être ajoutés en dupliquant ceux existants, ou en cliquant sur le signe plus qui apparaît dans la zone mise en surbrillance lors du survol sur la zone extérieure de la toile
• Jusqu'à quatre cadres peuvent être ajoutés dans une ligne
• Il n'y a pas de limite pour le nombre de cadres verticaux
• Lorsque de nouveaux cadres sont créés (ou supprimés), la taille de la toile sera divisée par le nombre de cadres afin que tous les cadres soient de la même taille
• La taille minimale d'un cadre est de 10 % de la toile

Cadres mobiles

• Les cadres peuvent être déplacés par glisser-déposer, horizontalement ou verticalement

Espacement intérieur

• La distance des côtés du cadre aux widgets peut être ajustée dans le sac de propriété
• Sélectionnez le cadre et définissez la distance par défaut pour tous les côtés, ou cliquez sur l'icône des bordures - et contrôlez chaque côté individuellement
• Si vous avez une image qui est de la même taille que son cadre et que vous devez sélectionner le cadre - utilisez le fils d'Ariane pour basculer entre le widget et le cadre

Widget

Styles

Le style du widget peut être modifié à partir du sac de propriété :

• Image : téléchargez-la et sélectionnez le rayon d'angle, la largeur de bordure et la couleur de bordure
  • Sélectionnez une action pour que lorsque les utilisateurs cliquent sur l'image, une action est exécutée. Par exemple, ils peuvent être redirigés vers une URL externe ou une adresse e-mail.
    Remarque

    L'URL doit inclure http:// ou https://

  • Lorsqu'une action est sélectionnée, l'indicateur d'icône passera du neutre au vert

• Texte : choisissez la police, la taille et la couleur de police, l'alignement du texte
• Ligne : Modifier le rayon d'angle, la largeur de bordure, la couleur de ligne et la couleur de bordure
• Webview : dépasse l'URL et affiche l'aperçu
• Bouton : sélectionnez l'action que vous souhaitez que le bouton exécute
  • Lorsque l'action est sélectionnée, l'indicateur d'icône rouge passera au vert
  • Le texte multiligne dans un bouton est pris en charge : appuyez sur Entrée pour créer une nouvelle ligne

• Le sélecteur de couleur dispose désormais d'un outil de pipette pour capturer la couleur déjà existante dans le design

Ajout d'un widget

• Pour ajouter un widget, cliquez sur le bouton Plus dans le sac de propriété et faites glisser le widget sélectionné à la toile
• Vous verrez une indication bleue de l'endroit où ce widget sera ajouté
• Quatre widgets peuvent être ajoutés dans une rangée à l'intérieur d'un cadre

Mise en page

Redimensionnement d'un widget

• Pour redimensionner un widget, sélectionnez-le et faites glisser la barre de poignée

• La taille du bouton peut être commandée à la fois par l'espacement externe (distance des autres widgets) et interne (distance du texte du bouton à ses bordures)

Étirage d'un widget

• Le widget peut être étiré en cliquant sur l'icône stretch
• Lorsque le rapport d'aspect est verrouillé, le widget sera étiré aux figures insérées
• Lorsque le rapport d'aspect est déverrouillé, le widget prendra l'espace horizontal entier disponible à l'intérieur du cadre
• Lorsqu'il y a plusieurs widgets dans une rangée, chacun des widgets s'ajuste de manière dynamique pour remplir l'espace à l'intérieur du cadre
  • Par exemple, lorsqu'il y a 2 widgets, chacun occupe 50 % de l'espace. Lorsqu'il y en a 4, chacun occupe 25 % de l'espace
• Hauteur si le widget peut être commandé manuellement

Espacement extérieur

• Pour créer de l'espace entre plusieurs widgets, sélectionnez le widget et ajustez l'espacement externe dans le sac de propriété
• Par défaut, la même distance est définie pour tous les côtés.
• Pour appliquer une valeur différente à l'une des côtés, cliquez sur l'icône des bordures

Vidéos des conseils du mardi

Mises à jour de Visual Designer (concepteur visuel)

Introduction à Visual Designer (concepteur visuel) - Mise en page dynamique

Construire avec Visual Designer

Notes techniques

Limites

• Visual Designer ne peut pas être personnalisé à l'aide du CSS global ou personnalisé
  • Nous visons à remplacer tous les besoins d'utiliser le CSS global/personnalisé par la fonctionnalité « dans l'éditeur »
• Les sites de Frameset ne sont pas pris en charge, le contenu ne sera pas affiché dessus

Centre d'Assistance

• Lecteur Web : prend en charge les ShoutOuts
• Lecteur mobile : prend en charge les ShoutOuts, les Smart Walk-Thrus (limité), les Surveys et les Launchers
• Lecteur de bureau : prend en charge les ShoutOuts et les Smart Walk-Thrus (limité)