Comment transformer le curseur en bouton créatif tout en survolant l'élément à l'aide de Divi

Rifat Divi Tutorials Jul 8, 2021

Que se passe-t-il si vous passez la souris sur un élément et qu'il devient un bouton et que cliquer dessus vous redirigera vers une autre page ? Nous plaçons souvent un bouton en bas ou sur le côté de la galerie d'images ou des vignettes d'articles/produits pour nous amener à la page détaillée de cet élément. Que faire si le bouton n'est pas défini visuellement ? Nous le définissons avec l'effet de survol de la souris afin que la souris devienne un bouton dès qu'elle atterrit sur les vignettes d'image ou d'article et clique n'importe où dans la zone spécifique qui nous mènera à la page souhaitée. Oui! Avec Divi , nous avons de nombreuses options pour personnaliser notre site Web et le tutoriel d'aujourd'hui explique comment transformer un curseur en bouton créatif tout en survolant l'élément. N'est-ce pas excitant?

Alors n'attendons pas plus et sautons dans le tutoriel.

Pic furtif

Avant d'aller plus loin, voici à quoi ressemblera notre design d'aujourd'hui.

Première partie : Structure des éléments de construction

Ajoutez une page depuis votre tableau de bord WordPress et ouvrez-la avec Divi builder. Allez de l'avant avec "Build From Scratch".

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Ajout : Nouvelle section

Couleur de l'arrière plan

Nous allons ajouter du blanc comme couleur de fond à notre section initiale.

  • Couleur d'arrière-plan : #ffffff

Espacement

Maintenant, à partir de l'onglet Conception, ajoutez un espacement à la section.

  • Rembourrage supérieur : 80px
  • Rembourrage inférieur : 0px

Ajout : Nouvelle ligne

Structure des colonnes

Nous allons maintenant ajouter une ligne de deux colonnes à notre section.

Dimensionnement

Maintenant, avant d'ajouter d'autres modules, modifions les paramètres de dimensionnement de cette ligne à deux colonnes.

  • Largeur maximale : 2580px

Espacement

Maintenant, apportez quelques modifications à l'espacement.

  • Rembourrage supérieur : 0px
  • Rembourrage inférieur : 0px

Ajout : Module d'image à la colonne 1

Ajouter une image

Ajoutez maintenant un module d'image à la colonne 1 et ajoutez une image de votre choix.

Ajouter un lien

Ajoutez maintenant un lien vers cette image.

Échelle de survol

Maintenant, passez à l'onglet Conception et modifions les paramètres d'échelle de survol de ce module d'image.

  • Les deux : 90 %

Classe CSS

Ajoutez une classe CSS à partir de l'onglet avancé.

  • Classe CSS : image-cursor

Ajout : Module de texte 1 à la colonne 1

Contenu H3

Nous ajouterons un module de texte à la colonne 1 et ajouterons du contenu H3 selon les besoins.

Paramètres de contenu H3

Modifiez les paramètres de contenu H3 à partir de l'onglet Conception.

  • Titre 3 Police : Acteur
  • Titre 3 Couleur du texte : #000000
  • Titre 3 Taille du texte : ordinateur de bureau : 35 pixels, tablette : 28 pixels et téléphone : 22 pixels
  • Titre 3 Hauteur de ligne : 1.4em

Espacement

Ajoutez un espacement au module de texte.

  • Marge inférieure : 15px

Ajout : Module de texte 2 à la colonne 1

Contenu du texte

Ajoutez un autre module de texte juste sous le module de texte précédent et ajoutez du contenu descriptif à ce module.

Paramètres de contenu de texte

Modifiez les paramètres de contenu du texte à partir de l'onglet Conception.

  • Titre 3 Police : Acteur
  • Titre 3 Couleur du texte : #75BAFF
  • Titre 3 Taille du texte : Bureau : 22 px, Tablette : 18 px Et téléphone : 15 px
  • Espacement des lettres du texte : 0.5px
  • Titre 3 Hauteur de ligne : 1.4em

Ajout : Module de bouton à la colonne 1

Texte du bouton

Enfin, ajoutez un module de boutons à la colonne 1 et ajoutez une copie pertinente.

Paramètres du texte du bouton

