Comment transformer plusieurs éléments pour des effets de survol abstraits dans Divi

Comme vous le savez déjà, Divi dispose d'une tonne de paramètres de conception qui vous permettent de créer des effets de survol uniques pour n'importe quel élément Divi (sections, lignes ou modules). Habituellement, un effet de survol est isolé à un seul élément. Par exemple, si vous ajoutez une propriété de rotation de transformation à un module au survol, cette rotation s'activera lors du survol du module. Cependant, si vous ajoutez un effet de survol supplémentaire à la ligne contenant le module, cela ajoute une autre couche d'effets de survol lors du survol du module. Cela ouvre la porte à des effets de survol particulièrement abstraits.

Dans ce tutoriel, nous allons explorer comment transformer plusieurs éléments pour des effets de survol abstraits à l'aide des paramètres intégrés de Divi. Et puisque nous utiliserons les lignes un peu différemment pour cette conception, je vais vous montrer comment créer une disposition de grille pour vos lignes afin que vous puissiez présenter ces effets de survol dans une galerie (si vous le souhaitez).

Commençons.

Aperçu

Téléchargez GRATUITEMENT la mise en page Transformer plusieurs éléments en survol

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Commencer

Abonnez-vous à notre chaîne Youtube

Pour ce tutoriel, vous aurez besoin des éléments suivants :

1. Le thème Divi installé et actif
2. Quelques images. J'utilise des images de nos mises en page prédéfinies accessibles depuis le Divi Builder

Une fois que vous êtes prêt, accédez à votre tableau de bord WordPress. Créez ensuite une nouvelle page (Pages > Ajouter un nouveau), donnez un titre à votre page et déployez le Divi Builder. Choisissez l'option « Créer à partir de zéro ».

Maintenant, votre toile vierge vous attend !

Effets de survol abstraits pour une image

Cette première conception combinera les effets de survol de transformation oblique sur la ligne et le module d'image pour créer un effet d'éventail sur notre image en survol. En plus d'avoir l'air cool, cet effet peut également servir d'interaction d'interface utilisateur utile qui permet à l'utilisateur de savoir qu'en cliquant sur l'image, vous verrez plus d'images. Vous pouvez donc utiliser l'image comme lien vers votre page de galerie si vous le souhaitez.

Voici comment procéder.

Créez d'abord une nouvelle section régulière avec une ligne à une colonne.

Ajoutez ensuite un module d'image à la ligne.

Ensuite, ajoutez télécharger une image dans le module.

Ajouter des effets de survol du module Image

Maintenant, nous pouvons ajouter quelques effets de survol de transformation à l'image qui mettront à l'échelle la rotation et l'inclinaison de l'image. Pour ce faire, accédez aux options de transformation et mettez à jour les éléments suivants :

Échelle de transformation Axes X et Y : 110 %

Transformer Rotation Axe Z : 9 degrés

Transformer l'axe X et Y de l'inclinaison : 3 deg

C'est ça! Assez simple. Nous devons maintenant personnaliser la ligne pour ajouter un autre effet de survol qui s'activera lors du survol des éléments.

Paramètres de ligne

Pour que cette conception fonctionne, la ligne devra être de la même taille que l'image à l'intérieur afin que la zone de survol soit la même pour les deux. Cela nous permettra d'ajouter différents effets de survol à la fois pour le module et la ligne qui s'activera lors du survol du module (ou dans ce cas de l'image). Cela fonctionne car le survol d'un module à l'intérieur d'une ligne activera les effets de survol de la même manière que si vous survoliez la ligne. Et, parce que nous avons un effet de survol différent sur le module, les deux effets de survol s'activeront lors du survol du module. Cela nous permet d'utiliser une combinaison d'effets de survol abstraits à l'aide de l'ombre de la boîte, de l'inclinaison de la transformation et de la rotation de transformation à la fois sur la ligne et le module.

Nous avons déjà mis en place nos effets de survol de module pour notre image, nous devons maintenant ajuster la taille de notre ligne. Selon la taille de l'image, le module devrait déjà couvrir toute la largeur de la ligne, donc techniquement, il n'est pas nécessaire d'ajuster la largeur de la ligne. Mais pour cet exemple, je vais réduire la ligne afin de faire de la place pour nos effets de survol.

Mettez à jour les paramètres de ligne comme suit :

Largeur max : 400px

Puisque nous voulons que la hauteur de notre ligne corresponde à l'image qu'elle contient, nous devons nous débarrasser du rembourrage supérieur et inférieur par défaut :

Rembourrage personnalisé : 0px en haut, 0px en bas

Maintenant, nous devons ajouter une image d'arrière-plan à la colonne de ligne. Cette image d'arrière-plan apparaîtra chaque fois que le module d'image transformera l'effet de survol oblique et pivote.

Image d'arrière-plan de la colonne 1 : [entrer l'image]

