Éditeur Wix Studio : prise en main de l’interface 🧭

L’éditeur Wix Studio (Studio Editor) est l’espace où vous construisez le design de votre site : sections, textes, images, mise en page et affichage sur chaque écran.

Avant de construire quoi que ce soit, prenez quelques minutes pour repérer les lieux. Savoir à quoi sert chaque zone vous évitera de chercher un réglage au mauvais endroit pendant des heures.

En bref : l’éditeur Wix Studio se divise en 5 zones. La barre supérieure pour changer de page, d’écran et publier, la barre latérale gauche pour ajouter des éléments, le canevas au centre, l’Inspecteur à droite pour régler l’élément sélectionné et la barre d’outils contextuelle. Retenez la logique : on ajoute à gauche, on règle à droite, on construit au centre.

Éditeur Wix Studio, tableau de bord et Mes sites : qui fait quoi ?

Wix Studio est organisé en 3 espaces bien distincts :

Comment accéder à l’éditeur Wix Studio ?

Tout dépend de votre point de départ :

Pour faire le chemin inverse, survolez le logo en haut à gauche de l’éditeur, puis cliquez sur « Accéder au tableau de bord ». Pas besoin de fermer l’onglet : vos modifications sont enregistrées automatiquement après chaque action.

Mode contenu ou mode complet de l’éditeur Wix Studio

L’éditeur Wix Studio existe en 2 versions :

En mode contenu, cliquez sur une section : le panneau de droite permet de modifier son contenu sans toucher à la mise en page.

Pour basculer : icône Wix Studio en haut à gauche, puis Site, puis « Ouvrir en mode contenu ». Dans l’autre sens, cliquez sur Mode contenu en haut à gauche, puis « Ouvrir en mode complet ».

Les 5 zones de l’éditeur Wix Studio

1. La barre supérieure de l’éditeur Wix Studio

• À gauche : l’icône du site ouvre le menu principal (retour au tableau de bord, paramètres du site, passage en mode contenu…). À côté, la liste déroulante des pages (ici « Accueil ») permet de passer d’une page à l’autre. Enfin, « Sauvegarde automatique activée » confirme que vos modifications sont enregistrées au fur et à mesure.

• Au centre : les points de rupture (ordinateur, tablette, mobile) et la taille d’édition, par exemple 1280 px, pour voir votre page à différentes largeurs.

• À droite : annuler et rétablir, Aperçu (voir le site sans quitter l’éditeur) et Publier. Un bouton permet aussi de passer au forfait Premium, nécessaire pour un nom de domaine personnalisé.

Le menu du site (icône Wix Studio) donne aussi accès à l’historique du site, pour revenir à une version précédente en cas d’erreur.

2. La barre latérale gauche de l’éditeur Wix Studio

C’est la colonne d’icônes à gauche de l’éditeur. Wix ne lui donne pas de nom officiel particulier : on parle simplement de barre latérale gauche (left sidebar en anglais). Chaque icône ouvre un panneau. De haut en bas :

3. Le canevas de l’éditeur Wix Studio (au centre)

Le canevas est votre zone de travail. Il affiche la page, découpée en sections : de grands rectangles qui occupent toute la largeur de l’écran, empilés les uns sous les autres.

Le fil d’Ariane, en bas à gauche, indique l’élément sélectionné et l’élément dans lequel il est placé, son « parent ». Dans notre exemple, la section est sélectionnée, et elle est placée dans la page.

Au survol, la couleur du cadre vous indique le type de section :

4. L’Inspecteur de l’éditeur Wix Studio (à droite)

L’Inspecteur est le panneau de droite. Il s’ouvre avec la flèche en haut à droite de l’éditeur et règle l’élément sélectionné, avec plusieurs onglets :

• Design : taille, couleurs, bordures, mise en page, position, marges.

• Animations et effets : apparition, survol, clic, défilement.

• Contenu : des idées de textes, boutons et images.

• CMS : les connexions aux bases de données de la page.

5. La barre d’outils contextuelle (au-dessus de l’élément)

C’est le petit menu qui apparaît juste au-dessus de l’élément sélectionné. Il donne un accès rapide aux réglages les plus courants.

Ses options changent selon l’élément sélectionné :

• Un texte : modifier le texte, choisir un style, ajouter un lien.

• Une image : changer l’image, la recadrer, ajouter un lien.

• Une pile ou un conteneur : régler la mise en page et l’alignement des éléments qu’il contient.

Les points de rupture dans l’éditeur Wix Studio

Par défaut, l’éditeur propose 3 points de rupture : ordinateur, tablette et mobile. Vous pouvez en définir jusqu’à 6 par page.

La méthode conseillée : construisez d’abord sur ordinateur, puis ajustez la tablette et le mobile. Les réglages de design faits sur un écran plus petit ne modifient pas la version ordinateur.

Deux notions comptent autant que les points de rupture pour qu’un design tienne sur tous les écrans : les unités de mesure (px, %, vw) et le docking, c’est-à-dire le bord auquel chaque élément reste accroché.

Les raccourcis clavier utiles de l’éditeur Wix Studio

Ajoutez-en un à votre liste : Ctrl + I (Cmd + I sur Mac) ouvre l’Inspecteur, le panneau que vous utiliserez le plus.

Éditeur Wix ou éditeur Wix Studio : quelle différence ?

L’éditeur Wix classique est pensé pour démarrer vite, mais reste limité en design et en responsive. L’éditeur Wix Studio offre un vrai contrôle de chaque écran, plus d’animations et plus de liberté.

⚠️ Un site créé avec l’éditeur Wix ne s’ouvre pas dans l’éditeur Wix Studio : il faut le reconstruire. Voir la refonte d’un site Wix vers Wix Studio.

Pour un comparatif complet (prix, public visé, limites), lisez notre article Wix vs Wix Studio.

Mon avis de webdesigner sur l’éditeur Wix Studio

L’éditeur Wix Studio peut impressionner au premier abord, avec ses nombreux panneaux. Mais une fois les 5 zones repérées, tout devient logique : on ajoute à gauche, on règle à droite, on construit au centre.

Retenez aussi le mode contenu : c’est la version idéale pour les petites mises à jour, sans aucun risque de casser le design.

Mon conseil pour démarrer : réglez d’abord les styles du site (couleurs et typographies), puis construisez une seule page sur ordinateur avant de passer à la tablette et au mobile. C’est plus rapide que de tout corriger à la fin.

Enfin, l’éditeur n’est plus le seul moyen de faire évoluer un site. Sur trend-design.fr, je garde l’éditeur pour le design, mais je pilote une partie du contenu avec Claude connecté à Wix : modifications en masse des 79 pages services du CMS, redirections 301, réécriture de ce glossaire. Voir Claude et Wix Studio.

Questions fréquentes sur l’éditeur Wix Studio

L’éditeur Wix Studio est-il gratuit ?

Vous pouvez créer et modifier un site dans l’éditeur sans payer. Un forfait Premium devient nécessaire pour connecter votre propre nom de domaine. Voir le tarif Wix Studio.

Peut-on ouvrir un site Wix classique dans l’éditeur Wix Studio ?

Non. Un site créé avec l’éditeur Wix doit être reconstruit dans Wix Studio.

Mes modifications sont-elles enregistrées automatiquement ?

Oui, l’éditeur Wix Studio enregistre après chaque modification. En revanche, rien n’est visible en ligne tant que vous n’avez pas cliqué sur Publier.

À 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 Studio Academy : prendre en main l’éditeur, Wix : utiliser l’Inspecteur, Wix : comment les clients modifient leur site, Wix : raccourcis clavier.