Éditeur Studio : Travailler avec l'ancrage, les marges et le remplissage
10 min
Dans un monde où les appareils sont en constante évolution, il est important de contrôler la position de vos éléments afin qu'ils apparaissent exactement comme vous le souhaitez sur différentes tailles d'écran. Dans l'Éditeur Studio, les éléments sont automatiquement ancrés pour que cela se produise.
Cela vous donne la liberté de déplacer les éléments, sans avoir à vous soucier du positionnement entre les points de rupture. Cependant, vous pouvez toujours définir la position, l'ancrage et les marges vous-même à partir du panneau Inspecteur.
Le px* (échelle) est l'unité de mesure par défaut pour l'ancrage, les marges et la marge intérieure. La valeur px* que vous voyez est l'équivalent en pixel, lié à la taille actuelle de votre toile. Passez à un autre point de rupture pour voir comment la valeur px* change automatiquement.
Positionner des éléments sur la zone de travail
Par glisser-déposer, vous pouvez paramétrer la position de votre élément directement sur la toile, séparément pour chaque points de rupture. Cela vous permet de vous assurer que l'élément semble vraiment en place sur chaque écran.
Tant que l'élément reste dans le même parent (ex. section, cellule), vous pouvez la déplacer et cela n'affecte pas les autres points de rupture. Si vous déplacez un élément vers un parent (reparent) différent, cela s'applique à tous les points de rupture.
Coordonnées X et Y dans l'inspecteur
Vous pouvez vérifier les coordonnées X et Y de votre élément pour voir sa position exacte sur la taille actuelle de la toile.
- X : Le plan horizontal, du bord gauche au bord droit de l'élément parent (par exemple, section, conteneur, pile).
- Y : Le plan vertical, du haut vers le bas de l'élément parent.
Dans l'exemple ci-dessous, vous pouvez voir la valeur px* à côté de Y devenir négative lorsque nous déplaçons l'élément de la pile en dehors de son élément parent : la cellule.
Ancrage automatique et manuel
Lorsque vous ajoutez un nouvel élément dans l'Éditeur, il est automatiquement ancré pour s'assurer qu'il reste en place sur tous les écrans et tous les appareils. Cependant, vous pouvez toujours désactiver l'ancrage automatique et choisir les points d'ancrage manuellement.
Cliquez sur un sujet ci-dessous pour en savoir plus.
Ancrage automatique dans l'Éditeur
, par exemple), il n'est automatiquement ancré à aucun angle. 
Ajuster l'ancrage manuellement
en haut à droite de l'éditeur.
, En bas 
, À droite 
ou À gauche 
.
Suggestion :
Le Vérificateur de design responsive peut vous aider à repérer les éléments qui devraient être ancrés en bas du parent plutôt qu'en haut, ce qui pourrait entraîner des écarts sur le site réel.
Utiliser des marges lors de l'ancrage d'éléments
Les marges fonctionnent comme un tampon, prévenant les chevauchements avec d'autres éléments. Lorsqu'un élément est ancré, les marges permettent de conserver une distance définie entre l'élément et les bords de son parent. Vous pouvez également ajouter des marges sur les côtés qui ne sont pas ancrés.
Pour créer ou modifier une marge :
- Sélectionnez l'élément concerné.
- Cliquez sur l'icône Ouvrir l'inspecteur en haut à droite de l'éditeur.
- Faites défiler l'écran jusqu'à Position.
- Saisissez une valeur pour la marge concernée (à gauche, à droite, en haut ou en bas).
Suggestion :
Le Vérificateur de design responsive peut vous aider à localiser les éléments avec des marges inutiles, car ils pourraient limiter votre capacité à redimensionner l'élément parent.
Ajouter un remplissage autour des conteneurs responsive
Ajoutez un remplissage aux conteneurs pour créer un espace entre les bords (en haut, en bas ou sur les côtés) et le contenu qu’ils contiennent. Un remplissage peut être ajouté à tous les types de conteneurs réactifs, y compris les conteneurs basiques, les pile, les boîtes flexibles, les répéteurs, les cellules, les sections et les pages.
Une fois que vous avez ajouté une marge intérieure, vous pouvez l'ajuster directement sur la toile en utilisant un glisser-déposer. Sélectionnez le conteneur responsive et survolez la marge intérieure pour voir cette option.
Pour ajouter un remplissage :
- Sélectionnez l'élément concerné.
- Cliquez sur l'icône Ouvrir l'inspecteur en haut à droite de l'éditeur.
- Faites défiler la page jusqu'à Mise en page.
- Choisissez la marge intérieure que vous souhaitez modifier :
- Un côté spécifique : Cliquez sur l'icône et saisissez la valeur du ou des côté(s) concerné(s) - gauche, droite, haut ou bas.
- Marge horizontale : Saisissez une valeur pour la marge intérieure à gauche et à droite.
- Remplissage vertical : Saisissez une valeur pour la marge supérieure et inférieure.
: Cliquez sur l'icône et saisissez la valeur du ou des côté(s) concerné(s) - gauche, droite, haut ou bas.
: Saisissez une valeur pour la marge intérieure à gauche et à droite. 
: Saisissez une valeur pour la marge supérieure et inférieure. 
Empêcher les éléments de se chevaucher
Lorsque vous positionnez des éléments, il est important de s'assurer qu'ils ne se chevauchent pas sur des points de rupture plus petits. Pour éviter cela, consultez nos suggestions ci-dessous.
Ancrage en haut
Ajouter des cellules pour organiser la mise en page
Appliquer une pile
Dépannage :
Si vous voyez actuellement des chevauchements non nécessaires entre les éléments, consultez ce guide de dépannage.
FAQ
Pourquoi ne puis-je pas voir les indications de marge et de marge intérieure sur la toile ?
en haut à gauche.
Puis-je utiliser des unités autres que le px* lors de la configuration des marges et de la marge intérieure ?