Continuez à mettre à jour la ligne avec une ombre de boîte au survol comme suit :

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px (par défaut), -30px (survol)
Position verticale de l'ombre de la boîte : 0px (par défaut), -15px (survol)
Couleur de l'ombre : #002f66

Cette ombre de boîte ajoute l'effet d'une autre image apparaissant derrière l'image d'arrière-plan de la ligne qui apparaîtra une fois que nous aurons ajouté nos effets de survol de transformation qui feront pivoter et incliner l'image d'arrière-plan.

Enfin, nous sommes prêts à ajouter une propriété de transformation skew pour ajouter un effet de survol supplémentaire pour la ligne.

Transformer l'axe X et Y de l'inclinaison : -3 deg

Résultat final

Voici le résultat final.

Et il évoluera également bien sur mobile.

Effets de survol abstraits pour un appel à l'action (exemple 1)

Paramètres de ligne

Créez une nouvelle section régulière avec une ligne à une colonne.

Mettez ensuite à jour les paramètres de ligne comme suit :

Colonne 1 Dégradé de fond à gauche Couleur : rgba(34,43,58,0,71)
Colonne 1 Dégradé de fond à droite Couleur : #222b3a
Image d'arrière-plan : [insérer l'image]
Largeur maximale : 400 px
Rembourrage personnalisé : 0px en haut, 0px en bas

Nous allons revenir aux paramètres de la ligne pour terminer nos effets de survol abstraits dans un instant, mais pour l'instant, ajoutons notre appel au module d'action à la ligne.

Paramètres du module d'appel à l'action

Ouvrez les paramètres du module d'appel à l'action et mettez à jour le contenu comme suit :

Titre : Voyager avec des points
Texte du bouton : cliquez ici
Contenu : Pour un temps limité seulement
URL du lien du bouton : # (juste pour activer le bouton pour le moment)
Utiliser la couleur d'arrière-plan : NON

Mettez ensuite à jour les paramètres de conception pour le texte et l'espacement du module.

Police du titre : Gilda Display
Taille du texte du bouton : 16px
Couleur du texte du bouton : #ffb238
Couleur d'arrière-plan du bouton : rgba(0,0,0,0)
Largeur de la bordure du bouton : 0px

Rembourrage personnalisé : 20 % en haut, 20 % en bas

Ajoutez maintenant une bordure au module.

Largeur de la bordure : 2px
Couleur de la bordure : #222b3a

Cela prend en charge notre conception par défaut. Il est maintenant temps pour la partie amusante. Rappelez-vous, parce que notre ligne et notre module ont essentiellement la même taille (hauteur et largeur), la zone de survol sera la même pour les deux. En d'autres termes, les effets de survol que nous ajoutons à la ligne et au module s'activeront tous les deux lors du survol des éléments. Cela nous permet d'utiliser une combinaison d'effets de survol abstraits à l'aide de l'ombre de la boîte, de l'inclinaison de la transformation et de la rotation de transformation à la fois sur la ligne et le module.

Commençons par les effets de survol de ligne.

Effets de survol de ligne

Tout d'abord, nous pouvons ajouter une ombre de boîte en survol à notre ligne. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px (par défaut), 90px (survol)
Position verticale de l'ombre de la boîte : 0px (par défaut), 80px (survol)
Force de propagation de l'ombre de la boîte : 0px (par défaut), -40px (survol)

Couleur de l'ombre : #ffb238

Gardez à l'esprit que l'ombre de la boîte héritera également des options de transformation que nous ajouterons ensuite.

Ajoutons maintenant une propriété de transformation de rotation et d'inclinaison au survol.

Transformer Rotation Axe X (survol): 10deg
Transformer l'axe X d'inclinaison (survol): -4deg
Transformer l'axe Y de l'inclinaison (survol): -4deg

