Come aggiungere un effetto hover in divi builder

Wordpress

Ci sono molti modi per rendere una pagina web sul vostro sito più attraente. Uno di questi è quello di aggiungere un effetto hover a un certo elemento della pagina. Se hai un sito web basato su WordPress costruito con Divi Builder , puoi aggiungere senza sforzo un effetto hover a un elemento sulla tua pagina. A proposito, cos’è Divi Builder?

Nel caso in cui non conosci Divi Builder. Si tratta di un plugin di costruttore di pagine per WordPress proprio come Elementor (Elementor è il costruttore di pagine più popolare di WordPress). Viene anche fornito con un editor visivo per rendere più facile per voi per creare la pagina. Divi Builder è dotato di alcune funzioni integrate per aggiungere effetti di animazione, compresi quelli che puoi aggiungere quando un visitatore passa sopra un certo elemento della tua pagina. Date un’occhiata allo screencast qui sotto.

Gli effetti hover qui sopra sono creati con Divi Builder. Divi Builder stesso fa uso di CSS transform per la funzione di effetto hover. Quindi tecnicamente, quando aggiungete un effetto hover a un certo elemento in Divi Builder, state implementando la trasformazione CSS alla vostra pagina.

In Divi Builder, gli elementi di design sono di tre tipi: sezione, riga e modulo. Potete aggiungere un effetto hover a questi tre tipi di elementi. In questo esempio, vi mostreremo come aggiungere un hover a un modulo immagine (come potete vedere nello screencast qui sopra).

Come aggiungere un effetto hover in Divi Builder

Prima di tutto, dovete preparare una sezione e una riga nell’area canvas di Divi Builder. Per farlo, cliccate sul pulsante blu più per aggiungere una nuova sezione (potete aggiungere una sezione normale per questo esempio). Inserisci una riga e seleziona la struttura della colonna secondo le tue esigenze. In questo esempio, selezioniamo la struttura a tre colonne.

Una volta aggiunta la riga, clicca sull’icona più grigia su una delle colonne per aggiungere un modulo. Poiché vogliamo aggiungere l’effetto hover all’immagine, selezioniamo Image per aggiungere il modulo Image.

Il pannello delle impostazioni del modulo Image apparirà subito dopo aver aggiunto il modulo Image. Per aggiungere un’immagine, puoi cliccare sul supporto immagine sul blocco Image sotto la scheda Content .

Una volta aggiunta l’immagine, vai alla scheda Design e apri il blocco Transform . Sul blocco Transform , fai clic sull’icona del cursore e poi fai clic sulla scheda hover (che è anche rappresentata da un’icona del cursore).

Seleziona un tipo di trasformazione che vuoi aggiungere facendo clic su una delle schede disponibili e usa il tuo mouse per impostare il valore. Oppure, puoi anche impostare il valore di trasformazione manualmente digitando il tuo valore preferito.

Ecco fatto. Puoi applicare le modifiche cliccando sull’icona verde della lista di controllo nell’angolo in basso a destra del pannello delle impostazioni.

Per rendere la tua pagina più attraente, puoi anche visualizzare un’immagine diversa su hover. Potete questo articolo per saperne di più.

Potete fare lo stesso percorso per aggiungere un effetto hover a una sezione e una riga. Per prima cosa, aprite il pannello delle impostazioni e poi andate alla scheda Design . Nella scheda Design , puoi aprire il blocco Transform . Potete impostare l’effetto hover su questo blocco come abbiamo appena trattato sopra.

YouTube video: Come aggiungere un effetto Hover in Divi Builder


Rate article