Vuoi cambiare l'immagine con un clic di un pulsante con il Page Builder Elementor ? In questo nuovo tutorial, ti mostreremo come farlo.

Se non hai idea di cosa vogliamo parlare oggi, ti invitiamo a guardare il seguente video:

Quindi torniamo al perché siamo qui.

Leggi anche: Come modificare un'immagine al passaggio del mouse sopra il testo con Elementor

Per completare questo tutorial, avrai bisogno la versione Pro di Elementor, perché utilizzeremo il codice CSS personalizzato che è supportato solo da questa versione diElementor.

Creiamo una sezione con 2 colonne, poi nel pannello laterale definiamo il Hauteur su Altezza minimapoi Altezza minima clicchiamo su VH e imposta il cursore su 100.

Trasciniamo il widget Immagine nella colonna di sinistra e inseriamo un'immagine dalla nostra libreria.

Nella colonna di destra, inseriamo a Widget del titolo intitolato Scegli il meglio. Nella scheda Style clicchiamo su tipografia e modificare il Altezza della linea a 1.

Vedi anche: Come modificare un'immaginepassa il mouse sopra il testo con Elementor

Aggiungiamo sotto il widget Titolo, a Widget Editor di testo.

Sopra il widget Titolo, trasciniamo un widget Separatore nella sua scheda Contenuto, prendiamo 270 per larghezza. Facciamo clic su Testo per Aggiungi elemento, quindi invio tendenza come testo. Nella scheda Style, modificare il Grasso e il divario su 2.

Scopri anche: Come visualizzare il testo sopra un'immagine con Elementor

Nella sezione Testo, fare clic su tipografia, cambiamo il font, il Misura su 18, la grasso su 600.

Sotto il widget dell'editor contenuto, archiviamo a Sezione interna, eliminare una delle colonne della Sezione Interna e trascinarla in quest'ultima a pulsante-widget

Modifichiamo il pulsante andando nel pannello laterale e nella scheda Contenuto, clicca su libreria di icone su icona e inserire l'icona Shopping Bag, cancelliamo anche il contenuto del pulsante Testo

Andiamo alla scheda Style del pulsante e dentro Raggio di confine, clicca su % e cogliere 50 per tutti i raggi di cordolo e in Margini interni, prendiamo 20.

Personalizziamo il colore del pulsante cambiando il colore di quest'ultimo cliccando su Classico per Tipo di sfondo e cambiamo il colore in base al colore di evidenziazione sull'immagine.

Quindi fare clic sulla scheda avanzato del nostro pulsante, poi via posizionamento e Larghezza Selezionare In linea (automatico). Nella sezione Avanzate diScheda Avanzate, prendiamo 10 per margine destro.

Duplichiamo questo pulsante 4 volte e modifichiamo i colori di questi pulsanti.

Quindi, duplichiamo il nostro widget Immagine 4 volte, quindi modifichiamo le loro immagini.

In L 'Scheda Avanzate, prendiamo tutte le immagini nel campo Classi CSS di ciascuna delle nostre immagini.

Poi in campo ID CSS immettere l'immagine rossa per l'immagine con un'evidenziazione rossa, l'immagine verde per l'immagine con un'evidenziazione verde e l'immagine marrone per l'immagine con un'evidenziazione marrone e così via.

Selezioniamo il nostro Sezione e nelScheda Avanzate, nel campo Custom CSS copia e incolla il seguente snippet di codice:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(Se non hai questa sezione allora non hai la versione Pro, se vuoi continuare devi aggiornare la tua versione)

Quindi, rilasciamo un widget HTML nella nostra pagina, copiamo e incolliamo il seguente snippet di codice nella sezione Codice HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Selezioniamo il primo pulsante, nel campo Attributi personalizzati della Sezione Attributi, copia e incolla il seguente snippet di codice:

data-showme|IMAGE-ID-NAME

Modifichiamo la parte IMAGE-ID-NAME con gli ID dei tuoi pulsanti, questi sono gli ID immagine rossa, immagine verde e immagine blu e così via.

Quindi, per ogni pulsante, cambiamo il codice IMAGE-ID-NAME nel colore del pulsante appropriato

Aggiorna il tuo lavoro e visualizzalo in anteprima in modalità desktop, tablet e smartphone durante il test dei pulsanti.

In modalità smartphone puoi, ad esempio, allineare i pulsanti al centro, ridurre i margini e molto altro.

Ecco qua, hai appena svolto questo compito facilmente.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come modificare un'immagine passando il mouse sopra un testo. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...