Passer au contenu principal

Ajouter un élément

Dans la section Ajouter un élément, cliquez sur un type d’élément pour l’ajouter à votre widget. Plusieurs éléments sont disponibles.

Typographie

  • Titre
  • Texte
  • Lien

Sondage

  • Bouton
  • Réponse courte
  • Réponse longue
  • Choix multiple
  • NPS
  • Échelle
  • Champ caché

Média

  • iFrame
  • Image
  • Vidéo
  • HTML
  • Slider
  • Compte à rebours
  • Cliquer pour copier
  • Barre de progression
  • Barre de progression par étapes
  • QR Code
  • Roue de la fortune

Mise en page

  • Bloc
  • Bouton de fermeture
  • Forme
  • Infobulle

Formulaire

  • Champ de saisie
  • Date
  • Heure
  • Bascule
  • Case à cocher
  • Bouton radio
  • Sélecteur
  • Zone de texte
  • Champ de plage
  • Message d’erreur
La pile de calques reflète la position des éléments au premier ou à l’arrière-plan.

Concevoir un élément

Vous pouvez concevoir les éléments de votre widget dans la section Contenu.

Sélectionner un élément

Cliquez sur un élément pour le sélectionner, ou cliquez sur son nom dans le panneau hiérarchique à gauche.

Survoler un élément

Le survol d’un élément dans le panneau de gauche affichera des actions secondaires. Cliquez sur l’icône + pour ajouter un élément sous l’élément sélectionné. Cliquez sur le menu trois points pour modifier, renommer, dupliquer, masquer ou supprimer l’élément.
Si un événement est associé à l’un de vos éléments, vous ne pouvez pas supprimer l’élément. Vous devez d’abord supprimer l’événement.

Dupliquer

Vous pouvez dupliquer un élément sur le même écran, ou dupliquer un élément d’un écran à un autre.

Cliquer sur un élément

Cliquez sur un élément pour accéder à ses paramètres. Vous pouvez utiliser l’IA pour modifier ou générer votre texte. Pour ajouter un lien, surlignez un mot, un groupe de mots ou un bloc entier de texte.
Pour modifier l’URL associée au texte, vous pouvez créer un événement de clic et y associer une action URL.
Vous pouvez également ajouter des emojis à vos titres, textes et liens.

Importer votre propre police

Vous pouvez ajouter votre propre police à votre widget.
  1. Cliquez sur l’icône T dans l’éditeur de texte, puis cliquez sur + Ajouter une police.
  1. Dans les paramètres d’importation de police, choisissez votre Source de la police :
    • Depuis votre site web : Sélectionnez cette option si la police est déjà hébergée sur le même site que le widget.
    • Lien vers un fichier de police : Fournissez l’URL directe vers le fichier de police (par exemple .woff, .woff2 ou .tiff).
    • Code d’intégration : Insérez le code CSS pour importer la police à l’aide de @import ou @font-face (depuis des services comme Google Fonts ou Adobe Fonts). Lors du collage de Google Fonts, copiez uniquement le code depuis @import jusqu’à </style>.
  2. Indiquez la Famille de police.
  3. Cliquez sur Aperçu et ajouter pour voir instantanément à quoi ressemblera la police avec votre texte.
Vous pouvez également ajuster le texte d’aperçu et activer l’affichage en italique. Vous pouvez sélectionner une ou plusieurs graisses de police. Cliquez sur Ajouter pour confirmer. Une fois enregistrée, votre police apparaîtra dans la liste déroulante Famille de police. Vous pouvez appliquer la police à n’importe quel élément de texte et la prévisualiser en temps réel.

Utiliser des couleurs personnalisées

Avec la pipette du panneau de sélection de couleur, vous pouvez choisir n’importe quelle couleur à l’écran et l’utiliser dans un élément.

Insérer des textes et liens dynamiques

Vous pouvez insérer du texte généré ou des paramètres de lien basés sur la valeur d’un champ de formulaire/API/donnée personnalisée.

Redimensionner un élément

Vous pouvez redimensionner vos éléments dans la fenêtre d’aperçu (à droite). Positionnez votre curseur sur le bord d’un élément, puis cliquez et faites glisser pour modifier ses dimensions. Vous pouvez également modifier ces dimensions dans le panneau de gauche.

Redimensionnement automatique du texte et du titre

Cette option ajuste automatiquement la taille de l’élément afin qu’il s’agrandisse ou se réduise pour s’adapter au contenu du texte.

