Comment agrandir les images sur un appareil mobile sans affecter la version de bureau

La méthode suivante crée essentiellement éléments d'image séparés pour les vues de bureau et mobiles, vous permettant de personnaliser chaque élément indépendamment. Pour plus d'informations, consultez cet article.

Étape 1 : Dupliquer la section Image

• Dans l'éditeur GemPages, recherchez l'image que vous souhaitez modifier.
• Cliquez sur l'image pour la sélectionner.
• Utilisez le bouton Dupliquer fonction permettant de créer une copie de cette image. Ce duplicata sera utilisé pour la version mobile.

Étape 2 : Configurer les paramètres de visibilité

Pour la section originale (bureau)

• Sélectionnez l'image d'origine et accédez à l' Avancé onglet dans la barre latérale gauche. 
• En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Afficher sur section, désactiver le Tablettes et Mobile vues.

Ce paramètre rendra la section visible uniquement sur les appareils de bureau.

Pour la section dupliquée (mobile)

• Sélectionnez l'image dupliquée et accédez à l' Avancé onglet dans la barre latérale gauche. 
• En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Afficher sur section, désactiver le Bureau et Tablettes vues.

Cette configuration assure la section apparaît exclusivement sur les appareils mobiles.

• Une fois terminé, l'image sera masquée de l'éditeur car vous êtes actuellement dans le Bureau vue. Dans le coin gauche de la barre supérieure, basculez la vue vers Mobile.

Étape 3 : Ajuster la taille de l'image pour le mobile

• Une fois passé à l'éditeur de vue mobile, cliquez sur l'image pour accéder à ses paramètres et faites défiler jusqu'à l' Taille .

• Vous pouvez sélectionner le Cadre métallique robuste et augmentez le Largeur hauteur valeurs de votre image dans la vue Mobile aux dimensions souhaitées.

Pour plus de détails sur la modification de la taille de l'image, veuillez vous référer à cet article.

Étape 4 : prévisualiser et tester

• Utilisez les icônes d'aperçu de l'appareil en haut de l'éditeur GemPages pour basculer entre les vues de bureau et mobile.

• Assurez-vous que l'image s'affiche correctement sur les deux versions : la taille d'origine sur ordinateur et la taille agrandie sur mobile.
• Apportez les ajustements nécessaires à rembourrage, marges, ou d'autres paramètres de style pour obtenir l'apparence souhaitée sur chaque appareil.

Pour plus d'informations sur web design réactif et les paramètres de visibilité dans GemPages, reportez-vous à cet article.