Calques Wix Studio : organiser les éléments de vos pages 💡

Le panneau des calques affiche la structure réelle de votre page : les sections, les conteneurs et les éléments imbriqués les uns dans les autres. Il devient indispensable dès que la page se complique.

En bref : ouvrez les calques avec l’icône Calques de la barre latérale gauche ou avec Ctrl + L (Cmd + L sur Mac). Vous pouvez y sélectionner un élément introuvable sur le canevas, le renommer, le masquer sur un écran ou changer son ordre d’empilement.

Comment ouvrir les calques dans Wix Studio ?

Cliquez sur l’icône Calques dans la barre latérale gauche de l’éditeur Wix Studio. Le panneau liste toutes les sections de la page, de haut en bas, avec leurs éléments enfants. Une recherche permet de retrouver un calque par son nom ou son ID.

Les sections globales, comme l’en-tête et le pied de page, sont surlignées en vert pour les repérer d’un coup d’œil.

Ce que vous pouvez faire dans le panneau des calques

Les actions s’ouvrent au clic droit sur un calque ou avec l’icône « … » :

Limite à connaître : vous ne pouvez glisser un élément qu’à l’intérieur de son parent. Pour le déplacer dans un autre conteneur, faites-le sur le canevas.

Sélectionner un élément caché avec la souris

Pour atteindre un élément caché derrière un autre, faites un clic droit sur la zone concernée du canevas, puis choisissez l’option de sélection des calques : la liste des éléments empilés à cet endroit s’affiche.

Vous pouvez aussi choisir, dans les préférences de l’éditeur, si un clic sélectionne d’abord le conteneur parent ou d’abord l’élément enfant.

Garder le même ordre des sections sur tous les écrans

L’ordre des sections peut différer entre ordinateur, tablette et mobile. Pour l’harmoniser, faites un clic droit sur la page dans les calques et utilisez l’option qui applique l’ordre des sections à tous les points de rupture.

Les calques influencent-ils le responsive et le SEO ?

Responsive : masquer un élément sur un écran permet d’avoir une vraie version tablette ou mobile. Attention, un élément ajouté sur un écran plus petit est toujours masqué sur les écrans plus grands. Voir les breakpoints Wix Studio.

SEO : un élément masqué reste présent dans le code de la page. Si vous dupliquez un titre pour le mobile et masquez l’original, Google peut lire les deux. Surveillez la hiérarchie de vos balises Hn et contrôlez-la avec le vérificateur de site.

Mon avis de webdesigner sur les calques Wix Studio

Nommer ses calques paraît fastidieux, mais c’est ce qui fait gagner le plus de temps sur un site de plusieurs pages. « Section hero », « Grille services », « Bloc avis » : quelques secondes au départ, et les modifications suivantes deviennent beaucoup plus rapides, pour vous comme pour vos collaborateurs.

Et avant de dupliquer un élément pour le mobile, demandez-vous si un simple réglage de taille ou de pile ne suffit pas. Moins d’éléments masqués, c’est une page plus légère et plus simple à maintenir.

Questions fréquentes sur les calques Wix Studio

Quel est le raccourci des calques dans Wix Studio ?

Ctrl + L sur Windows, Cmd + L sur Mac.

Comment réafficher un élément masqué ?

Ouvrez le panneau des calques, repérez l’élément marqué d’une icône « masqué » et réaffichez-le depuis son menu.

Pourquoi je ne peux pas glisser un élément dans une autre section ?

Le panneau des calques ne permet de réordonner un élément qu’à l’intérieur de son parent. Déplacez-le directement sur le canevas.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix : travailler avec les calques, Wix : raccourcis clavier de l’éditeur Studio.