Aperçu rapide

Les widgets sont les blocs de construction utilisés dans les ShoutOuts de mise en page dynamique pour créer un contenu structuré et flexible à l'intérieur d'un cadre. En combinant différents types de widget, tels que le texte, les images, les boutons et les carrousels, vous pouvez concevoir des mises en page réactives qui s'adaptent au contenu et à la taille de l'écran.

Cet article explique comment ajouter, styliser et gérer les widgets dans la mise en page dynamique, y compris le comportement de la mise en page, l'espacement et les limitations spécifiques au widget.

Ajouter un Widget

Pour ajouter un widget à un cadre :

1. Sélectionnez l'icône Plus dans le conteneur de propriétés
2. Glissez le widget vers le canevas
3. Utilisez l'indicateur bleu pour choisir l'endroit où le widget sera placé

Widgets de style

Vous pouvez personnaliser l'apparence et le comportement du widget à partir du conteneur de propriétés.

Image

• Téléchargez une image
• Ajustez le rayon des coins, la largeur de la bordure et la couleur de la bordure
• Attribuez une action pour l'interaction de l'utilisateur avec l'image, telle que :
  • Redirection vers une URL externe
  • Ouverture d'un client de messagerie

Lorsqu'une action est sélectionnée, l'indicateur d'action passe de neutre à vert.

Texte

• Sélectionnez la police, la taille de la police et la couleur du texte
• Définir l'alignement du texte

Ligne

• Ajuster le rayon des coins
• Modifier la largeur de la bordure, la couleur de la bordure et la couleur de la ligne

Vidéo

• Ajoutez une vidéo depuis
  • YouTube
  • Vimeo
  • Bibliothèque de ressources
• Personnalisez la vidéo à l'aide des contrôles de lecture avancés, notamment :
  • Couper la vidéo : heures de début et de fin personnalisées
  • Lecture en boucle : la vidéo redémarre automatiquement lorsqu'elle se termine
  • Lecture automatique : la vidéo commencera automatiquement à être lue une fois que le ShoutOut apparaîtra
  • Miniature : sélectionnez n'importe quelle image comme couverture
  • Contrôle de lecture : pause, avancer/reculer, ouvrir YouTube.

Vue Web

• Collez une URL pour afficher le contenu externe
• Affichez un aperçu du contenu directement dans le concepteur visuel

Bouton

• Attribuez une action pour le bouton à effectuer
• Créez du texte de bouton sur plusieurs lignes en appuyant sur Entrée

Lorsqu'une action est sélectionnée, l'indicateur d'action passe du rouge au vert.

Gérer les widgets

Redimensionner

Pour redimensionner un widget, effectuez l'une des actions suivantes :

• Sélectionnez le widget et faites glisser la poignée
• Utilisez les contrôles de taille et d'espacement dans la barre latérale

La taille du bouton est contrôlée par :

• Espacement externe, qui définit la distance par rapport aux autres widgets
• Espacement interne, qui définit la distance entre le texte du bouton et ses bordures

Étirer

Vous pouvez étirer les widgets horizontalement en sélectionnant l'icône d'étirement.

• Lorsque le rapport d'aspect est verrouillé, le widget s'étire proportionnellement en fonction de ses dimensions d'origine
• Lorsque le rapport d'aspect est déverrouillé, le widget remplit tout l'espace horizontal à l'intérieur du cadre

Lorsque plusieurs widgets apparaissent dans une rangée, chaque widget ajuste automatiquement sa largeur pour remplir uniformément l'espace disponible. Par exemple :

• Deux widgets occupent chacun 50 % de la ligne
• Quatre widgets occupent chacun 25 % de la ligne

La hauteur du widget peut être contrôlée manuellement.

Espacement extérieur

L'espacement externe contrôle l'espace entre les widgets.

Pour ajuster l'espacement externe :

• Sélectionnez le widget
• Mettez à jour les valeurs d'espacement externe dans le bagage de propriétés.

Par défaut, la même valeur est appliquée à tous les côtés. Pour définir différentes valeurs par côté :

• Sélectionnez l'icône des bordures
• Ajuster les valeurs latérales individuelles

Lorsque les valeurs d'espacement diffèrent, l'indicateur affiche Mixte.

Widget de carrousel

Par défaut, l'ajout d'un widget de carrousel crée trois diapositives, contenant chacune une image et du texte.

Avec un widget de carrousel, vous pouvez :

• Ajoutez d'autres widgets à l'intérieur de chaque diapositive, y compris du texte, une image, un bouton, une vue Web et des widgets de ligne
• Activez la lecture automatique pour passer automatiquement d'une diapositive à l'autre
• Naviguez dans les diapositives à l'aide des indicateurs de points au bas du ShoutOut
• Réorganisez les diapositives en les faisant glisser

Comportement et limitations supplémentaires :

• La hauteur du ShoutOut est basée sur la diapositive la plus haute
• Les paramètres de mise en page tels que les bordures, les coins et la structure s'appliquent à toutes les diapositives
• La couleur d'arrière-plan, l'image d'arrière-plan et le contenu peuvent différer par diapositive
• Un maximum de cinq diapositives est pris en charge
• Un seul widget de carousel peut être ajouté par ShoutOut
• La duplication d'une diapositive ajoutera une autre diapositive au carrousel

Vous pouvez également créer une navigation personnalisée en attribuant les actions Suivant et Précédent aux boutons, au texte ou aux images.

Widget vidéo

Le widget Vidéo vous permet d'intégrer des vidéos de YouTube ou de Vimeo directement dans le concepteur visuel.

Les options de lecture comprennent :

• Couper l'heure de début et de fin de la vidéo
• Lecture en boucle
• Lecture automatique lorsque le ShoutOut apparaît

Contrôles supplémentaires :

• Sélectionnez une image de miniature personnalisée
• Pause ou sauter en avant et en arrière
• Ouvrez la vidéo dans YouTube

Vidéo conseil du mardi

ShoutOut: Images d'arrière-plan, carrousels et retards

Notes techniques

• Jusqu'à quatre widgets peuvent être ajoutés sur une seule ligne à l'intérieur d'un cadre