Sappiamo tutti quanto sia illimitata la personalizzazione con Generatore di siti Web Elementor. Con questa personalizzazione, possiamo migliorare l'esperienza dell'utente ed essere creativi in ciò che creiamo.
Lo scambio di logo al passaggio del mouse si verifica quando l'utente posiziona il cursore sul logo posizionato sul sito Web, modifica automaticamente i dettagli, ad esempio colore, forma o contorno. In questa esercitazione capiremo come creare uno scambio di logo con effetto hover con Elementor.
Come creare lo scambio di logo con effetto passaggio del mouse utilizzando Elementor
Sai già qual è l'effetto e hai idee nella tua mente su ciò che vuoi creare, andiamo avanti e vediamo come.
Per iniziare, aggiungi una sezione interna per i widget.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti ora
Successivamente, è necessario aggiungere una colonna nella sezione creata inizialmente. Per questa esercitazione, andremo con la struttura a due colonne.
Quindi trascinare e rilasciare il widget immagine nella colonna creata.
Affinché l'effetto funzioni, ti serviranno due immagini. Uno da visualizzare normalmente, mentre l'altro da visualizzare quando l'utente posiziona il cursore.
È possibile utilizzare due varianti dello stesso logo o utilizzare due immagini completamente diverse, le possibilità sono illimitate.
Dopo la selezione dell'immagine, nel campo CSS personalizzato incollare il codice CSS seguente per far funzionare lo scambio di logo al passaggio del mouse.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}E fatto! Pubblica la tua pagina per visualizzare in anteprima e vedere l'aspetto dell'effetto sul tuo sito web. Torna per apportare eventuali modifiche, se lo desideri.
In questo modo è possibile creare l'effetto Scambio logo al passaggio del mouse con Elementor. Assicurati di unirti a noi sui nostri Facebook e Cinguettare per rimanere aggiornato sui nostri post.
