Créer et utiliser des gadgets Carousel

Carousel est le dernier ajout aux widgets d'Elementor Pro, qui vous permet de présenter plusieurs éléments de contenu sous forme de diaporama.

1) Modifier les paramètres d'Elementor

Les paramètres suivants d'Elementor doivent être ajustés avant d'utiliser le gadget Carousel.

Connectez-vous à votre tableau de bord WordPress et accédez à la sectionElementor>mettre en placetrouver la page "caractérisationOnglet ". Ceci est illustré dans la figure ci-dessous :

(Insérer une capture d'écran de la page des paramètres concernés)

Une fois que vous avez accédé à la page des fonctionnalités, vous devez activer les fonctionnalités suivantes :

1. Conteneur de grille

2. élément imbriqué

L'activation des conteneurs Grid et des éléments imbriqués permet d'utiliser les widgets Carousel dans Elementor.

2. ajouter le widget Carousel

Une fois sur la page d'édition d'Elementor, faites glisser le gadget Carousel dans le champ d'édition.

Après avoir effectué un glisser-déposer, vous verrez l'écran suivant.

3. modifier le contenu du carrousel

Vous pouvez faire glisser et déposer n'importe quel widget dans chaque cellule du carrousel. Par exemple, si vous glissez-déposez une image et une légende dans une cellule, vous verrez l'écran suivant :

Faites glisser et déposez le widget Vidéo dans la cellule du milieu et le widget Éditeur de texte dans la cellule de droite.

Ce qui précède donne une idée générale de la manière la plus élémentaire de créer un gadget Carousel. Ensuite, les balises de contenu et de style du gadget Carousel seront utilisées.

4. les balises de contenu du carrousel

L'onglet Contenu du gadget Carrousel contient principalement les paramètres suivants.

Options de configuration du carrousel :

1. DiapositivesLes diapositives peuvent être utilisées pour configurer le contenu et le style de chaque diapositive.
2. ParamètresCarousel : Permet de régler les paramètres généraux de Carousel, tels que la lecture automatique et la vitesse de défilement.
3. Navigation: Définit le style et la position des boutons de navigation.
4. PaginationIndicateur de radiomessagerie : Configurer le style et la position de l'indicateur de radiomessagerie.

4.1 Diapositives

Slides est un paramètre utilisé pour ajouter des cellules au gadget Carousel.

Le carrousel définit le contenu :

1. Poste du carrouselLes cellules peuvent être ajoutées, copiées ou supprimées et un titre peut être attribué à chacune d'entre elles.
2. Diapositives à l'affiche: Spécifie le nombre de cellules affichées dans le champ d'édition. Sélectionnez 3 pour afficher 3 cellules ; sélectionnez 5 pour afficher 5 cellules.
3. Diapositives sur rouleau: Spécifie le nombre de cellules qui défilent en même temps lors du défilement du carrousel. Une valeur comprise entre 1 et 8 peut être définie. Plus la valeur est élevée, plus le nombre de cellules défilant en même temps est important.
4. Hauteur égaleHauteur des cellules : Choisir d'activer ou non le paramètre d'uniformité de la hauteur des cellules. Lorsque ce paramètre est activé, la hauteur de toutes les cellules est automatiquement unifiée.

4.2 Paramètres

Paramètres est le paramètre utilisé pour ajuster l'effet de défilement de la cellule Carousel.

Contenu de la configuration du carrousel

1. Jeu automatique: Permet d'activer ou de désactiver la lecture automatique. Lorsque cette option est activée, le contenu est lu automatiquement par Carousel.
2. Vitesse de défilement (ms): Définit la vitesse de défilement en millisecondes. La valeur par défaut est de 5000 millisecondes (5 secondes). Plus la valeur est petite, plus la vitesse de défilement est rapide.
3. Pause au survolPause au survol : Pause au survol. Lorsque cette option est activée, le défilement s'interrompt lorsque la souris survole le contenu.
4. Pause sur l'interactionInteraction Pause. Lorsque cette option est activée, le défilement est interrompu pendant que l'utilisateur manipule le contenu.
5. Défilement à l'infiniDéfilement infini : Défilement infini. Lorsque cette option est activée, Carousel fait défiler le contenu dans une boucle infinie.
6. Durée de la transition (ms)Durée de l'effet de défilement : Définit la durée de l'effet de défilement en millisecondes. La valeur par défaut est de 500 millisecondes (0,5 seconde). Plus la valeur est élevée, plus l'effet de défilement est lent.
7. Direction: Sélectionnez la direction de défilement, gauche ou droite.
8. Côtés décalés: Définit l'espace de sécurité aux deux extrémités du carrousel, avec des options pour les deux (both), la gauche ou la droite.
9. Largeur du décalage: Règle la largeur de l'espace de sécurité ; plus la valeur est élevée, plus la zone de sécurité est large.

Si vous ne comprenez pas la zone de sécurité des côtés décalés, vous pouvez vous référer au diagramme ci-dessous.

4.3 Navigation

La navigation permet de régler les paramètres des icônes de flèche vers l'avant ou vers l'arrière du carrousel.

Paramètres des flèches de navigation

Cet élément de réglage contient trois éléments principaux :

1. FlèchesFlèches de navigation : Choisissez d'activer ou non les flèches de navigation. Lorsque cette option est activée, les utilisateurs peuvent cliquer sur les flèches pour passer d'un contenu à l'autre.
2. Flèche précédente répondre en chantant Flèche suivante: Définit le style et la position des flèches avant et arrière. Le contenu de ces deux réglages est identique, comme décrit ci-dessous :
   • IcôneIcône de flèche : Sélectionnez ou remplacez l'icône de flèche. Vous pouvez choisir de ne pas l'afficher, de télécharger une icône personnalisée ou de sélectionner des icônes prédéfinies.
   • Orientation: Spécifie l'alignement de la flèche dans le carrousel, soit horizontal, soit vertical.
   • PositionPosition de la flèche : définit la position exacte de la flèche dans le carrousel, qui peut être ajustée horizontalement ou verticalement.

4.4 Pagination

La pagination est un paramètre qui spécifie la manière dont l'assistant de cellule inférieur est affiché. Vous avez le choix entre des points, des nombres et des barres de progression.

5. balises de style Carousel

L'onglet Style du gadget Carousel contient les trois paramètres principaux suivants.

1. Diapositives
2. Navigation
3. Pagination

Réglages du style de diapositive

DiapositivesLes paramètres de diapositive de l'onglet Styles sont utilisés pour ajuster le style d'apparence des cellules du carrousel.

Définir le contenu :

1. Écart entre les diapositives: Définit l'espacement entre les cellules, la plage est de 0 à 400. Plus la valeur est grande, plus l'espacement est important.
2. Type d'arrière-planSélectionnez le type d'arrière-plan, classique ou dégradé.
3. Couleur de fondCouleur d'arrière-plan : Définir la couleur d'arrière-plan, vous pouvez sélectionner ou modifier n'importe quelle couleur.
4. Type de frontière: Permet de sélectionner le type de bordure de la cellule.
5. Largeur de la frontière: Définit la largeur de la bordure de la cellule, plus la valeur est grande, plus la bordure est large.
6. Couleur de la bordure: Définit la couleur de la bordure, vous pouvez choisir ou modifier n'importe quelle couleur.
7. Rayon de la bordure: Définit le rayon des coins de la cellule, plus la valeur est grande, plus le rayon est grand, plus les coins sont arrondis.
8. Rembourrage: Définit l'espacement entre la bordure de la cellule et le contenu, plus la valeur est grande, plus l'espacement est important.

Résumé :

Ce tutoriel explique en détail comment leElementor ProCréez et utilisez les derniers ajouts au widget Carousel. Il explique comment activer la fonction Mega Menu, ajuster les paramètres du Carousel, ajouter et modifier des cellules, définir la lecture automatique et la vitesse de défilement, configurer les flèches de navigation et les indicateurs de pagination, et ajuster le style d'apparence des cellules du Carousel. Grâce à ce guide, vous comprendrez parfaitement comment utiliser le widget Carousel pour améliorer l'interactivité et l'effet visuel de votre site web.