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

Changements apportés à la disposition des pages et des blocs sur les appareils mobiles

Les navigateurs mobiles sont plus petits (et généralement plus  étroits) que les fenêtres de bureau. Pour que votre site reste lisible et éviter aux visiteurs de devoir pincer, zoomer et faire défiler pour voir votre contenu, la conception réactive de Squarespace empile automatiquement les blocs verticalement sur les appareils mobiles.

Si les blocs ne sont pas alignés comme vous le souhaitez sur le mobile, vous pouvez les déplacer à l'aide des scénarios de ce guide et de la vidéo.

Regarder une vidéo

Pour voir comment cela fonctionne et pour obtenir des conseils sur la façon de modifier votre disposition pour obtenir le meilleur affichage mobile, regardez cette vidéo :

Test avec la Vue par appareil

Nous vous recommandons de modifier votre site dans la Vue par appareil et de tester son apparence sur votre propre appareil.

Étant donné que la mise en page de chacun est différente, 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. 

Mise en page sur une seule colonne en vue mobile

Lorsque les blocs occupent toute la largeur d'une page (sans aucun bloc de chaque côté), ils s'empilent verticalement sur les appareils mobiles, conservant ainsi la disposition de la page sur le bureau.

Plusieurs colonnes paires en vue mobile

L'ajout de blocs à gauche ou à droite d'autres blocs permet de créer des colonnes sur une page.

Les pages à colonnes multiples sont très bien sur les navigateurs de bureau, mais peuvent être difficiles à lire sur les appareils mobiles. Pour rendre le contenu plus accessible, Squarespace déplacera les deuxième, troisième et autres colonnes en dessous de la première sur les appareils mobiles. En d'autres termes, les colonnes se déplacent de l'horizontale à la verticale sur les appareils mobiles.

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 dans l'ordre sur le mobile.
  • 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.

Des mises en page plus complexes en vue mobile

Avec des mises en page plus complexes où certaines zones ont des colonnes de tailles différentes de celles des autres, vous avez toujours le contrôle sur la façon dont les blocs sont ordonnés sur le mobile.

Lors de l'ajout de blocs, des lignes directrices indiquent l'ordre des blocs. Si un repère exécute la longueur d'un bloc à côté, 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 la ligne directrice (la ligne horizontale) fait la longueur de l'autre bloc.

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

Blocs flottants en vue mobile

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.

Pour en savoir plus sur les blocs flottants dans le texte, visitez la page Déplacement des blocs.

Remarque : s'il n'y a pas assez de texte pour entourer le bloc, celui-ci apparaîtra à côté du texte. Si des blocs apparaissent incorrectement au-dessus du texte en vue mobile, vous pouvez résoudre ce problème en déplaçant le bloc pour vous assurer qu'il ne flotte pas dans le texte.

Blocs Espaceur

Les blocs Espaceur sont automatiquement masqués sur les appareils mobiles pour la plupart des templates.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 54 sur 327
Changements apportés à la disposition des pages et des blocs sur les appareils mobiles