Élément de carrousel

À propos de l'élément Carrousel

L' Élément de carrousel fait référence à une fonctionnalité ou un widget spécifique qui permet aux utilisateurs de créer et d'afficher un carrousel de produits, d'images ou de contenu promotionnel sur leur site Web. Voici plusieurs fonctionnalités et avantages clés de l'élément Carrousel :

• Vitrine des produitsLes carrousels de commerce électronique présentent souvent des produits issus de l'inventaire d'un magasin. Chaque diapositive peut afficher un produit différent avec son titre, son image, son prix et éventuellement une brève description.
• Bannières promotionnelles:L'élément Carrousel peut également afficher des bannières promotionnelles ou des publicités pour les soldes, les remises ou les nouveautés.
• Mise en page personnalisable:Les utilisateurs peuvent généralement personnaliser la disposition du carrousel, en ajustant des aspects tels que le nombre d'éléments visibles par diapositive, les effets de transition entre les diapositives et le style général pour correspondre à l'esthétique de leur marque.
• Commandes de navigation:Cela inclut généralement des contrôles de navigation tels que des flèches ou des points pour permettre aux utilisateurs de naviguer manuellement dans les diapositives du carrousel.
• CONCEPTION RÉACTIVE:Comme d’autres éléments de la conception Web moderne, les éléments de carrousel des créateurs de pages de commerce électronique sont conçus pour être réactifs, garantissant qu’ils s’affichent correctement sur différents appareils et tailles d’écran.

Ajouter l'élément Carrousel dans GemPages v7

Étape 1: Dans le Tableau de bord GemPages, sélectionnez la page sur laquelle vous souhaitez ajouter l'élément Carrousel. 

Étape 2: Rechercher le Élément de carrousel, sélectionnez le type souhaité et faites-le glisser vers votre position préférée sur la page.

Étape 3: RÉFaites glisser et déposez tous les éléments GemPages (texte, image, bouton, produit, etc.) pour créer librement votre mise en page.

Pour accéder au panneau de paramètres du Carrousel, cliquez simplement sur l'élément.

La barre latérale gauche révélera alors le Paramètres Avancé onglets, vous permettant de personnaliser son comportement et son apparence.

Configurer l'onglet Paramètres

Éléments par diapositive

Ce paramètre contrôle le nombre d'éléments affichés dans chaque diapositive du carrousel. Vous pouvez choisir parmi les options de mise en page prédéfinies ou définir un nombre personnalisé pour répondre à vos besoins.

• Dispositions prédéfinies : Sélectionnez rapidement de 1 à 5 éléments par diapositive à l’aide des options de grille disponibles.
• Valeur personnalisée: Si vous souhaitez afficher plus de 5 articles, clique le ⚙️ Icône Paramètres et saisissez le nombre exact souhaité. Ceci est particulièrement utile pour les carrousels de produits présentant plusieurs articles dans une même vue.

Écran

Cette section vous permet d'ajuster la manière dont les éléments sont affichés dans chaque diapositive du carrousel pour obtenir la disposition et l'espacement idéaux pour votre conception.

• Nombre maximal d'articles : Définissez le nombre maximal d'articles pouvant apparaître dans votre carrousel. Vous pouvez afficher jusqu'à 12 articles par diapositive.
• Espacement: Contrôlez l'espacement entre chaque élément. Augmenter l'espacement crée une mise en page plus aérée, tandis que le réduire permet d'intégrer davantage de contenu dans des designs plus compacts.
• Aperçu: Activez cette option pour afficher une petite partie de la diapositive suivante ou précédente. Ce signal visuel indique que votre carrousel contient davantage d'éléments à explorer.

Gestion des articles

Cette section vous permet de gérer vos éléments dans le carrousel, notamment d'ajouter/supprimer des diapositives et de réorganiser leur ordre selon vos préférences :

• Lorsque vous passez la souris sur un élément, vous pouvez rebaptiser, dupliquer l'objet, ou delete le

• Pour ajouter d'autres éléments, cliquez sur «+ Ajouter un élément” .

Espacement des éléments

Vous pouvez ajuster l'espacement entre les éléments (les intervalles) de votre carrousel. Par défaut, l'intervalle est défini sur 16 px.

Style d'article

Cette section vous permet de personnaliser la manière dont chaque élément (ou diapositive) à l'intérieur de votre carrousel.

Ces paramètres vous aident à maintenir la cohérence visuelle et à améliorer l'attrait général de votre carrousel.

• Rembourrage: Ajustez l'espacement intérieur de chaque élément du carrousel. Vous pouvez définir des valeurs différentes pour le haut, le bas, la gauche et la droite afin que votre contenu ne touche pas les bords de l'élément.

• Mise en contexte: Définissez l'arrière-plan de chaque élément de votre carrousel. Vous pouvez :
  • Choisissez un couleur unie (en utilisant le sélecteur de couleurs ou en saisissant un code HEX).
  • Télécharger un arrière-plan de l'image si vous souhaitez que chaque article ait un design visuel unique.
