Éditeur Studio : Concevoir le design à travers les points de rupture

L'Éditeur de Studio vous permet de personnaliser les sites par points de rupture, afin qu'ils aient toujours un aspect attrayant. Les points de rupture sont des plages de tailles d'écran, qui représentent les écrans et appareils que les visiteurs ont tendance à utiliser (ex. tablette, mobile).

Le design que vous créez sur ordinateur se répercute sur tablette et mobile. Cependant, vous pouvez créer des remplacements pour que le design s'adapte aux petits écrans. Cliquez sur une icône de point de rupture en haut de l'écran pour commencer. 

L'Éditeur Studio est livré avec 3 points de rupture intégrés, que vous pouvez personnaliser et redéfinir à tout moment :

Vous définissez les points de rupture séparément pour chaque page du site et chaque section globale. Cela signifie qu'une section globale et la page sur laquelle elle se trouve peuvent avoir des points de rupture entièrement différents. 

Par exemple, la page ci-dessous a 5 points de rupture définis :

... Bien que l'en-tête global de cette page ait 3 points de rupture définis : 

L'Éditeur de Studio utilise un concept en cascade pour concevoir des points de rupture. Les modifications que vous apportez sur des points de rupture plus grands se répercutent sur des points de rupture plus petits, mais les modifications que vous apportez sur des points de rupture plus petits n'affectent pas les points de rupture plus grands. 

Par exemple, un bouton conçu pour être mauve sur l'ordinateur l'est automatiquement sur tablette et mobile. Si vous modifiez sa couleur sur mobile, le bouton reste mauve sur tablette et ordinateur.

Certains types d'actions s'appliquent automatiquement à tous les points de rupture et ne peuvent pas être personnalisés pour un certain type d'affichage .

Lorsque vous modifiez le contenu d'un élément, vous modifiez en fait ses données. Par exemple, la modification du lien d'un élément ou de la source d'une image s'applique à tous les points de rupture. 

Un autre exemple est celui où vous remplacez ou supprimez des éléments de la page – l'élément est automatiquement remplacé / supprimé sur tous les points de rupture.

Modifie la place d'un élément dans la hiérarchie de votre page. Par exemple, lorsque vous empilez des éléments ou déplacez un élément vers une cellule, différente vous modifiez la structure de la page et cela se reflète sur tous les points de rupture. 

Un remplacement se produit lorsque vous apportez des modifications au design d'un élément sur un point de rupture spécifique. Cela signifie qu'il ne tire plus les valeurs du design du point de rupture le plus large au-dessus. Cependant, ces remplacements se répercutent sur des points de rupture plus petits.

Il existe 2 types de remplacements que vous pouvez créer :

Vous pouvez toujours réinitialiser le design et la mise en page d'un élément à ses propriétés sur le plus grand point de rupture.

Les propriétés de l'élément sur les points de rupture plus petits ne sont pas affectées, uniquement le point de rupture qui contient l'élément que vous restaurez. Par exemple, si vous supprimez les remplacements sur les tablettes, cela n'affectera pas les mobiles.