Cet article explique comment créer des conceptions Web réactives dans Shopify à l'aide de GemPages, en intégrant des fonctionnalités des versions 6 et 7 pour optimiser votre boutique pour les ordinateurs de bureau, les tablettes et les appareils mobiles.
Qu'est-ce que la conception Web réactive dans Shopify ?
Conception Web réactive de Shopify L'agencement de votre boutique s'adapte automatiquement à toutes les tailles d'écran, des ordinateurs aux tablettes et smartphones. Il ne s'agit pas seulement de redimensionner le texte ou les images, mais de créer des expériences flexibles et conviviales qui stimulent l'engagement et la conversion.
Que vous recherchiez des mises en page axées sur le mobile, vues réactives, ou une meilleure convivialité sur tous les appareils, ce guide vous expliquera comment rendre une page réactive en utilisant GemPages.
Comment GemPages prend en charge la conception réactive ?
GemPages fournit des outils pour aider les utilisateurs à optimiser leurs pages pour les appareils mobiles et les tablettes, tels que les paramètres réactifs et la visibilité des éléments. De cette façon, vous pouvez créer des pages spécialement conçues pour les utilisateurs mobiles, garantissant une expérience positive aux clients qui visitent votre boutique sur leurs appareils.
GemPages Version 7
Dans la version 7 de GemPages, la conception Web réactive a été améliorée avec des outils conviviaux et faciles à utiliser, vous permettant de créer et d'optimiser des pages pour différentes tailles d'écran. Le nouvel éditeur offre des paramètres flexibles pour les éléments, vous permettant de personnaliser de manière transparente les conceptions pour les vues de bureau, de tablette et mobile.
Créer une mise en page réactive à l'aide de l'élément Row
Pour créer une mise en page pour une page, vous devrez utiliser le Élément de ligne. Il joue un rôle essentiel dans GemPages en fournissant une base pour la conception de votre page. Sa fonction principale est de contenir des éléments et de s'adapter de manière réactive à différentes tailles d'écran sur différents appareils. Suivez les étapes ci-dessous pour ajouter une ligne à votre page afin de créer une mise en page réactive.
Étape 1 : Dans l' Tableau de bord GemPages, cliquez sur le bouton « Modifier » sur l’une de vos pages et entrez dans l’éditeur.
Étape 2 : Accédez à la barre latérale gauche et localisez la ligne sous la section Disposition. Vous pouvez ensuite faire glisser et déposer l'élément à l'emplacement souhaité.
Étape 3 : Accédez à la barre latérale gauche et sélectionnez l'onglet Paramètres. Pour personnaliser la mise en page pour tablette ou mobile, cliquez sur l'icône Bureau et choisissez l'icône correspondante.
Ajuster les paramètres des éléments réactifs
GemPages propose une variété d'éléments réactifs que vous pouvez utiliser pour créer des pages et des sections personnalisées. Ces éléments incluent des titres, des images, du texte, etc. Lors de la conception de vos pages, assurez-vous d'utiliser ces éléments réactifs pour garantir que votre contenu s'affiche parfaitement sur n'importe quel appareil.
Vous pouvez basculer entre les appareils en cliquant sur l'icône Bureau à côté des paramètres. Cependant, vous ne pouvez modifier les paramètres de réactivité que pour le composant doté de cette icône.
Afficher ou masquer les éléments par appareil
Pour afficher ou masquer un élément sur les trois types d'appareils, accédez à l'onglet Avancé et utilisez le commutateur dans la section Visibilité. N'oubliez pas que vous devez avoir au moins un type d'écran activé.
Soyez prudent lorsque vous utilisez cette fonctionnalité, car tous les éléments cachés continueront de se charger en arrière-plan, ce qui pourrait affecter la vitesse de chargement de votre page.
Prévisualisez votre conception sur tous les appareils
Une fois que vous avez terminé de créer vos pages, il est important de vérifier votre conception finale sur différents appareils. Dans la barre supérieure de votre éditeur, vous pouvez sélectionner un appareil pour afficher son interface, notamment un ordinateur de bureau, une tablette et un appareil mobile. Cela vous aidera à identifier les problèmes de mise en page ou de contenu susceptibles d'avoir un impact sur l'expérience utilisateur. Vous pouvez également développer l'éditeur pour afficher le visuel sur la taille réelle de l'écran.
GemPages Version 6
S'appuyant sur les éléments établis dans la version 7, GemPages version 6 propose également de puissantes fonctionnalités pour la conception de sites Web réactifs. Bien que les outils puissent différer légèrement, vous pouvez toujours créer des pages Web optimisées pour n'importe quel appareil. Il est recommandé de procéder d'abord à la modification en mode bureau, puis d'ajuster pour les appareils mobiles afin de garantir une expérience transparente sur tous les appareils.
Lorsque vous passez à d'autres vues, vous verrez également une notification contextuelle vous rappelant de concevoir d'abord à l'aide de la vue Bureau, puis d'affiner la page à l'aide d'autres vues ultérieurement.
Activer la conception Web réactive
Seules les modifications apportées à la vue Bureau seront appliquées aux interfaces des quatre appareils. Nous vous recommandons donc de commencer par concevoir avec la vue Bureau, puis d'effectuer les ajustements nécessaires aux autres vues.
Lorsque vous passez à d'autres vues, vous verrez également une notification contextuelle vous rappelant de concevoir d'abord à l'aide de la vue Bureau, puis d'affiner la page à l'aide d'autres vues ultérieurement.
Étape 1 : Rendez-vous dans la section Tableau de bord GemPages et entrez dans l'une de vos pages en utilisant le bouton « Modifier ».
Étape 2 : Dans l' Éditeur, il existe deux méthodes pour commencer à auditer votre conception réactive :
Méthode 1: Sélectionnez une icône d’appareil dans la barre supérieure.
Méthode 2: Cliquez sur l'élément à modifier et recherchez l'icône Bureau en haut à droite. Cliquez dessus et sélectionnez l'appareil sur lequel vous souhaitez basculer.
Effectuez tous les ajustements nécessaires. Voici quelques conseils.
Étape 3 : Cliquez à nouveau sur "Sauvegarder" et "Publier" une fois que vous avez terminé de mettre à jour les modifications apportées à votre boutique.
Utilisez l'élément Row pour créer des sections
En tant qu'élément de base, Rangée est souvent utilisé pour créer des sections grâce à sa nature réactive. Il peut s'ajuster automatiquement ainsi que les éléments imbriqués à différents appareils.
Suivez ces étapes ci-dessous pour créer une section à l’aide de l’élément Row.
Étape 1 : Dans l' Tableau de bord GemPages, cliquez sur le bouton « Modifier » sur l’une de vos pages et entrez dans l’éditeur.
Étape 2 : Recherchez l'élément Row, puis faites-en glisser un sur votre page
Étape 3 : Vérifiez l'onglet Paramètres affiché dans la barre latérale gauche. Sélectionnez la disposition souhaitée pour la ligne dans la vue Bureau.
Vous pouvez ajuster manuellement la disposition des quatre vues en cliquant sur «Plus de paramètres" et en faisant glisser le curseur jaune pour la vue correspondante.
Étape 4 : Faites glisser et déposez d’autres éléments à l’intérieur de la ligne et configurez-les à l’aide des onglets Paramètres et Conception.
Étape 5 : Cliquez à nouveau sur "Sauvegarder" et "Publier" une fois que vous avez terminé, apportez vos modifications à la boutique en direct.
Ajuster la marge et le remplissage
La marge est l'espace entre les bordures d'un élément et celles des autres.
Le remplissage est l'espace à l'intérieur de l'élément.
Ces deux paramètres vous permettent de positionner judicieusement chacun de vos éléments à l'endroit exact. Les paramètres de marge et de remplissage se trouvent dans l'onglet Conception de n'importe quel élément, sous la section Espacement.
Afficher ou masquer des éléments
Les éléments masqués seront toujours chargés en arrière-plan ; nous vous conseillons donc de ne pas abuser de cette fonctionnalité. Dans l'onglet Conception de chaque élément, accédez à la section Visibilité. Vous pouvez alors utiliser le bouton pour afficher/masquer l'élément sur les quatre types d'appareils.
Un design web adaptatif est essentiel pour optimiser l'affichage de votre boutique sur un maximum d'appareils et garantir une expérience client positive. Le plus intéressant, c'est que tout cela est facile à réaliser avec GemPages, avec très peu, voire aucun codage supplémentaire.
Questions fréquentes
1. Qu'est-ce qu'une mise en page réactive dans Shopify ?
Une mise en page réactive garantit que vos pages Shopify s'affichent parfaitement sur toutes les tailles d'écran, des grands ordinateurs de bureau aux tablettes et téléphones plus petits.
2. Comment rendre une page responsive sur Shopify ?
Utilisez un générateur de pages comme GemPages pour :
- Structurer le contenu à l'aide de lignes.
- Personnaliser les mises en page par vue d'appareil
- Ajuster les marges, les remplissages et la visibilité en fonction de la taille de l'écran
3. Comment télécharger une mise en page réactive pour Shopify ?
Vous ne le téléchargez pas, vous le créez directement dans votre outil de création de pages Shopify. Dans GemPages, cela se fait visuellement par glisser-déposer et en adaptant les paramètres à chaque élément.
4. GemPages prend-il en charge la conception Web sur tablette ?
Oui ! Vous pouvez entièrement personnaliser votre design pour l'affichage sur tablette, séparément dans les versions 6 et 7.
5. Puis-je contrôler la disposition en fonction des dimensions du bureau ?
Absolument. Vous pouvez concevoir aux dimensions d'un ordinateur de bureau, puis adapter aux tablettes et aux appareils mobiles, garantissant ainsi une expérience véritablement réactive.
Merci pour vos commentaires