• Frontière: Ajoutez ou personnalisez les bordures de vos éléments de carrousel. Vous pouvez modifier la largeur, la couleur et le style des bordures (pleines, pointillées, etc.) pour les adapter au style de votre marque.
• CORNERArrondissez les angles de chaque élément du carrousel pour créer une apparence plus douce. La valeur (en px) détermine l'angle d'inclinaison des angles.
• ShadowAppliquez une ombre portée aux éléments de votre carrousel pour les faire ressortir de l'arrière-plan. Ajustez la taille de l'ombre, le flou, la couleur et l'opacité pour obtenir l'effet de profondeur souhaité.

Navigation

Dans cette section, vous pouvez personnaliser la façon dont les utilisateurs se déplacent dans votre carrousel à l'aide des flèches de navigation.

Poste: Choisissez de placer les boutons de navigation à l'intérieur ou à l'extérieur de la zone du carrousel.

Icône de navigation:Sélectionnez le style d’icône pour vos boutons de navigation, notamment :

• Icône : l’option par défaut est la flèche, mais vous pouvez la remplacer par d’autres icônes qui correspondent mieux à votre conception.
• Taille de l'icône : ajustez la taille de l'icône à l'aide des boutons plus ou moins, ou saisissez une valeur exacte pour un contrôle précis.
• Couleur de l'icône : choisissez une couleur pour les icônes de navigation afin de garantir qu'elles se démarquent de l'arrière-plan du carrousel.

Bouton de navigation : Modifiez les boutons de navigation (les flèches gauche et droite) pour qu'ils correspondent au style de votre page et améliorent la visibilité.

• Taille du bouton : Cliquez sur « Modifier » pour afficher tous les paramètres et ajuster la largeur et la hauteur du bouton de navigation. Augmenter la taille peut améliorer l'accessibilité sur les appareils mobiles.
• Arrière-plan : ajoutez une couleur d’arrière-plan au bouton pour un meilleur contraste avec le contenu du carrousel.
• Bordure : Appliquez une bordure pour mettre en valeur le bouton. Vous pouvez personnaliser son style, sa largeur et sa couleur.
• Coin : arrondissez les coins de vos boutons de navigation pour obtenir un style plus doux ou en forme de pilule.
• Espacement par rapport au bord : contrôlez la distance entre le bouton de navigation et le bord du carrousel.
• Afficher au survol : choisissez si les boutons de navigation sont toujours visibles (Non) ou apparaissent uniquement lorsque les clients survolent le carrousel (Oui).

Cercles

L' Cercles La section vous permet de personnaliser les points de navigation affichés au bas de votre carrousel, aidant les visiteurs à identifier la diapositive qu'ils consultent actuellement.

• Poste: Choisissez l'emplacement des points par rapport au carrousel. Vous pouvez les positionner. à l'intérieur or au contrôle les diapositives, en fonction de la mise en page de votre conception.
• Couleur active: Sélectionnez la couleur du point qui représente le courant (visible) glisser.
• Couleur inactive: Choisissez une couleur différente pour les points représentant caché diapositives.
• Taille des points: Ajustez la taille des points à l'aide des boutons plus/moins ou saisissez une valeur exacte pour une précision au pixel près.
• Écart au bordDéfinissez l'espacement entre les points et le bord du carrousel. Augmenter cette valeur peut améliorer la visibilité ou équilibrer l'espacement entre les différentes tailles d'écran.

Interaction

Personnaliser l'interaction dans l'élément carrousel :

• Autoplay: Activez ce commutateur pour faire défiler les diapositives automatiquement. Pour une fonctionnalité optimale, combinez la lecture automatique avec la fonction Boucle. Lorsque les deux fonctions sont activées, les diapositives progressent automatiquement et reviennent à la première diapositive.
• Retard: Définissez la durée (en ms) avant de changer de diapositive.
• Pause au survol : Arrêtez la lecture automatique lorsque les utilisateurs survolent le carrousel.
• Sens de glissement : Choisissez le mouvement de glissement vers la gauche ou la droite.
• Boucle d'infini:Activez ce commutateur pour permettre au carrousel de se répéter depuis le début après avoir atteint la dernière diapositive. 
• Glisser/balayer : Activez cette option pour permettre aux clients de passer à l'image suivante à l'aide de leur souris. 
• Vitesse de glissement:Modifier la vitesse des diapositives dans le carrousel
• Animation: Choisissez l'effet d'animation, par exemple « Augmentation progressive », « Décroissement progressif » ou « Augmentation progressive et décélération progressive ». Vous pouvez prévisualiser l'effet d'animation lors de son application dans l'élément carrousel.

Taille 

Personnalisez la largeur et la hauteur du carrousel selon vos préférences. Vous pouvez définir un carrousel pleine largeur en suivant ces étapes :

• complet » Largeur à 100 % or Pleine largeur.
• Allez dans Paramètres > Aligner et sélectionnez or Stretch.

Assurez-vous que la section ou la ligne du conteneur du carrousel est également définie sur pleine largeur dans votre structure de mise en page.

Présentation

