Concevoir un élément

Concevoir un élément définit son apparence et son emplacement à l’écran. Vous effectuez ces modifications dans la section Content du Widget Studio, où chaque élément est répertorié dans la liste Elements.

​

Sélectionner et disposer les éléments

​

Sélectionner un élément

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

​

Ajouter, dupliquer, modifier ou supprimer un élément

Lorsque vous survolez un élément dans le panneau de gauche, des actions secondaires s’affichent. Cliquez sur l’icône + pour ajouter un élément sous l’élément sélectionné. Cliquez sur le menu three-dots pour modifier, renommer, dupliquer, masquer ou supprimer l’élément.

​

Dupliquer un élément

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

​

Redimensionner un élément

Vous pouvez redimensionner vos éléments dans la fenêtre d’aperçu (à droite). Placez le 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.

​

Auto-resize text and heading

L’option ajuste automatiquement la taille de l’élément, qui s’agrandit ou se réduit pour s’adapter au contenu textuel.

​

Smart guides

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

​

Constrain proportions

Une fois votre élément redimensionné, vous pouvez verrouiller ses dimensions. Pour verrouiller 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 padlock.

​

Déplacer un élément

Faites glisser un élément dans l’aperçu pour le déplacer.

​

Faire pivoter un élément

Pour faire pivoter un élément, sélectionnez-le, puis saisissez l’angle de rotation souhaité dans le paramètre de rotation du panneau de gauche.

​

Modifier le contenu d’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, sélectionnez un mot, un groupe de mots ou un bloc de texte entier. Vous pouvez également ajouter des emojis à vos titres, à vos textes et à vos 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 + Add a font.

2. Dans les paramètres d’importation de la police, choisissez votre Font Source :
   • From your website : Sélectionnez cette option si la police est déjà hébergée sur le même site Web que le widget.
   • Link to a font file : Indiquez l’URL directe du fichier de police (par exemple .woff, .woff2, .ttf ou .otf).
   • Embed code : Insérez le code CSS permettant d’importer la police à l’aide de @import ou de @font-face (depuis des services comme Google Fonts ou Adobe Fonts). Lorsque vous collez le code de Google Fonts, copiez uniquement le code allant de @import à </style>.
3. Indiquez la Font family.
4. Cliquez sur Preview & Add pour voir immédiatement le rendu de la police avec votre texte.

Vous pouvez également modifier le texte d’aperçu et activer ou désactiver l’affichage en italique. Vous pouvez sélectionner une ou plusieurs graisses. Cliquez sur Add pour confirmer. Une fois enregistrée, votre police apparaît dans la liste déroulante Font family. 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 sélecteur de couleurs, vous pouvez prélever n’importe quelle couleur à l’écran et l’utiliser dans un élément.

​

Définir les états d’un élément

Lorsque vous sélectionnez un élément, deux onglets apparaissent en haut du menu de modification : General et States. Sélectionnez l’onglet States pour accéder aux propriétés supplémentaires qui permettent de modifier les états de l’élément (Hover, Active, Disabled). Par exemple, vous pouvez personnaliser l’apparence au survol d’un élément de titre en fonction de son état. Lorsque vous cliquez sur l’onglet General, l’aperçu de votre widget passe à l’état par défaut de l’élément. Vous pouvez choisir l’état par défaut de l’élément dans l’onglet General.

​

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

Utilisez l’éditeur de code HTML pour modifier le balisage d’un élément de texte, par exemple les balises strong autour d’une partie du message. Pour modifier le HTML d’un élément de texte :

1. Sélectionnez un élément de texte.
2. Dans la barre d’outils Text content, cliquez sur le menu à trois points, puis cliquez sur Code.
3. Modifiez le HTML dans l’éditeur de code.