Decorare la tua pagina trasformando le forme al passaggio del mouse con Divi
Pubblicato: 2019-04-18La creazione di un design interattivo è qualcosa che aiuta immediatamente a migliorare l'aspetto di qualsiasi sito web. Con le opzioni integrate di Divi, puoi fare molti turni e creare effetti davvero unici per il tuo sito web.
In questo post, ti mostreremo come decorare la tua pagina con forme trasformanti al passaggio del mouse. Il risultato che otterremo si concentra sull'esperienza desktop ma mantiene un design pulito e intuitivo anche su schermi di dimensioni più piccole.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata ai due esempi che ricreeremo da zero.
Esempio 1
Esempio #2
Scarica le sovrapposizioni di immagini sagomate
Per mettere le mani sulle sovrapposizioni di immagini sagomate utilizzate in questo tutorial, dovrai scaricarle 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!
Iniziamo a creare!
Aggiungi nuova sezione
Colore di sfondo
Stary creando una nuova pagina o aprendone una esistente. Aggiungi una sezione normale, apri le impostazioni della sezione e aggiungi un colore di sfondo completamente nero.
- Colore di sfondo: #000000
traboccamento
Per tagliare la sovrapposizione dell'immagine sagomata più avanti in questo tutorial, ci assicureremo che nulla superi il contenitore della sezione aggiungendo una singola riga di codice CSS all'elemento principale della sezione.
overflow: hidden;
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.
- Rendi questa riga a larghezza intera: Sì
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Aggiungi modulo immagine alla riga
Carica sovrapposizione immagine sagomata
È ora di iniziare ad aggiungere moduli! Il primo modulo di cui abbiamo bisogno è un modulo immagine. Carica la prima sovrapposizione di immagini sagomate che trovi nella cartella che hai scaricato. Puoi trovare sovrapposizioni di immagini più sagomate andando a questo post, scaricando i file, aprendo il file Illustrator e personalizzandoli in base alle tue esigenze. Se, tuttavia, vuoi solo ricreare gli esempi che sono stati condivisi nell'anteprima di questo post, la cartella che hai scaricato all'inizio di questo post andrà bene.
Colore di sfondo predefinito
Vai alle impostazioni di sfondo del modulo immagine e aggiungi il seguente colore di sfondo predefinito:
- Colore di sfondo: #6a00ff
Colore di sfondo al passaggio del mouse
Cambia il colore di sfondo al passaggio del mouse utilizzando il seguente codice colore:
- Colore di sfondo: #ffa216
Sfondo sfumato
Continua aggiungendo anche uno sfondo sfumato al modulo immagine.
- Colore 1: #ff2841
- Colore 2: RGB (255,255,255,0)
- Direzione del gradiente: 168deg
- Posizione finale: 68%
Dimensionamento
Passa alla scheda di progettazione e abilita l'opzione "Forza larghezza intera".
- Forza intera larghezza: Sì
Spaziatura
Nascondiamo anche una parte della sovrapposizione dell'immagine sagomata aggiungendo un margine superiore negativo alle impostazioni di spaziatura. Noterai che il modulo non supererà il contenitore della sezione grazie a quella riga di codice CSS che abbiamo aggiunto alla sezione all'inizio del tutorial.
- Margine superiore: -22vw (desktop e tablet), 0vw (telefono)
Trasformazione predefinita Ruota
Ora possiamo iniziare a trasformare il modulo! Aggiungi le seguenti impostazioni di rotazione della trasformazione predefinite al modulo immagine:
- Centro: 359 gradi
Al passaggio del mouse Trasforma Ruota
E cambia questi valori al passaggio del mouse per creare una forma trasformante.
- Sinistra: 250 gradi
- Centro: 320deg
ID CSS
Quando passi il mouse sul modulo immagine, la sovrapposizione dell'immagine sagomata si sovrapporrà a tutti gli altri moduli che si trovano sopra di essa. Per evitare ciò, dovremo modificare lo z-index del modulo al passaggio del mouse più avanti nel post. Per fare ciò, dovrai aggiungere una classe CSS personalizzata al modulo immagine.
transizioni
Ultimo ma non meno importante, stiamo creando una transizione graduale aumentando la durata della transizione nella scheda Avanzate.
- Durata della transizione: 950 ms
Aggiungi il modulo di testo n. 1 alla riga
Aggiungi contenuto H2
Il prossimo modulo di cui abbiamo bisogno è un modulo di testo. Aggiungi del contenuto H2 a tua scelta.
Impostazioni testo H2
Quindi, vai alla scheda Design e modifica le impostazioni del testo H2.
- Intestazione 2 Font: Didact Gothic
- Intestazione 2 Peso del carattere: grassetto
- Intestazione 2 Allineamento del testo: Centro
- Colore testo titolo 2: #ffffff
- Intestazione 2 Dimensione del testo: 7vw
- Altezza riga intestazione 2: 0,9 em
Spaziatura
Crea una sovrapposizione tra questo modulo e il Modulo immagine utilizzando alcuni valori di margine personalizzati.
- Margine superiore: -68 vw
- Margine inferiore: 8vw
- Margine sinistro: 29vw
- Margine destro: 29vw
Aggiungi il modulo di testo n. 2 alla riga
Aggiungi contenuto
Aggiungi un altro modulo di testo proprio sotto il precedente e inserisci il contenuto del paragrafo di tua scelta.
Impostazioni testo
Quindi, vai alla scheda Design e modifica le impostazioni del testo.
- Carattere del testo: Open Sans
- Colore del testo: #ffffff
- Dimensione del testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Altezza riga di testo: 1,8 em
- Orientamento del testo: al centro
Spaziatura
Aggiungi anche alcuni valori di margine personalizzati.
- Margine inferiore: 2vw (desktop), 4vw (tablet), 6vw (telefono)
- Margine sinistro: 30vw (desktop), 10vw (tablet e telefono)
- Margine destro: 30vw (desktop), 10vw (tablet e telefono)
Aggiungi modulo divisore alla riga
Visibilità
Il prossimo e ultimo modulo di cui abbiamo bisogno è 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: #ffffff
Dimensionamento
Modifica anche i valori di dimensionamento.
- Peso del divisore: 7px
- Larghezza: 15%
- Allineamento del modulo: Centro
Spaziatura
E aggiungi un'imbottitura inferiore personalizzata.
- Margine inferiore: 5vw
Clona l'intera sezione
Al secondo esempio! Clona la sezione che hai appena completato.
Modifica modulo immagine
Carica una nuova sovrapposizione di immagini sagomate
Ci sono alcune modifiche che dobbiamo apportare, a partire dalla sovrapposizione dell'immagine sagomata. Vai avanti e carica la seconda sovrapposizione di immagini sagomate che puoi trovare nella cartella che hai scaricato all'inizio di questo post.
Cambia colore di sfondo predefinito
Quindi, vai alle impostazioni dello sfondo del modulo immagine e cambia il colore di sfondo predefinito.
- Colore di sfondo: #2d007c
Cambia colore di sfondo al passaggio del mouse
Cambia anche il colore di sfondo al passaggio del mouse.
- Colore di sfondo: #008089
Cambia sfumatura di sfondo
Insieme allo sfondo sfumato.
- Colore 1: #0c0c0c
- Colore 2: RGB (255,255,255,0)
- Direzione del gradiente: 168deg
- Posizione finale: 68%
Modifica le impostazioni di rotazione della trasformazione predefinite
Stiamo anche cambiando l'effetto di trasformazione. Vai alle impostazioni di trasformazione e modifica i valori di rotazione della trasformazione predefiniti.
- Sinistra: 270°
- Centro: 359 gradi
Modifica le impostazioni di rotazione della trasformazione al passaggio del mouse
Modifica gli stessi valori al passaggio del mouse.
- Sinistra: 192 gradi
- Centro: 280 gradi
- Destra: 15°
Aggiungi codice personalizzato alla pagina
Apri le impostazioni della pagina
Ora, l'ultima parte di questo post si assicura che la forma trasformante rimanga al di sotto di tutti gli altri moduli quando viene spostata. Apri le impostazioni della pagina.
Aggiungi codice CSS
Quindi vai alla scheda Avanzate e aggiungi il seguente codice CSS.
.hover-state:hover {
z-index: -99; }Stiamo usando la classe CSS che abbiamo assegnato alle sezioni del tutorial.
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato.
Esempio 1
Esempio #2
Pensieri finali
In questo post, ti abbiamo mostrato come essere creativo con le opzioni di trasformazione di Divi. Più specificamente, abbiamo utilizzato i moduli immagine con sovrapposizioni di immagini sagomate per creare una forma di sfondo trasformabile. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!