Concevez un diaporama avec une bannière de héros et un élément de carrousel

Un diaporama bien conçu peut rehausser l'apparence de votre boutique en ligne et améliorer l'expérience utilisateur. 

L'une des sections les plus populaires des sites Web de commerce électronique est la Diaporama de bannières de héros, qui présente vos produits clés, vos promotions ou vos messages de marque directement en haut de votre page d'accueil.

Qu'est-ce qu'un diaporama et pourquoi l'utiliser ?

Un diaporama est une série de bannières ou d'images tournantes permettant d'afficher plusieurs messages, promotions ou produits dans une même section, généralement en haut de votre page d'accueil. Il permet de capter rapidement l'attention et de maintenir l'intérêt de vos visiteurs sans les submerger.

En utilisant un format carrousel, vous pouvez mettre en évidence :

• Produits phares ou saisonniers
• Promotions ou offres à durée limitée
• Message de marque ou nouvelles collections

Un diaporama bien conçu peut rehausser l’apparence de votre boutique en ligne et améliorer l’expérience utilisateur. 

Comment concevoir un diaporama ou un carrousel d'images avec GemPages

Avec GemPages, créer un diaporama est simple et flexible. Vous pouvez combiner Carousel et Bannière de héros éléments pour créer des diapositives accrocheuses et interactives qui améliorent l'expérience utilisateur globale et génèrent plus de clics. 

Dans ce guide, nous vous guiderons étape par étape pour concevoir un diaporama de bannières Hero à l'aide de ces éléments.

Étape 1 : Accéder à l'éditeur GemPages

Rendez-vous dans la section Tableau de bord GemPages > Pages, et localisez la page cible pour ouvrir l'éditeur.

Étape 2 : Ajoutez l'élément Carrousel à votre page

Glissez et déposez le Élément de carrousel dans la section où vous souhaitez que le diaporama apparaisse.

Note: L'élément Carrousel est doté de paramètres personnalisables pour la durée des diapositives, les effets de transition, etc. Si vous n'êtes pas familier avec ces paramètres, reportez-vous à cet article.

Étape 3 : ajouter l’élément Bannière de héros au carrousel

Depuis la barre latérale gauche, faites glisser et déposez un élément de bannière de héros dans le carrousel.

La bannière du héros est préchargée avec un image d'arrière-plan, titre, bloc de texte et bouton.

Vous pouvez enrichir votre bannière de héros avec des éléments supplémentaires tels que des images, des icônes, des listes d'objets, etc.

Étape 4 : Personnalisez votre bannière de héros

Maintenant, personnalisons votre bannière de héros dans le Paramètres onglet. Depuis la barre latérale gauche, vous pouvez modifier l'élément Bannière du héros à votre façon.

Par exemple :

• Téléchargez l'image sur votre bannière de héros :

• Changer la couleur d'arrière-plan :

• Modifier le titre, le bloc de texte, le bouton, etc.

Étape 5 : Dupliquer la diapositive  

Retourner à l'élément principal du carrousel Paramètres languette.

• Faites un clic droit sur le Bannière de héros > sélectionnez "Sélectionner l'élément parent" pour revenir aux paramètres principaux du carrousel.

• Alternativement, cliquez sur les petits points sous le Carrousel pour accéder à ses paramètres.

Depuis la barre latérale gauche, accédez à la Gestion des articles section, puis cliquez sur la case à côté de Commande pour ouvrir la boîte de dialogue de gestion des éléments.

Survolez Point 1 et cliquez sur le dupliquer icône pour dupliquer le curseur 1.

Le curseur dupliqué (curseur 2) sera sous Point 1, et il est automatiquement nommé comme Point 5.

Cette astuce vous permet de gagner du temps en vous permettant de réutiliser le même design. Il vous suffit de mettre à jour les images et le texte sur chaque diapositive dupliquée.

Questions fréquentes

1. Puis-je ajouter des vidéos à mon diaporama au lieu d’images ?

Actuellement, l'élément Carrousel prend en charge les diapositives contenant des images. Cependant, vous pouvez insérer manuellement un élément Vidéo dans une bannière principale à l'intérieur de chaque diapositive pour simuler un diaporama vidéo. Veuillez noter que cela peut affecter la vitesse de chargement.

2. Combien de diapositives puis-je ajouter à un seul carrousel ?

Il n'y a pas de limite stricte au nombre de diapositives que vous pouvez ajouter. Cependant, pour des raisons de performances et d'expérience utilisateur, nous recommandons de limiter ce nombre à moins de 5.

3. Puis-je contrôler la vitesse de transition et l'animation des diapositives ?

Oui ! Depuis les paramètres du carrousel, vous pouvez régler la durée de la transition, l'activation/désactivation de la lecture automatique, le type d'animation (fondu ou glissement) et le comportement de la boucle.

4. Mon diaporama sera-t-il réactif sur les appareils mobiles ?

Absolument. Les éléments Carrousel et Bannière Héros de GemPages sont entièrement responsives. Vous pouvez également personnaliser la mise en page pour les affichages mobile et tablette grâce au mode Affichage responsive de l'éditeur.

5. Puis-je ajouter des liens différents à chaque diapositive ?

Oui. Chaque diapositive de bannière Hero peut inclure des boutons ou des images cliquables avec des liens uniques. Personnalisez simplement le bouton ou le lien image dans chaque bloc de bannière Hero.

6. Pourquoi mon carrousel ne s'affiche-t-il pas correctement sur la page en direct ?

Assurez-vous que le Écran Les conditions sont correctement définies et l'élément Carrousel est placé dans une section visible sur tous les appareils. Vérifiez également l'état de votre publication et videz le cache de votre navigateur.