Modifier séparément la mise en page mobile et tablette
Utilisez le sélecteur d'appareil dans la barre supérieure de l'éditeur (téléphone, tablette, ordinateur). Toute modification faite dans l'onglet Styles pendant qu'un appareil est sélectionné ne s'applique qu'à cette taille d'écran; les réglages de bloc comme « Nombre d'articles en mobile » définissent les colonnes par appareil.
Étapes
- Ouvrez Boutique en ligne → Paramètres du thème ou votre landing page. Dans la barre supérieure, cliquez sur l'icône téléphone (cadre de 768 px) ou tablette (cadre de 991 px). L'icône ordinateur revient à la pleine largeur; un bouton plein écran agrandit le canevas.
- Cliquez sur un bloc, ouvrez l'icône crayon → Styles, et ajustez l'espacement, les dimensions, la typographie ou la position. L'indication « Appliqué sur » confirme que la modification s'applique à Mobile (jusqu'à 768 px) ou Tablette (jusqu'à 991 px).
- Pour les grilles, utilisez plutôt l'onglet Paramètres du bloc: le design 3 de Liste des produits, les designs 4 et 5 du Slider et Témoignages proposent Nombre d'articles dans la grille / en mobile / sur Tablet.
- Sur un bloc Packs produits, activez Conserver la vue bureau sur mobile si vous voulez que les paliers d'offre gardent leur disposition ordinateur sur téléphone.
- Revenez sur ordinateur et vérifiez que rien n'a changé, puis cliquez sur Enregistrer et confirmez que la page est Publié.
Remarque: certaines landing pages plus anciennes sont figées sur le cadre mobile de 768 px et ne peuvent pas passer en mode ordinateur ou plein écran.
Problèmes courants
- J'ai changé l'espacement sur ordinateur et la page mobile s'est cassée → chaque appareil a ses propres styles; sélectionnez le cadre téléphone et corrigez-y.
- Je ne peux pas passer en mode ordinateur sur une landing page → c'est l'une des anciennes landing pages; celles-ci sont uniquement mobiles.
- Trop de colonnes de produits sur téléphone → sélectionnez le bloc Liste des produits et baissez Nombre d'articles en mobile (design 3), ou choisissez ce design depuis l'onglet Variantes.
- L'éditeur paraît correct mais mon vrai téléphone diffère → cliquez sur Aperçu dans la barre supérieure et ouvrez la page en ligne sur votre téléphone; vérifiez que vous avez d'abord cliqué sur Enregistrer.
Voir aussi
- Styliser un bloc : espacement, arrière-plan, bordure, ombre, animation
- Ouvrir l'éditeur de thème et s'y repérer
- Comment configurer votre page d'accueil : bannière, sliders et grilles de produits