Vous rencontrez des problèmes avec l'apparence du site de votre client en fonction des points de rupture ? L'Éditeur Studio vous donne les outils pour résoudre les problèmes de réactivité courants, comme les éléments qui se chevauchent, le mauvais placement ou le mauvais alignement sur différentes tailles d'écran. Avec les bons ajustements, vous pouvez créer un site professionnel et soigné qui s'affiche parfaitement sur tous les appareils.
Texte qui apparaît trop petit dans certains points de rupture
Votre texte semble-t-il trop petit lorsque vous consultez le site de votre client sur des écrans plus petits ? En utilisant la mise à l'échelle proportionnelle du
comportement responsive et le paramètre min-max., vous pouvez vous assurer que votre texte s'affiche toujours parfaitement sur toutes les tailles d'écran.
Sélectionnez le texte et ouvrez le panneau Inspecteur. Tout d'abord, configurez le comportement responsive sur Mettre à l'échelle proportionnellement. Ensuite, cliquez sur Max-min sous Design pour configurer les tailles minimales et maximales des polices.
Éléments mal placés dans les points de rupture
Si un élément du site de votre client change de position de manière inattendue sur différentes tailles d'écran, cela est probablement dû à ses paramètres d'ancrage et de marge. Suivez ces étapes pour résoudre le problème et vous assurer que vos éléments restent dans la position prévue.
Vérifier l'ancrage de l'élément
Sélectionnez l'élément concerné et vérifiez ses points d'ancrage (ex. en haut, à gauche, etc.) dans le panneau Inspecteur. Si l'ancrage ne correspond pas à la position souhaitée (ex. l'élément est ancré en haut mais vous le souhaitez en bas), l'élément peut se déplacer lorsque la taille de l'écran change.
La position d'ancrage est indiquée par les lignes pointillées sur l'élément et les points d'ancrage dans le panneau Inspecteur (sous Position). Vous pouvez cliquer sur les points d'ancrage dans l'Inspecteur pour les sélectionner ou les supprimer.
Ajuster les marges de l'élément
Les marges définissent la distance entre l'élément et ses côtés ancrés. Lorsque la taille de l'écran change, les marges peuvent « pousser » l'élément dans des sens différents.
Par exemple, si un élément est ancré en haut avec une marge de 60 %, il se déplacera automatiquement vers le haut lorsque la section deviendra plus étroite (pour maintenir la valeur de la marge définie). Vous pouvez essayer de réduire les marges et tester les résultats.
Lorsque vous configurez les marges en pourcentage, elles s'ajustent dynamiquement en fonction de la taille de l'écran, mais en même temps, cela peut entraîner des changements inattendus. Vous pouvez envisager de passer à une unité de taille fixe (ex. pixels) pour un positionnement plus cohérent.
(Section Comportement fixe) Passer les marges des éléments en pixels
Si vous configurez le
comportement responsive sur
« Fixe », il est important de s'assurer que les marges des éléments enfants sont également en pixels.
L'utilisation d'unités de marge fluides comme le pourcentage signifie que les marges augmentent ou diminuent en fonction de la taille de l'écran, ce qui provoque le déplacement de l'élément. Le passage aux marges en pixels garantit que l'élément conserve toujours la même distance par rapport aux côtés, au lieu de calculer la distance en fonction de la largeur de la page.
Éléments désalignés sur les points de rupture
Si des éléments de votre section sont désalignés ou rompent leur mise en page lorsque la taille de l'écran change, cela est souvent dû à des paramètres d'ancrage ou de marge incohérents.
Suivez ces étapes pour identifier et résoudre le problème, en vous assurant que vos éléments sont correctement alignés sur toutes les tailles d'écran.
Vérifier que les éléments sont ancrés du même côté
Si les éléments ont des paramètres d'ancrage en conflit, ils peuvent ne pas s'aligner correctement lorsque l'écran se redimensionne.
Vérifiez si les éléments d'une même section ont des paramètres d'ancrage différents. Par exemple, un élément peut être ancré en haut, tandis qu'un autre est ancré en bas. Nous vous recommandons d'ancrer tous les éléments connexes du même côté du conteneur parent (ex. haut, bas).
La position d'ancrage est indiquée par les lignes pointillées sur l'élément et les points d'ancrage dans le panneau Inspecteur (sous Position). Vous pouvez cliquer sur les points d'ancrage dans l'Inspecteur pour les sélectionner ou les supprimer.
Standardiser les unités de marge
Les marges définissent l'espace entre un élément et son côté ancré. En utilisant différentes unités (ex. pourcentage vs. pixels) pour les marges peut entraîner un désalignement des éléments lorsque la taille de l'écran change.
Ouvrez le panneau Inspecteur et faites défiler jusqu'à Position pour voir les marges actuelles de l'élément. Pour passer à une autre unité de marge, sélectionnez la marge concernée, puis cliquez sur l'unité actuelle (ex. px, %).
Vérifier la relation entre les éléments
Tout d'abord, vérifiez
le panneau Calques pour confirmer que les éléments sont dans le même conteneur parent (ex. section, cellule, etc.). S'ils le sont, mais qu'aucune relation n'est définie entre eux, les éléments agiront indépendamment et pourront se chevaucher.
Empiler les éléments verticalement ou horizontalement peut résoudre ce problème, car la pile garantit un alignement cohérent sur les tailles d'écran.
Superposer des éléments sur les points de rupture
Lorsque vous organisez des éléments, ils peuvent être espacés directement dans l'Éditeur, mais se chevauchent lorsque vous consultez le site en ligne sur différentes zones d'affichage. Le chevauchement se produit généralement en raison de la façon dont les éléments sont positionnés ou de leur comportement responsive.
Si des éléments du site de votre client se chevauchent sur différentes tailles d'écran, suivez ces étapes pour identifier et corriger le problème.
Vérifier le positionnement et l'ancrage des éléments
Lorsque les éléments sont positionnés indépendamment dans le même conteneur parent, ils peuvent se chevaucher lorsque la taille de l'écran change. Vérifiez les paramètres d'ancrage et les unités de positionnement pour assurer la cohérence.
Cliquez sur chaque élément (ex. titre, paragraphe, bouton) et vérifiez comment il est ancré dans le panneau Inspecteur. Recherchez les différences dans l'ancrage et les marges des éléments (ex. mélange de pourcentages et de pixels).
Si un élément utilise une marge en pourcentage et qu'un autre utilise une marge en pixel fixe, leurs emplacements se déplaceront différemment au fur et à mesure que le conteneur parent se redimensionne.
Ajuster le comportement responsive des éléments
Le chevauchement peut également se produire si les éléments se comportent différemment lors du redimensionnement de l'écran. Par exemple, un élément peut être mis à l'échelle proportionnellement, un autre peut être renvoyé à la ligne et un troisième peut rester fixe.
Sélectionnez chaque élément et vérifiez son
comportement responsive dans le panneau Inspecteur. Recherchez les éléments avec des comportements non correspondants, car ils peuvent entraîner le chevauchement.
Vérifier la relation entre les éléments
Tout d'abord, vérifiez
le panneau Calques pour confirmer que les éléments sont dans le même conteneur parent (ex. section, cellule, etc.). S'ils le sont, mais qu'aucune relation n'est définie entre eux, les éléments agiront indépendamment et pourront se chevaucher.
Empiler les éléments verticalement ou horizontalement peut résoudre ce problème, car la pile maintient un espacement cohérent entre les éléments.
