Come trasformare più elementi per effetti al passaggio del mouse astratti in Divi

Come già saprai, Divi ha un sacco di impostazioni di design che ti consentono di creare effetti al passaggio del mouse unici per qualsiasi elemento Divi (sezioni, righe o moduli). Di solito, un effetto hover è isolato su un solo elemento. Ad esempio, se aggiungi una proprietà di trasformazione e rotazione a un modulo al passaggio del mouse, tale rotazione si attiverà quando passi con il mouse sul modulo. Tuttavia, se aggiungi un ulteriore effetto al passaggio del mouse alla riga contenente il modulo, questo aggiunge un altro livello di effetti al passaggio del mouse quando passi con il mouse sul modulo. Questo apre le porte ad alcuni effetti al passaggio del mouse astratti unici.

In questo tutorial, esploreremo come trasformare più elementi per effetti al passaggio del mouse astratti utilizzando le impostazioni integrate di Divi. E poiché utilizzeremo le righe in modo leggermente diverso per questo design, ti mostrerò come creare un layout a griglia per le tue righe in modo da poter mostrare questi effetti al passaggio del mouse in una galleria (se lo desideri).

Iniziamo.

Sbirciata

Scarica GRATUITAMENTE Trasforma più elementi sul layout al passaggio del mouse

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Andiamo al tutorial, vero?

Iniziare

Iscriviti al nostro canale Youtube

Per questo tutorial, avrai bisogno di quanto segue:

1. Il tema Divi installato e attivo
2. Alcune immagini. Sto usando immagini dai nostri layout predefiniti accessibili dall'interno di Divi Builder

Una volta che sei pronto, vai alla dashboard di WordPress. Quindi crea una nuova pagina (Pagine> Aggiungi nuovo), assegna un titolo alla tua pagina e distribuisci Divi Builder. Scegli l'opzione "Costruisci da zero".

Ora la tua tela bianca ti aspetta!

Effetti al passaggio del mouse astratti per un'immagine

Questo primo design combinerà gli effetti al passaggio del mouse di trasformazione obliqua sulla riga e il modulo immagine per creare un effetto ventaglio sulla nostra immagine al passaggio del mouse. Oltre a sembrare interessante, questo effetto può anche servire come un'utile interazione dell'interfaccia utente che consente all'utente di sapere che facendo clic sull'immagine, vedrai più immagini. Quindi potresti usare l'immagine come collegamento alla pagina della tua galleria, se lo desideri.

Ecco come farlo.

Per prima cosa crea una nuova sezione regolare con una riga a una colonna.

Quindi aggiungi un modulo immagine alla riga.

Quindi, aggiungi il caricamento di un'immagine al modulo.

Aggiungi effetti al passaggio del modulo immagine

Ora possiamo aggiungere alcuni effetti di trasformazione al passaggio del mouse all'immagine che scaleranno, ruoteranno e inclineranno l'immagine. Per fare ciò, vai alle opzioni di trasformazione e aggiorna quanto segue:

Trasforma scala X e asse Y: 110%

Trasforma Ruota asse Z: 9deg

Trasforma l'inclinazione X e l'asse Y: 3°

Questo è tutto! Abbastanza semplice. Ora dobbiamo personalizzare la riga per aggiungere un altro effetto al passaggio del mouse che si attiverà quando passi con il mouse sugli elementi.

Impostazioni riga

