Modifier votre application
Aperçu
L’application en marche à côté du chat : la barre au-dessus, modifier un mot sur place, le thème, passer d’une page ou d’une section à l’autre, et la voir en taille téléphone, tablette ou ordinateur.
L’aperçu, c’est votre application, en marche, à droite du chat. Tout ce qui s’y trouve fonctionne comme une fois publiée : les boutons, les formulaires, les pages.
La barre au-dessus
De gauche à droite :
| Ce qu’elle fait | |
|---|---|
| Preview, l’icône de code, l’icône de pile | L’application, son code et Manage. |
| Edit | Cliquez sur un mot dans l’aperçu et réécrivez-le, ou sur un élément pour changer son apparence. Le (i) à côté explique comment. Voir plus bas. |
| Theme | Les couleurs et les polices de toute l’application, au même endroit. |
| La case du milieu | La page ou la section que vous regardez. Ouvrez-la pour aller vers une autre. La flèche à sa gauche recharge l’aperçu. |
| Le carré avec une flèche | Ouvre l’application publiée, une fois qu’elle est publiée. |
| Les flèches dans un sens et dans l’autre | Annuler et rétablir. Elles apparaissent après la première modification, et chaque clic fait un pas, aussi loin que remonte cette session. |
| Le menu de taille | No frame, Desktop, Tablet ou Mobile. Voir plus bas. |
| Les quatre coins | Plein écran, et retour. |
| × | Ferme l’aperçu, pour que le chat prenne toute la largeur. |
Sur un téléphone
Un téléphone n’a la place que pour un seul volet à la fois. Deux boutons en bas, Chat et Preview, vous font passer de la conversation à votre application. Le × qui ferme l’aperçu n’existe que sur un écran plus grand, et Split view (voir Code) n’existe que sur ordinateur.
À chaque taille
Le menu de taille montre l’application telle qu’elle apparaîtra sur chaque écran.
- No frame remplit le panneau, comme sur l’image ci-dessus.
- Desktop la place dans une fenêtre de navigateur, avec son adresse publiée en haut.
- Tablet et Mobile la placent dans une tablette ou un téléphone, à leur largeur réelle.
Chaque application est construite pour les trois, et mesurée à la largeur d’un téléphone après chaque construction et chaque modification. La regarder ici reste malgré tout le moyen le plus rapide de voir ce que verra un visiteur sur un téléphone.
Modifier sur place
Avec Edit activé, le bouton affiche Editing, et l’aperçu cesse d’être une page à utiliser pour devenir une page à modifier. Pointez un texte et Edit text apparaît au-dessus : cliquez et tapez. Cliquez sur n’importe quel élément et il est entouré d’un contour, avec une barre d’outils au bas de l’aperçu.
| Outil | Ce qu’il fait |
|---|---|
| Edit Element | Décrivez en une phrase un changement pour cet élément, et l’IA le réécrit. |
| Text | Réécrit le texte. |
| Background, Text color, Text style | Ses couleurs, et la taille, la graisse, l’alignement et l’aspect de son texte. |
| Opacity, Spacing | Son degré de transparence, et l’espace autour et à l’intérieur. |
| Image, Video | Change ou retire l’image ou la vidéo qu’il contient. Sur une image, Adjust size & fit règle la façon dont elle remplit sa place. |
| L’icône de code | Edit code : le code propre à cet élément, dans un panneau, à modifier à la main. |
| Duplicate, Delete | Une copie juste après lui, ou sa suppression. |
| Cancel, Save | Abandonner les changements, ou les écrire dans le code. |
La flèche au bout replie la barre, et × relâche l’élément. Double-cliquez sur un bouton pour aller à la page qu’il ouvre.
Les changements faits avec les outils ne coûtent aucun crédit. Edit Element est écrit par l’IA, donc il en utilise quelques-uns, comme une réponse du chat. Pour tout ce qui dépasse un élément, une nouvelle section, un formulaire, une page, demandez-le dans le chat.
Theme
Theme réunit les couleurs et les polices qu’utilise toute l’application, dans un panneau à droite. Changez-en une et tous les endroits qui l’utilisent suivent, sur toutes les pages.
- Colors liste chaque couleur, à quoi elle sert et combien de fois l’application l’utilise. Cliquez sur un échantillon pour en choisir une autre.
- Fonts liste chaque police, avec le nombre de fois où elle est utilisée. Choisissez-en une autre dans la liste.
L’aperçu montre chaque changement au fur et à mesure. Save & Apply les écrit dans le code, et Cancel remet tout en place. Un thème ne coûte aucun crédit, et la version précédente est conservée dans History.
Annuler et History
Annuler et rétablir parcourent les changements de cette session, un par clic. Pour tout ce qui est plus ancien, chaque changement est conservé dans History, en haut de l’éditeur, nommé d’après ce qu’il a fait, et vous pouvez revenir à n’importe quelle version. Revenir en arrière est aussi conservé comme une version, donc vous pouvez repartir en avant.
Cette page vous a-t-elle été utile ?