3 effetti al passaggio del mouse di trasformazione senza soluzione di continuità che puoi applicare alle tue immagini con Divi
Pubblicato: 2019-06-03Cerchi un modo interessante per mostrare le immagini sul tuo prossimo sito Divi? Continua a leggere, perché in questo post tratteremo 3 effetti al passaggio del mouse di trasformazione dell'immagine che ti aiuteranno a migliorare l'aspetto generale della tua pagina. Sarai in grado di seguire il processo di ricreazione dalla A alla Z di tre diversi esempi e persino scaricarli per un uso immediato. Lo scopo principale di questo tutorial è ispirarti a combinare le nuove opzioni di trasformazione di Divi con le opzioni già esistenti per creare un bellissimo web design.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato di tutti e tre gli esempi su schermi di diverse dimensioni.
Desktop
Esempio 1
Esempio #2
Esempio #3
Mobile
Esempio 1
Esempio #2
Esempio #3
Scarica GRATUITAMENTE gli effetti al passaggio del mouse per la trasformazione dell'immagine
Iscriviti al nostro canale Youtube
Per mettere le mani sugli effetti al passaggio del mouse di trasformazione delle immagini gratuiti, devi prima scaricarli 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!
Passaggi generali
Aggiungi nuova sezione
Spaziatura
Prima di ricreare ciascuno degli esempi singolarmente, eseguiremo alcuni passaggi generali. Aggiungi una nuova sezione normale alla tua pagina utilizzando i seguenti valori di margine e riempimento:
- Margine superiore: 200 px
- Margine inferiore: 200 px
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Colore di sfondo della colonna 2
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo alla seconda colonna.
- Colore di sfondo della colonna 2: #efefef
Dimensionamento
Vai alle impostazioni di dimensionamento successivo e consenti alla riga di occupare l'intera larghezza dello schermo.
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 100%
- Larghezza massima: 100%
Spaziatura
Aggiungi successivamente i seguenti valori di riempimento personalizzato:
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
- Imbottitura superiore colonna 2: 10vw
- Imbottitura inferiore colonna 2: 10vw
- Imbottitura sinistra colonna 2: 5vw
- Imbottitura destra colonna 2: 5vw
Aggiungi il modulo di testo n. 1 alla colonna 2
Aggiungi contenuto H2
È ora di iniziare ad aggiungere i vari moduli alla colonna 2, iniziando con un modulo di testo. Inserisci alcuni contenuti H2 a tua scelta.
Impostazioni testo H2
Passa alla scheda Design e modifica le impostazioni del testo H2.
- Carattere dell'intestazione 2: Times New Roman
- Intestazione 2 Peso del carattere: grassetto
- Colore testo titolo 2: #0f47ff
- Titolo 2: Dimensione testo: 3.5vw
Aggiungi modulo divisore alla colonna 2
Visibilità
Il modulo successivo di cui abbiamo bisogno nella seconda colonna è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Colore
Quindi, vai alla scheda Design e cambia il colore del divisore.
- Colore: #ff961e
Dimensionamento
Modifica anche i valori di dimensionamento.
- Peso del divisore: 1px
- Larghezza: 20%
- Allineamento del modulo: a sinistra
- Altezza: 0px
Spaziatura
E crea un po' di spazio per il modulo utilizzando i seguenti valori di margine superiore e inferiore:
- Margine superiore: 1vw
- Margine inferiore: 1vw
Aggiungi il modulo di testo n. 2 alla colonna 2
Aggiungi contenuto
Al modulo successivo, che è un altro modulo di testo. Inserisci un contenuto del paragrafo a tua scelta.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo.
- Carattere del testo: Open Sans
- Dimensione del testo: 0.7vw (desktop), 1.7vw (tablet), 2.5vw (telefono)
- Altezza riga di testo: 1,5 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefono)
- Orientamento del testo: giustifica
Dimensionamento
Modifica anche le impostazioni di dimensionamento.
- Larghezza: 61% (desktop), 80% (tablet e telefono)
Spaziatura
E aggiungi un margine superiore e inferiore personalizzato.
- Margine superiore: 2vw
- Margine inferiore: 2vw
Aggiungi il modulo di testo n. 3 alla colonna 3
Aggiungi contenuto
Al prossimo e ultimo modulo di cui abbiamo bisogno nella seconda colonna, che è un altro modulo di testo. Useremo questo modulo come un pulsante aggiungendo del contenuto del paragrafo.
Aggiungi collegamento
Continua aggiungendo un link al CTA.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Times New Roman
- Colore del testo: #ff961e
- Dimensioni del testo: 1.5vw (desktop), 2.5vw (tablet), 3.5vw (telefono)
Dimensionamento
Modifica anche la larghezza del modulo nelle impostazioni di dimensionamento.
- Larghezza: 48%
Spaziatura
Quindi, vai alle impostazioni di spaziatura e aggiungi un'imbottitura personalizzata.
- Imbottitura superiore: 1vw
- Imbottitura inferiore: 1vw
Frontiera
Completa il modulo di testo aggiungendo un bordo inferiore con le seguenti impostazioni:
- Larghezza bordo inferiore: 1px
- Colore bordo inferiore: # 0f47ff
Clona sezione due volte
Una volta che hai finito di personalizzare la sezione e tutti gli elementi in essa contenuti, puoi andare avanti e clonarla due volte. Utilizzeremo ciascuna delle sezioni della nostra pagina per ricreare i tre esempi condivisi all'inizio di questo post.
Ricrea l'esempio n. 1
Aggiungi modulo immagine alla colonna 1
Lascia la casella immagine vuota
Partiamo dal primo esempio! Aggiungi un nuovo modulo immagine alla prima colonna e assicurati di lasciare vuota la casella dell'immagine.
Colore di sfondo predefinito
Cambia il colore di sfondo del modulo immagine:
- Colore di sfondo: #0f47ff
Colore di sfondo al passaggio del mouse
Modifica il colore di sfondo al passaggio del mouse.
- Colore di sfondo: rgba (255,150,30,0.65)
Immagine di sfondo
Invece di caricare un'immagine, ne aggiungeremo una allo sfondo, accompagnata dalle seguenti impostazioni:
- Dimensione immagine di sfondo: copertina
- Posizione immagine di sfondo: Centro
- Ripetizione immagine di sfondo: nessuna ripetizione
- Miscela immagine di sfondo: luce soffusa
Spaziatura
Passa alle impostazioni di spaziatura del modulo e aggiungi alcuni valori di riempimento personalizzati:
- Mostra spazio sotto l'immagine: No
- Imbottitura superiore: 22vw
- Imbottitura inferiore: 22vw
Traduttore predefinito Ruota
Ruoteremo anche l'immagine al passaggio del mouse. Assicurati che l'immagine appaia nel suo stato originale prima di passare con il mouse aggiungendo "0deg" all'opzione giusta.
- Destra: 0deg
Passa il mouse Traduci Ruota
Modifica questo valore al passaggio del mouse:
- A destra: 180 gradi
transizioni
Per creare un effetto immediato, rimuoveremo la durata della transizione:
- Durata della transizione: 0 ms
Ricrea l'esempio n. 2
Aggiungi modulo immagine alla colonna 1
Lascia la casella immagine vuota
Al secondo esempio! Ancora una volta, assicurati di lasciare vuota la casella dell'immagine.
Colore di sfondo predefinito
Vai alle impostazioni dello sfondo e aggiungi il seguente colore di sfondo (completamente trasparente):
- Colore di sfondo: rgba (255,255,255,0)
Colore di sfondo al passaggio del mouse
Modifica questo colore al passaggio del mouse:
- Colore di sfondo: rgba(0,0,0,0.65)
Immagine di sfondo
Stiamo, ancora una volta, utilizzando un'immagine di sfondo invece di caricarne una sul modulo stesso. Combina l'immagine di sfondo con le seguenti impostazioni:
- Dimensione immagine di sfondo: copertina
- Posizione immagine di sfondo: Centro
- Ripetizione immagine di sfondo: nessuna ripetizione
- Miscela immagine di sfondo: luce soffusa
Spaziatura
Quindi, vai alle impostazioni di spaziatura e modifica il padding superiore e inferiore:
- Mostra spazio sotto l'immagine: No
- Imbottitura superiore: 22vw
- Imbottitura inferiore: 22vw
Scala di trasformazione predefinita
Assicurati che i valori di scala di trasformazione predefiniti rimangano '100%'.
- Destra: 100%
- Fondo: 100%
Scala di trasformazione al passaggio del mouse
E cambia questi valori al passaggio del mouse per creare un effetto di ridimensionamento.
- Destra: 120%
- Fondo: 120%
Trasformazione predefinita Traduci
Per impostazione predefinita, manteniamo "0px" per l'opzione in basso nelle impostazioni di conversione della trasformazione.
- In basso: 0px
Passa al passaggio del mouse Trasforma Traduci
Modifica questo valore al passaggio del mouse per riposizionare l'elemento.
- In basso: 9vw
transizioni
Stiamo anche creando una transizione leggermente più veloce modificando la durata della transizione nella scheda Avanzate:
- Durata della transizione: 200 ms
Ricrea l'esempio n. 3
Cambia la struttura della colonna
Al prossimo e ultimo esempio! Inizia modificando la struttura della colonna della riga.
Aggiungi modulo immagine alla colonna 1
Carica immagine 1:1
Quindi, aggiungi un modulo immagine alla prima colonna. A differenza dei primi due esempi, caricheremo un'immagine con un rapporto 1:1 (stessa larghezza e altezza).
Dimensionamento
Passa alla scheda Design e forza l'immagine a tutta larghezza nelle impostazioni di dimensionamento.
- Forza intera larghezza: Sì
Spaziatura
Rimuovi lo spazio sotto l'immagine nelle impostazioni di spaziatura successiva.
- Mostra spazio sotto l'immagine: No
Bordo predefinito
Quindi, vai alle impostazioni del bordo e aggiungi '500vw' a ciascuno degli angoli. Ci stiamo assicurando che questo valore sia sufficientemente alto da coprire tutte le dimensioni dello schermo.
Confine al passaggio del mouse
Rimuovi gli angoli arrotondati che hai aggiunto al passaggio del mouse.
Filtri predefiniti
Quindi, vai alle impostazioni dei filtri e assicurati che vengano aggiunti questi valori predefiniti:
- Saturazione: 100%
- Luminosità: 46%
- Opacità: 3%
Filtri al passaggio del mouse
Abilita l'opzione al passaggio del mouse su ciascuna delle impostazioni modificate e utilizza i seguenti valori:
- Saturazione: 300%
- Luminosità: 46%
- Opacità: 100%
Scala di trasformazione predefinita
Quindi, vai alle opzioni di trasformazione e modifica le opzioni di scala di trasformazione predefinite:
- Destra: 68%
- Fondo: 68%
Scala di trasformazione al passaggio del mouse
Modifica questi valori al passaggio del mouse.
- Destra: 130%
- Fondo: 130%
Trasformazione predefinita Traduci
Passa ai valori di traduzione di trasformazione e assicurati che i valori di traduzione di trasformazione predefiniti rimangano gli stessi:
- Destra: 0px
- In basso: 0px
Passa al passaggio del mouse Trasforma Traduci
Modificare i valori al passaggio del mouse.
- Destra: 1vw
- In basso: 8vw
transizioni
Ultimo ma non meno importante, aumenta la durata della transizione nella scheda Avanzate per creare una transizione graduale e il gioco è fatto!
- Durata della transizione: 600 ms
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Esempio 1
Esempio #2
Esempio #3
Mobile
Esempio 1
Esempio #2
Esempio #3
Pensieri finali
In questo post, ti abbiamo mostrato come essere creativo con il modulo immagine e le opzioni di passaggio del mouse e trasformazione di Divi. Gli effetti che abbiamo ricreato sono solo alcune delle tante belle possibilità là fuori. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.