Tailles d'écran et appareils

Il y a des moments où vous devez contourner un point d'arrêt. Par exemple, sur le point d'arrêt principal, une image se trouve à droite d'un paragraphe, mais sur mobile, vous devez placer l'image en haut et le paragraphe en dessous.

Les modifications que vous pouvez apporter à un élément et remplacer le point d'arrêt principal sont les suivantes :

Une fois que vous avez modifié un point d'arrêt, vous ne pouvez pas annuler la modification en modifiant le style du point d'arrêt principal du même objet.

Vous pouvez masquer certains éléments sur des points d'arrêt spécifiques depuis le panneau des calques ou depuis le menu flottant de l'élément. Par exemple, vous pouvez masquer une image sur les appareils mobiles sans que cela n'affecte les autres points d'arrêt

Pour masquer un élément sur un point d'arrêt spécifique :

Presque tout ce qui se trouve dans l'éditeur, à l'exception de l'en-tête et du pied de page, peut être modifié pour chaque appareil en rendant le contenu spécifique à cet appareil.

Pour modifier le contenu par appareil, procédez comme suit :

contenu masqué peut toujours apparaître dans le code du site en ligne (après la publication/la republication). Cela est attendu et est dû à la technologie utilisée. Lorsque vous masquez un widget, une section ou tout autre contenu dans l'éditeur d'un appareil spécifique, nous le masquons à l'aide de CSS Media Queries. Cela signifie que le code HTML (bien que masqué sur le site Web) existe toujours dans la page Web lorsqu'un utilisateur consulte le contenu. Cela peut parfois entraîner un problème lorsqu'un outil d'audit qui analyse le site Web identifie ce contenu caché, même si vous pensiez qu'il avait été supprimé de la page.

Les sites Web réactifs fonctionnent sur ordinateur, tablette et mobile. Pour cette raison, notre éditeur réactif vous permet de prévisualiser le site dans chacune de ces vues lors de la modification. Cela vous permet de vérifier l'apparence de votre site sur différents appareils avant de le publier, afin de garantir une expérience positive à vos clients, quel que soit l'appareil qu'ils utilisent pour consulter le site.

Pour changer d'affichage de l'appareil, cliquez sur l'un des boutons de l'appareil dans la barre de navigation supérieure :

Les différentes vues de l'appareil ne constituent pas des versions distinctes de votre site. La suppression d'un élément dans une vue (par exemple, mobile) supprime cet élément de l'ensemble du site (ordinateur de bureau, tablette et mobile). Au lieu de le supprimer, cliquez avec le bouton droit de la souris sur l'élément et choisissez de le masquer sur un appareil spécifique.

Les aperçus des appareils ne reflètent pas toujours exactement ce que vous voyez sur un appareil réel. Des fonctionnalités telles que les polices, la taille de la fenêtre de l'appareil, l'interface utilisateur et le comportement du navigateur peuvent rendre ces aperçus inexacts à des degrés divers. Pour obtenir la version la plus précise du site, vérifiez sur un appareil réel.

Les modifications apportées à un appareil apparaissent sur tous les appareils. Par exemple, lorsqu'une ligne est supprimée dans la vue tablette de votre site, elle est également absente dans les vues pour ordinateur et mobile de votre site. En effet, le contenu peut être partagé sur tous les appareils. Cependant, vous souhaiterez peut-être différencier le contenu qui s'affiche sur les différents appareils. Pour ce faire, vous pouvez utiliser nos fonctionnalités de modification par appareil et proposer à vos visiteurs un contenu adapté à l'appareil depuis lequel ils accèdent à votre site.

Lorsque vous apportez des modifications à un appareil spécifique, il est souvent nécessaire de changer de vue. Pour plus d'informations, voirChanger de vues.

En raison deSortie d'Apple pour iPad (iPadOS), les iPad affichent la même vue que les ordinateurs de bureau. Cependant, vous pouvez passer à une mise en page réactive pour ordinateur de bureau et tablette pour vous assurer que toutes les personnalisations sont visibles sur

mise en page réactive affiche l'en-tête de navigation supérieur sur les ordinateurs de bureau plus grands et passe automatiquement à l'en-tête du menu hamburger lorsque la taille de l'écran est inférieure ou égale à 1024 pixels. La disposition du petit écran peut être personnalisée, si nécessaire.

Pour utiliser des mises en page de site réactives :

Une fois que vous êtes passé à des mises en page de site réactives, vous pouvez changer d'affichage dans la navigation supérieure pour afficher Grand bureau (au-dessus de 1024 pixels), Petit ordinateur de bureau/tablette (1024 pixels et moins) et Mobile. Pour plus d'informations, voirChanger de vues.