Breakpoints Wix Studio : maîtriser les points de rupture pour un site responsive 📱

Un site Wix Studio ne se dessine pas une seule fois : il se décline sur plusieurs largeurs d'écran. Ces largeurs s'appellent des breakpoints (points de rupture en français). Bien les comprendre, c'est la clé d'un site qui reste propre de l'ordinateur au smartphone.

En bref : Wix Studio propose 3 breakpoints par défaut (ordinateur, tablette, mobile) et vous pouvez en créer jusqu'à 6 par page ou par section globale. Le design descend toujours du plus grand écran vers le plus petit : commencez par l'ordinateur, puis ajustez la tablette et le mobile.

Qu'est-ce qu'un breakpoint dans Wix Studio ?

Un breakpoint est une largeur d'écran à partir de laquelle la mise en page peut changer. Entre deux breakpoints, vos éléments s'adaptent tout seuls grâce à leur comportement responsive (tailles en %, en fr ou en px*). Au passage d'un breakpoint, vous pouvez modifier la disposition : passer de 3 colonnes à 1, réduire un titre, masquer une image.

Vous retrouvez les breakpoints dans la barre du haut de l'éditeur Wix Studio, sous forme d'icônes ordinateur, tablette et mobile. Un clic sur une icône affiche le canevas à cette largeur.

Les breakpoints par défaut de Wix Studio

Par défaut, Wix Studio propose les trois tailles d'écran les plus courantes selon le trafic des internautes :

Ces valeurs conviennent à la majorité des sites. Vous pouvez toutefois les modifier ou en ajouter d'autres.

Comment ajouter un breakpoint personnalisé dans Wix Studio ?

Réponse courte : depuis le menu de personnalisation des breakpoints, dans la barre du haut de l'éditeur.

1. Sélectionnez la page (ou la section globale) à modifier.

2. Cliquez sur l'icône de personnalisation des breakpoints (les « ... » à côté des icônes ordinateur, tablette et mobile).

3. Choisissez d'ajouter un breakpoint (Add Breakpoint) et saisissez la largeur en pixels.

4. Validez. Pour modifier ou supprimer un breakpoint, survolez-le dans la même liste et utilisez l'icône de modification ou de suppression.

💡 Chaque page et chaque section globale a ses propres breakpoints, jusqu'à 6. Il n'existe pas de réglage unique pour tout le site : si vous ajoutez un breakpoint sur l'accueil, pensez aux autres pages. Le breakpoint le plus grand ne peut pas être supprimé, car une page doit toujours en garder au moins un.

Le design en cascade : du plus grand écran vers le plus petit

Wix Studio fonctionne en cascade. Ce que vous changez sur l'ordinateur descend automatiquement vers la tablette et le mobile. Ce que vous changez sur mobile ne remonte jamais. Si votre bouton devient violet sur ordinateur, il est violet partout. Si vous le passez en noir sur mobile, l'ordinateur ne bouge pas.

D'où la règle d'or : designez toujours l'ordinateur en premier, puis descendez breakpoint par breakpoint. Vous évitez ainsi de régler deux fois la même chose.

Ce qui change par breakpoint, et ce qui s'applique partout

C'est ce dernier point qui piège le plus : on ne peut pas mettre un bouton dans une cellule sur ordinateur et dans une autre sur mobile. Pour cela, il faut une grille CSS, où la position dans la grille est un simple réglage de mise en page.

Masquer un élément ou annuler vos réglages sur un breakpoint

• Masquer : clic droit sur l'élément, puis Masquer. Il disparaît de ce breakpoint seulement (pratique pour une vidéo lourde sur mobile).

• Annuler les personnalisations : sélectionnez l'élément, ouvrez le menu Plus d'actions et choisissez de supprimer les remplacements (Remove Overrides). L'élément reprend les réglages du plus grand breakpoint, sur ce breakpoint uniquement.

Personnaliser les breakpoints d'une section globale

Le header, le footer et toutes les sections globales ont leurs propres breakpoints, totalement séparés de ceux des pages. Dans l'éditeur, la barre des breakpoints passe au vert (au lieu du bleu) quand vous travaillez sur une section globale.

C'est un cas d'usage très courant : votre menu est rogné sur les petits ordinateurs, en dessous de 1 100 px. Plutôt que de réduire le texte partout, vous personnalisez le breakpoint du header pour qu'il passe en version tablette dès 1 100 px au lieu de 1 000 px. Le reste de la page ne bouge pas.

Breakpoints supplémentaires ou largeur maximale ?

Pour les très grands écrans, on pense souvent à ajouter un breakpoint au-dessus de l'ordinateur. Il existe plus simple : la largeur maximale des sections. Fixée par défaut à 1 600 px, elle empêche une section de s'étirer indéfiniment, sans multiplier les breakpoints. Elle se règle dans les styles du site, ou section par section dans l'Inspecteur.

5 bonnes pratiques pour des breakpoints propres

1. Designez l'ordinateur en premier, puis la tablette, puis le mobile.

2. Structurez vos sections avec des piles et des grilles avant de toucher aux breakpoints : une bonne structure évite la moitié des retouches.

3. Utilisez des tailles responsives (%, fr, px*) plutôt que des pixels fixes. Voir les unités de mesure.

4. Testez en étirant le canevas avec les poignées : les problèmes apparaissent souvent entre deux breakpoints, pas pile dessus.

5. N'ajoutez un breakpoint que pour régler un vrai problème (menu qui déborde, grille trop serrée), pas par principe.

Mon avis de webdesigner sur les breakpoints Wix Studio

Les breakpoints font toute la différence entre Wix Studio et l'éditeur Wix classique, où la version mobile est une mise en page à part. Ici, tout part de la même page et descend en cascade. Au début, ça déroute. Ensuite, on ne peut plus s'en passer.

Dans la plupart des cas, les 3 breakpoints par défaut suffisent. Celui que l'on personnalise le plus souvent, c'est celui du header, dès que le menu compte beaucoup d'entrées. Si vous passez votre temps à corriger le mobile élément par élément, le problème vient rarement des breakpoints : c'est la structure (grille, piles, conteneurs) qu'il faut revoir. Pour la vue d'ensemble, lisez mon guide du responsive Wix Studio.

Et si vous préférez confier la mise en page responsive de votre site, c'est le cœur de mon travail d'expert Wix Studio.

Questions fréquentes sur les breakpoints Wix Studio

Combien de breakpoints peut-on créer dans Wix Studio ?

Jusqu'à 6 par page et par section globale. Par défaut, il y en a 3 : ordinateur, tablette et mobile.

Quelles sont les tailles des breakpoints par défaut ?

Ordinateur à partir de 1 001 px, tablette de 751 à 1 000 px, mobile de 320 à 750 px.

Peut-on appliquer un breakpoint à tout le site d'un coup ?

Non. Les breakpoints se règlent page par page, et section globale par section globale. Wix recense cette possibilité comme une demande de fonctionnalité.

Pourquoi ma modification sur mobile s'applique-t-elle aussi à l'ordinateur ?

Parce qu'il s'agit d'un changement de contenu ou de structure (texte, lien, image, empilement, changement de cellule). Ces changements valent pour tous les breakpoints. Seuls le design et la mise en page se personnalisent par écran.

À 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 : gérer les breakpoints, Wix : designer sur tous les breakpoints.