Dans ce tutoriel, vous découvrirez l’élément Diaporama et comment l’utiliser.
A propos de l’élément diaporama
L’élément Diaporama est conçu pour présenter une série d’éléments de contenu dans une seule vue compacte pour vous aider à augmenter votre taux de conversion. Vous pouvez utiliser l’élément Diaporama pour afficher les produits présentés, les campagnes de vente, les témoignages de clients, etc.
Pour utiliser l’élément Diaporama, choisissez Ajouter un élément dans la barre latérale gauche> CONTENEURS> choisissez Élément Diaporama, puis faites glisser et déposez cet élément dans l’éditeur de page.
Notez que vous pouvez rechercher cet élément en utilisant la fonction de recherche au lieu de le trouver dans la barre latérale.
L’élément Diaporama est livré avec plusieurs variantes couvrant la plupart des besoins. Mais nous continuerons à ajouter d’autres variantes pour vous aider à gagner du temps.
Faites glisser une variante sur la mise en page et voyez comment elle peut être configurée.
Configuration des éléments du diaporama
L’élément Diaporama est livré avec de nombreux paramètres vous permettant d’affiner l’apparence du contenu pour le meilleur taux de conversion possible.
Sélectionnez l’élément dans la présentation pour voir ses paramètres.
Dans cet article, nous allons montrer les paramètres des onglets Général et Style de l’élément Diaporama.
Paramètres de l’onglet Général
Styles de navigation du diaporama
Styles de pagination du diaporama
Les paramètres de l’onglet Général de l’élément Diaporama sont les suivants:
| Les paramètres de l’onglet Général | |
| 1. RÉGLAGES DU Diapo |
|
| 2. ARTICLES DE DIAPOSITIVE | Vous pouvez ajouter les diapositives et réorganiser l’ordre de ces diapositives en faisant glisser l’icône à 3 points à gauche du nom de la diapositive. Vous pouvez également dupliquer ou supprimer les diapositives du diaporama.
|
| 3. ACTION | Vous pouvez en savoir plus sur le paramètre ACTION ici. |
| 4. ATTRIBUTS | Ce sont le groupe de 3 éléments que tous les éléments ont. Vous pouvez lire plus ici. |
| 5. VISIBILITÉ | Ce sont le groupe de 3 éléments que tous les éléments ont. Vous pouvez lire plus ici. |
| 6. ANIMATION | Ce sont le groupe de 3 éléments que tous les éléments ont. Vous pouvez lire plus ici. |
Paramètre de l’onglet de style
| Paramètre de l’onglet de style | |
Il y a 2 options qui peuvent être stylisées, incluant:
| |
| 1. OVERALL | Vous pouvez lire tous ces paramètres ici |
| 2. SPACING | Vous pouvez lire tous ces paramètres ici |
| 3. TYPOGRAPHY | Vous pouvez lire tous ces paramètres ici |
| 4. BACKGROUND | Vous pouvez lire tous ces paramètres ici |
| 5. BORDER | Vous pouvez lire tous ces paramètres ici |
| 6. DISPLAY | Vous pouvez lire tous ces paramètres ici |
| 7. CUSTOM CSS | Vous pouvez lire tous ces paramètres ici |
Configuration des éléments imbriqués
Veuillez noter que l’élément Diaporama est la combinaison de plusieurs diapositives dont chacune peut contenir divers éléments en fonction de vos besoins tels que Titre, Paragraphe, Image, Bouton, etc.
De plus, vous pouvez également intégrer un lien dans chaque diapositive pour rediriger votre visiteur vers l’emplacement souhaité après avoir cliqué n’importe où sur cette diapositive.
Pour remplacer ou ajouter un arrière-plan d’image pour le diaporama, vous pouvez choisir la diapositive souhaitée, puis allez dans l’onglet Style> Image d’arrière-plan et choisissez l’image souhaitée.
Vous pouvez voir cette image ci-dessous pour avoir une meilleure démonstration
Cas courants avec l’élément Diaporama
Définir la pleine largeur pour le diaporama
Dans le cas où vous souhaitez définir la pleine largeur pour le diaporama, choisissez la section qui contient le diaporama et désactivez l’option Définir la largeur fixe dans l’onglet Général comme l’image ci-dessous
Vous pouvez consulter cet article pour en savoir plus sur la création d’une section pleine largeur.
Remplacer une image dans une diapositive
Pour remplacer une image d’une diapositive par une autre image, vous pouvez choisir la diapositive que vous souhaitez, puis allez dans l’onglet Style> Image d’arrière-plan et choisissez l’image que vous souhaitez.
Vous pouvez voir cette image ci-dessous pour avoir une meilleure démonstration
Previous article