Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Empilement des blocs sur mobile

Pour que votre site reste lisible et pour éviter aux visiteurs d’avoir à zoomer en avant et en arrière et à faire défiler les pages pour voir votre contenu, le design adaptatif de Squarespace empile automatiquement les blocs à la verticale sur les appareils mobiles.

Si les blocs ne s’empilent pas comme vous le souhaitez, vous pouvez déplacer les blocs à l’aide des scénarios présentés dans ce guide et dans la vidéo. Expérimenter et prévisualiser votre site est la meilleure façon d’affiner votre mise en page jusqu’à ce que vous obteniez un design que vous aimez et qui soit superbe sur tous les appareils.

Regarder une vidéo

La vidéo montre un site de la version 7.0, mais les blocs et les colonnes se comportent de la même manière sur les sites de la version 7.1.

Disposition en colonnes en vue mobile

Lorsque les blocs sont empilés verticalement et occupent toute la largeur d’une page (sans aucun bloc de chaque côté), ils s’empilent également verticalement sur les appareils mobiles, conservant ainsi la disposition de la page telle qu’elle apparaît sur ordinateur.

L’ajout de blocs à gauche ou à droite d’autres blocs crée des colonnes. Lorsqu’une page comporte des colonnes, Squarespace déplace la deuxième, la troisième et toute colonne supplémentaire au-dessous de la première sur les appareils mobiles. En d’autres termes, les colonnes passent d’un alignement horizontal à vertical sur mobile.

Par exemple :

  • Si vous avez trois blocs d’images dans une rangée horizontale, ils s’empileront les uns sur les autres de gauche à droite sur les appareils mobiles.
  • Si vous avez trois blocs d’images à la suite avec des blocs de texte sous chacun d’eux qui décrivent chaque image, chaque bloc d’images aura son bloc de texte associé empilé en dessous de lui en vue mobile, suivi de l’image suivante. Regardez la vidéo ci-dessus pour voir comment cela fonctionne.

Tenez compte des exceptions suivantes :

  • Les blocs Espaceur sont automatiquement masqués sur les appareils mobiles pour tous les sites de la version 7.1 et la plupart des sites de la version 7.0.
  • Les blocs flottant dans un bloc Texte (par exemple, les images enveloppées dans du texte) s’affichent au-dessus du bloc Texte en vue mobile. Si un bloc n’apparaît pas correctement au-dessus du texte en vue mobile, déplacez le bloc pour vous assurer qu’il ne flotte pas dans le texte.

Des dispositions plus complexes en vue mobile

Si votre disposition comporte des zones avec des colonnes de différentes tailles, vous pouvez toujours modifier la façon dont les blocs s’organisent en vue mobile.

Lorsque vous ajoutez des blocs, des repères vous indiquent dans quel ordre les blocs vont apparaître. Si un repère s’aligne sur la longueur de deux blocs situés côte à côte, cela indique à Squarespace que les deux blocs doivent être groupés sur tous les écrans.

Pour maintenir un bloc empilé avec un autre bloc, faites glisser le bloc et déposez-le lorsque le repère (la ligne horizontale) fait la longueur de l’autre bloc.

Regardez la vidéo ci-dessus pour voir comment cela fonctionne.

move_text_block_under_image_block.png

Aide supplémentaire

  • Pour obtenir un aperçu de l’affichage de votre site sur mobile, utilisez la fonction Vue par appareil. Étant donné que les sites peuvent avoir une apparence légèrement différente selon l’appareil, nous vous recommandons également de tester son apparence sur votre propre appareil mobile.
  • Pour avoir une meilleure idée de l’apparence de votre site sur mobile, modifiez votre site à partir de l’application Squarespace.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 57 sur 352