Un curseur accordéon est un moyen amusant et attrayant d’afficher du contenu dans un espace restreint. Les curseurs d’accordéon sont généralement constitués de plusieurs éléments (ou panneaux) empilés horizontalement, comme les plis d’un rideau. Et lorsque vous survolez l’un des panneaux, celui-ci se développe pour révéler le contenu alors que les autres panneaux en accordéon se contractent. C’est là que l’effet accordéon de l’agrandissement et de la contraction est obtenu.

Dans ce tutoriel, je vais vous montrer comment créer un curseur accordéon sensible dans Divi en utilisant uniquement du CSS. Pour ce faire, nous utiliserons plusieurs modules Divi pour servir de panneaux d’accordéon. N’importe quel module peut être utilisé, mais pour cet exemple, nous allons utiliser les modules blurb de manière très créative pour créer un magnifique curseur d’accordéon qui a l’air (et fonctionne) très bien à la fois sur le bureau et sur mobile.

Vérifiez-le!

Aperçu

Voici un aperçu de ce que nous allons construire dans ce tutoriel.

Créer un slider avec un accordéon sur divi

Commençons le tutoriel

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez procéder comme suit:

  1. Si vous ne l’avez pas encore fait, installez et activez le thème Divi installé (ou le plug-in Divi Builder si vous n’utilisez pas le thème Divi).
  2. Créez une nouvelle page dans WordPress et utilisez Divi Builder pour modifier la page sur le front-end (constructeur visuel).
  3. Téléchargez environ 5 images différentes différentes dans la médiathèque pour les utiliser comme images de fond nécessaires au didacticiel.

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Créer d’un slider avec un accordéon responsive sur Divi

Création de la ligne

Pour commencer, ajoutez une ligne d’une colonne à la section régulière.

Choisir une mise en page divi

Ouvrez ensuite les paramètres de la ligne et mettez à jour les éléments suivants:

  • Largeur de gouttière: 1
  • Largeur: 100%
  • Largeur maximale: 800px
  • Hauteur: 400px (bureau); 700px (tablette et téléphone)

Les valeurs width et max width peuvent être modifiées selon vos besoins. L’accordéon sera mis à l’échelle et fonctionnera dans n’importe quelle largeur de rangée. En outre, il est très important de définir une hauteur fixe pour que la conception fonctionne. Les éléments enfants (colonne et modules) auront une hauteur de 100%. Par conséquent, si vous ne définissez pas la hauteur fixe de la ligne, les éléments enfants n’auront pas de hauteur.

Paramètres de colonne

Maintenant que la hauteur de la ligne est définie, ouvrez les paramètres de colonne et ajoutez le code CSS suivant à l’élément principal:
Bureau

display:flex;flex-direction: row;align-items:center;height: 100%;

Ajouter un code css divi

Tablette

flex-direction: column;

La propriété flex alignera les panneaux d’accordéon horizontalement sur le bureau et verticalement sur tablette et téléphone. La hauteur de 100% permettra aux modules que nous allons ajouter d’utiliser également la valeur de hauteur de 100%.

Création du panneau accordéon avec les modules Résumé

Le curseur accordéon peut être construit en utilisant n’importe quel type de module. Si nous le voulions, nous pourrions utiliser une combinaison de différents modules pour servir de panneau d’accordéon. Mais pour cette conception, nous allons utiliser des modules Blurb.

Commencez par ajouter un module de présentation à la ligne.

Ajouter un module résumé divi

Conception du module Résumé

Ouvrez les paramètres du module résumé et mettez à jour les éléments suivants:

Gardez le titre fictif et le contenu du corps. Nous pouvons toujours changer cela plus tard.

Puis mettez à jour l’icône de présentation comme suit:

  • Icône (bureau): icône représentant une ligne de flèche horizontale (voir capture d’écran)
Configuration icons divi
  • Icône (survolée): icône de vérification (voir capture d’écran)
Utiliser des icones au survol divi
  • Icône (tablette et téléphone): icône représentant une ligne de flèche verticale (voir capture d’écran)
curseur accordéon divi responsive

Contexte

Ensuite, donnez au blurb une image d’arrière-plan et un calque dégradé en survol de la manière suivante:

  • Ajouter une image de fond d’au moins 1000 pixels de large
  • Position de l’image de fond: centre gauche
Résumé divi configuration arriere plan

Ajoutez ensuite une superposition de fond dégradé au survol.

Flotter

  • Dégradé de fond à gauche (survol): # 3e215b
  • Dégradé de fond à droite Couleur (survol): rgba (0,0,0,0)
  • Gradient Direction: 90deg
  • Placez le dégradé au-dessus de l’image d’arrière-plan: OUI
curseur accordéon divi responsive

Icône

  • Couleur de l’icône: #ffffff
  • Image / emplacement des icônes: gauche
Modifier module icone divi

Ensuite, passez à l’onglet Conception et mettez à jour les éléments suivants:

Titre et corps du texte

  • Title Font: Poppins
  • Titre Police: Semi Gras
  • Titre du texte Couleur: transparent (bureau), #ffffff (survol)
  • Titre du texte Taille: 23px
  • Couleur du corps du texte: transparent (bureau), #ffffff (survol)
Configuration police module résumé divi

Hauteur et Box Shadow

Une fois le texte stylé, attribuez au module une hauteur de 100% et une zone d’ombre comme suit:

  • Hauteur: 100%
  • Box Shadow: Voir la capture d’écran
  • Ombre de la boîte Position horizontale: -12px
  • Ombre de la boîte Position verticale: 0px
Modifier la taille module résumé divi

Blurb Custom CSS

Pour que nos panneaux d’accordéon (ou module de présentation) se développent et se contractent avec le reste des modules, nous devons ajouter des CSS personnalisés pour modifier la taille du module avec flex-grow. Comme nous allons avoir un total de 5 modules qui composent l’accordéon, nous ajoutons «flex: 1» pour l’état par défaut, puis nous le changeons en «flex: 5» en état de survol.

Sous l’onglet Avancé, ajoutez le CSS personnalisé suivant, l’élément principal Blurb:

Bureau

flex:1;position: relative !important;transition: flex 800ms !important;

Tablette

flex:5;

Paramètre résumé divi

Ajoutez ensuite le css personnalisé suivant au CSS Blurb Content:

Bureau

position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;

Modifier le style du module texte divi

Tablette

width: 100%;height: 100%;position: relative !important;

Code css pour contenu module résumé

Débordement et transition

  • Débordement horizontal: caché
  • Débordement vertical: caché
  • Durée de la transition: 400ms
  • Courbe de vitesse de transition: linéaire
Configuration débordement module résumé divi

Bien! C’était une sérieuse personnalisation d’un module de présentation. Mais la bonne nouvelle est que tout ce que nous avons à faire est de les dupliquer pour créer les panneaux d’accordéon restants.

Dupliquer les Blurbs pour plus de panneaux d’accordéon

Survolez le module de présentation et cliquez quatre fois sur l’icône de duplication pour créer un total de cinq panneaux d’accordéon (ou modules).

Puis mettez à jour les images d’arrière-plan pour chacun des nouveaux textes de présentation que vous avez dupliqués.

Résultat final

Créer un slider avec un accordéon sur divi

Dernières pensées

Ce curseur accordéon réactif a vraiment des éléments uniques qui le rendent amusant à utiliser. Les panneaux d’accordéon se dilatent et se contractent en vol stationnaire sans problèmes inattendus. Et les icônes de présentation changent en vol stationnaire et sur mobile afin de booster UX. Espérons que cette conception sera utile pour votre prochain projet.