Comment ajouter l'effet de survol du menu Elementor

Si vous utilisez l'éditeur Elementor, vous pouvez ajouter un effet de survol du menu CSS personnalisé en suivant les étapes suivantes :

Ouvrez la page ou le modèle :

• Connectez-vous au tableau de bord de WordPress.
• Naviguez jusqu'à la page qui doit être éditée avec Elementor.

• Modifier l'en-tête, le pied de page ou le modèle contenant le menu.

Ajouter ou modifier la navigation Elementor :

• Naviguez vers un élément de menu existant ou ajoutez l'élément "WordPress Menu" à l'onglet Elementor.

• Cliquez sur l'onglet Avancé de l'élément.

• Naviguez jusqu'au menu déroulant Custom CSS.

Copiez les styles CSS :

• Copiez le style de survol du menu souhaité dans la bibliothèque de notre page d'accueil.

Ajouter le code CSS :

• Collez le style CSS dans la zone de texte de la liste déroulante Custom CSS.

Modifier la couleur :

• Certains styles de menu utilisent les couleurs de "pointeur" par défaut d'Elementor.
• Naviguez jusqu'à l'onglet Style du menu.
• Cliquez sur Hover, puis modifiez la couleur dans le sélecteur de couleurs.

• Facultatif : Pour remplacer les styles de couleurs par défaut d'Elementor, terminez le " ;" avant le champ!important.

Enregistrer et publier

• Cliquez sur "mettre à jour"ou"poste"pour appliquer les modifications.

Les autres peuvent utiliser les 4 autres types deconversions: :

• MatriceLes transformations complexes en 2D : Appliquer des transformations complexes en 2D à l'aide de matrices de transformation.
• TraductionDéplacer la position d'un élément en deux ou trois dimensions.
• Rotation: fait pivoter l'élément autour du point spécifié.
• Obliquité: tordre un élément de manière à ce qu'il soit incliné horizontalement ou verticalement.

Exemple de code :

/* Exemple d'effet de survol */
selector:hover {
  colour : #ffffff !important ; background-color : #000000 !important ; }
  background-color : #000000 !important ; transform : translateY(-10px) ; /* ajouter un effet de translation */ hover
  transform : translateY(-10px) ; /* ajouter un effet de translation */
}

/* Exemple d'effet de rotation */
selector:hover {
  transform : rotate(10deg) ; /* Ajouter un effet de rotation */
}

/* Exemple d'inclinaison */
selector:hover {
  transform : skewX(10deg) ; /* Ajouter un effet d'inclinaison horizontale */
}

/* Exemple d'effet matriciel */
selector:hover {
  transform : matrix(1, 0.5, -0.5, 1, 0, 0) ; /* ajout d'un effet de matrice */
}

Résumé :

Si vous utilisez l'éditeur Elementor, vous pouvez améliorer l'effet de survol du menu en ajoutant un CSS personnalisé. Naviguez dans Elementor en ajoutant ou en modifiant l'onglet Elementor, allez dans l'onglet Avancé et naviguez jusqu'au menu déroulant CSS personnalisé. Ajustez la couleur de l'effet de survol en modifiant l'option de couleur dans l'onglet Styles. L'animation du menu au survol peut également être personnalisée à l'aide d'effets tels que Matrix, Translate, Rotate et Skew.