Parfois, un design qui s'affiche parfaitement sur mobile peut ne pas fonctionner de la même manière sur ordinateur. Par exemple, vous pourriez vouloir appliquer un Fond dégradé sur appareils mobiles pour créer un impact visuel plus fort, tout en conservant un Fond d'écran simple pour ordinateur et tablette.
Dans GemPages, vous pouvez y parvenir en dupliquant une section ou un élément et en le contrôlant. paramètres de visibilité de l'appareilCe guide explique comment appliquer un Fond dégradé uniquement sur mobile dans GemPages tout en conservant le design original pour les écrans plus grands.
Qu'est-ce qu'un fond dégradé ?
A fond dégradé Le dégradé est un style d'arrière-plan où deux couleurs ou plus se fondent harmonieusement. Au lieu d'une seule couleur unie, il crée un effet de transition entre les couleurs.
Les fonds dégradés sont couramment utilisés pour :
- Créez des sections plus attrayantes visuellement.
- Mettez en avant les contenus importants comme les bannières principales ou les promotions.
- Améliorer le contraste visuel sur les petits écrans
Quand utiliser un fond dégradé réservé aux mobiles :
Dans de nombreux cas de figure, l'application d'un dégradé uniquement sur mobile peut améliorer l'expérience utilisateur.
Par exemple :
- Fabrication Les sections héros mobiles sont plus attrayantes visuellement.
- Tester et améliorer Lisibilité du texte sur les petits écrans
- La création sections promotionnelles optimisées pour mobile
- Adapter Conception de campagnes optimisées pour les utilisateurs mobiles
Comme les écrans mobiles sont plus petits, les dégradés peuvent contribuer à attirer l'attention et à améliorer la hiérarchie visuelle sans surcharger la mise en page.
Comment appliquer un fond dégradé uniquement sur mobile
Suivez les étapes ci-dessous pour afficher un arrière-plan dégradé uniquement sur les appareils mobiles tout en conservant le fond d'écran d'origine sur ordinateur et tablette.
Étape 1 : Dupliquez la section ou l’élément
Commencez par localiser le section ou élément où vous souhaitez appliquer le dégradé de fond.
Dupliquez ensuite cette section ou cet élément.
Après la duplication, vous aurez maintenant deux versions :
- Le version originale (pour ordinateur et tablette)
- Le version dupliquée (pour mobile)
Les deux versions semblent identiques au premier abord.
Étape 2 : Ajouter le fond dégradé
Ensuite, configurez la version dupliquée pour utiliser un arrière-plan dégradé.
- Sélectionnez le section ou élément dupliqué.
- Ouvrez le Paramètres panneau.
- Accédez à Présentation.
- Choisir Couleur → Dégradé.
- Ajustez les couleurs et la direction du dégradé selon vos préférences de conception.
Pour un guide plus détaillé sur l'utilisation des arrière-plans dégradés, veuillez consulter cet article : Ajouter un arrière-plan dégradé.
À ce stade, vous avez maintenant :
- Une version avec le arrière-plan original
- Une version avec un fond dégradé
Étape 3 : Configurer la visibilité du périphérique
Maintenant, vous devez contrôler quelle version apparaît sur chaque appareil.
Section originale (Ordinateur + Tablette)
Sélectionnez le section originale, puis configurez-le paramètres d'affichage Il n'apparaît donc que sur les grands écrans.
Activer la visibilité pour :
- Bureau
- Tablettes
Désactiver la visibilité pour :
- Mobile
Section dupliquée (mobile uniquement)
Ensuite, sélectionnez le section dupliquée avec un fond dégradé.
Configurez ses paramètres d'affichage comme suit :
Activer la visibilité pour :
- Mobile
Désactiver la visibilité pour :
- Bureau
- Tablettes
Cela garantit que la version dégradée n'apparaît que sur les appareils mobiles.
Étape 4 : Enregistrer et publier la page
Une fois la configuration terminée :
- Cliquez à nouveau sur Enregistrer.
- Publiez ou mettez à jour votre page.
Votre page affichera désormais :
- Le arrière-plan original sur ordinateur et tablette
- Le fond dégradé uniquement sur mobile
Autres personnalisations de design que vous pouvez appliquer avec cette méthode
Cette méthode de duplication spécifique à un appareil peut également s'avérer utile pour d'autres ajustements de conception, tels que :
- Utilisation de différentes images de fond pour mobile
- Ajustement des structures d'espacement et de mise en page
- Affichage des sections mobiles simplifiées
- Création de modèles de campagnes spécifiques aux appareils mobiles
NOTE IMPORTANTE
Cette approche fonctionne par duplication de sections ou d'éléments, ce qui augmente le nombre d'éléments sur la page. Pour cette raison, nous recommandons d'utiliser cette méthode seulement si nécessaireUne duplication excessive peut rendre les pages plus difficiles à maintenir et à gérer. Dans la mesure du possible, essayez d'utiliser paramètres réactifs avant de créer des sections en double.
Merci pour vos commentaires