Comment créer un curseur d’accordéon réactif dans Divi

Le curseur d’accordéon est une façon amusante et fascinante d’afficher le contenu dans un petit espace. Les curseurs d’accordéon sont généralement composés de plusieurs éléments (ou panneaux) empilés horizontalement, comme les plis d’un rideau. Lorsque vous passez le curseur sur l’un des panneaux, il s’agrandit pour afficher le contenu, tandis que les autres panneaux d’accordéon se rétrécissent. C’est là que nous obtenons un effet d’accordéon. Dans ce tutoriel, je vais vous montrer comment créer un curseur d’accordéon réactif en utilisant CSS dans Divi. Pour ce faire, nous utiliserons plusieurs modules Divi comme panneaux d’accordéon. N’importe quel module peut être utilisé, mais dans ce cas, nous allons utiliser le module Blurb d’une manière très créative pour construire un beau curseur d’accordéon qui semble (et fonctionne) Bien sur le Bureau et sur les appareils mobiles.
Regarde ça! Voici un aperçu rapide de ce que nous allons construire dans ce tutoriel. Bureau Tablettes et téléphones portables Téléchargement gratuit Divi Responsive accord Slider Layout pour obtenir le curseur accordéon conçu dans ce tutoriel, vous devez d’abord le télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes d éjà inscrit, d
Texte: transparent (bureau), # FFFFFF (curseur de souris) Hauteur du cadre et ombres une fois le texte stylisé, spécifiez une hauteur de 100% et des ombres du cadre pour le formulaire comme suit: hauteur: 100% ombres du cadre: voir la capture d’écran position horizontale des ombres du cadre: – 12px position verticale des ombres du cadre: 0px Personnaliser CSS Blurb pour étendre et rétrécir notre panneau d’accordéon (ou module Blurb) avec d’autres modules, nous devons ajouter quelques CSS personnalisés pour changer la taille du module en utilisant Flex grow. Comme nous avons au total 5 modules qui composent l’accordéon, nous ajoutons \
Dans l’onglet avancé, ajoutez les CSS personnalisés suivants à l’élément principal Blurb: desktop Flex: 1;
Position: relative! Important
Transition: Flex 800ms! Important
Comprimés souples: 5 comprimés;
Ensuite, ajoutez le CSS personnalisé suivant au CSS de contenu Blurb: emplacement du Bureau: absolu! Important
Largeur: 280px;
Remplissage: 20px;
Transition: couleur 400ms; Position de la tablette: relative! Important
Largeur: 100%;
Hauteur: 100%;
Remplissage: 20px;
Transition: couleur 400ms; Débordement et transition débordement horizontal: cacher débordement vertical: cacher la durée de la transition: 400 MS courbe de vitesse de transition: linéaire C’est pas grave! Il s’agit d’une personnalisation stricte du module Blurb. Mais la bonne nouvelle, c’est que tout ce que nous avons à faire est de les copier pour créer le reste du panneau d’accordéon. Passez le curseur de copie de plusieurs panneaux d’accordéon sur le module Blurb, puis cliquez quatre fois sur l’icône copier pour créer un total de cinq panneaux d’accordéon (ou modules). Ensuite, mettez à jour chaque nouvelle image de fond floue que vous avez copiée. Résultat final du Bureau Tablettes et téléphones portables Dernière idée: curseur d’accordéon