Vuoi creare una griglia con Divi essere fluido in hover?
Se ami creare siti Web pensando all'interazione dell'utente, adorerai questo tutorial.
Oggi ti mostreremo come creare una griglia trasparente la cui immagine di sfondo viene rivelata non appena qualcuno passa sopra uno degli elementi. Il design è inizialmente semplice e pulito. Ciò si traduce in una bella esperienza in bilico.
In questo tutorial, ti guideremo attraverso il processo di creazione passo dopo passo.
Andiamo.
Panoramica
Prima di immergerti nel tutorial, diamo una rapida occhiata al risultato su diverse dimensioni dello schermo.
ufficio
Mobile
Iniziamo il processo di creazione in Divi
Aggiungi una nuova sezione
Colore di sfondo
Aggiungi una nuova sezione alla pagina su cui stai lavorando.
Vedi anche: Divi: come creare un piè di pagina personalizzato
Per prima cosa apri le impostazioni della sezione e applica un colore di sfondo bianco.
- Sfondo: #ffffff
Aggiungi la riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
dimensionamento
Senza ancora aggiungere moduli, apri le impostazioni della linea, vai alla scheda Design, tirare verso il basso l'opzione dimensionamento e modificare i parametri di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: SÌ
- Grondaia con: 1
- Larghezza: 100%
- Larghezza massima: 100%
spaziatura
Quindi abbassa l'opzione Spaziatura e modificare le seguenti impostazioni:
- Imbottitura (superiore e inferiore): 0px
confine
Nell'opzione Bordo, apporta anche le seguenti modifiche:
- Stili bordo (in alto e in basso): 1px
- Colore bordo (in alto e in basso): #d3d3d3
Impostazioni della colonna 1
Passa il mouse sullo sfondo
Quindi, personalizziamo le impostazioni per la colonna 1. Applica un riempimento sfumato al passaggio del mouse.
- Colore 1: RGB(255,255,255,0)
- Colore 2: #000000
- Tipo di gradiente: lineare
- Posizione Colore 1: 30%
- Posiziona il gradiente sopra l'immagine del gradiente: SÌ
Immagine di sfondo al passaggio del mouse
Carica anche un'immagine di sfondo che apparirà al passaggio del mouse.
- Dimensione immagine di sfondo: copertina
- Posizione immagine di sfondo: centro
Classe CSS
E completa l'impostazione della colonna assegnando la seguente classe CSS nella scheda Tecnologia :
- Classe CSS: colonna al passaggio del mouse
Aggiungi il modulo Testo n. 1 alla colonna 1
Aggiungi testo in formato H3 (Titolo 3)
È ora di aggiungere moduli, iniziando con un primo Modulo di testo nella colonna 1. Inserisci un testo a tua scelta.
Impostazioni del testo H3
Quindi passa alla scheda Design del modulo e modificare i parametri di testo H3 come segue:
- Carattere: Osvaldo
- Peso del carattere Peso del carattere: ultra leggero
- Titolo 3 Stile carattere: TT
- Colore del testo: #0a0a0a
- Dimensione del testo del titolo 3:
- Desktop: 3vw
- Tablet: 7vw
- Telefono: 14vw
- Intestazione 3 Spaziatura lettere: -2px
dimensionamento
Modifica la larghezza su diverse dimensioni dello schermo nelle impostazioni di ridimensionamento.
- Larghezza :
- Desktop: 44%
- Compresse: 48%
- Telefono: 50%
spaziatura
Cambiamo anche i seguenti parametri nell'opzione Spaziatura.
- Margine (inferiore): 25vh
- Imbottitura (superiore e inferiore): 5%
- Imbottitura (sinistra e destra): 4%
confine
Successivamente, aggiungeremo i bordi a destra e in basso.
- Larghezza bordo (destra e inferiore): 1px
- Colore bordo (destra e inferiore): #d3d3d3
Classe CSS
E completeremo anche le impostazioni del modulo assegnando la seguente classe CSS al modulo Testo:
- Classe CSS: titolo al passaggio del mouse
Aggiungi il modulo Testo n. 2 alla colonna 1
Aggiungi contenuto
Aggiungi un altro modulo di testo appena sotto il precedente con il contenuto descrizione a tua scelta.
Impostazioni del testo
Passa alla scheda Design del modulo e modificare di conseguenza i parametri di testo:
- Carattere del testo: Karla
- Colore del testo: #ffffff
- Dimensione :
- Desktop: 0,8 vw
- Tablet: 2vw
- Telefono: 3.6vw
- Altezza della linea: 2,2 em
spaziatura
Applica anche valori di margine personalizzati.
- Imbottitura (inferiore): 10%
- Imbottitura (sinistra e destra): 9%
Classe CSS
E completa i parametri del modulo usando la seguente classe CSS per il modulo:
- Classe CSS: hover-text
Aggiungi un modulo "Pulsante" alla colonna 1
Aggiungere una descrizione
Il prossimo e ultimo modulo di cui abbiamo bisogno è un modulo Pulsante. Inserisci una descrizione a tua scelta.
Impostazioni dei pulsanti
Modificare i parametri del modulo come segue:
- Usa stili personalizzati per pulsante: SÌ
- Dimensione testo pulsante:
- Desktop: 1vw
- Compressa: 2,5 vw
- Telefono: 4vw
- Larghezza bordo pulsante: 0px
- Raggio di confine: 0px
- Carattere pulsante: Karla
- Mostra icona pulsante: SÌ
- Posizionamento dell'icona del pulsante: a destra
- Mostra solo l'icona sopra per il pulsante: NO
spaziatura
Aggiungi anche valori di spaziatura personalizzati.
- Margine (inferiore): 8%
- Margine (sinistra e destra): 9%
- Imbottitura (inferiore): 5%
- Imbottitura (destra): 20%
ombra della scatola
Quindi, applica un'ombra a scatola.
- Posizione orizzontale dell'ombra del riquadro: 0px
- Posizione verticale dell'ombra del riquadro: 2px
- Colore ombra: #000000
Classe CSS
E completa le impostazioni del modulo assegnando la seguente classe CSS al pulsante:
- Classe CSS: pulsante al passaggio del mouse
Riutilizza colonna 1
Elimina le colonne 2, 3 e 4
Ora che abbiamo costruito la prima colonna, possiamo riutilizzarla. La prima cosa che faremo è rimuovere le colonne vuote dalla nostra riga.
Clona la colonna 1 tre volte
Riutilizzeremo la colonna 1 clonandola tre volte.
Cambia le immagini di sfondo al passaggio di colonne duplicate
Quindi modifica le immagini di sfondo della colonna duplicata in ciascuna colonna duplicata.
Modifica contenuto duplicato
Cambia anche il contenuto del modulo in ogni colonna duplicata.
Bordi delle colonne univoci
Colonna 1
Dovremo applicare impostazioni di bordo univoche a ciascuna colonna, a partire dalla colonna 1.
- Larghezza bordo (destra):
- Desktop: 1px
- Tablet: 1px
- Telefono: 0px
- Colore (a destra): #d3d3d3
- Larghezza bordo (inferiore):
- Desktop: 0px
- Tablet: 1px
- Telefono: 1px
- Colore bordo (in basso): #d3d3d3
Colonna 2
Poi abbiamo la colonna 2.
Larghezza bordo (destra):
- Desktop: 1px
- Tablet: 1px
- Telefono: 0px
Colore (a destra): #d3d3d3Larghezza bordo (in basso):
- Desktop: 0px
- Tablet: 1px
- Telefono: 1px
Colore bordo (in basso): #d3d3d3
Colonna 3
E useremo le seguenti impostazioni del bordo per la colonna 3:
- Larghezza bordo (destra):
- Desktop: 1px
- Tablet: 1px
- Telefono: 0px
- Colore (a destra): #d3d3d3
- Larghezza bordo (inferiore):
- Desktop: 0px
- Tablet: 1px
- Telefono: 1px
- Colore bordo (in basso): #d3d3d3
Aggiungi CSS personalizzato alle impostazioni della pagina
Apri le impostazioni della pagina
Ora che l'intero progetto è a posto, non resta che aggiungere del codice CSS personalizzato per attivare gli effetti al passaggio del mouse sui moduli. Per fare ciò, apri le impostazioni della pagina.
Leggi anche la nostra guida su: Divi: come creare un footer appiccicoso con effetto "Reveal".
Aggiungi codice CSS
E copia e incolla le seguenti righe di codice CSS:
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
ufficio
Mobile
Scarica DIVI ora!!!
Conclusione
In questo articolo, ti abbiamo mostrato come creare un bellissimo design al passaggio del mouse.
Nello specifico, abbiamo creato una griglia di colonne che inizia in modo semplice e pulito. Appena il Visitatori passa il mouse su un particolare elemento della griglia, l'immagine di sfondo viene rivelata e gli stili dei moduli cambiano.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
