Usted puede haber notado que un widget aparece en la imagen sobrevolando con el ratón en sus publicaciones Divi?
Si usted, o su cliente, encontrarlo aburrido, usted será capaz de resolver este problema en menos tiempo de lo que necesito para escribir este mini tutorial!
Les mostraré dos métodos: con o sin extensión.
Nota para entender mejor: la página de ayuda aparece cuando el usuario pasa su ratón sobre una imagen de su sitio. Esto significa que esto es un cambio en Javascript. En efecto, la JS es el idioma utilizado para hacer interacciones entre el sitio y el usuario de Internet. Como resultado, esta caja de herramientas no puede ser ocultada o eliminada con CSS (que es un lenguaje mucho más fácil para aprender y dominar). Este código podría cambiarse en un tema infantil, pero sería mucho más complicado...
1 - Eliminar el título de la imagen en el ratón sobrevolando con plugin
Hay varias maneras en que añadir código en Divi, primero ver el método que utiliza la extensión Snippet code.
- Vaya a la pestaña Prórrogas Añadir, aprovechar Snippet code en la barra de búsqueda.
- Instala y luego activa la extensión.
- Vaya a la pestaña Snippets Todos los extractos.
- Encontrar ejemplo de extracto de Javascript, luego haga clic en Cloner*.
- Encontrarás este clon en la parte inferior de la lista de extractos. Haga clic Modificar.
- Dale a tu snippet un título para encontrarlo más fácilmente en la lista de snippet.
- En lugar de "Escribe tu código JavaScript aquí", copiar y pegar el siguiente código:
add_action( 'wp_head', function () { ?>
<script>
jQuery(document).ready(function($) {
$("img").mouseenter(function() {
let $ld_title = $(this).attr("title");
$(this).attr("ld_title", $ld_title);
$(this).attr("title", "");
}).mouseleave(function() {
let $ld_title = $(this).attr("ld_title");
$(this).attr("title", $ld_title);
$(this).removeAttr("ld_title");
});
});
</script>
<?php } );- Elige (o almacena) la opción "Sólo en la interfaz pública".
- Debajo del snippet, un campo le permite entrar en una descipción. Esto te permitirá luego recordar para qué es esta pieza de código.
- Guarda tus cambios.
- De vuelta en la lista de los snippet, compruebe que el Toggle está colocado a la derecha y azul. Esto hace que su código esté activo (si el Toggle está gris, su código es inactivo).
Ahora ve a dar un paseo por tu sitio... ¡Los widgets de vuelo de ratón deberían desaparecer!
¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"
*Importante: si usted no tiene un ejemplo de un código JS en blanco que usted puede CLONER, simplemente añadir un nuevo snippet PHP y pega el siguiente código (este es el mismo código que el anterior, pero contiene la función add_action) :
add_action( 'wp_head', function () { ?>
<script>
jQuery(document).ready(function($) {
$("img").mouseenter(function() {
let $ld_title = $(this).attr("title");
$(this).attr("ld_title", $ld_title);
$(this).attr("title", "");
}).mouseleave(function() {
let $ld_title = $(this).attr("ld_title");
$(this).attr("title", $ld_title);
$(this).removeAttr("ld_title");
});
});
</script>
<?php } );2 - Eliminar el título de imagen en la sobrevoltura del ratón sin plugin
Es el método más rápido. No es necesario instalar una nueva extensión, Divi nos permite hacer esto desde sus opciones.
- Vaya a la pestaña Divi Opciones temáticas Integración
- En la inserción "Añadir línea de código a la
<head>de tu blog", copiar y pegar el siguiente código. - Guarda tus cambios.
Aquí está el código para usar:
<script>
jQuery(document).ready(function($) {
$("img").mouseenter(function() {
let $ld_title = $(this).attr("title");
$(this).attr("ld_title", $ld_title);
$(this).attr("title", "");
}).mouseleave(function() {
let $ld_title = $(this).attr("ld_title");
$(this).attr("title", $ld_title);
$(this).removeAttr("ld_title");
});
});
</script>El código original viene del sitio LearnHowWP.
Ahora, usted puede comprobar las imágenes de su sitio: las herramientas del título ya no aparecen en la mosca del ratón.
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?
Cómo añadir un cursor elegante e invertido a su página Divi
A algunos usuarios no les gusta añadir plugins todavía y siempre, así que optarán por el método con opciones Divi.
Toutefois, la méthode avec Code Snippets offre quelques avantages :
- Si le code est défectueux pour X raisons (vous avez mal copié-collé, la source où vous avez trouvé votre snippet est obsolète, etc), vous pouvez facilement désactiver le snippet grâce à son Toggle bleu.
- Si el código añadido rompe su sitio, es mucho más fácil deshabilitar temporalmente un plugin a través de FTP en lugar del Tema Divi.
- Si estás empezando, es una buena manera de comprobar si funciona antes de que consigas tu snippet permanentemente en las opciones Divi.
- Esto le permite almacenar correctamente sus snippets: si usted tiene un montón de snippets, puede ser difícil identificarlos si todos están detrás de ellos en las opciones de tema (Tapa de Integración).
Pour aller plus loin, voici quelques articles qui pourraient vous intéresser :
- Les snippets utiles pour Divi
- Cómo convertir el cursor en un botón cuando vuela sobre un artículo usando Divi
- Comment changer le curseur de la souris avec une image personnalisée
- Comment ajouter un curseur stylé et inversé à votre page Divi
- Comment modifier une image au hover avec Divi ?
¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos! O aprender cómo utilizar eficazmente este tema a través de mi entrenamiento 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
Bonjour,
Merci pour cette belle astuce !
Cela fonctionne très bien mais pour mes galeries d’images j’utilise Modula, et là ça ne marche pas
Une idée?
ouaahhhh, top, merci pour cette astuce !!
Merci Stéphanie
Merci Philippe, ah non, je ne connais pas Modula ;-(