Adapter votre site aux téléphones et aux tablettes
Voyez le rendu de votre boutique sur tablette et sur téléphone, masquez des blocs sur les petits écrans et ajustez la position d’un bloc pour une seule taille d’écran.
La plupart des clients visitent une boutique depuis un téléphone : vos pages doivent donc fonctionner à toutes les tailles. Vous concevez votre site une seule fois, et Payly adapte la page aux tablettes et aux téléphones. Cet article explique ce qui se passe automatiquement et comment modifier le comportement d’un bloc sur un écran plus petit.
Comment votre mise en page s’adapte
Les blocs se placent dans les cellules d’une grille de 12 colonnes, jamais à des positions fixes en pixels : ils ne peuvent donc pas se chevaucher sur un petit écran. La page change de mise en page à deux seuils :
- Les tablettes (écrans de moins de 1024 pixels de large) gardent la même grille. Un bloc reste à sa place, sauf si vous le déplacez pour les tablettes.
- Les téléphones (760 pixels ou moins) placent chaque bloc sur sa propre ligne, en pleine largeur. Les blocs s’empilent de haut en bas dans l’ordre où vous les lisez sur ordinateur : de haut en bas, puis de gauche à droite.
Certains blocs s’adaptent encore davantage. Les liens de l’en-tête se replient derrière un bouton de menu, les grilles passent sur une seule colonne, et les galeries et les bandeaux de logos s’affichent sur deux colonnes. Vous obtenez ainsi une boutique qui fonctionne sur téléphone sans aucune configuration supplémentaire.
Passer d’une taille d’écran à l’autre
- Dans la barre supérieure de l’éditeur, cliquez sur Tablette ou Mobile. La page se rétrécit pour montrer son rendu à cette taille.
- Parcourez la page à la recherche de tout ce qui se lit mal. Faites défiler et sélectionnez les blocs comme d’habitude.
- Cliquez sur Ordinateur pour revenir à la mise en page en taille réelle.
Ces boutons ne servent pas qu’à l’aperçu. Ils déterminent aussi la mise en page que vous modifiez. Lorsque vous passez sur Tablette ou Mobile, un message vous rappelle que les modifications s’appliquent à cette taille uniquement. Tout ce que vous y changez n’affecte pas la mise en page sur ordinateur.
Masquer un bloc sur les petits écrans
Une grande photo ou un long bloc décoratif peut encombrer un téléphone. Vous pouvez le masquer sur les petits écrans et le conserver sur ordinateur.
- Cliquez sur Mobile (ou Tablette) dans la barre supérieure.
- Sélectionnez le bloc.
- Dans le panneau de réglages, ouvrez Taille et position.
- Activez Masquer sur mobile (ou Masquer sur tablette). Le bloc disparaît de cette vue et ne laisse aucun espace vide sur la page en ligne.
Un bloc masqué sur tablette l’est aussi sur téléphone, sauf si vous désactivez de nouveau l’interrupteur dans la vue Mobile. Pour masquer un bloc sur tous les écrans, utilisez Masquer ce bloc sur Ordinateur.
Placer un bloc différemment sur une seule taille
- Choisissez Tablette ou Mobile dans la barre supérieure.
- Sélectionnez le bloc et ouvrez Taille et position.
- Modifiez Commence à la colonne, Largeur en colonnes, Commence à la ligne ou Hauteur en lignes, ou cliquez sur Occuper toute la largeur. Vous pouvez aussi faire glisser et redimensionner le bloc directement sur la page.
La barre en haut de Taille et position indique la mise en page que vous modifiez. Elle affiche Hérité tant que le bloc suit la taille supérieure, et un bouton Réinitialiser dès que le bloc a ses propres réglages. Cliquez sur Réinitialiser pour que le bloc suive de nouveau la taille supérieure. Cliquez sur Utiliser cette mise en page sur tous les écrans pour copier la mise en page actuelle sur toutes les tailles.
La barre supérieure compte aussi les blocs qui diffèrent de la mise en page sur ordinateur, par exemple 1 bloc diffère sur mobile. Cliquez sur ce compteur pour passer d’un de ces blocs au suivant.
Garder un bloc identique sur tous les écrans
Activez Identique sur tous les écrans dans Taille et position pour donner à un bloc une seule mise en page partout. Les réglages qu’il avait pour la tablette ou le téléphone sont supprimés, et les modifications ultérieures s’appliquent à toutes les tailles à la fois.
Remarque : déplacer un bloc vers une autre section le change sur toutes les tailles d’écran : Payly ne le permet donc que sur Ordinateur. Pour placer un bloc différemment sur téléphone, ajoutez-le aux deux sections et masquez celui que vous ne voulez pas sur chaque taille.
Vérifier le résultat
Utilisez Aperçu pour parcourir vos pages aux largeurs d’un téléphone et d’une tablette, et consultez la boutique publiée sur un vrai téléphone avant de l’annoncer. Consultez Prévisualiser votre site avant de le publier.