Cela prend en charge les effets de survol de ligne. Nous devons maintenant ajouter l'effet de survol au module d'appel à l'action qui complètera la conception.

Effets de survol du module d'appel à l'action

Ouvrez les paramètres du module d'appel à l'action et donnez-lui un effet de survol d'ombre de boîte comme suit :

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : 0 px (par défaut), 30 px (survol)
Couleur de l'ombre : #ffffff

Enfin, ajoutez une propriété de transformation d'échelle, de rotation et d'inclinaison au survol comme suit :
Échelle de transformation Axe X et Y (survol): 115%
Transformer l'axe Z de rotation (survol): 9deg
Transformer l'axe X d'inclinaison (survol): 3deg
Transformer l'axe Y de l'inclinaison (survol): 3deg

L'augmentation de la taille du module à l'aide de l'échelle au survol aidera à minimiser le risque que l'utilisateur survole uniquement l'élément de ligne au lieu du module.

Résultat final

Voici le résultat final de l'effet de survol abstrait. Remarquez comment les effets de survol de ligne et les effets de survol de module s'activent au survol pour incliner les éléments pour un dessin abstrait.

Voici à quoi ressemblera l'effet de survol sur mobile. Cependant, étant donné que la plupart des navigateurs mobiles nécessitent un appui pour activer l'effet de survol, vous pouvez désactiver l'effet de survol sur mobile pour éviter que l'utilisateur n'ait à appuyer deux fois si vous utilisez le module comme lien.

Effets de survol abstraits pour un appel à l'action (exemple 2)

Pour lancer la conception de ce prochain effet de survol abstrait, dupliquons la section contenant notre premier exemple. Il ne nous reste plus qu'à apporter quelques ajustements mineurs à la conception et aux effets de survol pour une conception unique.

Mettre à jour les paramètres de ligne

Tout d'abord, mettez à jour les paramètres de ligne comme suit :

Transformer l'axe Z de rotation : -5 deg
Transformer l'axe X et Y de l'inclinaison : -4deg

Mettre à jour les paramètres du module d'appel à l'action

Ajustons maintenant les paramètres du module comme suit :

Tout d'abord, supprimez la frontière…

Largeur de la bordure : 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 de la boîte : 110px
(assurez-vous et désactivez l'effet de survol hérité du design précédent que vous avez dupliqué)
Couleur de l'ombre : #ffb238

Nous pouvons maintenant mettre à jour nos effets de survol de propriété de transformation. Ici, nous réduisons un peu l'échelle et ajoutons des valeurs négatives à nos précédentes propriétés de rotation et de transformation oblique pour déplacer l'élément dans la direction opposée au survol.

Mettez à jour les options de transformation suivantes :

Échelle de transformation Axe X et Y (survol) : 110 %
Transformer l'axe Z de rotation (survol): -9deg
Transformer l'axe X d'inclinaison (survol): -3deg
Transformer l'axe Y de l'inclinaison (survol): -3deg

Création d'une disposition de grille pour vos lignes

Étant donné que cette conception nécessite que la ligne parente entoure le module et ait la même hauteur et la même largeur, vous n'avez pas vraiment la possibilité de créer une disposition de colonnes comme vous le feriez normalement. Cependant, vous pouvez utiliser la propriété flex pour aligner vos lignes horizontalement dans une disposition en grille.

Pour ce faire, dupliquez d'abord la ligne contenant votre module plusieurs fois afin d'avoir trois lignes dans une section.

Ajoutez ensuite une marge personnalisée à chacune des lignes :

Marge personnalisée : 50 pixels en haut, 50 pixels en bas

Ouvrez ensuite les paramètres de la section et ajoutez simplement le CSS personnalisé suivant à l'élément principal.

display: flex;
flex-wrap: wrap;

Vous avez maintenant trois colonnes de lignes qui répondront à la taille de votre navigateur.

Dernières pensées

La transformation de plusieurs éléments en survol offre un autre niveau de créativité que vous pouvez explorer. Les exemples de ce didacticiel visaient à vous montrer ce qui est possible, mais n'hésitez pas à modifier les conceptions pour votre propre projet. Comme vous vous en doutez, vous pouvez devenir assez farfelu si vous le souhaitez. Mais vous pouvez également être un peu plus conservateur pour créer un élément de conception d'interaction subtile comme l'exemple de module d'image dans ce didacticiel.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!