Une fois que la partie image est prête, nous pouvons commencer le processus de conception dans Divi. Voici comment faire.
Ajouter la ligne # 1 pour commencer, créez une ligne et quatre colonnes.
Puisque nous placerons la deuxième ligne au – dessus absolu de la première, nous devons supprimer le remplissage en haut (et en bas) de la Section afin qu’elle n’efface pas la position de la deuxième ligne. Ouvrez les paramètres de la section et mettez à jour ce qui suit:
Remplissage: 0px en haut, 0px à gauche Sur la première ligne, nous ajouterons chacune des 8 images \ parties qui composent la première image. Les images doivent être placées dans les colonnes (4 horizontales, moins de 2) exactement comme elles ont été coupées dans Photoshop. Voici une illustration de chaque image numérotée. C’est l’apparence de toutes les images ajoutées à la ligne. La figure 1 ajoute le premier module image à la colonne 1. La première partie de l’image est ensuite chargée dans le module. Dans l’onglet avancé, ajoutez l’effet de défilement suivant à l’image.
Activer le fondu d’entrée et de sortie: est l’opacité initiale: 100% (sous 20% de vue) opacité moyenne: 100% (sous 20% de vue) opacité finale: 0% (sous 50% de vue) Cliquez sur l’onglet Échelle et mettez à jour ce qui suit: activer le redimensionnement vers le haut et vers le bas: s Échelle initiale: 100% (sous 20% de vue) Échelle moyenne: 70% (sous 32% – 48% de vue) Échelle finale: 100% (sous 60% de vue) Cliquez sur l’onglet Ruo
Ligne 5. Ensuite, réglez le glissement de rotation Inverse (- 90 degrés) comme suit: rotation finale: – 90 degrés Image # 7 pour créer l’image # 7, copiez l’image # 5 et déplacez – la sous l’image # 3 dans la colonne 3. Ensuite, mettez à jour le formulaire copier l’image avec l’image No 7. Image # 8 pour créer l’image # 8, copiez l’image # 6 et déplacez – la sous l’image # 4 dans la colonne 4. Le module image dupliquée est ensuite mis à jour avec l’image no 8. Toutes les parties de l’image sont maintenant ajoutées à la ligne 1 avec un effet de défilement distinct. C’est ce qui s’est passé jusqu’à présent. L’ajout de la deuxième ligne de l’image de la ligne # 2 ne prendra pas beaucoup de temps à concevoir. Tout ce que nous avons à faire est de copier la ligne 1, mettre à jour toutes les images avec les images correctes et leur assigner une position absolue. Continuez à copier la ligne 1. Rafraîchir l’image de la ligne 2 en gardant à l’esprit l’image tournante que nous avons créée pour le numéro d’image. Maintenant, tout ce que nous avons à faire est de charger chaque image à la bonne position du module image de la ligne 2. Mettre à jour l’effet de défilement de l’image une fois que l’image nouvellement tournée est en place, nous devons supprimer les effets de défilement fade – in et fade – out de toutes les images de la ligne 2. Pour ce faire, déployez le mode d’affichage wireframe et utilisez plusieurs sélections pour sélectionner les 8 images de la ligne 2. Ouvre ensuite les paramètres d’une des images sélectionnées pour distribuer les paramètres du projet. Sous les options d’effet de diapositive de fondu vers l’intérieur et vers l’extérieur, mettre à jour ce qui suit: activer le fondu vers l’intérieur et vers l’extérieur: Non Localiser la ligne 2 notre dernière étape consiste à placer la ligne 2 directement derrière la ligne 1. Une façon simple est de fournir des lignes et des positions absolues. Ouvrez les paramètres de la ligne 2 et mettez à jour ici
NTO suivant: position: position absolue: Centre mort supérieur Pour voir les résultats, vous devrez peut – être fournir un grand nombre de marges supérieures et inférieures pour la section, ou créer des sections supplémentaires au – dessus et au – dessous du dessin. Cela vous donnera l’espace nécessaire pour voir correctement l’effet de glissement. Voyons le résultat final. Son portable est là. Cette transition d’image autonome est en soi un design impressionnant, mais vous pouvez facilement l’utiliser pour transmettre un message transformationnel (avant et après, par exemple) à vos visiteurs. Vous n’avez pas non plus à vous contenter de ce design. N’hésitez pas à essayer différents effets de défilement pour créer de meilleures transitions d’image. Tu as une idée? J’ai hâte d’entendre vos commentaires. Bonjour!
Remplissage: 0px en haut, 0px à gauche
Activer le fondu d’entrée et de sortie: est l’opacité initiale: 100% (sous 20% de vue) opacité moyenne: 100% (sous 20% de vue) opacité finale: 0% (sous 50% de vue)
Ligne 5. Ensuite, réglez le glissement de rotation Inverse (- 90 degrés) comme suit: rotation finale: – 90 degrés
NTO suivant: position: position absolue: Centre mort supérieur