Comment ajouter un curseur stylisé et inversé à votre page Divi

L'un des moyens les plus rapides d'interagir avec les visiteurs de votre site Web consiste à utiliser leur curseur. C'est généralement là que tout commence. L'interaction de l'utilisateur sur le bureau est presque entièrement basée sur la façon dont les visiteurs utilisent leur curseur pour naviguer dans vos pages. C'est aussi la seule chose qui leur permet de déclencher des événements, que ce soit un effet de survol ou un clic. C'est pourquoi vous rencontrerez une tonne de sites Web qui personnalisent le curseur avec un objectif spécifique en tête. Le style de votre curseur est utile si vous souhaitez mettre en évidence un appel à l'action, par exemple. Aujourd'hui, nous allons vous montrer comment faire cela au sein de Divi. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez d'abord la télécharger à l'aide du 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 !

1. Créer une nouvelle page/Ouvrir une page existante

Créer une nouvelle page ou ouvrir une page existante

Commencez par créer une nouvelle page ou en ouvrir une existante.

Téléchargez la mise en page de votre choix

Pour nous concentrer sur l'essence de ce didacticiel, nous allons utiliser le pack de mise en page de réparation de vélo, mais n'hésitez pas à utiliser toute autre mise en page de votre choix.

Ajouter une nouvelle section au bas de la page

Une fois votre mise en page téléchargée, accédez au bas de votre page et ajoutez une nouvelle section. Nous allons utiliser cette section pour construire notre curseur.

Espacement

Pour créer un curseur personnalisé, nous ajouterons un module de texte plus tard dans le didacticiel. Ce module sera placé à l'intérieur de la section, mais nous ne voulons pas que le conteneur de section réel apparaisse dans notre conception. Pour éviter que la section n'apparaisse, nous supprimerons le rembourrage supérieur et inférieur par défaut dans les paramètres d'espacement.

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

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et supprimez toute largeur de gouttière personnalisée dans les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Supprimez également tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter un module de texte (curseur)

Laisser la zone de contenu vide

Il est temps d'ajouter un module de texte, que nous utiliserons plus tard comme curseur ! Laissez la zone de contenu vide.

Dimensionnement

Passez à l'onglet Conception et façonnez le module en utilisant une largeur et une hauteur personnalisées sur différentes tailles d'écran :

• Largeur:
  • Bureau : 100 pixels
  • Tablette : 60px
  • Téléphone : 40 pixels
• Hauteur:
  • Bureau : 100 pixels
  • Tablette : 60px
  • Téléphone : 40 pixels

Frontière

Pour transformer le curseur en cercle, comme vous avez pu le remarquer dans l'aperçu de cet article, nous utiliserons des coins arrondis et une bordure.

• Tous les coins : 100 %
• Largeur de la bordure : 3px
• Couleur de la bordure : #ffffff

Mode de fusion

Dans l'aperçu de cet article, vous pourriez remarquer un effet inversé sur le curseur, en particulier lors du survol d'un module de bouton. Pour obtenir cet effet, nous utiliserons un mode de fusion pour notre module de texte.

• Mode de fusion : différence

Élément principal CSS

En ajoutant ces lignes de code CSS à l'élément principal du module, nous vous aiderons à préparer le module pour une utilisation future en tant que curseur :

transition: all .1s linear;
pointer-events: none;

Position

Nous utiliserons également une position fixe pour le module.

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

Classe CSS

Et nous allons compléter les paramètres du module en attribuant une classe CSS personnalisée dans l'onglet avancé.

• Classe CSS : curseur

2. Ajouter des fonctionnalités

Ajouter un module de code sous le module de texte du curseur

Maintenant que nous avons le curseur Text Module en place, il est temps de se concentrer sur les fonctionnalités ! Ajoutez un module de code juste en dessous du module de texte du curseur de votre nouvelle section.

Ajouter des balises de style et de script

Nous allons combiner un peu de code CSS et JQuery, alors allez-y et ajoutez des balises de style et de script à votre module de code.

Ouverture de code JQuery

Ensuite, copiez-collez les lignes d'ouverture de code JQuery suivantes entre les balises de script :

jQuery(document).ready(function($){
});

Repositionner le module de texte du curseur

Maintenant que la fondation à l'intérieur de notre module de code a été créée, nous allons procéder étape par étape. La première chose que nous allons faire est de placer le module de texte que nous avons créé après le contenu interne du générateur. Cela nous permettra d'utiliser le curseur sur toute la page.

$('.cursor').insertAfter('.et_builder_inner_content');

Supprimer le curseur par défaut de la page

Ensuite, nous supprimerons le curseur par défaut de la page à l'aide d'un code CSS personnalisé que nous placerons entre les balises de style.

body {
cursor: none;
}

Définir le module de texte du curseur comme curseur

Ensuite, nous allons permettre au curseur de suivre les mouvements des visiteurs en utilisant les lignes de code JQuery suivantes :

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

Basculer l'effet lors du survol d'un module particulier

Ajouter Augmenter la classe CSS

Comme vous avez pu le remarquer dans l'aperçu de cet article, dès qu'un module de bouton est survolé, les styles de curseur changent. Pour y parvenir, nous allons ajouter une nouvelle classe CSS entre nos balises de style.

.increase-size {
transform: scale(5);
background-color: white;
}

Tous les modules de boutons

Nous allons basculer cette classe CSS en utilisant du code JQuery. Le code ci-dessous cible un par un tous les modules boutons de votre page Divi.

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Un module de boutons spécifique

Si vous souhaitez que l'effet s'applique à un module en particulier, une approche différente est nécessaire. Tout d'abord, ouvrez le module de bouton auquel vous souhaitez appliquer l'effet et incluez une classe CSS personnalisée.

• Classe CSS : curseur-bouton

Ensuite, remplacez la classe CSS dans le code que vous avez utilisé à l'étape précédente. C'est ça!

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer un curseur personnalisé pour votre page Divi. Nous vous avons également montré comment utiliser ce curseur personnalisé pour déclencher un effet de survol lorsque quelqu'un survole un appel à l'action sur votre page. Une fois que vous aurez appris à créer un curseur personnalisé, vous pourrez créer n'importe quel type de design ou d'effet ! Vous avez également pu télécharger le fichier JSON gratuitement. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.