Affinché questo disegno funzioni, la riga dovrà avere le stesse dimensioni dell'immagine al suo interno in modo che l'area di passaggio del mouse sia la stessa per entrambi. Questo ci consentirà di aggiungere diversi effetti al passaggio del mouse sia per il modulo che per la riga che si attiveranno quando si passa con il mouse sul modulo (o in questo caso sull'immagine). Funziona perché il passaggio del mouse su un modulo all'interno di una riga attiverà gli effetti al passaggio del mouse nello stesso modo in cui lo farebbe se si passa con il mouse sopra la riga. E, poiché abbiamo un diverso effetto al passaggio del mouse sul modulo, entrambi gli effetti al passaggio del mouse si attiveranno quando si passa sopra il modulo. Ciò ci consente di utilizzare una combinazione di effetti al passaggio del mouse astratti utilizzando l'ombra della scatola, l'inclinazione di trasformazione e la rotazione della trasformazione sia sulla riga che sul modulo.

Abbiamo già i nostri effetti di hover del modulo per la nostra immagine, ora dobbiamo regolare la dimensione della nostra riga. A seconda delle dimensioni dell'immagine, il modulo dovrebbe occupare già l'intera larghezza della riga, quindi tecnicamente non è necessario regolare la larghezza della riga. Ma per questo esempio, ridurrò la riga per fare spazio ai nostri effetti al passaggio del mouse.

Aggiorna le impostazioni della riga come segue:

Larghezza massima: 400 px

Poiché vogliamo che l'altezza della nostra riga corrisponda all'immagine al suo interno, dobbiamo eliminare l'imbottitura superiore e inferiore predefinita:

Imbottitura personalizzata: 0px in alto, 0px in basso

Ora dobbiamo aggiungere un'immagine di sfondo alla colonna della riga. Questa immagine di sfondo verrà visualizzata ogni volta che l'effetto al passaggio del mouse di trasformazione del modulo immagine si inclina e ruota.

Colonna 1 Immagine di sfondo: [inserisci immagine]

Continua ad aggiornare la riga con un'ombra di riquadro al passaggio del mouse come segue:

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 0 px (predefinito), -30 px (al passaggio del mouse)
Posizione verticale dell'ombra del riquadro: 0 px (predefinito), -15 px (al passaggio del mouse)
Colore ombra: #002f66

Questa ombra della casella aggiunge l'effetto di un'altra immagine che appare dietro l'immagine di sfondo della riga che apparirà una volta aggiunti i nostri effetti di trasformazione al passaggio del mouse che ruoteranno e inclineranno l'immagine di sfondo in vista.

Infine, siamo pronti per aggiungere una proprietà di trasformazione inclinata per aggiungere un ulteriore effetto al passaggio del mouse per la riga.

Trasforma l'inclinazione X e l'asse Y: -3 gradi

Risultato finale

Questo è il risultato finale.

E si adatterà bene anche sui dispositivi mobili.

Effetti al passaggio del mouse astratti per un invito all'azione (esempio 1)

Impostazioni riga

Crea una nuova sezione regolare con una riga di una colonna.

Quindi aggiorna le impostazioni della riga come segue:

Colonna 1 Gradiente di sfondo a sinistra Colore: rgba (34,43,58,0.71)
Colonna 1 Gradiente di sfondo a destra Colore: #222b3a
Immagine di sfondo: [inserisci immagine]
Larghezza massima: 400 px
Imbottitura personalizzata: 0px in alto, 0px in basso

Torneremo alle impostazioni della riga per completare tra un po' i nostri effetti al passaggio del mouse astratti, ma per ora aggiungiamo alla riga il nostro modulo di chiamata all'azione.

Impostazioni del modulo di invito all'azione

Apri le impostazioni del modulo di invito all'azione e aggiorna il contenuto come segue:

Titolo: Viaggia con i punti
Testo del pulsante: clicca qui
Contenuto: solo per un periodo di tempo limitato
URL collegamento pulsante: # (solo per attivare il pulsante per ora)
Usa il colore di sfondo: NO

Quindi aggiorna l'impostazione del design per il testo e la spaziatura del modulo.

Carattere del titolo: display Gilda
Dimensione del testo del pulsante: 16 px
Colore del testo del pulsante: #ffb238
Colore di sfondo del pulsante: rgba (0,0,0,0)
Larghezza bordo pulsante: 0px

Imbottitura personalizzata: 20% in alto, 20% in basso

Ora aggiungi un bordo al modulo.

Larghezza bordo: 2px
Colore bordo: #222b3a

Questo si prende cura del nostro design predefinito. Ora è il momento per la parte divertente. Ricorda, poiché la nostra riga e il nostro modulo hanno essenzialmente le stesse dimensioni (altezza e larghezza), l'area di passaggio del mouse sarà la stessa per entrambi. In altre parole, gli effetti al passaggio del mouse che aggiungiamo alla riga e al modulo si attiveranno entrambi quando passi il mouse sugli elementi. Ciò ci consente di utilizzare una combinazione di effetti al passaggio del mouse astratti utilizzando l'ombra della scatola, l'inclinazione di trasformazione e la rotazione della trasformazione sia sulla riga che sul modulo.

Iniziamo con gli effetti al passaggio del mouse.

Effetti al passaggio del mouse sulle righe

Innanzitutto, possiamo aggiungere un'ombra di casella al passaggio del mouse sulla nostra riga. Apri le impostazioni della riga e aggiorna quanto segue:

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 0 px (predefinito), 90 px (al passaggio del mouse)
Posizione verticale dell'ombra del riquadro: 0 px (predefinito), 80 px (al passaggio del mouse)
Intensità di diffusione dell'ombra del riquadro: 0px (predefinito), -40px (hover)

Colore ombra: #ffb238

Tieni presente che l'ombra della scatola erediterà anche le opzioni di trasformazione che aggiungeremo in seguito.

Ora aggiungiamo una proprietà di trasformazione ruota e inclina al passaggio del mouse.

Trasforma Ruota asse X (hover): 10deg
Trasforma inclinazione asse X (hover): -4deg
Trasforma inclinazione asse Y (hover): -4deg

Questo si occupa degli effetti di hover di riga. Ora dobbiamo aggiungere l'effetto hover al modulo Call to Action che completerà il design.

Effetti al passaggio del mouse del modulo di invito all'azione

Apri le impostazioni del modulo di invito all'azione e assegnagli un effetto hover box shadow come segue:

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 0px
Posizione verticale dell'ombra del riquadro: 0 px (predefinito), 30 px (al passaggio del mouse)
Colore ombra: #ffffff

Infine, aggiungi una proprietà di trasformazione scala, rotazione e inclinazione al passaggio del mouse come segue:
Trasforma scala X e asse Y (hover): 115%
Trasforma Ruota asse Z (hover): 9deg
Trasforma l'inclinazione dell'asse X (hover): 3deg
Trasforma inclinazione asse Y (hover): 3deg

Aumentare le dimensioni del modulo utilizzando la scala al passaggio del mouse aiuterà a ridurre al minimo la possibilità che l'utente passi il mouse solo sull'elemento riga anziché sul modulo.

Risultato finale

Ecco il risultato finale dell'effetto hover astratto. Nota come sia gli effetti di hover di riga che gli effetti di hover di modulo si attivano al passaggio del mouse per inclinare gli elementi per un disegno astratto.

Ecco come apparirà l'effetto hover sui dispositivi mobili. Tuttavia, poiché la maggior parte dei browser mobili richiede un tocco per attivare l'effetto hover, potresti voler disabilitare l'effetto hover sul cellulare per evitare che l'utente debba toccare due volte se stai utilizzando il modulo come collegamento.

Effetti al passaggio del mouse astratti per un invito all'azione (esempio 2)

Per avviare il design del prossimo effetto hover astratto, duplichiamo la sezione contenente il nostro primo esempio. Ora tutto ciò che dobbiamo fare è apportare alcune piccole modifiche al design e agli effetti al passaggio del mouse per un design unico.

Aggiorna impostazioni riga

Innanzitutto, aggiorna le impostazioni della riga come segue:

Trasforma Ruota asse Z: -5 gradi
Trasforma l'inclinazione X e l'asse Y: -4deg

Aggiorna le impostazioni del modulo di invito all'azione

Ora modifichiamo le impostazioni del modulo come segue:

Per prima cosa, elimina il confine...

Larghezza bordo: 0px

Quindi aggiorna l'ombra della scatola come segue:

Box Shadow Posizione orizzontale: 0px
Posizione verticale dell'ombra del riquadro: 110 px
(assicurati e disabilita l'effetto hover ereditato dal disegno precedente che hai duplicato)
Colore ombra: #ffb238

Ora possiamo aggiornare gli effetti al passaggio del mouse della proprietà di trasformazione. Qui stiamo sostanzialmente diminuendo un po' la scala e aggiungendo valori negativi alle nostre precedenti proprietà di rotazione e inclinazione di trasformazione per spostare l'elemento nella direzione opposta al passaggio del mouse.

Aggiorna le seguenti opzioni di trasformazione:

Trasforma scala X e asse Y (hover): 110%
Trasforma Ruota asse Z (hover): -9deg
Trasforma inclinazione asse X (hover): -3deg
Trasforma inclinazione asse Y (hover): -3deg

Creare un layout a griglia per le tue righe

Poiché questo design richiede che la riga padre si avvolga attorno al modulo e abbia la stessa altezza e larghezza, non hai davvero la possibilità di creare un layout di colonna come faresti normalmente, tuttavia, puoi usare la proprietà flex per allineare le tue righe orizzontalmente in un layout a griglia.

Per fare ciò, prima duplica la riga contenente il tuo modulo un paio di volte in modo da avere tre righe in una sezione.

Quindi aggiungi un margine personalizzato a ciascuna delle righe:

Margine personalizzato: 50 px in alto, 50 px in basso

Quindi apri le impostazioni della sezione e aggiungi semplicemente il seguente CSS personalizzato all'elemento principale.

display: flex;
flex-wrap: wrap;

Ora hai tre colonne di righe che risponderanno con le dimensioni del tuo browser.

Pensieri finali

Trasformare più elementi al passaggio del mouse fornisce un altro livello di creatività che puoi esplorare. Gli esempi in questo tutorial avevano lo scopo di mostrarti cosa è possibile, ma sentiti libero di modificare i design per il tuo progetto. Come potresti aspettarti, puoi diventare piuttosto stravagante se vuoi. Ma puoi anche essere un po' più prudente per creare un sottile elemento di design dell'interazione come l'esempio del modulo immagine in questo tutorial.

Non vedo l'ora di sentirti nei commenti.

Saluti!