Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

Ti piacerebbe creare una griglia con Divi che sia fluida al passaggio del mouse?

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.

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62.

  • 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 Avanzate :

  • 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 della descrizione di 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

Vuoi vendere i tuoi prodotti su Internet?

Scarica WooCommerce gratis, i migliori plugin di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress e creare facilmente il tuo negozio online. Perfetto per i principianti.

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

Modificare 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

Griglia con Divi fluido al passaggio del mouse

Mobile

Griglia con Divi fluido al passaggio del mouse

Scarica DIVI ora!!!

Conclusione

In questo articolo, ti abbiamo mostrato come creare un bellissimo design al passaggio del mouse. 

In particolare, abbiamo creato una griglia di colonne che inizia in modo semplice e pulito. Non appena i visitatori passano il mouse su un particolare elemento della griglia, l'immagine di sfondo viene rivelata e gli stili del modulo 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.

...

0 azioni
quota
Tweet
Enregistrer