Empilement des blocs sur mobile dans l’éditeur classique

Assurez-vous que les blocs apparaissent dans le bon ordre sur les appareils mobiles lorsque vous utilisez l’éditeur classique.

Dernière mise à jour le 8 août 2024

Dans l’éditeur classique, le design réactif de Squarespace empile automatiquement les blocs à la verticale sur les appareils mobiles. Cela permet de préserver la lisibilité de votre site et d’éviter aux visiteurs d’avoir à pincer, zoomer et faire défiler pour naviguer dans votre contenu.

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 disposition jusqu’à ce que vous obteniez un design que vous aimez et qui soit superbe sur tous les appareils.

Accéder à cette fonctionnalité

Ce guide traite du comportement mobile des blocs ajoutés dans l’éditeur classique, qui est utilisé sur tous les sites qui utilisent la version 7.0 et certaines zones des sites qui utilisent la version 7.1. Si vous utilisez Fluid Engine, organisez la disposition de votre ordinateur et de votre appareil mobile indépendamment. Si vous ne savez pas quel éditeur utilise une partie de votre site, consultez Fluid Engine, la toute dernière expérience d’édition de contenu de Squarespace.

Regarder une vidéo

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 Image 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 Image à la suite avec des blocs Texte sous chacun d’eux qui décrivent chaque image, chaque bloc Image aura son bloc 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, des 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.
Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

Empilement des blocs sur mobile dans l’éditeur classique