Personnalisez l'arrière-plan de votre carrousel pour l'harmoniser avec le design de votre boutique. Vous pouvez : choisissez une couleur unie/dégradée or télécharger une image à utiliser comme arrière-plan du carrousel.

Pour plus de détails sur la personnalisation de l'arrière-plan, veuillez vous référer à cet article.

Forme 

Dans cette section, vous pouvez peaufiner l'apparence générale de votre carrousel en personnalisant son frontière, rayon de coin et effet d'ombreCes paramètres permettent à votre carrousel de s'intégrer parfaitement dans la disposition de votre boutique ou de se démarquer en tant que section mise en évidence.

• Frontière: Ajoutez ou modifiez la bordure autour du carrousel. Vous pouvez définir sa épaisseur, Catégorie (plein, pointillé, pointillé) et couleur pour correspondre au style de votre marque.
• CORNER: Ajuste le rayon de coin Pour arrondir ou accentuer les bords du carrousel. Par exemple, des valeurs plus élevées créent un aspect plus doux et plus moderne.
• Shadow: Appliquer un ombre portée pour donner à votre carrousel une impression de profondeur et une séparation visuelle avec l'arrière-plan de la page. Vous pouvez ajuster l'ombre compenser, tache et couleur pour des effets subtils ou dramatiques.

Reportez-vous à cet article pour des conseils complets sur la modification de la forme avec les paramètres de bordure, de coin et d'ombre.

Aligner

Dans cette section, vous pouvez choisir entre trois options : alignée à gauche, centré, ou alignée à droite.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, accédez à l'onglet Avancé et suivez les instructions ceci. article.

L'élément Carrousel est un outil polyvalent permettant d'ajouter des visuels dynamiques et interactifs à votre boutique Shopify. Avec GemPages v7, vous contrôlez entièrement le style, l'animation et la mise en page de chaque élément, ce qui facilite la création de présentations de produits attrayantes ou de récits de marque captivants qui fidélisent les visiteurs sur tous les appareils.

Par exemple, pour ajouter un Effet de transition pour votre carrousel, dans le Paramètres avancés Dans l'élément Carrousel, vous pouvez modifier le paramètre par défaut. Glissement transition vers un Effet de fondu pour un rendu visuel plus fluide et plus élégant.

Pour l'appliquer, rendez-vous sur le Avancé onglet, recherchez le Animation section, et sélectionnez S'effacer du menu déroulant type de transition.

L'effet de fondu fonctionne parfaitement avec Autoplay boucle, permettant à chaque diapositive de se fondre automatiquement en fondu.

FAQ sur l'élément Carrousel

1. Pourquoi mon carrousel ne s’affiche-t-il pas en pleine largeur ?

Pour afficher un carrousel pleine largeur sur votre page, essayez ce qui suit :

• Vérifiez que le largeur est fixé à 100 % Paramètres > Taille.
• Assurez-vous que le carrousel est placé dans une section ou une rangée qui s'étend également sur toute la largeur.
• complet » Aligner = Centrer ou Étirer in Paramètres > Aligner.
• Évitez de placer le carrousel à l’intérieur de colonnes étroites ou de sections imbriquées.

2. Pourquoi mon carrousel ne se lance-t-il pas automatiquement ?

Pour configurer la lecture automatique de votre carrousel, suivez ces étapes :

• Allez dans Paramètres > Interaction et assurez-vous Autoplay est basculé sur.
• Pour le maintenir en boucle, activez également Boucle d'infini.

3. Puis-je afficher les produits de manière dynamique dans le carrousel ?

Dans GemPages, le carrousel n'extrait pas automatiquement les données produit de Shopify comme l'élément Liste de produits. Par conséquent,tu dois faire glisser manuellement les modules de produits dans le carrousel pour un contrôle personnalisé.

4. Pourquoi les images semblent-elles coupées ou mal alignées ?

Si vos images semblent coupées dans le carrousel :

• Vérifiez la Rapport d'image, Rembourrage, ou Largeur de la diapositive paramètres.
• Utilisez le Image d'ajustement au lieu de Remplir l'image si le maintien du rapport hauteur/largeur est une priorité.

5. Le carrousel GemPages prend-il en charge un effet de transition en fondu ?

Oui. Les serrures coulissantes portables et les verrous à surfaçage peuvent être utilisés pour sécuriser une porte coulissante escamotable depuis l'extérieur. Certains kits de chaîne de sécurité permettent également le verrouillage extérieur avec une clé ou un bouton rotatif. Dans GemPages v7, l'élément Carousel inclut un Effet de fondu sous Paramètres avancés > Animation. Activer Autoplay Boucle d'infini pour des transitions en fondu continu entre les diapositives.

6. Comment puis-je modifier la durée de défilement du carrousel ?

Allez dans Paramètres > Interaction.

• Adapter Retard pour contrôler la durée d'affichage de chaque diapositive.
• Adapter Vitesse de glissement pour contrôler la vitesse de la transition entre les diapositives.

7. Puis-je glisser-déposer des éléments dans un carrousel ?