Le module de bibliothèque d’images de Divi reste un outil pratique et utile pour créer une belle bibliothèque d’images pour votre site. Les paramètres de conception intégrés répondent à tous vos besoins. Cependant, dans ce tutoriel, nous allons élever la conception de la Bibliothèque d’images à un nouveau niveau avec des effets d’animation étonnants uniques. Combine les options de conception intégrées de Divi anime. JS, cette animation étonnante ressemble à un effet de chaîne, montrant chaque image dans la galerie une par une à travers l’animation de conception de fluide. Ce sera parfait pour ceux qui, en parcourant chaque page de la galerie, souhaitent offrir aux visiteurs une présentation unique de la galerie et une transition impressionnante.
Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. C’est un stylo de code qui démontre le même concept. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les 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à abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer
Test: Poppins title text alignment: Central title text color: # FFFFFF title text size: 100 pixels (Desktop), 80 pixels (tablette), 60 pixels (mobile)
Pour les lignes du module bibliothèque dans la même section, créez une nouvelle ligne dans la colonne qui contiendra le module bibliothèque. Ouvrir les paramètres de ligne et leur assigner un fond noir: couleur de fond: # 000000 Dans les paramètres de conception, mettre à jour ce qui suit: utiliser une largeur de gouttière personnalisée: s largeur de gouttière: 1 largeur: 95% hauteur minimale: 80vh remplissage: 0px en haut, 0px ombres du cadre inférieur: voir la position verticale des ombres du cadre de capture d’écran: 0px position horizontale des ombres du cadre: 0px force de diffusion des ombres du cadre: 70 Px couleur des ombres: # 000000
Partie 2: conception du module bibliothèque Enfin, nous sommes prêts à ajouter et à concevoir le module bibliothèque. Pour créer une bibliothèque, ajoutez un nouveau module de bibliothèque à la ligne. Images dans l’onglet Contenu des paramètres de la bibliothèque, ajoutez les images que vous souhaitez utiliser pour la bibliothèque. Pour cet exemple, nous ajouterons 65 images (ou au moins 25). Cela nous fournira un grand nombre d’éléments de galerie pour montrer nos effets d’animation et de mise en page incroyables. Après avoir téléchargé l’image dans la bibliothèque, mettre à jour ce qui suit: nombre d’images: 25afficher le titre et la description: non afficher la mise en page: Oui
Remarque: Définissez le nombre d’images à 25 pour définir le nombre d’images affichées par page lorsque vous cliquez sur un lien de mise en page. Nous allons utiliser le code personnalisé pour ajouter une animation de grille étonnante basée sur une bibliothèque d’images avec 5 lignes et 5 images (25 images) par page. Pour de meilleurs résultats, assurez – vous qu’il y a au moins 25 images et que le nombre d’images est réglé à 25. Couverture et mise en page
Design dans l’onglet design, mettre à jour Overlay Design: overlay icon color: # FFFFFF overlay Background color: rgba (21721181,0,55) overlay icon: plus icon (voir capture d’écran)
Alignement du texte de mise en page: taille du texte de mise en page centrale: 2emlayout Line height: 2emfill: 10px top, 10px Bottom, 5px left, 5px right Ensuite, nous ajouterons des styles avancés au module galerie. La raison principale est de contrôler le nombre d’images affichées par ligne sur différents appareils. Tout d’abord, nous ajoutons quelques CSS à l’élément galerie comme suit: animation de l’élément galerie CSS (bureau): fadeleft 0s! Important
Contexte: # 000000;
Remplissage: 10px;
Largeur: 20%! Important
Marge: 0! Important
Clair: aucun! Important
Éléments de la galerie CSS (tablette)
Animation: fadeleft 0s! Important
Contexte: # 000000;
Emballage: 5px;
Largeur: 25%! Important
Marge: 0! Important
Clair: aucun! Important
CSS Gallery element (mobile) Animation: fadeleft 0s! Important
Contexte: # 000000;
Emballage: 5px;
Largeur: 50%! Important
Marge: 0! Important
Clair: aucun! Important
Notez que la largeur de chaque élément de la Bibliothèque change sur chaque appareil. 20% de la largeur du Bureau crée 5 images par ligne. 25% de la largeur de la tablette crée 4 images par ligne. Et 50% de la largeur du téléphone crée 2 images par ligne. Ensuite, supprimez la bordure de mise en page, mais ajoutez le CSS suivant à la bordure de mise en page de la bibliothèque: en haut de la bordure: 0px! Important
Haut de l’emballage: 20px;
Enfin, ajoutez une couleur personnalisée et une épaisseur de police au lien de pagination actif: Couleur: # d915b5! Important
Taille de la police: en gras; Avant d’enregistrer, assurez – vous d’ajouter les classes CSS suivantes au module galerie: classes CSS: et galerie animée Partie 3: utiliser jquery pour ajouter un effet d’animation étonnant à la galerie
Et l’animation. JS est maintenant terminé et nous avons une disposition simple et professionnelle de la Bibliothèque d’images. Tout ce que nous avons à faire est d’ajouter le Code nécessaire pour créer une animation étonnante dans la galerie d’images. Pour ce faire, ajoutez un formulaire de code sous le formulaire de bibliothèque. Dans la zone de contenu du Code, collez le CSS suivant pour vous assurer que le CSS est inclus dans l’étiquette de style souhaitée: \ * masquer les liens de la page précédente et de la page suivante
– Oui. Et animation Gallery Lee. Page précédente. Et animation Gallery Lee. Suivant
Affichage: aucun! Important
} La Bibliothèque d’animation. JS sous l’étiquette de style final, collez le SRC ci – dessous avec l’étiquette de script pour appeler la Bibliothèque d’animation. JS, afin que nous puissions l’utiliser avec Javascript \ jquery ci – dessous. Src = ‘ https:\\cdnjs.cloudflare.com\ajax\libs\animejs\3.2.1\anime.min.js \
USD (file). Ready (Function () {
Var from center = \
Var animetargetitem = \
Var animetargetimage = \
Var $paginationlink = $(\
Galerie d’animation lorsque la page est chargée
Animategalleryfunction (animatetargetitem, animatetargetimage, from Center);
Galerie d’animation lorsque vous cliquez sur le lien numéro de page
$($page Link). Cliquez sur (fonction (e)
Var pagenum = $(e.target). Propriétés (\
Var from num = pagenum * 25 – 25 \ \ Remplacer 25 par le nombre d’images du module galerie
Animategalleryfunction (animatetargetitem, animatetargetimage, from num);
});
Fonction animategalleryfunction (targetitem, targetimage, stagfrom) {
Image de la Bibliothèque d’animation
Animation ({0}
Cible: targetimage,
Opacité: [0, 1],
Rotatex: [0360],
Échelle: [0.
5, 1],
Direction: \
Relax: \
Durée: 600,
Latence: animation. Décaler
200,
Posté le mardi 10 décembre 2013 à 20: 00
{Start: \
()
});
Arrière – plan du projet de bibliothèque d’animation
Animation ({0}
Cible: targetitem,
Contexte: [\
Direction: \
Relax: \
Durée: 600,
Latence: animation. Décaler
250,
Posté le mardi 10 décembre 2013 à 20: 00
{Start: \
()
});
}
});
}); Mise à jour des bibliothèques et du Code chaque fois que vous voulez modifier les bibliothèques et les effets d’animation pour vous adapter à votre site, vous devez vous souvenir de quelques conseils. Tout d’abord, si vous voulez changer le nombre d’images de la bibliothèque à une valeur autre que 25, vous devez mettre à jour le Code pour refléter la nouvelle valeur. Par exemple, si vous le changez à 20, vous devez également changer le nombre à la variable suivante: var from num = pagenum * 25 – 25; Pour cela… Var fromnum = pagenum * 20 – 20; Vous devrez peut – être également mettre à jour la valeur de la grille pour l’attribut Delay sur les deux animations. Par exemple, si vous n’avez que 20 images par page sur votre bureau, il n’y a que 4 lignes sur 5. Par conséquent, vous devez changer les valeurs suivantes: grille: [5, 5] ceci… Grille: [4, 5] de plus, vous pouvez changer les valeurs des attributs d’animation au besoin. Par exemple, si vous voulez changer la couleur d’animation de fond d’un élément de galerie, vous pouvez mettre à jour ce qui suit: arrière – plan: [\
C’est une façon d’élever la conception à un nouveau niveau. La clé de l’animation est d’utiliser la puissance de la Bibliothèque d’animation. JS exécute plusieurs animations avec l’image cible et l’arrière – plan. N’hésitez pas à en savoir plus sur l’entrelacement des mailles d’animation. JS est sur leur site Web. Vous pouvez ajuster les propriétés et les valeurs de votre code à volonté pour ajouter vos réflexions à votre conception. J’ai hâte d’entendre vos commentaires. Bonjour!
Test: Poppins title text alignment: Central title text color: # FFFFFF title text size: 100 pixels (Desktop), 80 pixels (tablette), 60 pixels (mobile)
Design dans l’onglet design, mettre à jour Overlay Design: overlay icon color: # FFFFFF overlay Background color: rgba (21721181,0,55) overlay icon: plus icon (voir capture d’écran)
Contexte: # 000000;
Remplissage: 10px;
Largeur: 20%! Important
Marge: 0! Important
Clair: aucun! Important
Éléments de la galerie CSS (tablette)
Animation: fadeleft 0s! Important
Contexte: # 000000;
Emballage: 5px;
Largeur: 25%! Important
Marge: 0! Important
Clair: aucun! Important
CSS Gallery element (mobile) Animation: fadeleft 0s! Important
Contexte: # 000000;
Emballage: 5px;
Largeur: 50%! Important
Marge: 0! Important
Clair: aucun! Important
Notez que la largeur de chaque élément de la Bibliothèque change sur chaque appareil. 20% de la largeur du Bureau crée 5 images par ligne. 25% de la largeur de la tablette crée 4 images par ligne. Et 50% de la largeur du téléphone crée 2 images par ligne. Ensuite, supprimez la bordure de mise en page, mais ajoutez le CSS suivant à la bordure de mise en page de la bibliothèque: en haut de la bordure: 0px! Important
Haut de l’emballage: 20px;
Enfin, ajoutez une couleur personnalisée et une épaisseur de police au lien de pagination actif: Couleur: # d915b5! Important
Taille de la police: en gras;
Et l’animation. JS est maintenant terminé et nous avons une disposition simple et professionnelle de la Bibliothèque d’images. Tout ce que nous avons à faire est d’ajouter le Code nécessaire pour créer une animation étonnante dans la galerie d’images. Pour ce faire, ajoutez un formulaire de code sous le formulaire de bibliothèque.
– Oui. Et animation Gallery Lee. Page précédente. Et animation Gallery Lee. Suivant
Affichage: aucun! Important
}
USD (file). Ready (Function () {
Var from center = \
Var animetargetitem = \
Var animetargetimage = \
Var $paginationlink = $(\
Galerie d’animation lorsque la page est chargée
Animategalleryfunction (animatetargetitem, animatetargetimage, from Center);
Galerie d’animation lorsque vous cliquez sur le lien numéro de page
$($page Link). Cliquez sur (fonction (e)
Var pagenum = $(e.target). Propriétés (\
Var from num = pagenum * 25 – 25 \ \ Remplacer 25 par le nombre d’images du module galerie
Animategalleryfunction (animatetargetitem, animatetargetimage, from num);
});
Fonction animategalleryfunction (targetitem, targetimage, stagfrom) {
Image de la Bibliothèque d’animation
Animation ({0}
Cible: targetimage,
Opacité: [0, 1],
Rotatex: [0360],
Échelle: [0.
5, 1],
Direction: \
Relax: \
Durée: 600,
Latence: animation. Décaler
200,
Posté le mardi 10 décembre 2013 à 20: 00
{Start: \
()
});
Arrière – plan du projet de bibliothèque d’animation
Animation ({0}
Cible: targetitem,
Contexte: [\
Direction: \
Relax: \
Durée: 600,
Latence: animation. Décaler
250,
Posté le mardi 10 décembre 2013 à 20: 00
{Start: \
()
});
}
});
});
C’est une façon d’élever la conception à un nouveau niveau. La clé de l’animation est d’utiliser la puissance de la Bibliothèque d’animation. JS exécute plusieurs animations avec l’image cible et l’arrière – plan. N’hésitez pas à en savoir plus sur l’entrelacement des mailles d’animation. JS est sur leur site Web. Vous pouvez ajuster les propriétés et les valeurs de votre code à volonté pour ajouter vos réflexions à votre conception. J’ai hâte d’entendre vos commentaires. Bonjour!