Come attivare gli effetti al passaggio del mouse per un modulo, una colonna e una riga contemporaneamente
Pubblicato: 2019-08-11Una delle cose migliori della creazione di un sito con Divi è che ogni elemento costitutivo è ricco di opzioni di progettazione. Ogni modulo, colonna, riga e sezione contiene impostazioni di progettazione sia per lo stato predefinito che per quello al passaggio del mouse. Questo apre la porta per l'attivazione di più effetti al passaggio del mouse quando si combinano questi elementi insieme.
In questo tutorial, ti mostrerò come attivare simultaneamente gli effetti al passaggio del mouse per un modulo, una colonna e una riga. Il trucco è assicurarsi che tutti gli elementi condividano le stesse dimensioni e lo stesso spazio di passaggio del mouse. Ma una volta che hai gli elementi a posto, puoi diventare estremamente creativo con i tuoi effetti e design al passaggio del mouse.
Iniziamo.
Sbirciata
Ecco un rapido esempio di come si attivano contemporaneamente gli effetti al passaggio del mouse di diversi elementi Divi.
Scarica l'esempio di progettazione GRATUITAMENTE
Per mettere le mani sul design 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 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.
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.
Iscriviti al nostro canale Youtube
Passiamo al tutorial, vero?
Capire come attivare gli stati di passaggio del mouse su più elementi Divi contemporaneamente.
Ogni elemento in Divi (sezione, riga o modulo) ha il proprio spazio di passaggio del mouse che è sostanzialmente la dimensione dell'elemento stesso.
Ciascuno di questi elementi ha opzioni di passaggio del mouse integrate che vengono attivate quando si passa con il mouse su quell'elemento o su uno qualsiasi degli elementi figlio in esso contenuti.
Quindi, ad esempio, se hai aggiunto opzioni al passaggio del mouse a una sezione, tali opzioni diventeranno attive ogni volta che passi con il mouse sulla sezione.
Quindi, se passi con il mouse sopra lo spazio di passaggio del mouse all'interno della sezione, attiverai le opzioni di passaggio del mouse sia della riga che della sezione. Questo perché la riga è un elemento figlio della sezione.
Ogni volta che passi con il mouse su una colonna, attivi lo stato al passaggio del mouse della colonna, della riga e della sezione.
Infine, ogni volta che passi con il mouse su un modulo, attivi gli stati al passaggio del mouse per il modulo e tutti i suoi elementi principali (colonna, riga e sezione).
Per impostazione predefinita, ciascuno di questi elementi avrà una spaziatura (imbottitura) che crea spazi vuoti nello spazio di passaggio del mouse che consente all'utente di passare il mouse su ciascun elemento in modo selettivo. Ma, se elimini la spaziatura tra ciascun elemento, sarai in grado di attivare gli stati al passaggio del mouse per tutti gli elementi contemporaneamente.
Questo apre la porta a molte combinazioni di effetti al passaggio del mouse che possono verificarsi contemporaneamente mentre combini le opzioni di passaggio del mouse per ciascun elemento e le attivi su uno spazio di passaggio del mouse condiviso.
Un esempio di combinazione di effetti al passaggio del mouse
Ecco un esempio di come funziona con Divi.
Nell'esempio seguente, abbiamo una riga con un'immagine di sfondo. Al passaggio del mouse, abbiamo un'ombra ritardata della scatola che si presenta come una sorta di elemento di design del bordo.
All'interno della riga, abbiamo una colonna che è stata riempita con un'ombra nera. Al passaggio del mouse, l'ombra del riquadro della colonna viene ridotta gradualmente per rivelare l'immagine di sfondo della riga.
All'interno della colonna, abbiamo un modulo blurb con uno sfondo blu. Al passaggio del mouse, lo sfondo blu viene modificato in un colore blu semitrasparente in modo da poter vedere l'immagine di sfondo.
Poiché c'è spazio tra ogni elemento, possiamo vedere l'effetto hover specifico di ogni elemento mentre passiamo con il mouse su ogni singolo spazio hover.
Ma, se eliminiamo la spaziatura e diamo alla riga una larghezza personalizzata, tutti gli elementi condivideranno lo stesso spazio al passaggio del mouse. O per dirla in un altro modo, il modulo occupa l'intero spazio della colonna e della riga. Quindi, quando passiamo con il mouse sul modulo, gli effetti al passaggio del mouse per il modulo, la colonna e la riga vengono attivati contemporaneamente.
I ritardi di transizione funzionano alla grande con questa configurazione
Tieni presente che, nell'esempio sopra, ci sono ritardi di transizione sugli effetti al passaggio del mouse di riga e colonna che evidenziano davvero bene la funzionalità di questo concetto. Se cercassimo di aggiungere una combinazione simile di effetti al passaggio del mouse solo al modulo, non saremmo in grado di trarre vantaggio dall'applicazione di diversi ritardi e durate di transizione a ciascun effetto di passaggio del mouse individualmente.
Ricreare l'esempio di progettazione in Divi
Per darti alcune istruzioni su come si svolge nel mondo reale di Divi, ricreiamo l'esempio descritto sopra.
Cosa ti serve per iniziare
Per iniziare, dovrai avere quanto segue:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
- Immagini da utilizzare per contenuti fittizi
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Aggiunta della sezione e della riga
La prima cosa che devi fare è creare una sezione regolare con una riga a una colonna.
Aggiorna le impostazioni di riga e colonna
Quindi, apri le impostazioni della riga e assegna alla riga un'immagine di sfondo.
Quindi dobbiamo eliminare il riempimento predefinito in modo che non vi siano spazi vuoti nello spazio di passaggio del mouse tra la riga e la colonna.
- Imbottitura: 0px in alto, 0px in basso
Quindi aggiungi la seguente ombra di casella alla riga al passaggio del mouse.
- Box Shadow: vedi screenshot
- Forza sfocatura ombra scatola: 0px
- Box shadow Spread Strength: 0px (desktop), 10px (hover)
- Colore ombra: #063c68
Quindi aggiorna le opzioni di transizione con una durata e un ritardo come segue:
- Durata della transizione: 500 ms
- Ritardo di transizione: 700 ms
Ora apri le impostazioni della colonna e aggiorna quanto segue:
- Box Shadow: vedi screenshot
- Forza sfocatura ombra scatola: 0px
- Box shadow Spread Strength: 200px (desktop), 0px (hover)
- Colore ombra: #000000
- Durata della transizione: 500 ms
- Ritardo di transizione: 200 ms
Aggiungi il modulo Blurb
Ora aggiungi un modulo blurb alla riga.
Quindi aggiorna il blurb come segue:
- Immagine: [inserisci immagine blurb]
- Colore di sfondo: #0c71c3
- Colore di sfondo (al passaggio del mouse): rgba (12,113,195,0.35)
- Allineamento del testo: centro
- Colore del testo: chiaro
- Imbottitura: 20px in alto, 20px in basso, 20px a sinistra, 20px a destra
Risultato finale
Controlla il risultato finale.
Considerazioni finali e suggerimenti
Capire come attivare gli stati al passaggio del mouse per più elementi Divi contemporaneamente apre alcune interessanti possibilità di progettazione. L'esempio in questo post evidenzia solo alcune delle molte combinazioni di effetti al passaggio del mouse che sono possibili quando si combinano gli stati al passaggio del mouse di un modulo, una colonna e una riga. Inoltre, non abbiamo nemmeno esplorato le possibilità che derivano dalla combinazione delle opzioni di passaggio del mouse della sezione che ti darebbero ancora più opzioni di passaggio del mouse. Mentre esplori questi effetti al passaggio del mouse da solo, ecco alcuni suggerimenti e idee per aiutarti lungo il percorso.
- Usa Box Shadow invece di Borders: i bordi aggiungono effettivamente spazio aggiuntivo a un elemento, quindi ciò potrebbe causare spazi vuoti al passaggio del mouse indesiderati. Box Shadows aggiunge un elemento di design che non aggiunge spazio reale.
- Esplora gli effetti al passaggio del mouse di transizione dello sfondo: ogni elemento Divi ha opzioni di passaggio del mouse sullo sfondo che possono essere combinate per livelli di effetti al passaggio del mouse creativi.
- Usa le opzioni di trasformazione al passaggio del mouse: le opzioni di trasformazione al passaggio del mouse possono aggiungere un elemento creativo come ridimensionamento e rotazione di elementi al passaggio del mouse. Tuttavia, potrebbe essere difficile ruotare più elementi al passaggio del mouse poiché causerà il salto.
- Approfitta delle opzioni di transizione: l'aggiunta di diverse durate e ritardi di transizione allo stato al passaggio del mouse di ciascun elemento può creare animazioni al passaggio del mouse uniche.
Spero che questo tutorial ti ispiri a esplorare alcune incredibili combinazioni di effetti al passaggio del mouse in Divi.
Non vedo l'ora di sentirti nei commenti.
Saluti!