Points de rupture Wix Studio : gérer le responsive design 📱

Dans Wix Studio, il faut toujours designer du plus grand écran vers le plus petit.

Les styles définis sur un breakpoint large se répercutent sur les breakpoints plus petits, mais l’inverse n’est pas vrai, sauf pour certains contenus comme les textes et les médias.

Comment ajouter un breakpoint personnalisé dans Wix Studio ?

Vous pouvez gérer vos breakpoints en cliquant sur les "..." à côté des icones d'ordinateur, tablette et mobile sur la barre en haut de l'éditeur.

Personnaliser les points de rupture d'une section globale

Pour vos sections globales ( par exemple pour entête ou le bas de page), vous pouvez créer des points de rupture indépendant du reste du site. ( la couleur passe en vert au lieu de bleu)

C'est un cas d'usage très courant. Votre menu est rogné sur les petits ordinateurs en dessous de 1100 pixels. Vous personnalisez donc le point de rupture de l'entête, pour qu'il passe en tablette dès 1100px au lieu de 1000

Breakpoints supplémentaires et largeur maximale

Dans certains cas, il est utile d’ajouter des breakpoints supplémentaires, par exemple pour les écrans très larges.Cependant, Wix Studio propose aussi une alternative simple : la largeur maximale des sections. Par défaut fixée à 1600 px, elle permet d’empêcher une section de s’étirer indéfiniment, sans multiplier les breakpoints. On peut gérer la largeur max via les styles du site ou en cliquant sur une section et en ouvrant l'inspecteur à droite.

Sections globales