Panneau de modification

Le panneau de modification se trouve à droite de l’éditeur et affiche les commandes de l’élément sélectionné. Si rien n’est sélectionné, il permet de modifier le style de la page elle-même.

Appuyez sur ⌘E / Ctrl+E pour l’afficher ou le masquer. Lorsqu’il est masqué, cliquez sur la flèche sur le bord droit de la fenêtre pour le faire réapparaître. Le panneau ne s’affiche pas lorsque Paramètres, Données ou l’éditeur de code est ouvert.

Chaque modification effectuée ici est directement appliquée au code de votre site, et la zone de travail se met à jour immédiatement.

Panneau flottant

Faites glisser la poignée en pointillés en haut du panneau (Faire glisser pour détacher) pour le faire flotter au-dessus de la zone de travail, puis placez-le où cela vous convient. Faites glisser son bord inférieur pour ajuster sa hauteur.

Pour l’ancrer à nouveau, faites-le glisser vers le bord droit de la fenêtre. Une bande en surbrillance indique où il sera placé (Déposez sur le bord droit pour ancrer). L’éditeur mémorise si le panneau est flottant et sa dernière position.

Styles de la page

Si rien n’est sélectionné, le panneau affiche les styles de toute la page : Arrière-plan, Typographie, Espacement, Effets, Transitions et Avancé. L’espacement définit la marge intérieure de la page.

Les valeurs correspondent à ce que vous voyez, même lorsque la couleur de la page provient des styles globaux du site plutôt que de la page elle-même.

Onglet Style

Sélectionnez un élément dans la zone de travail ou dans le panneau Calques. Le panneau affiche alors deux onglets : Style et Propriétés. Il mémorise le dernier onglet utilisé.

La rangée de boutons en haut permet de placer un élément en position absolue, fixe ou sticky à gauche, au centre ou à droite, et en haut, au milieu ou en bas. Pour les autres éléments, ces boutons sont grisés. En dessous se trouvent des sections que vous pouvez ouvrir et fermer. Le panneau mémorise celles que vous laissez ouvertes.

Si vous sélectionnez plusieurs éléments, les modifications de style s’appliquent à tous.

Mise en page

Choisissez un mode d’Affichage : bloc, flex, grille ou aucun. Les options en dessous changent en conséquence :

• Bloc : Débordement et Flottement (avec Effacer en cas de flottement).
• Flex : Direction, Justifier, Aligner, Retour à la ligne et Espacement.
• Grille : Colonnes, Lignes et Espacement.

Position permet de choisir entre statique, relative, absolue, fixe ou sticky. Les positions absolue et fixe ajoutent un champ pour chaque côté : haut, droite, bas et gauche.

Taille

Utilisez Dimensions pour passer de la largeur à la hauteur. Définissez Largeur, Largeur min et Largeur max (ou leurs équivalents pour la hauteur) à partir de valeurs prédéfinies comme Auto, Pleine largeur, Écran et des fractions, ou saisissez votre propre valeur. Débordement détermine ce qui se passe lorsque le contenu dépasse.

Espacement

Choisissez Marge intérieure (l’espace à l’intérieur de l’élément) ou Marge (l’espace à l’extérieur), puis réglez chaque côté dans le schéma.

Typographie

Famille, Taille, Graisse, Hauteur (hauteur de ligne), Espacement (espacement des lettres), Couleur, Aligner, Style (italique), Transformation (majuscules, minuscules, initiales en majuscule) et Décoration (souligné, barré).

Arrière-plan, bordure et autres réglages

• Arrière-plan : choisissez le type Couleur ou Image. Le sélecteur de couleur propose des couleurs unies et des dégradés. Une image dispose des réglages Position, Taille, Répéter et Joindre.
• Bordure : Couleur, Largeur, Rayon (tous les coins ou chaque coin), Style (continu, tirets, pointillés) et Contour, pour tous les côtés ou un seul.
• Effets : Opacité, Ombre et sa couleur, Flou, Luminosité, Contraste, Saturer, Teinte et Filtrer (niveaux de gris, sépia, inversion).
• Transitions : Propriété, Durée, Durée et Délai, pour animer en douceur les changements comme les effets au survol.
• Curseur : la forme du pointeur au-dessus de l’élément.
• Avancé : les autres classes de style de l’élément. Saisissez une classe et appuyez sur Entrée pour l’ajouter, ou supprimez-en une de la liste.

Onglet Propriétés

L’onglet Propriétés contient le contenu et les réglages de l’élément. Chaque élément dispose des sections Général et Accessibilité, suivies de sections propres à son type.

• Général : la balise Élément (par exemple, pour remplacer un h2 par un h3), ID, Infobulle et Attributs data. Cliquez sur Ajouter un attribut pour en ajouter un.
• Accessibilité : Libellé, Décrit par, Rôle, Ordre de tabulation et Visibilité pour les lecteurs d’écran.

Les sections propres à certains éléments comprennent :

Section	Réglages disponibles
Texte	Le texte lui-même, ainsi que la police, la taille, la graisse, l’alignement, la hauteur de ligne, l’espacement des lettres et la couleur. Améliorer avec l’IA réécrit le texte pour vous.
Bouton	Libellé, Type (Bouton, Envoyer, Réinitialiser), Désactivé, Nom, Valeur
Lien	URL, Ouvrir dans (Même onglet, Nouvel onglet), Relation, Télécharger
Image	Source, Texte alternatif (laissez ce champ vide pour une image décorative), Chargement
Champ de saisie	Type, Nom, Texte indicatif, Valeur, limites comme Min, Max, Longueur max et Motif, ainsi que Obligatoire, Désactivé, Lecture seule
SVG	Icône, Largeur, Hauteur, Remplissage, Contour, Épaisseur du contour

Les zones de texte, listes déroulantes, formulaires, listes, tableaux, vidéos, contenus audio et images d’arrière-plan ont aussi leurs propres sections, tout comme les intégrations YouTube, Vimeo, Google Maps, Calendly, Typeform, Stripe et PayPal.

Texte provenant du code

Certains textes d’une page ne sont pas saisis directement dans la page. Ils proviennent d’une liste, d’une prop ou d’un fichier de données, comme le titre d’une carte dans une rangée de cartes. La section Texte vous indique quand c’est le cas :

• Ce texte provient de données ou d’une prop. L’enregistrement le met à jour à la source. Saisissez votre texte comme d’habitude. Seule la valeur de cet élément change, là où elle est définie.
• Partagé par tous les éléments de cette liste. Le texte entre {braces} est du code. Une modification ici change tous les éléments. Laissez les parties entre accolades telles quelles.
• Défini par le code, suivi du code. Le texte est calculé par le code, le champ est donc en lecture seule. Demandez à l’IA de le modifier.
• Contient des éléments imbriqués. Sélectionnez-les pour les modifier séparément. Cliquez sur l’élément intérieur dans la zone de travail pour modifier son texte.

Copier et coller des styles

Copiez le style d’un élément pour l’appliquer à un autre :

1. Sélectionnez l’élément dont le style vous convient et appuyez sur ⌘⌥C / Ctrl+Alt+C.
2. Sélectionnez l’élément à modifier et appuyez sur ⌘⌥V / Ctrl+Alt+V.

Copier le style et Coller le style sont aussi disponibles dans le menu contextuel.

Pendant le travail de l’IA

Le panneau affiche L’IA modifie le contenu et désactive ses commandes pendant que l’IA modifie votre site. Les commandes redeviennent disponibles dès que l’IA a terminé.