Modifier directement sur le canevas
Affinez un design HTML après sa génération : modifiez le texte, ajustez les éléments sélectionnés, enregistrez les modifications et vérifiez le résultat avant de le partager.
Choisir comment effectuer la modification
| Votre tâche | Utiliser | Ce qui change |
|---|---|---|
| Vous connaissez le texte, la couleur ou l’espacement exacts | Edit | Le fichier HTML sélectionné, après validation ou enregistrement de la modification |
| Vous voulez que l’agent retravaille un élément | Comment → Send to chat | L’agent reçoit une instruction propre à l’élément |
| Vous voulez décrire une zone visuelle | Mark | Une capture d’écran et des notes sont ajoutées à la conversation |
Pour une nouvelle section, un comportement responsive ou une modification sur plusieurs écrans, donnez des instructions claires à l’agent. Utilisez la modification directe pour un petit ajustement visuel. Consultez les commentaires et les retours annotés pour les deux autres méthodes.
Ouvrir un aperçu modifiable
- Ouvrez un artefact HTML depuis Design Files et sélectionnez Preview. Les artefacts de diapositives HTML utilisent également l’éditeur d’aperçu ; les contrôles disponibles dépendent du fichier.
- Choisissez Edit dans la barre d’outils de l’aperçu, puis sélectionnez l’élément sur le canevas. Attendez que son contour de sélection et le panneau de paramètres apparaissent.
- Quittez Edit avant de tester des liens, formulaires ou boutons comme le ferait un utilisateur normal. La sélection d’un élément en mode d’édition n’a pas le même objectif que l’utilisation du prototype.
Modifier une ligne de texte
- Dans Edit, cliquez sur le texte à modifier. Le texte et les libellés de liens peuvent être modifiés sur le canevas.
- Saisissez le texte de remplacement. Appuyez sur Entrée pour valider ce texte ; Maj+Entrée insère un saut de ligne. Appuyez sur Échap pour annuler la saisie de texte en cours.
- Vérifiez le texte dans le mode Preview normal. Si la page génère ce texte avec JavaScript, testez également l’action qui l’affiche de nouveau.
Ajuster un élément ou sa mise en page
Sélectionnez un élément pour voir les propriétés qu’il prend en charge. L’inspecteur inclut la typographie, la couleur, la taille, l’espacement, la bordure et le rayon des angles. Les conteneurs Flex et Grid affichent des contrôles de mise en page tels que la direction, l’alignement et Gap. Un lien peut afficher son Href ; une image peut être remplacée avec Upload image. Ces contrôles sont contextuels : tous les champs ne sont donc pas disponibles pour chaque élément.
Vous pouvez faire glisser un élément sélectionné pour ajuster sa position. Limitez l’ampleur des modifications et vérifiez les éléments voisins ainsi que les mises en page mobiles ; déplacer un élément jusqu’à ce qu’il tienne dans une vue pour ordinateur ne crée pas une mise en page responsive.
| Champ | Valeur à saisir ou point à vérifier |
|---|---|
| Text / Href / Image URL / Alt text | Les éléments de texte affichent leur contenu ; les liens affichent également leur destination. Les images affichent leur source et leur texte alternatif. Les champs dépendent de l’élément sélectionné. |
| Text / Background / Border color | Utilisez une couleur hexadécimale telle que #262626. Vérifiez le contraste et les états de survol après l’enregistrement. |
| Opacity | Un nombre compris entre 0 et 1 : 0 correspond à transparent et 1 à opaque. Cela affecte l’élément sélectionné, et pas seulement son arrière-plan. |
| Font / Size / Weight / Line height / Letter spacing | Choisissez la police et la graisse, puis ajustez la taille et l’approche. Line height accepte un nombre positif ou une valeur en px ; 1.5 est un multiplicateur, tandis que 24px est une hauteur fixe. |
| Width / Height | Un nombre sans unité est converti en px. Les valeurs en pourcentage sont acceptées pour ces dimensions. Vérifiez les mises en page étroites avant de choisir une largeur fixe. |
| Padding / Margin | Ajustez séparément le haut, la droite, le bas et la gauche. Padding correspond à l’espace intérieur de l’élément ; Margin le sépare de ses voisins. Margin peut utiliser auto. |
| Border width / Style / Radius | Définissez ensemble l’épaisseur, le style et la couleur de la bordure. Une largeur sans style visible peut sembler n’avoir aucun effet. Radius arrondit les angles. |
| Direction / Distribution / Gap / Align | Les contrôles de mise en page nécessitent la sélection d’un conteneur de mise en page. Sur un élément ordinaire, Align modifie l’alignement du texte ; ce n’est pas une commande permettant de réorganiser son parent. |
La plupart des champs d’espacement acceptent des nombres ou des valeurs en px, mais pas des expressions CSS arbitraires. Si une valeur est refusée, vérifiez son unité et l’élément sélectionné au lieu d’enregistrer à plusieurs reprises. Les champs vides peuvent correspondre à des styles hérités ou calculés plutôt qu’à une valeur nulle.
Enregistrer, annuler ou rétablir
| Action | Signification |
|---|---|
| Entrée pendant la modification du texte | Valide la modification de texte en cours |
| Save dans le panneau de paramètres | Écrit dans le fichier les modifications actuelles du contenu et des styles |
| Cancel / Reset | Abandonne ou réinitialise le brouillon en cours ; cela n’efface pas toutes les modifications précédemment validées |
| Undo / Redo dans l’éditeur | Annule ou réapplique les modifications manuelles validées |
| Delete element | Supprime l’élément sélectionné ; vérifiez les dépendances et utilisez Undo si nécessaire |
Vérifier le résultat enregistré
- Quittez Edit et rechargez l’aperçu. Vérifiez que la modification est conservée.
- Dans le menu de la fenêtre d’affichage, sélectionnez une taille mobile et testez les contrôles réels.
- Utilisez l’historique des versions si vous avez besoin d’une version HTML antérieure. Pour un fichier partagé, mettez à jour son lien après avoir vérifié la nouvelle version.
La modification d’une animation HTML ne change pas un fichier MP4 déjà généré. Demandez un nouveau rendu, puis examinez la nouvelle vidéo.
Si vous ne parvenez pas à sélectionner ou à enregistrer
Vérifiez que vous avez ouvert un fichier HTML pris en charge dans Preview et que le projet est modifiable. Un projet partagé en lecture seule peut autoriser les commentaires tout en désactivant la modification. Quittez puis rouvrez Edit et, si nécessaire, rechargez le fichier. Si la sélection ne fait toujours apparaître ni contour ni inspecteur, utilisez Comment ou Mark pour décrire la modification à l’agent et indiquez la version de votre application lorsque vous signalez le problème. Ne continuez pas à cliquer sur Save sans élément sélectionné ni résultat confirmé.