Positionnement et docking Wix Studio : placer vos éléments au bon endroit 📌

Le docking (ou ancrage) détermine à quel bord de son conteneur un élément est accroché : en haut, en bas, à gauche, à droite ou au centre. C’est ce qui permet à vos éléments de rester au bon endroit sur toutes les tailles d’écran.

En bref : Wix Studio ancre automatiquement chaque nouvel élément en haut de son parent et au bord gauche ou droit le plus proche. Vous pouvez changer ces points d’accroche dans l’Inspecteur, rubrique Position. Posez-vous toujours la question : à quel bord cet élément doit-il rester collé quand l’écran rétrécit ?

Comment fonctionne le docking sur Wix Studio ?

Quand vous ajoutez un élément, Wix Studio l’ancre automatiquement en haut de son parent, c’est-à-dire du bloc qui le contient (section, conteneur ou pile), et au bord gauche ou droit le plus proche. Quand l’écran change de taille, l’élément garde sa distance par rapport à ces bords.

Tant que la case « Element auto docks » (ancrage automatique) est cochée, vous pouvez déplacer l’élément librement : ses points d’ancrage s’ajustent tout seuls. Un élément placé exactement au centre de son parent n’est ancré à aucun coin.

Régler le docking d’un élément

1. Sélectionnez l’élément.

2. Ouvrez l’Inspecteur, rubrique Position.

3. Cliquez sur les icônes d’ancrage (haut, bas, gauche, droite) pour choisir les points d’accroche.

4. Ajustez les marges pour définir la distance avec le bord.

Dès que vous cliquez sur une icône d’ancrage, l’ancrage automatique se désactive pour cet élément : vous gardez la main sur le réglage.

Docking, marges et marges intérieures

Par défaut, ces trois réglages utilisent le px*, une unité fluide qui s’adapte à la taille de l’écran. Voir les unités de mesure Wix Studio.

Les autres types de positionnement

⚠️ Une seule section épinglée est possible par page, et une section épinglée recouvre par défaut la section suivante.

Les erreurs de docking les plus fréquentes

• Ancrer des éléments voisins à des bords différents : ils se séparent quand l’écran change de taille.

• Mélanger des marges en % et en px sur des éléments qui doivent rester alignés.

• Régler le docking élément par élément là où une pile ou une grille ferait le travail.

Le bon réflexe : ancrez au même bord tous les éléments qui doivent rester alignés, puis vérifiez chaque breakpoint Wix Studio.

Mon avis de webdesigner sur le docking Wix Studio

Le docking est la notion qui déroute le plus les débutants sur Wix Studio. Mon conseil : pensez « accroche » plutôt que « position ». Posez-vous toujours la question : « à quel bord cet élément doit-il rester collé quand l’écran rétrécit ? ». Et utilisez les piles et la CSS Grid pour éviter de régler chaque élément un par un.

Si le responsive de votre site vous échappe malgré tout, un accompagnement fait souvent gagner des heures. Voyez notre offre d’expert Wix Studio.

Questions fréquentes sur le docking Wix Studio

C’est quoi le docking dans Wix Studio ?

C’est l’ancrage d’un élément à un ou plusieurs bords de son conteneur. L’élément garde sa distance avec ces bords quand la taille de l’écran change.

Pourquoi mon élément bouge sur mobile ?

Le plus souvent, il est ancré au mauvais bord ou ses marges sont en %. Vérifiez la rubrique Position de l’Inspecteur.

Docking et sticky, quelle différence ?

Le docking place l’élément dans son conteneur. Le sticky le garde visible un moment pendant le défilement de la page.

À 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 : docking, marges et marges intérieures, Wix : épingler des éléments.