Comment créer une grille à 5 colonnes avec un élément de ligne ou de carrousel

Pourquoi créer une grille à 5 colonnes sur votre page ?

Une mise en page claire et attrayante est essentielle pour présenter les produits et générer des conversions.

La grille à 5 colonnes vous offre plus de flexibilité, notamment lorsque vous souhaitez :

• Maximiser la visibilité du produit:Affichez plusieurs produits, fonctionnalités ou catégories sur une seule ligne pour une vue d'ensemble plus large.
• Améliorez l'expérience utilisateur:Permettez aux clients de voir plus d'articles à la fois, ce qui les aide à prendre des décisions d'achat plus rapides.

Avec la dernière mise à jour de GemPages v7, vous pouvez désormais configurer une grille à 5 colonnes plus facilement et avec de meilleures options de personnalisation.

Comment créer une grille à 5 colonnes dans GemPages ?

Dans GemPages v7, il est facile de concevoir une mise en page en grille à 5 colonnes sur votre page à l'aide de Rangée Élément ou la Carousel Élément.

Tout d’abord, vous devez localiser l’éditeur :

• Depuis votre interface administrateur Shopify, accédez à l' Générateur de pages GemPages application sous le Apps .
• Allez dans Pages, où vous pourrez retrouver toutes vos pages construites avec GemPages.
• Cliquez sur la page cible pour entrer dans l'éditeur.

Si vous préférez concevoir un nouveau modèle, cliquez sur Créer une nouvelle page.

Reportez-vous à cet article pour plus d'instructions sur la création d'une nouvelle page avec GemPages.

Méthode 1 : utiliser l'élément Row

Suivez ces étapes pour créer la disposition de grille à 5 colonnes avec l'élément Row de GemPages.

Étape 1 : Depuis la barre latérale gauche, faites glisser et déposez le Élément de ligne à n'importe quelle position sur votre page.

Étape 2 : Cliquez sur l'élément pour ouvrir son panneau de configuration. Sous Mise En Page section, sélectionnez la disposition à 5 colonnes.

Étape 3 : Personnalisez la mise en page selon vos préférences. Vous pouvez :

• Déposer un élément à l'intérieur de chaque colonne
• Ajuster l'espacement des colonnes
• Changer la couleur d'arrière-plan de la grille
• Modifier la forme de l'élément

Conseils: Utilisez des tailles d’image de produit cohérentes pour vos produits afin de maintenir l’équilibre visuel de la grille à 5 colonnes.

Méthode 2 : utiliser l'élément carrousel

Tandis que le Élément de ligne Bien que simple, ce n'est peut-être pas toujours la solution la plus efficace, en particulier sur les appareils mobiles, où une grille à 5 colonnes peut consommer trop d'espace vertical.

Le Élément de carrousel Offre une option plus dynamique et peu encombrante pour présenter vos produits. Voici comment l'installer :

Étape 1 : Glissez et déposez le Élément de carrousel sur votre page où vous souhaitez que la grille apparaisse.

Étape 2 : 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). Éléments par diapositive section, sélectionnez la grille à 5 éléments.

Étape 3 : Concevez maintenant le carrousel à grille à 5 colonnes pour qu'il corresponde à votre image de marque.

Vous pouvez également activer autoplay, flèches de navigation, ou gestes de balayage pour une expérience de navigation plus fluide sur mobile.

Questions fréquentes

1. Puis-je créer plus de 5 colonnes (par exemple, 6 ou 7) ?

Actuellement, GemPages prend en charge jusqu'à 6 colonnes dans l'élément Ligne. Pour les mises en page nécessitant davantage d'éléments, l'élément Carrousel est l'option recommandée.

2. La grille à 5 colonnes est-elle réactive sur mobile ?

Oui. La mise en page s'ajustera automatiquement sur les appareils mobiles. Cependant, pour une meilleure lisibilité, un nombre réduit d'éléments (par exemple, 2 à 3 colonnes) pourra s'afficher par ligne, selon la taille de l'écran.

3. Quel élément dois-je utiliser : une rangée ou un carrousel ?

Utilisez l'élément « Ligne » pour une mise en page statique à 5 colonnes. Si vous recherchez un design compact et déroulant (idéal pour les appareils mobiles), l'élément « Carrousel » est le meilleur choix.

4. Puis-je mélanger différents éléments à l'intérieur de la grille à 5 colonnes ?

Oui. Vous pouvez déposer des éléments de produit, des images ou tout autre élément dans chaque colonne.