Guides intelligents

Les guides intelligents vous aident à aligner et positionner les éléments verticalement et horizontalement lors de la modification de votre widget.

Contraindre les proportions

Une fois votre élément redimensionné, vous pouvez verrouiller ses dimensions. Pour contraindre les proportions d’un élément :
  1. Sélectionnez un élément dans le panneau de gauche.
  2. Survolez l’élément et cliquez sur le cadenas.

Modifier les états d’un élément

Lorsque vous sélectionnez un élément, deux onglets apparaissent en haut du menu d’édition : Général et États. Sélectionnez l’onglet États pour trouver des propriétés supplémentaires qui vous permettent de modifier les états de l’élément (Survol, Actif, Désactivé).
Par exemple, vous pouvez personnaliser l’apparence au survol d’un élément de titre en fonction de son état.
Lorsque vous sélectionnez l’onglet États, l’aperçu de votre widget passera à son état par défaut si vous cliquez sur l’onglet Général. Vous pouvez choisir l’état par défaut de l’élément dans l’onglet Général.

Déplacer un élément

Glissez-déposez un élément dans l’aperçu pour le déplacer.

Faire pivoter un élément

Si vous souhaitez faire pivoter un élément, sélectionnez-le et saisissez l’angle de rotation souhaité dans le paramètre de rotation situé dans le panneau de gauche.

Modifier une image dans l’éditeur d’images

Pour modifier une image dans l’éditeur d’images :
  1. Accédez à l’image que vous souhaitez modifier.
  2. Sélectionnez Ouvrir dans l’éditeur d’images. L’éditeur d’images s’ouvre.
  3. Appliquez les modifications souhaitées.
Quatre onglets sont disponibles dans cet éditeur :
  • Cadre
  • Dessiner
  • Formes
  • Filtres
En haut à droite de l’éditeur d’images, vous pouvez zoomer et dézoomer, annuler vos modifications, les réappliquer ou changer l’image en cours d’édition.

Cadre

Ici, vous pouvez redimensionner, recadrer ou retourner votre image.

Redimensionner

Pour redimensionner votre image :
  1. Cliquez sur l’outil Redimensionner.
  2. Saisissez les dimensions souhaitées ou utilisez le curseur pour ajuster la taille de l’image.

Recadrer

Si vous devez rogner les bords de votre image :
  1. Cliquez sur l’outil Recadrer.
  2. Choisissez une dimension prédéfinie ou sélectionnez la zone de recadrage.

Retourner

Vous pouvez retourner votre image horizontalement ou verticalement à l’aide de l’outil Retourner.

Dessiner

Utilisez l’outil Dessiner pour dessiner sur votre image. Sélectionnez la taille du pinceau et la couleur pour personnaliser votre dessin.

Formes

Insérez des formes, comme des cercles, des carrés ou des flèches, avec l’outil Formes. Vous pouvez ajuster la taille, la couleur et la position de la forme.

Filtres

Améliorez votre image avec des filtres en sélectionnant l’option Filtres. Vous pouvez ajuster la luminosité, le bruit et le seuil de votre image.

Modifier le HTML d’un élément de texte

Vous pouvez sélectionner n’importe quel élément de texte dans votre widget et le modifier en HTML.

Animer un élément

Vous pouvez animer un élément d’un widget. Lorsqu’un élément est sélectionné, vous pouvez activer deux paramètres (Animation d’entrée et Animation de sortie).
Vous devez choisir un effet d’animation, une durée et un délai (facultatif). Cliquez sur Pré-visualiser pour prévisualiser votre animation.

Insérer une donnée personnalisée dans un élément

Vous pouvez utiliser des données personnalisées dans votre widget pour créer de meilleures opportunités de personnalisation. Avec cette option, vous pouvez insérer une valeur dynamique dans n’importe quel champ de texte. Pour insérer une valeur dynamique dans un champ de texte :
  1. Sélectionnez un élément de texte et cliquez sur donnée personnalisée dans le panneau de gauche.
  1. Sélectionnez une source de données (une donnée personnalisée que vous avez déjà créée). Vous pouvez attribuer une valeur par défaut à votre donnée personnalisée. Cette valeur par défaut sera affichée si la valeur de votre donnée personnalisée est indéfinie ou nulle.
  2. Cliquez sur Valider.
Vous pouvez ensuite simuler la manière dont la donnée personnalisée s’affichera en production.