Mise en page dynamique de Visual Designer

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

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

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
• Si l'un des côtés a une valeur différente du reste, l'indication « Mixte » s'affichera

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 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
• 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

Style

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 lorsqu'un utilisateur clique sur l'image, il effectuera une action, par exemple, il sera redirigé vers l'URL ou l'adresse e-mail externe
• 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
  • Le texte multiligne dans un bouton est pris en charge : appuyez sur Entrée pour créer une nouvelle ligne

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

Redimensionnement d'un widget

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

É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
• L'indication « Mixte » s'affichera