Comment afficher une bibliothèque d’images avec un effet de défilement de puzzle coulissant dans Divi

Utilisez l’icône flèche vers le bas. Les paramètres de flou sont ensuite mis à jour avec de nouvelles couleurs et des animations de diapositives répétées.
Couleur de l’icône: # ffb500 style d’animation: direction de l’animation de diapositives: intensité de l’animation vers le bas: 20% répétition de l’animation: boucle Pour laisser un peu d’espace de défilement à cette section, mettre à jour le remplissage comme suit: remplir: 20vh ci – dessus, 50vh ci – dessous nous utilisons ici la longueur unitaire VH, qui correspond à la hauteur de la fenêtre du navigateur, de sorte que l’espacement s’adapte uniformément à toutes les tailles du Navigateur. Créer une bibliothèque d’images avec effet de défilement maintenant que notre section titre est terminée, nous sommes prêts à construire une bibliothèque d’images réelle avec effet de défilement de puzzle coulissant. L’ensemble de la galerie se composera de trois lignes (4 images \/ colonnes par ligne) pour un total de 12 images. Cependant, une fois la mise en page terminée, vous pouvez facilement ajouter plusieurs lignes et images à la mise en page.
Section de construction et lignes ajouter une nouvelle section commençons par ajouter une nouvelle section générale sous la section titre. Ensuite, ajoutez une ligne et quatre colonnes à la section. Sous paramètres de ligne, mettre à jour ce qui suit: largeur de fente: 1 largeur: 100% largeur maximale: 1200 pixels (bureau), 600 pixels (tablette), 300 pixels (téléphone)

Comment la largeur de ligne détermine la taille de l’image la largeur de ligne est importante pour ce dessin parce qu’elle détermine la largeur de chaque colonne dans les quatre colonnes. Lorsque la largeur de la marge est réglée à 1, il n’y a pas de marge entre les images. Lorsque nous réglerons la largeur maximale à 1200 Px, la disposition à quatre colonnes fera exactement 300 Px (1200 px \/ 4 = 300 Px) pour chaque colonne \/ image. En outre, en raison
Arica crée une nouvelle image dans les paramètres de l’image.

L’effet de défilement de l’image 4 met ensuite à jour l’effet de défilement suivant: sur l’onglet mouvement vertical… Activer le mouvement vertical: s décalage initial: 3 (à 0% viewport) décalage moyen: 0 (à 15% – 28% viewport) décalage final: 0 (à 40% viewport) dans l’onglet mouvement horizontal… Activer le mouvement horizontal: s décalage initial: 3 (à 0% viewport) décalage moyen: 3 (à 28% viewport) décalage final: 0 (à 40% viewport) Copier la ligne maintenant que l’effet de défilement de l’image de la première ligne est terminé, tout ce que nous avons à faire est de copier la ligne pour créer plus d’images et l’effet de défilement correspondant. Dans cet exemple, nous copions la ligne deux fois, créant un total de trois lignes. Remplacez et réarrangez l’image au besoin, puis nous pouvons utiliser la fonction glisser – déposer de la sélection pour déplacer l’image à l’endroit désiré. Ici, vous pouvez faire preuve de créativité en faisant défiler l’image pour voir comment elle se déplace. Une fois l’image en place, vous pouvez remplacer le contenu du module image par une nouvelle image adaptée aux besoins du site. Comme notre image peut s’étendre au – delà de la section \/ vue, nous cachons le débordement pour le nettoyer un peu. Ouvrir les paramètres de la section et mettre à jour ce qui suit: débordement horizontal: masquer le débordement vertical: masquer Nous voulons que l’effet de défilement vertical de l’image supérieure (qui s’étend sur toute la section) soit visible malgré les débordements cachés. Ensuite, nous ajoutons un remplissage supérieur et inférieur égal à la hauteur de l’image (300 Px). Résultats jusqu’à présent, si vous voulez garder la conception de la galerie sans espace entre les images, nous pouvons nous arrêter là. C’est ce qui s’est passé jusqu’à présent. Note qu
Ile. Comme d’habitude, j’attends avec intérêt vos commentaires. Bonjour!