Réussi
Comment améliorer l’apparence des bannières sur ordinateur et mobile ?
Utilisez des sections de bannière distinctes et les paramètres de visibilité pour adapter les mises en page aux ordinateurs et aux mobiles.
- Documentation Shopify sur le chargement des images : bonnes pratiques pour les bannières avec images, les ratios et les points focaux
- Documentation Shopify sur la présentation des fonctionnalités de l’éditeur de thème : prévisualiser et comparer les mises en page pour ordinateur et mobile
- Documentation Shopify sur la personnalisation des sections
- Documentation Company XYZ sur les paramètres de visibilité
Commencez par une seule section Banner. Align vous permet d’ajuster le ratio de la bannière et le média d’arrière-plan pour les mobiles. Vous pouvez donc généralement améliorer la mise en page sur les petits écrans sans créer de seconde version.
Ajuster la bannière pour les mobiles
Section intitulée « Ajuster la bannière pour les mobiles »- Ouvrez la section Banner dans l’éditeur de thème.
- Choisissez le ratio et le média d’arrière-plan que vous souhaitez utiliser sur ordinateur.
- Définissez un ratio mobile plus élevé si l’image ou le texte semble à l’étroit sur les petits écrans.
- Ajoutez un média d’arrière-plan spécifique aux mobiles lorsque l’image pour ordinateur est mal recadrée sur mobile.
- Prévisualisez les versions pour ordinateur et mobile avant d’enregistrer.
Pour les outils de prévisualisation, consultez la documentation Shopify sur les fonctionnalités de l’éditeur de thème
Éloignez les textes et les détails importants des images des bords, où le recadrage risque le plus de se produire. Pour obtenir des conseils sur les images, consultez la documentation Shopify sur le chargement des images de thème
Utiliser des bannières distinctes uniquement si nécessaire
Section intitulée « Utiliser des bannières distinctes uniquement si nécessaire »Si la version mobile nécessite un texte, un contenu ou une mise en page sensiblement différente, dupliquez la section Banner. Utilisez les Paramètres de visibilité pour afficher une version sur ordinateur et l’autre sur mobile.