Editor X: Concevoir le design à travers les points de rupture avec la règle en cascade
Temps de lecture : 4 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Avec Editor X, vous pouvez concevoir le design de votre site pour différents points de rupture (par exemple, ordinateur, tablette, mobile). Les points de rupture vous permettent de personnaliser le design et la mise en page de vos éléments pour une plage particulière de tailles d'écran afin qu'ils aient toujours un aspect attrayant.
Alors que la structure et les données de votre site restent les mêmes sur tous les points de rupture, vous pouvez personnaliser le design pour qu'il ressemble exactement à ce que vous souhaitez par point de rupture.
En savoir plus sur :
Design en cascade
Editor X utilise un concept en cascade entre les points de rupture, ce qui signifie que les changements en cascade. Les modifications que vous apportez au plus grand point de rupture se répercutent sur les points de rupture plus petits, mais les modifications apportées aux points de rupture plus petits n'affectent pas les points de rupture plus grands.
Par exemple, un bouton conçu pour être violet dans le plus grand point de rupture est automatiquement violet dans le reste des points de rupture.
C'est une fonctionnalité utile lors de la construction de votre site, car vous commencez généralement par concevoir le plus grand point de rupture, puis ajustez le design pour les petits points de rupture.
Modifications qui s'appliquent à tous les points de rupture
Les modifications suivantes s'appliquent automatiquement à tous les points de rupture et ne peuvent pas être personnalisées à une certaine zone d'affichage:
- Données : Lorsque vous modifiez le contenu d'une page, vous modifiez en fait ses données. Par exemple, modifier le lien ou la source d'une image sur votre page.
- Structure : Modifications apportées à la place d'un élément dans la hiérarchie de votre page. Par exemple, lorsque vous déplacez un élément vers un conteneur parent différent, vous modifiez la structure de la page et elle est reflétée sur tous les points de rupture.
Créer des remplacements avec des 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 dessine plus de valeurs de design à partir du point de rupture plus grand au-dessus.
Il existe plusieurs types d'ajustements (c'est-à-dire les remplacements) que vous pouvez apporter à un élément pour le rendre différent dans une fenêtre spécifique:
- Design : Modifie les propriétés d'un élément, telles que la couleur, la bordure, la police et bien d'autres.
- Mise en page : Modifie la position et la taille d'un élément dans une page ou un conteneur parent. Cela inclut également l'ancrage, les marges et les marges.
Lorsque vous créez des remplacements de mise en page et de design, ils affectent également les points de rupture plus petits (voir Design en cascade ci-dessus).
Appliquer le design d'un élément à tous les points de rupture
Si vous modifiez le design ou la mise en page d'un élément, vous pouvez choisir d'appliquer le nouveau design ou mise en page à tous les points de rupture (y compris les points de rupture plus grands).
Pour appliquer le design d'un élément à tous les points de rupture :
- Cliquez avec le bouton droit de la souris sur l'élément que vous avez conçu.
- Cliquez sur Utiliser sur tous les points de rupture .
Annulation des modifications de design sur un point de rupture
Vous pouvez supprimer le remplacement à tout moment et réinitialiser les propriétés de design ou de mise en page d'un élément aux propriétés du 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 rétablissez.
Pour annuler les modifications de design :
- Cliquez avec le bouton droit de la souris sur l'élément dont vous souhaitez supprimer le remplacement.
- Cliquez sur Supprimer le remplacement .
Vous voulez en savoir plus ?
Voir nos cours sur les points de rupture :
Points de rupture : Partie 1
Breakpoints : Part 2 Points de rupture : Tutoriel vidéo
Points de rupture : Partie 1
Breakpoints : Part 2 Points de rupture : Tutoriel vidéo
Cela vous a-t-il aidé ?
|