Passez à l'onglet de conception du module et modifiez les paramètres des boutons en conséquence :

  • Utiliser des styles personnalisés pour le bouton : Oui
  • Couleur du texte du bouton : #000000
  • Largeur de la bordure du bouton : 0px
  • Rayon de la bordure du bouton : 1px
  • Police des boutons : Acteur
  • Afficher l'icône du bouton : Oui
  • Emplacement de l'icône du bouton : à gauche
  • Afficher uniquement l'icône au survol pour le bouton : non

Espacement

Ajustez les valeurs d'espacement.

  • Marge inférieure : 80px
  • Rembourrage inférieur : 20px
  • Rembourrage droit : 30 px

Boîte ombre

Terminez les paramètres du module en appliquant les paramètres d'ombre de boîte suivants :

  • Position horizontale de l'ombre de la boîte : 0px
  • Position verticale de l'ombre de la boîte : 2px
  • Couleur de l'ombre : # 000000

Dupliquer le contenu

Ici, nous allons faire deux ou trois choses. Tout d'abord, nous allons supprimer la deuxième colonne.

Maintenant, nous allons cloner la première colonne.

Maintenant, dupliquez la ligne entière et modifiez le contenu.

Deuxième partie : ajouter un curseur

Ajouter une nouvelle ligne

Structure des colonnes

Puisque nous en avons terminé avec la structure de conception, nous allons faire la conception du curseur. Ajoutez une nouvelle ligne à la section avec la structure de colonne suivante.

Espacement

Ouvrez les paramètres de ligne et effectuez quelques modifications comme indiqué ci-dessous.

  • Rembourrage supérieur : 0px
  • Rembourrage inférieur : 0px

Ajout : Module de texte pour le curseur

Ajouter une copie

Ajoutez maintenant un module de texte à la ligne nouvellement créée et ajoutez une copie de votre choix.

Couleur de l'arrière plan

Ensuite, ajoutez une couleur d'arrière-plan.

  • Couleur d'arrière-plan : #47669b

Paramètres de texte

Dans l'onglet Conception, modifiez le style du texte.

  • Police du texte : Acteur
  • Poids de la police de texte : gras
  • Style de police de texte : majuscule
  • Couleur du texte : #ffffff
  • Espacement des lettres du texte : 2px
  • Alignement du texte : Centre

Dimensionnement

Faites quelques ajustements dans la section des tailles.

  • Largeur : 150px
  • Hauteur : 150px

Frontière

Nous allons modifier les paramètres de bordure pour créer ce cercle.

  • Tous les coins : 100px

Boîte ombre

Nous ajouterons également une ombre de boîte à lumière.

  • Force du flou de l'ombre de la boîte : 0px
  • Force de propagation de l'ombre de la boîte: 20px
  • Couleur de l'ombre : rgba (7 213 255 0,14)

Classe CSS

Ensuite, nous donnerons à notre module une classe CSS.

  • Classe CSS : curseur

Élément principal CSS

Ajoutez maintenant le code CSS à la zone de l'élément principal.

transition: all .1s linear;
pointer-events: none;
 
display: flex;
justify-content: center;
align-items: center;

Positionner

Maintenant, nous allons terminer ce module en apportant quelques modifications à la section position de l'onglet avancé.

  • Poste : fixe
  • Emplacement : en haut à gauche
  • Indice Z : 2

Ajout : Module de code

Ajoutez maintenant un module de code sous le dernier module de texte. Ajoutez des balises Style et Scripts dans le module de code.

Ajouter un code CSS

Collez le code CSS suivant dans le fichier Style .

.hide-cursor {
cursor: none;
}
 
.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
 
visibility: hidden;
opacity: 0;
}
 
.show-cursor {
visibility: visible !important;
opacity: 1;
}

Ajouter du code JQuery

Collez le code CSS suivant dans le script.

jQuery(document).ready(function($){
 
var cursor = $('.cursor');
 
$('.image-cursor').mousemove(function(e){
 
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
 
});
 
$('.image-cursor').mouseleave(function() {
 
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
 
});
 
});

Résultat final

Voici à quoi ressemble notre design final, Superbe!

Conclusion

Le tutoriel d'aujourd'hui était basé sur la façon dont vous pouvez apporter une conception plus interactive à votre site Web. Divi vous offre une énorme opportunité d'attirer l'attention de plus de visiteurs sur votre site Web en rendant le design propre et magnifique. J'espère que vous aimez le tutoriel d'aujourd'hui, et si c'est le cas, un partage sera IMPRESSIONNANT !