Il layout che hai appena creato su Divi Builder è perfetto. Be’, se non fosse per quella fastidiosa etichetta che compare sulle immagini al passaggio del mouse!
In questo tutorial, ti mostrerò ben due metodi veloci ed efficaci per liberarti una volta e per tutte di questo testo hover sulle immagini di Divi.
Eliminare il testo hover sulle immagini
Esistono due metodi super veloci per rimuovere il testo che compare sulle immagini al passaggio del mouse. Il primo, è certamente il più rapido, ma ti consiglio di metterlo in pratica esclusivamente se si tratta di un paio di immagini. Nel caso in cui dovrai eliminare il testo sulle immagini per tante pagine o per l’intero sito web, è preferibile seguire il secondo metodo. Ma passiamo al tutorial, vediamo subito il primo metodo!
Primo metodo: rimuovere il testo hover dal modulo immagine di Divi Builder
Per rimuovere in un istante l’etichetta testuale, o più precisamente “l’attributo” dell’immagine che compare al passaggio del mouse, ti basterà lavorare all’interno del tuo Divi Builder. Ad esempio, se si tratta di immagini dell’homepage, ti basterà andare su Pagine > Homepage e cliccare su “Modifica con Divi“. A questo punto, si aprirà il builder della pagina.
Posizionati sul modulo immagine dell’immagine che intendi modificare, clicca sulla rotella per entrare in Impostazioni > Avanzate > Attributi. So che hai esclamato un fragoroso “AAAAH!”. Ecco, a questo punto ti basterà eliminare l’attributo del Testo titolo dell’immagine e cliccare su “Salva“. Poi salva anche la pagina e controlla la magia!
Secondo metodo: aggiungere il codice jQuery nelle opzioni di Divi
Il secondo metodo è una vera e propria manna dal cielo, specialmente se hai già tante immagini all’interno del tuo sito e non puoi eliminare l’attributo hover entrando all’interno di ogni singolo modulo immagine. Inoltre, il primo metodo non funziona, ad esempio, nei moduli gallery. Vediamo come fare in meno di un minuto.
Nulla di complicato, perché rimaniamo su WordPress! Per eliminare il titolo testo hover dalle immagini, per tutte le pagine del tuo sito web con Divi, dovrai copiare e incollare il seguente codice nell’head del tuo sito web. Vai nella dashboard di WordPress > Divi > Opzioni del tema > Integrazione > Aggiungi codice a <head> del tuo blog. Copialo e incollalo.
<script>jQuery(document).ready(function($) { $("img").mouseenter(function() { let $lwp_title = $(this).attr("title"); $(this).attr("lwp_title", $lwp_title); $(this).attr("title", ""); }).mouseleave(function() { let $lwp_title = $(this).attr("lwp_title"); $(this).attr("title", $lwp_title); $(this).removeAttr("lwp_title"); });});</script>
Dai un’occhiata alla schermata per capire esattamente dove integrare il codice.
Una volta incollato il codice all’interno del tag <head> del tuo blog, ricordati di salvare le modifiche. Et voilà, tutti gli attributi del titolo delle immagini del tuo sito web sono spariti. Entrambi i metodi non influiscono sulla SEO del tuo sito web, perché l’attributo non viene rimosso, ma semplicemente non viene mostrato quando l’utente passa sulle immagini con il mouse. In poche parole, viene rimosso il titolo esclusivamente all’azione “hover”.
Ecco un video-tutorial per guidarti nelle operazioni passo passo!
Spero che questo articolo ti sia stato utile e che abbia risolto il tuo problema! Fammi sapere cosa ne pensi nei commenti.
0 commenti