¿Habrás notado que aparece un tooltip al pasar el ratón por encima de tus publicaciones en Divi?
Si usted, o su cliente, encuentra esto molesto, puede resolver este problema en menos tiempo del que me lleva escribir este minitutorial.
Te mostraré 2 métodos: con o sin extensión.
Nota para una mejor comprensión: el tooltip aparece cuando el internauta pasa el ratón por encima de una imagen de su sitio. Esto significa que es una modificación en Javascript. En efecto, JS es el lenguaje utilizado para realizar las interacciones entre el sitio y el internauta. Por lo tanto, esta información sobre herramientas no se puede ocultar/borrar con CSS (que es un lenguaje mucho más fácil de aprender y dominar). Este código podría modificarse en un tema hijo, pero sería mucho más complicado... Sigamos...
Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
1 - Eliminar el título de la imagen al pasar el ratón por encima con el plugin
Hay varias formas de añadir código a DiviEmpecemos por ver el método que utiliza el Fragmentos de código.
- Vaya a la pestaña Extensiones > Añadir, introduzca Code Snippets en la barra de búsqueda.
- Instale y active la extensión.
- Vaya a la pestaña Snippets > Todos los snippets.
- Localice el fragmento de ejemplo de Javascript y haga clic en Clonar*.
- Encontrará este clon al final de la lista de extractos. Haga clic en Modificar.
- Dé un título a su fragmento para que sea más fácil encontrarlo en la lista de fragmentos.
- En lugar de "escriba su código JavaScript aquí", copie y pegue el siguiente código:
add_action( 'wp_head', function () { ?>
- Elija (o mantenga) la opción "Ejecutar sólo en la interfaz pública".
- Debajo del fragmento, un campo permite introducir una descripción. Esto le permitirá, más adelante, recordar para qué se utiliza esta pieza de código.
- Guarde los cambios.
- De nuevo en la lista de fragmentos, compruebe que el conmutador está posicionado a la derecha y es de color azul. Esto hace que su código se active (si el conmutador está en gris, su código está inactivo).
Ahora ve y echa un vistazo a tu sitio... ¡Los tooltips al pasar el ratón deberían haber desaparecido!
¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA
*Important : si vous ne possédez pas d’exemple de code JS vierge que vous pouvez CLONER, ajoutez simplement un nouveau snippet PHP et collez le code ci-dessous (c’est le même code que le précédent, mais il contient la fonction add_action) :
add_action( 'wp_head', function () { ?>
2 - Borrar el título de la imagen al pasar el ratón por encima sin un plugin
Este es el método más rápido. No es necesario instalar una nueva extensión, Divi nos permite hacerlo desde sus opciones.
- Ir a la Divi > Opciones del tema > Integración
- Dans l’encart <em>« Ajouter ligne de code à la <head> de votre blog »</em>, copiez et collez le code qui suit.
- Guarde los cambios.
Aquí está el código a utilizar:
El código original es del AprenderCómoWP.
Ahora puedes comprobar las imágenes de tu sitio: el tooltip del título ya no aparece al pasar el ratón por encima.
Notez : il s’agit du même code utilisé pour la méthode Code Snippet, mis à part que celui-ci embarque les balises <script>
3 - ¿Cuál es el mejor método?
Ambos métodos son válidos.
A algunos usuarios no les gusta añadir plugins una y otra vez, por lo que optarán por el método de las opciones de Divi.
Sin embargo, el método con Code Snippets ofrece algunas ventajas:
- Si el código es defectuoso por X razones (has copiado y pegado mal, la fuente donde encontraste tu snippet está obsoleta, etc), puedes desactivar fácilmente el snippet gracias a su Toggle azul.
- Si el código añadido rompe su sitio, es mucho más fácil de desactivar temporalmente un plugin a través de FTP en lugar de la Tema Divi.
- Si estás empezando, esta es una buena manera de comprobar si funciona antes de incrustar permanentemente tu fragmento en las opciones de Divi.
- Esto le permite organizar sus fragmentos: si tiene muchos, puede ser difícil identificarlos si están todos en una fila en las opciones del tema (pestaña Integración).
Para ir más allá, he aquí algunos artículos que pueden interesarle:
- Fragmentos útiles para Divi
- Cómo convertir el cursor en un botón al pasar por encima de un elemento utilizando Divi
- Cómo cambiar el cursor del ratón con una imagen personalizada
- Cómo añadir un elegante slider invertido a tu página Divi
- ¿Cómo puedo editar una imagen hover con Divi?
¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales. O aprenda a utilizar este tema de forma eficaz con mi formación en Divi !
Salut Lydia,
Ça faisait longtemps.
Je crois qu’il y a une propriété CSS pour ça, à mes souvenir.
Ou au moins jouer sur le cursor ou pointer-event…
Au plaisir de te lire.
Ah, je vais regarder… comment tu vas depuis le temps ?
Merci pour cette astuce rapide !!
Cool !
Bonjour !
Effectivement David, si tu mets en CSS » pointer-events: none; » cela désactive l’infobulle.
Mais dans mon cas, j’ai mis des images clicables dans mon menu, et cela désactive le fait de cliquer, donc je cherche une autre solution.
J’ai mis le script dans Intégration mais cela continue de s’afficher.
Si vous n’avez pas de comportement spécifique sur vos image.
img[title] , picture[title] {
pointer-events: none;
}
Bonjour,
J’ai essayé la méthode avec code snippets mais le plugin a du changé parce que je ne trouve pas « l’exemple d’extrait Javascript » dans « tous les extraits »
En tout cas merci pour les autres conseils sur le site j’y viens régulièrement.
Oui c’est dommage, Code Snippet est plus restreint maintenant, c’est vraiment pas cool