supprimer titre image thumb

Eliminar el título que aparece al pasar por encima de una imagen en Divi (con o sin plugin)

Publicado el 14/06/2022 | 4 comentarios

824 palabras

3

¿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.

image hover title

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.

Installer l'extension Code Snippets
  1. Vaya a la pestaña Extensiones > Añadir, introduzca Code Snippets en la barra de búsqueda.
  2. Instale y active la extensión.
Cloner un snippet de Javascript
  1. Vaya a la pestaña Snippets > Todos los snippets.
  2. Localice el fragmento de ejemplo de Javascript y haga clic en Clonar*.
  3. Encontrará este clon al final de la lista de extractos. Haga clic en Modificar.
image hover title code snippet 3
  1. Dé un título a su fragmento para que sea más fácil encontrarlo en la lista de fragmentos.
  2. En lugar de "escriba su código JavaScript aquí", copie y pegue el siguiente código:
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");
    });
});
  1. Elija (o mantenga) la opción "Ejecutar sólo en la interfaz pública".
image hover title code snippet 4
  1. 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.
  2. Guarde los cambios.
  3. 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).
image hover title not display

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

*Importante: si no tienes un ejemplo de código JS en blanco que puedas CLONAR, simplemente añade un nuevo fragmento y pega el código de abajo (es el mismo código que el anterior, pero contiene la función 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.

image hover title sans plugin
Añadir un fragmento a la sección de la cabeza del sitio
  1. Ir a la Divi > Opciones del tema > Integración
  2. Dans l’encart <em>« Ajouter ligne de code à la <head> de votre blog »</em>, copiez et collez le code qui suit.
  3. 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:

¿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 !

supprimer titre image pin 2
supprimer titre image pin 1
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

Divi AI : l’intelligence artificielle arrive dans Divi !

Divi AI : l’intelligence artificielle arrive dans Divi !

Découvrez les prémices du futur de l’édition de sites avec l’intelligence artificielle. Divi AI propose aujourd’hui la génération de textes et d’images… Et demain ? Sera-t-il possible de créer un site de A à Z à l’aide de prompts ?

4 Commentaires

  1. David C.

    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.

  2. Lycia Diaz

    Ah, je vais regarder… comment tu vas depuis le temps ?

  3. Agathe Ogeron

    Merci pour cette astuce rapide !!

  4. Lycia Diaz

    Cool !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto