Dans ce tutoriel, nous allons voir une façon très facile d’appliquer différents paramètres en fonction des écrans des appareils à partir desquels vos visiteurs verront votre boutique..
Par exemple, vous voulez qu’une image soit alignée à droite sur ordinateur, mais qu’elle soit centrée sur mobile. Ou encore, vous voulez qu’un texte s’affiche en bleu sur ordinateur, et en rouge sur mobile. Enfin, vous souhaitez mettre une police plus petite sur mobile ?
Tout cela est possible très facilement, afin de rendre votre boutique 100% responsive!
Pour ce faire, il y a 2 façons:
1. Utilisez l’option « téléphone » qui vous permettra d’appliquer différents paramètres / styles en fonction des écrans des appareils à partir desquels vos visiteurs se connecteront. Cette façon fonctionne bien pour toutes les options que vous avez dans « Style », aussi bien pour les modules, les lignes ou les rangées.
2. Dupliquer l’éléments en question, sur lequel vous voulez mettre des paramètres différents, pour l’avoir en double puis en désactiver un sur téléphone, et l’autre sur ordinateur et tablette. Cette façon a l’avantage de permettre de vraiment tout modifier; même le contenu des éléments si vous le souhaitez.
Notez que vous pouvez même mettre 3 paramètres différents si vous le souhaitez (ordinateur, tablette et mobile).
1. Option « téléphone »
À coté de la plupart des options, vous avez une petite icône téléphone. En cliquant dessus, vous verrez apparaitre 3 nouvelles options : ordinateur, tablette, et téléphone.
Ainsi, vous pourrez appliquer des paramètres différents pour chaque écran!
Petit exemple avec la taille de la police sur notre boutique :
2. Dupliquer les éléments
1. Vous avez votre élément initial: pour nous la ligne verte.
2. Dupliquez cette élément : vous pouvez cliquez sur le 3ème icône en partant de la gauche, celui qui ressemble à 2 rectangles.
3. Pour désactiver l’élément que vous voulez uniquement afficher sur ordinateur et tablette: faites simplement un clic droit sur l’élément, puis « Désactiver », et cliquez sur l’icône du téléphone.
4. Pour désactiver l’élément que vous voulez afficher uniquement sur téléphone: de même, faites simplement un clic droit sur l’élément, puis « Désactiver », et cliquez sur les icônes de l’ordinateur et de la tablette.
Et voilà !
Vous pouvez maintenant appliquer vos différents paramètres en fonction de l’écran. Seuls les éléments activés sur les écrans correspondants s’afficheront.