5 façons créatives d'utiliser les widgets en accordéon : Comment intégrer des graphiques, des images et plus encore dans Elementor

Les développeurs web utilisent souvent "Widget accordéon"(accordéon) pour organiser le contenu. Le widget accordéon permet d'afficher et de masquer le contenu sous une forme superposée, une boîte réduite, ce qui donne à la page un aspect plus net et améliore l'expérience de l'interaction avec l'utilisateur. Un widget accordéon avecélément imbriqué(utilisé comme expression nominale)Accordéon Au contraire, il offre à l'utilisateur une plus grande flexibilité, en lui permettant, dans chaque sectionL'imbrication d'autres éléments de conception tels que des images, des boutons, des vidéosetc.

Étape 1 : Ajouter le widget accordéon

1. Ouvrez l'éditeur ElementorDans votre site WordPress page webpeut-êtrecarteDans l'éditeur de pages Elementor, ouvrez l'éditeur de pages Elementor.

2. Ajouter un widget accordéon: enBarre de widgets gaucheRechercher dans "Accordéon"Widget. Une fois trouvé, faites-le glisser dans la zone de conception de la page.

Étape 2 : Mise en place de l'élément accordéon

1. Créer un élément en accordéonLe widget accordéon : Par défaut, le widget accordéon d'Elementor contiendra 3 éléments initiaux. Ceci peut être fait en cliquant sur le bouton "addendum"pour ajouter d'autres éléments, ou cliquez sur le bouton "X"Supprimer les éléments non désirés.
2. Modifier les titres et le contenu des éléments de l'accordéonChaque élément de l'accordéon contient "légende"et"élément(par exemple, l'ID CSS, l'icône, etc.)". En cliquant sur le titre de chaque élément, vous pouvez modifier le texte, par exemple pour changer le titre en "Présentation graphique" ou "Présentation vidéo", etc.

Intégrer des contenus créatifs dans les éléments de l'accordéon

1) Intégrer des graphiques dans les éléments de l'accordéon

Les graphiques visualisent les données et peuvent être placés dans des éléments en accordéon pour une présentation détaillée.

déplacer: :

1. Cliquez sur la zone de contenu de l'élément en accordéon.

2. Ajoutez-y un widget "HTML" ou "shortcode".

3. Collez le code de votre graphique, par exemple Graphiques Google peut-être Chart.js du code généré. Ajustez les styles et les tailles pour que les graphiques s'adaptent au contenu de l'accordéon.

Nous avons donc fini d'ajouter des icônes pour la première partie.

2. galerie d'images intégrée dans l'accordéon

Les galeries d'images sont particulièrement adaptées aux présentations de produits ou aux études de cas, afin d'offrir aux utilisateurs une expérience plus visuelle.

déplacer: :

1. Glisser-déposer dans la zone de contenu de l'élément en accordéon "Galerie d'images"Widgets.

2. Téléchargez les images que vous souhaitez afficher et définissez la disposition de la galerie (par exemple, grille, alignement, cascade). effet de rotationVous devez alors utiliser la fonction Widget "Image Carousel" d'Elementor.

3. Redimensionnez et alignez les images pour que la galerie soit bien ordonnée lorsque l'accordéon est ouvert.

3. intégrer un contenu vidéo

Les vidéos intégrées permettent aux utilisateurs de visualiser les informations de manière plus intuitive et conviennent aux démonstrations de produits et aux didacticiels.

déplacer: :

1. Dans la zone de contenu de l'élément accordéon, ajoutez "vidéo"Widgets.

2. Collez le lien vers votre vidéo (par ex. YouTube peut-être Vimeo).

3. Définissez des options de lecture pour les vidéos, telles que la lecture automatique ou la mise en sourdine, et redimensionnez les vidéos en fonction du style de la page.

4. ajouter des boutons pour guider l'utilisateur

L'ajout de boutons à un accordéon permet de guider l'utilisateur vers des actions ultérieures, telles queAller à la page de détail ou au formulaire.

déplacer: :

1. Glisser-déposer dans la zone de contenu de l'élément en accordéon "boutons"Widgets.

2. Saisissez le texte du bouton, par exemple "En savoir plus"ou"Contact".

3. Définissez le lien du bouton et personnalisez la couleur et la taille du bouton dans les options de style.

5. intégrer des formulaires de contact pour améliorer l'interaction

L'ajout d'un formulaire de contact à l'élément accordéon permet aux utilisateurs d'interagir sans quitter la page.

déplacer: :

1. utiliser WPForms peut-être Formulaire de contact 7 et d'autres plugins pour créer des formulaires de contact.
2. Copiez le code court généré par le formulaire dans le presse-papiers.

3. Dans la zone de contenu de l'élément en accordéon, faites glisser "code court"pour coller le shortcode du formulaire. Ajustez le style pour que le formulaire soit cohérent avec le style de conception de la page.

Styles d'accordéon personnalisés

Une fois le contenu intégré, vous pouvez personnaliser le style de l'accordéon dans Element afin de l'harmoniser avec le style général de la page.

1. Développer les paramètres de style: sur le côté gauche de l'écran "typeDans l'onglet "Titre", vous pouvez ajuster la couleur, la police et la couleur d'arrière-plan du titre de l'accordéon.

2. Réglage de l'icône de l'accordéon: dans "élément"Trouver".icône (informatique)"vous pouvez personnaliser le style des icônes développées et réduites.

3. Optimiser l'espacement et l'animation: en"Avancé"Les paramètres vous permettent d'ajuster l'espacement de l'accordéon, les bordures et les effets d'animation de transition afin de garantir une expérience fluide pour l'utilisateur.

Résumé :

Les widgets en accordéon sont un outil de présentation du contenu couramment utilisé dans le développement web pour rendre la mise en page plus concise et améliorer l'expérience de l'utilisateur en réduisant et en développant le contenu. L'ajout de widgets en accordéon avec Elementor est très facile et les développeurs peuvent intégrer des graphiques, des images, des vidéos, des boutons, des formulaires de contact et bien plus encore pour rendre chaque élément en accordéon plus vivant et interactif. Grâce à des styles personnalisés, les développeurs peuvent également ajuster l'apparence et l'animation de l'accordéon en fonction des besoins de la page, créant ainsi un affichage du contenu à la fois beau et fonctionnel.

Les problèmes et solutions les plus courants lors de l'utilisation du Widget Accordéon (Accordéon) sont énumérés ci-dessous :

1. Les éléments en accordéon ne peuvent pas être déployés ou rétractés
   • raison d'êtreLes conflits de JavaScript ou les interférences avec d'autres plugins sont généralement à l'origine de ce problème.
   • guérirPour ce faire, essayez de désactiver d'autres plugins pour vérifier qu'il n'y a pas de conflit. Assurez-vous qu'Elementor et tous les plugins associés sont à jour.
2. L'élément de l'accordéon est vide
   • raison d'êtreLa zone de contenu n'a pas été ajoutée correctement ou il y a eu une erreur de chargement.
   • guérirLes éléments de l'accordéon : Vérifiez à nouveau que le contenu de chaque élément de l'accordéon a été rempli et assurez-vous que le formatage du contenu (HTML, codes courts, etc.) est correct.
3. Les styles ne prennent pas effet
   • raison d'êtreLes styles personnalisés sont remplacés par les styles du thème ou d'autres plugins.
   • guérirPour ce faire, vous pouvez utiliser des feuilles de style CSS personnalisées plus prioritaires dans les paramètres de style d'Elementor, ou vérifier les styles du thème et les ajuster en conséquence.