Comment convertir plusieurs éléments d’un effet de curseur abstrait en Divi

Zzo envoie un e – mail ci – dessous, puis 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 votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Pour importer une mise en page dans une page, il suffit d’extraire le fichier zip et de faire glisser le fichier json dans Divi Builder.
On va voir le tutoriel, non? Pour ce tutoriel, vous aurez besoin de ce qui suit: installez le thème Divi et activez quelques images. Je travaille avec des images dans la mise en page par défaut, accessible depuis Divi Builder. Une fois prêt, allez sur le tableau de bord WordPress. Ensuite, créez une nouvelle page (page > Ajouter une nouvelle page), spécifiez un titre pour la page et déployez Divi Builder. Sélectionnez l’option construire à partir de zéro. Votre toile vous attend! Abstract image Mouse overhang Effects cette première conception combine l’effet d’inclinaison de la souris overhang sur la ligne et le module image pour créer un effet de ventilateur sur l’image pendant que la souris overhang. En plus d’avoir l’air intéressant, cet effet peut également être utilisé comme une interface utilisateur utile, permettant à l’utilisateur de savoir qu’en cliquant sur l’image, vous verrez plus d’images. Vous pouvez ensuite utiliser l’image comme lien vers la page de la bibliothèque si vous le souhaitez.
Voici comment faire. Commencez par créer une nouvelle section générale qui convertit les lignes en colonnes. Le module image est ensuite ajouté à la ligne. Ensuite, ajoutez l’image téléchargée au formulaire. Ajoutez des effets lorsque vous passez par le module image maintenant, vous pouvez ajouter des effets de transformation lorsque vous déplacez la souris sur une image qui Zoome, tourne et incline l’image. Pour ce faire, allez aux options de transformation et mettez à jour ce qui suit: transformer l’échelle X et l’axe Y: 110% Changer le volant de l’axe Z: 9 degrés Transformation I
Chaque fois que vous changez l’inclinaison et la rotation de la souris à travers le module image, vous obtenez un effet doux. Colonne 1 image de fond: [insérer une image] Continuer à utiliser les lignes de mise à jour des ombres de cadre pendant le vol stationnaire comme suit: ombres de cadre: voir la position horizontale des ombres de cadre de capture d’écran: 0 Px (par défaut), – 30 Px (en vol stationnaire) position verticale des ombres de cadre: 0 Px (par défaut), – 15 Px (en vol stationnaire) couleur des ombres: # 002f66 Cette ombre de boîte ajoute l’effet d’une autre image affichée derrière l’image de fond de ligne, qui s’affiche lorsque vous ajoutez l’effet de transformation au canal de la souris, qui tourne l’image de fond et l’incline dans la vue. Enfin, nous sommes prêts à ajouter un attribut de transformation d’inclinaison pour ajouter un effet supplémentaire à la souris à travers la ligne. Transformer l’inclinaison X et l’axe Y: – 3 degrés Résultat final il s’agit du résultat final. Et il peut être bien installé sur un appareil mobile. Les paramètres de ligne de l’effet de curseur abstrait de l’invitation à l’action (exemple 1) créent une nouvelle section générale avec une ligne dans la colonne. Ensuite, mettez à jour les paramètres de ligne comme suit: colonne 1 gradient de fond couleur gauche: rgba (34,43,58,0,71) colonne 1 gradient de fond couleur droite: # 222b3a image de fond: [insérer l’image] largeur maximale: 400 Px remplissage personnalisé: 0px haut, 0px bas Plus tard, nous reviendrons à la configuration de la ligne pour compléter l’effet abstrait du curseur de la souris, mais maintenant nous ajouterons un module d’appel à l’action dans la ligne. Configuration du formulaire d’appel à l’action ouvrez la configuration du formulaire d’appel à l’action et mettez à jour le contenu comme suit:
Titre: Travel button text with a point: click here Contents: url links for Limited time only
Bouton: # (actuellement utilisé uniquement pour activer les boutons) Utiliser la couleur de fond: Non Ensuite, mettez à jour les paramètres de conception du texte et de l’espacement du formulaire. Police du titre: Guild Display button text size: 16 Px button text color: # ffb238 button Background color: rgba (0,0,0,0) button Border width: 0px Custom fill: TOP 20%, bottom 20% Ajoutez maintenant une bordure au formulaire. Largeur de la bordure: 2px couleur de la bordure: # 222b3a Cela tiendra compte de notre conception par défaut. Il est temps de commencer la partie amusante. Gardez à l’esprit que puisque nos lignes et modules ont essentiellement la même taille (hauteur et largeur), la zone de passage de la souris sera la même pour les deux. En d’autres termes, lorsque vous passez le curseur sur un élément, les effets que nous ajoutons aux lignes et aux modules sont activés. Cela nous permet d’utiliser une combinaison d’effets abstraits de curseur de souris sur les lignes et les modules, en utilisant des ombres de boîte, des inclinaisons de transformation et des rotations de transformation. Commençons par l’effet lorsque vous déplacez la souris. Tout d’abord, nous pouvons ajouter une ombre de boîte pendant que la souris survole notre ligne. Allumez les paramètres de ligne et mettez à jour ce qui suit: ombres de cadre: voir la position horizontale des ombres de cadre de capture d’écran: 0 Px (par défaut), 90 Px (curseur de souris) position verticale des ombres de cadre: 0 Px (par défaut), 80 Px (curseur de souris) intensité de diffusion des ombres de cadre: 0px (par défaut), – 40px (Hover) Shadow color: # ffb238 Rappelez – vous que les ombres de la boîte hériteront également des options de conversion que nous ajouterons plus tard. Maintenant, ajoutons les attributs de transformation de rotation et d’inclinaison au canal de la souris. Changer le rouleau de l’axe X (vol stationnaire): 10 degrés changer l’inclinaison de l’axe X (vol stationnaire): – entre 4 degrés
Ga comme suit: changer la roue de l’axe Z: – 5 degrés changer l’inclinaison X et l’axe Y: – 4deg Mettre à jour les paramètres du formulaire d’invitation à l’action maintenant, changeons les paramètres du formulaire comme suit: premièrement, supprimer les limites du formulaire d’invitation… Largeur du bord: 0px Ensuite, mettez à jour l’ombre de la boîte comme suit: position horizontale de l’ombre de la boîte: 0px position verticale de l’ombre du cadre: 110 Px (assurez – vous et désactivez l’effet de vol stationnaire hérité du dessin précédemment copié) couleur de l’ombre: # ffb238 Nous pouvons maintenant mettre à jour l’effet pendant que nous survolons la propriété transformation. Ici, nous avons essentiellement réduit légèrement l’échelle et ajouté des valeurs négatives aux attributs d’inclinaison de rotation et de transformation précédents pour déplacer l’élément dans la direction opposée au mouvement de la souris. Mettre à jour les options de transformation suivantes: transformer l’échelle X et l’axe Y (vol stationnaire): transformer la roue de l’axe Z à 110% (vol stationnaire): – 9deg transformer l’inclinaison de l’axe X (vol stationnaire): – 3deg transformer l’inclinaison de l’axe Y (vol stationnaire): – 3deg Créez une disposition de grille pour les lignes parce que cette conception exige que la ligne mère entoure le formulaire et ait la même hauteur et largeur, de sorte que vous ne pouvez pas créer une disposition de colonne comme d’habitude, mais vous pouvez utiliser l’attribut Flex pour aligner horizontalement les lignes dans la disposition de grille. Pour ce faire, copiez d’abord la ligne contenant le formulaire plusieurs fois de sorte qu’il y ait trois lignes dans une section. Ensuite, ajoutez des marges personnalisées à chaque ligne: Marges personnalisées: 50 Px en haut et 50 Px en bas. Ensuite, ouvrez les paramètres de section et ajoutez simplement les CSS personnalisés suivants à l’élément principal. Affichage: Flex;
Emballage flexible: emballage; Il y a maintenant trois colonnes de lignes qui répondent en fonction de la taille du navigateur. L’idée finale de convertir plusieurs éléments en cliquant sur la souris offre un autre temps réel
La créativité que vous pouvez explorer. Les exemples de ce tutoriel sont conçus pour vous montrer ce qui est possible, mais vous pouvez modifier la conception du projet à volonté. Comme vous pouvez vous y attendre, vous pouvez devenir assez extravagant si vous le souhaitez. Mais vous pouvez aussi être plus prudent dans la création d’un élément de conception interactif subtil, comme l’exemple du module image dans ce tutoriel. J’ai hâte d’entendre vos commentaires. Bonjour!