Éditeur Studio : Travailler avec des calques

Temps de lecture : 6 min
Gérez les calques d'une page pendant que vous y travaillez dans l'Éditeur Studio. C'est là que vous voyez toutes les sections et tous les éléments, afin de mieux comprendre leur hiérarchie. Le panneau Calques est également utile lorsque vous devez sélectionner un élément difficile à trouver sur la toile.
Une capture d'écran du panneau Calques montrant un élément spécifique sélectionné sur une page
Dans cet article, apprenez-en plus sur :

La structure du panneau Calques

Le panneau Calques affiche toutes les sections de la page actuelle, dans une hiérarchie de haut en bas. Si la page a un en-tête en haut, par exemple, il apparaît en haut de la liste.
Lorsque vous imbriquez des éléments dans d'autres éléments, cela crée une relation parent/enfant entre eux. Par exemple, les éléments de texte dans un conteneur sont ses éléments enfants. À son tour, ce conteneur est l'enfant de la section qui l'affiche. 
Le panneau Calques est organisé selon cette logique parentale, vous pouvez donc cliquer sur un élément parent pour voir ses éléments enfants. Si votre page contient des sections globales, ils sont surlignés en vert. 
Utilisez la barre de recherche pour trouver rapidement le calque dont vous avez besoin. Vous pouvez saisir le nom ou l'ID de l'élément.

Capture d'écran de la barre de recherche dans le panneau Calques de l'Éditeur Studio

Sélectionner et gérer les calques

Le panneau Calques est un moyen utile et rapide de naviguer vers un certain élément de la page. C'est également un excellent moyen de trouver un élément, par exemple, si vous avez des éléments qui se chevauchent et que vous ne pouvez pas localiser ou sélectionner celui dont vous avez besoin.
Lorsque vous survolez un calque, il est mis en évidence sur la page. Si vous cliquez sur le calque, l'Éditeur fait défiler directement jusqu'à cet élément. Même si vous fermez le panneau à ce stade, votre sélection est toujours enregistrée. 
Un GIF montrant comment la page défile jusqu'à l'élément de la barre de connexion lorsqu'elle est sélectionnée dans le panneau Calques
Suggestion :
Sélectionnez plusieurs éléments en maintenant la touche Maj enfoncée tout en cliquant dessus. 

Gérer un calque

Vous avez trouvé le calque dont vous avez besoin ? À partir de ce panneau, vous pouvez effectuer des actions telles que copier le calque, le déplacer vers le haut ou vers le bas, choisir les pages sur lesquelles l'afficher et bien plus encore. 
Gérez un calque en effectuant l'une des actions suivantes :
  • Cliquez avec le bouton droit de la souris sur le nom du calque.
  • Survolez le nom du calque et cliquez sur l'icône Plus d'actions .
Une capture d'écran du menu des actions disponibles pour chaque calque que vous sélectionnez dans le panneau

Définir une préférence de sélection de calque

L'Éditeur Studio vous permet de choisir une route par défaut pour saisir les calques de votre toile. Décidez quel élément est "sélectionné" lorsque vous cliquez sur un conteneur parent qui a des éléments enfants.
  • Conteneur parent en premier : Le conteneur parent (ex. boîte conteneur, pile, etc.) est sélectionné lorsque vous cliquez dessus. Ensuite, vous pouvez cliquer à nouveau sur n'importe quel élément à l'intérieur pour le modifier.
  • Élément enfant en premier : L'élément enfant spécifique sur lequel vous cliquez est sélectionné, et non son conteneur parent.

Pour définir une préférence de sélection de calques :

  1. Cliquez sur l'icône Wix Studio  en haut à gauche.
  2. Survolez Vue.
  3. Survolez Sélection des calques.
  4. Sélectionnez l'option correspondante : Conteneur parent en premier ou Élément enfant en premier.
Définir une préférence de sélection de calque dans l'Éditeur Studio

Renommer des calques

Lorsque vous ajoutez de nombreuses sections, conteneurs et éléments à une page, il peut devenir difficile de les distinguer dans le panneau Calques. Renommez les calques pour vous assurer qu'ils sont faciles à reconnaître - double-cliquez sur le calque concerné pour lui donner un nouveau nom. 
Un GIF montrant comment renommer un calque en double-cliquant dessus dans le panneau
Vous utilisez le mode développeur ?
Affichez les ID d'élément dans le panneau Calques pour identifier facilement les éléments de votre code. Activez l'option Display IDs (ID d'affichage) pour afficher les ID tels que définis dans le panneau Propriétés. 

Réorganiser les calques

Par glisser-déposer, vous pouvez facilement réorganiser les éléments et les sections de la page actuelle. Comme le panneau Calques est organisé de haut en bas, le déplacement des éléments affecte également leur emplacement sur la page. 
Lorsque vous travaillez avec des éléments qui se chevauchent, leur réorganisation affecte également l'ordre Z. Par exemple, si vous voulez que du texte apparaisse au-dessus d'une forme, le texte doit se trouver au-dessus de la forme dans le panneau Calques. 
Un GIF montrant la fonctionnalité de glisser-déposer dans le panneau Calques

Masquer et afficher des éléments

Vous pouvez masquer rapidement un élément à partir du point de rupture actuel, directement sur la toile, en sélectionnant Ne pas afficher
Une capture d'écran de l'option permettant de ne pas afficher un élément, tel qu'il apparaît sur la toile
Cependant, si vous avez besoin de démasquer l'élément, vous devez le faire à partir du panneau Calques. Un élément masqué apparaît avec une icône Masqué pour que vous puissiez facilement le localiser sur la liste.
Suggestion :
Lorsque vous ajoutez un élément à un point de rupture plus petit (par exemple, mobile), il est toujours masqué sur les points de rupture plus grands (ex. ordinateur). En suivant ces étapes, vous pouvez faire apparaître l'élément sur les plus grands points de rupture.

Pour afficher un élément :

  1. Cliquez sur Calques  à gauche de l'éditeur.
  2. Localisez l'élément caché sur la liste.
  3. Survolez l'élément et cliquez sur l'icône Plus d'actions .
  4. Cliquez sur Afficher.
Une capture d'écran de l'option permettant d'afficher un élément masqué lors de sa sélection dans le panneau des calques

Cela vous a-t-il aidé ?

|