Le blog Dr Tech

Responsive : appliquer différents paramètres sur différents écrans

par | 9 Déc, 2020 | Aller plus loin : personnalisez votre Thème

Dans ce tutoriel, nous allons voir une façon très facile d’appliquer différents paramétres en fonction des écrans.

Par exemple, vous voulez qu’une image soit aligné à droite sur ordinateur, mais qu’elle soit centré sur mobile. Ou encore, vous voulez qu’un texte s’affiche en bleu sur ordinateur, et en rouge sur mobile, ou si vous souhaitez mettre une police plus petite sur mobile … 

Tout ça 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érentes paramétres de style en fonction des écrans. 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 permetre 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”

A coté de la plupart des options, vous avez un petit icone téléphone. En cliquant dessus, vous verrez apparaitre 3 nouvelles options : ordinateur, tablette, et téléphone 

Ainsi, vous pourrez mettre des paramétres différents pour chaque écran! 

Petit exemple avec la taille de la police sur ma boutique : 

2. Dupliquer les éléments

1. Vous avez votre élément initial (pour moi ma ligne, verte)

2. Dupliquez cette élément : vous pouvez cliquez sur le 3e icone en partant de la gauche, celui qui ressemble à 2 réctangles.

3. Désactiver l’élément que vous ne voulez que afficher sur ordinateur et tablette : pour ceci, faites simplement un clic droit sur l’élément, puis désactiver, et cliquez sur l’icone du téléphone.

4. Désactiver l’élément que vous ne voulez afficher que sur téléphone : de même, faites simplement un clic droit sur l’élément, puis désactiver, et cliquez sur l’icone ordinateur et tablette.

Et voilà ! 

Vous pouvez maintenant appliquer vos différents paramétres à vos éléments, en fonction de l’écran, seulement l’élément actif sur l’écran correspondant s’affichera.

Derniers articles :

Inscrivez-vous à notre newsletter

Recevez nos prochains guides et tous nos conseils pour développer votre activité eCommerce !

Créer votre boutique avec Dr Tech

Z

+100 Applications & +200 thèmes gratuits

Z

0% Commission sur vos ventes

Z

Thème 100% personnalisable

Z

14 jours d’essai gratuit

Aller plus loin

17 idées de box par abonnement à lancer en 2023

17 idées de box par abonnement à lancer en 2023

Découvrez 17 idées de box par abonnement à lancer en 2023 ! Cet article explore des domaines tels que les comics, les produits pour enfants, le café et le thé, la santé et la remise en forme, la culture geek et bien plus encore.

Les 7 étapes pour créer votre business plan

Les 7 étapes pour créer votre business plan

Vous ne savez pas par où commencer pour créer un business plan ? Pas de panique, nous avons rédigé cet article pour vous guider étape par étape dans la création de votre business plan! Vous comprendrez les éléments clés d'un business plan pour votre entreprise, tels...

Comment pré-lancer sa box par abonnement

Comment pré-lancer sa box par abonnement

Découvrez comment pré-lancer votre box par abonnement avec succès! Construisez et fidélisez votre communauté, travaillez avec des influenceurs et bien plus.

4 facteurs pour fixer le prix de sa box par abonnement

4 facteurs pour fixer le prix de sa box par abonnement

Nous allons vous aider à comprendre comment fixer le prix de votre box d’abonnement. Nous aborderons les différentes offres marketing disponibles et vous guiderons dans le choix de celle qui conviendra le mieux à votre marque.

Rejoignez notre Newsletter

Recevez nos prochains guides et tous nos conseils pour développer votre activité eCommerce !