Éditeur Studio : Résoudre les différences entre l'Éditeur et le site en ligne
5 min
Dans cet article
- Faire correspondre les tailles du point de rupture et de la zone d'affichage
- Aligner les unités de marge
- Aligner les comportements responsive
- Vérifier la visibilité de l'élément
Lorsque vous affichez la version publiée d'un site de l'Éditeur studio, vous pouvez remarquer qu'elle est différente de celle de votre Éditeur. Ces différences sont généralement minimes, mais elles peuvent donner l'impression que les éléments sont mal alignés ou coupés.
En général, ces différences sont dues à certains paramètres de l'élément (taille, position et comportements) dans les zones d'affichage. Utilisez les suggestions de cet article pour trouver des solutions potentielles et maintenir la cohérence sur les tailles d’écran.
Vous avez récemment modifié le site ?
Nous vous recommandons de vérifier que vous avez publié toutes vos modifications et que vous consultez la dernière version du site. Vous pouvez également utiliser les outils du navigateur pour vérifier différentes zones d'affichage à partir d'un seul appareil.
Faire correspondre les tailles du point de rupture et de la zone d'affichage
Si le site en ligne ne ressemble pas à ce que vous voyez dans votre Éditeur, cela peut être lié aux points d'arrêt et à la taille de modification.
Les points de rupture sont les variations de tailles d'écran que vous utilisez pour personnaliser le design d'un site pour différents appareils (ex. zones d'affichage). Vous pouvez définir une taille de modification spécifique dans cette plage - par exemple, dans un point de rupture de 320-750 px, vous pouvez configurer la taille de modification sur 500px.
Les zones d'affichage qui se trouvent en dehors de vos plages définies ne sont pas optimisées et peuvent présenter des problèmes d'alignement et de mise en page. Si vous remarquez un problème avec une zone d'affichage spécifique, nous vous recommandons de configurer la taille de modification pour qu'elle corresponde et d'effectuer des ajustements.
Pour paramétrer la taille de votre modification :
- Accédez à la page et au point de rupture dans l'Éditeur.
- Cliquez sur la taille de modification actuelle en haut.
- Saisissez la nouvelle valeur à côté de Taille de modification.
- Cliquez sur Appliquer.
- (Facultatif) Ajustez le site pour qu'il ait l'aspect que vous souhaitez.
Vous rencontrez d'autres problèmes entre les points de rupture ?
Utilisez notre guide pour résoudre les problèmes liés aux éléments mal alignés, à la taille du texte, etc.
Aligner les unités de marge
L'utilisation de différentes unités de marge sur des éléments similaires (éléments qui partagent une section / un conteneur parent) peut entraîner un mauvais alignement ou une déformation du contenu. Nous vous recommandons d'utiliser les mêmes unités de marge (%, px, px*, etc.) pour tous les éléments frères dans un seul conteneur ou section.
Pour modifier les unités de marge d'un élément :
- 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.
- Cliquez sur le menu déroulant à côté de Marges.
- Sélectionnez l'unité concernée.
Aligner les comportements responsive
Les éléments parent et enfant avec des comportements responsives contraires peuvent causer des problèmes avec le contenu du site en ligne.
Imaginons un bouton attaché à un conteneur. Le comportement responsive du bouton est Fixe, et le conteneur est configuré sur Mettre à l'échelle proportionnellement. Étant donné que le bouton est fixe, il ne se redimensionne pas avec son conteneur parent, ce qui peut entraîner des écarts, des éléments qui se chevauchent et des éléments coupées sur le site en ligne. Cela peut également se produire lorsque l'un des éléments a le comportement responsive Mixte.
Afin de résoudre ce problème, nous vous recommandons d'aligner les comportements responsive des éléments.
Pour modifier le comportement responsive d'un élément :
- Sélectionnez le point de rupture correspondant.
- Sélectionnez l'élément.
- Cliquez sur l'icône Ouvrir l'Inspecteur en haut à droite de l'Éditeur.
- Sélectionnez une option dans le menu déroulant Comportement responsive qui s'aligne sur l'élément parent ou enfant.
Remarque :
Ces différences peuvent également affecter la hauteur des éléments, aboutissant à des espaces non nécessaires sur le site. En savoir plus sur la résolution des écarts.
Vérifier la visibilité de l'élément
Vous remarquerez peut-être que vous pouvez voir un élément sur certaines tailles d'écran, mais pas sur d'autres. Cela est généralement dû au fait que l’élément a été masqué de certains points de rupture. Vous pouvez utiliser le panneau Calques pour localiser l'élément et l'afficher sur les fenêtres d'affichage que vous souhaitez.
Pour vérifier la visibilité d'un élément :
- Accédez à votre Éditeur et ouvrez la page correspondante.
- Sélectionnez un points de rupture en haut de votre Éditeur.
- Cliquez sur Calques
à gauche. - Localisez l'élément masqué dans la liste.
- (Facultatif) Cliquez sur l'icône Afficher
.
Remarque :
Les modifications telles que la suppression d'un élément ou son déplacement vers une section/un conteneur différent s'appliquent à tous les points de rupture, quel que soit celui sur lequel vous travaillez. Si vous souhaitez afficher un élément uniquement sur certains points de rupture, vous pouvez le masquer via le menu du clic droit.