Panneau Calques

Le panneau Calques affiche tous les éléments de la page actuelle sous forme d’arborescence. Cliquez sur Calques dans la barre latérale gauche pour l’ouvrir. C’est le moyen le plus simple d’accéder aux éléments de petite taille, masqués par d’autres ou imbriqués à plusieurs niveaux.

L’ouverture du panneau Calques fait passer la zone de travail en mode Modifier, car l’arborescence est construite à partir de la page que vous modifiez. Ce panneau n’est pas disponible dans l’éditeur de code.

Recherche et sélection d’éléments

Chaque ligne indique le type de l’élément ou le nom du composant. Cliquez sur la flèche à côté d’une ligne pour la développer ou la réduire.

• Cliquez sur une ligne pour sélectionner l’élément correspondant. La zone de travail défile jusqu’à lui et le panneau de modification affiche ses paramètres.
• Sélectionnez un élément dans la zone de travail, et l’arborescence se déploie jusqu’à la ligne correspondante.
• Survolez une ligne pour mettre l’élément en surbrillance dans la zone de travail. Survoler un élément dans la zone de travail encadre sa ligne.
• Cliquez sur un espace vide du panneau pour annuler la sélection.

Vous pouvez aussi parcourir l’arborescence au clavier. Up et Down permettent de passer d’une ligne à l’autre, Right développe une ligne et Left la réduit, et Enter ou Space sélectionne l’élément. Les raccourcis comme Delete, ⌘C, ⌘V, ⌘X, ⌘D et ⌘Z (Ctrl sous Windows) s’appliquent à l’élément sélectionné, et ⌘K / Ctrl+K ouvre la barre Modifier avec l'IA sous la ligne.

Réorganisation des éléments

Faites glisser une ligne vers le haut ou vers le bas pour changer l’ordre de l’élément. Les lignes se déplacent parmi les éléments de même niveau, au sein du même parent. La zone de travail se met à jour dès que vous relâchez la ligne.

Certaines lignes ne peuvent pas être déplacées, car WebTwizz ne les trouve pas dans votre code. Un message vous l’indique lorsque vous les survolez.

Menu contextuel

Faites un clic droit sur une ligne pour ouvrir le même menu que dans la zone de travail.

Option	Raccourci	Fonction
Modifier	⌘E	Sélectionne l’élément et ouvre le panneau de modification
Copier, Coller, Couper	⌘C, ⌘V, ⌘X	Copient, collent et coupent des éléments
Dupliquer	⌘D	Crée une copie de l’élément
Supprimer	⌫	Supprime l’élément
Copier le style, Coller le style	⌘⌥C, ⌘⌥V	Copient le style d’un élément et le collent sur un autre
Convertir en composant	⌘⇧K	Transforme l’élément en composant réutilisable
Modifier avec l'IA	⌘K	Ouvre la barre Modifier avec l'IA pour cet élément

Sous Windows, utilisez Ctrl à la place de ⌘ et Alt à la place de ⌥.

Pendant que l’IA travaille

Pendant que l’IA modifie votre site, vous ne pouvez pas déplacer les lignes et toutes les options du menu contextuel sont grisées. Tout redevient disponible lorsque l’IA a terminé.